Cómo agregar opción de 'Leer más' en descripciones de productos en Shopify

Naturalista · 21 Ene 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 Ene 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 Ene 2022

Jhertz dijo:

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?

Cómo agregar opción de 'Leer más' en descripciones de productos en Shopify

Naturalista

Jhertz

Naturalista

Temas similares