Tutorial: filtrar produtos

Por: Dannie Karam
Tutorial: filtrar produtos

Neste tutorial será possível organizar a forma de ordenamento das páginas. Com a nova funcionalidade, vai ficar muito mais fácil filtrar os produtos e facilitar a navegação dos usuários. Siga os passos abaixo:

1. Vá para layout.tpl e adicione o seguinte código Java Script:

$('.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;

       });

 

2. Vá para template/category.tpl  e adicione uma referência no Sort By snipplet dessa forma:

{% snipplet 'sort_by.tpl' %}

 

3. Adicione o Sort By snipplet na pasta /snipplets. Abaixo está o código 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 }}</span>

<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 value="{{ sort_method }}" {% if sort_by == sort_method %}selected{% endif %}>{{ sort_text[sort_method] | t }}</option>

       {% endif %}

   {% endfor %}

</select>

</div>

 

4. Adicione as traduções:

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"

Prontinho! E se você ainda não é parceiro Nuvem, mas gostaria de atender seus (E NOSSOS) clientes com uma solução de e-commercecadastre-se agora e conheça todos os benefícios.

Faça como +60mil lojas e
crie a sua Nuvemshop

Testar 30 dias grátis
Crie a sua loja na Nuvemshop

Sabemos que migrar sua loja não é uma decisão simples.

Descubra os benefícios e facilidades que a Nuvemshop oferece exclusivamente para migrações.

Saiba mais sobre a migração