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

Por: Laura Esper
Cómo incluir el ordenamiento de productos utilizando diseño a medida

Acá vas a encontrar:

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 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 +30mil 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
cmo-incluir-el-ordenamiento-de-productos-utilizando-diseo-a-medida