Cambiá el scroll infinito por una opción con diseño a medida

Por: Laura Esper
Cambiá el scroll infinito por una opción con diseño a medida

Acá vas a encontrar:

El comportamiento de “scroll infinito” que se encuentra disponible en los listados de productos, puede ser reemplazado con un botón con el texto “Mostrar más productos”.

La diferencia entre ambas opciones es que con la opción de “Mostrar más productos”, el usuario tiene la posibilidad de elegir entre ver más productos o interactuar con el footer de las tiendas, mientras que con el scroll infinito, los productos se cargan automáticamente sin darle esta posibilidad al usuario.

Podemos ver cómo se comporta la opción de “Mostrar más productos” en la siguiente imagen:

Scroll infinito

En este post, te explicamos cómo implementar esta funcionalidad en el diseño de las tiendas utilizando diseño a medida.

Paso 1

Agregar el siguiente Javascript en layout.tpl:

{% if settings.infinite_scrolling and (template == 'category' or template == 'search') %}
<script type="text/javascript">// ![CDATA[
$(function() {
            new LS.infiniteScroll({
                afterSetup: function() {
                    $('.crumbPaginationContainer').hide();
                },
                afterLoaded: function() {
                    $('.fancybox').fancybox(fancybox_options);
                },
                finishData: function() {
                    $('#loadMoreBtn').remove();
                },
                productGridClass: 'product-table',
                productsPerPage: 16
            });
        });
// ]]>
{% endif %}

Paso 2

En category.tpl y en search.tpl pegar el siguiente código para mostrar la opción de “Mostrar más productos” o la paginación estándar.

{% if settings.infinite_scrolling and not pages.is_last %}
    <a id="loadMoreBtn" class="button secondary"><i class="fa fa-circle-o-notch fa-spin loadingSpin"></i>{{ 'Mostrar más productos' | t }}</a>
{% endif %}
<div class="crumbPaginationContainer bottom">
    <div class='pagination'>
        {% snipplet "pagination.tpl" %}
    </div>
</div>

Paso 3

Agregar las opciones de configuración en settings.txt para que pueda ser configurado desde el administrador.

checkbox
      name = infinite_scrolling
      description = ¿Permitir que en el listado de productos tus clientes carguen nuevos productos cuando llegan al final de la página?

Paso 4

Agregar las traducciones al archivo translations.txt.

es "Mostrar más productos"
pt "Mostrar mais produtos"
en "Show more products"

Paso 5

Agregar estilos al botón (dependiendo de la plantilla o diseño personalizado que se esté utilizando). Para el caso de la plantilla Luxury, se debe agregar lo siguiente:

#loadMoreBtn {
    line-height: 50px;
    width:45%;
    margin: 40px auto;
}
.loadingSpin { display: none;
    float: left;
    font-size: 1.1em;
    transform-origin: 42% 47% 0;
    -webkit-transform-origin: 42% 47% 0;
    -ms-transform-origin: 42% 47% 0;
    position: relative;
    left: 43%;
    top: 31%;
    }

Recuerda que si eres diseñador, puedes registrarte como Socio comercial de Tiendanube y acceder así a una tienda demo para probar cómo realizar estos cambios y muchos otros. Si aún no lo has hecho, regístrate ahora.

Recibí nuevos contenidos de Tiendanube directamente en tu email sobre Marketing, Ventas, Gestión y Ecommerce. No pierdas tiempo

Recibí nuevos contenidos sobre marketing, ventas, gestión y ecommerce, directamente en tu email.

Hacé como +50mil marcas y creá tu Tiendanube

Probar 30 días gratis
Creá tu tienda online en Tiendanube

Nuestra respuesta al Coronavirus

Conocé la iniciativa #EstamosJuntos. Todas las acciones que estamos tomando desde Tiendanube para ayudarte a enfrentar esta situación.

Conocer #EstamosJuntos
cambi-el-scroll-infinito-por-una-opcin-con-diseo-a-medida