09/06/2015

Tutorial: filtrar produtos

Filtro dos sonhos

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.

Data da última atualização: 16/02/2018


O que você achou desse conteúdo?


Dannie Karam

Com mais de 10 anos de experiência em gerenciamento de projetos digitais, Danniela é comunicadora, escritora e líder do time de Branding da Nuvem Shop. Gosta de música, viagem, pessoas e culturas. E sempre fala demais, especialmente quando escreve de si em terceira pessoa.


    • Saulo Padilha

      Isso não é “Filtrar”, isso é “Ordenar”.

    tutorial-filtrar-produtos