Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Botón "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.

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 %}

2. En category.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>

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?

4. Agregar las traducciones al archivo translations.txt.

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

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%;
    }

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.