Como adicionar opção de 'Ler mais' em descrições de produtos no Shopify

Naturalista · 21/01/2022

Buenas!

Tengo una tienda en Shopify, y me gustaria agregar la opción de “Leer más”/“Read more” luego de las 100 palabras en las descripciones de mis productos.

Algo así como esto:

Que código deberia agregar (y donde)?

Muchas gracias

Jhertz · 21/01/2022

Deberías utilizar Javascript, puedes agregar este fragmento al final de tu product-template.liquid:

HTML:

<script type="text/javascript">
(function() {
    function truncarDescripcion(num_words = 100) {
        let selector = document.querySelectorAll('.product-single__description')[0];
        let description = selector.innerText;
        if (description.split(" ").length > num_words) {
            selector.innerText = description.split(" ").splice(0, num_words).join(" ") + '...';
            selector.insertAdjacentHTML('afterend', `<div class="text-center">
                <a href="#" class="btn">Leer más</a>
            </div>`);
        }
    }
    truncarDescripcion(100);
})();
</script>

Naturalista · 24/01/2022

Jhertz disse:

Deberías utilizar Javascript, puedes agregar este fragmento al final de tu product-template.liquid:

HTML:

<script type="text/javascript">
(function() {
    function truncarDescripcion(num_words = 100) {
        let selector = document.querySelectorAll('.product-single__description')[0];
        let description = selector.innerText;
        if (description.split(" ").length > num_words) {
            selector.innerText = description.split(" ").splice(0, num_words).join(" ") + '...';
            selector.insertAdjacentHTML('afterend', `<div class="text-center">
                <a href="#" class="btn">Leer más</a>
            </div>`);
        }
    }
    truncarDescripcion(100);
})();
</script>

Gracias compañero! Pero lo probé y no funcionó. Alguna otra sugerencia?

Como adicionar opção de 'Ler mais' em descrições de produtos no Shopify

Naturalista

Jhertz

Naturalista

Tópicos similares