02/07/2015

Cómo reemplazar el scroll infinito por la opción de “Mostrar más productos” con diseño a medida

Cómo implementar la opción de Mostrar más productos con diseño a medida

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 product.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 Tienda Nube 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.

Fecha de la última actualización: 10/07/2015


¿Te gustó el contenido?


Laura Esper

Laura es Licenciada en Economía de la Universidad de Buenos Aires. Disfruta mucho de viajar, conocer gente nueva y comer cosas ricas. Es muy feliz trabajando como Partners Developer en Tienda Nube.


    Ecommerce por Expertos

    Conversaciones exclusivas con especialistas en comercio electrónico. ¡Llevá tu negocio a otro nivel!

    cmo-reemplazar-el-scroll-infinito-por-la-opcin-de-mostrar-ms-productos-con-diseo-a-medida