Cómo incluir el ordenamiento de productos utilizando diseño a medida

Ordenamiento de productos

Dentro de las tiendas es posible contar con un selector que permite ordenar los productos siguiendo determinados criterios:

  • De la A a la Z
  • De la Z a la A
  • Por precio: de mayor a menor.
  • Por precio: de menor a mayor.
  • Del más nuevo al más viejo.
  • Del más viejo al más nuevo.
  • Más vendidos.
  • Productos destacados.

En la siguiente imagen se puede ver el ordenamiento de productos en acción:

Ordenamiento de productos

Esto provee una nueva opción para que los clientes que buscan productos dentro de una tienda, encuentren más fácilmente lo que necesitan.

Naturalmente, esta funcionalidad implica un nuevo elemento dentro del diseño de la tienda, y en caso de que no esté dentro de la tienda que estamos utilizando, es posible agregarlo utilizando diseño a medida.

A continuación, te ofrecemos un paso a paso que explica cómo incorporar esta funcionalidad.

Paso 1

Agregar el siguiente código Javascript en layout.tpl:

$('.sort-by').change(function(){
            var params = LS.urlParams;
            params['sort_by'] = $(this).val();
            var sort_params_array = [];
            for (var key in params) {
                if ($.inArray(key, ['results_only', 'page']) == -1) {
                    sort_params_array.push(key + '=' + params[key]);
                }
            }
            var sort_params = sort_params_array.join('&');
            window.location = window.location.pathname + '?' + sort_params;

Paso 2

En template/category.tpl agregar una referencia al snipplet “Sort By” de la siguiente manera:

 {% snipplet 'sort_by.tpl' %}

Paso 3

Agregar el snipplet del “Sorty by” a la carpeta /snipplets. Debajo encontrarás el código dentro de sort_by.tpl:

 
{% set sort_text = {
'user': 'Destacado',
'price-ascending': 'Precio: Menor a Mayor',
'price-descending': 'Precio: Mayor a Menor',
'alpha-ascending': 'A - Z',
'alpha-descending': 'Z - A',
'created-ascending': 'Más Viejo al más Nuevo',
'created-descending': 'Más Nuevo al más Viejo',
'best-selling': 'Más Vendidos',
} %}
<span class="filter-by-sort">{{ 'Filtrar por:' | t }}
<div class="span6">
   <select class="sort-by">
         {% for sort_method in sort_methods %} 
             {# This is done so we only show the user sorting method when the user chooses it #} 
             {% if sort_method != 'user' or category.sort_method == 'user' %}
                   <option selected="selected" value="{{ sort_method }}">{{ sort_text[sort_method] | t }}</option>
                {% endif %} 
             {% endfor %}
       </select>
  </div>

Paso 4

Agregar las traducciones a translations.txt:

es "Filtrar por:"
pt "Filtrar por"
en "Sort by:"

es "Precio: Menor a Mayor"
pt "Preço: Menor ao Maior"
en "Price: Low to High"

es "Precio: Mayor a Menor"
pt "Preço: Maior ao Menor"
en "Price: High to Low"

es "A - Z"
pt "A - Z"
en "A - Z"

es "Z - A"
pt "Z - A"
en "Z - A"

es "Más Viejo al más Nuevo"
pt "Mais Antigo ao mais Novo"
en "Oldest to Newest"

es "Más Nuevo al más Viejo"
pt "Mais Novo ao mais Antigo"
en "Newest to Oldest"

es "Más Vendidos"
pt "Mais Vendidos"
en "Best Selling"

¡Eso es todo! 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.


¿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!