Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Ordenação de produtos (Filtrar Por)

A funcionalidade de Ordenação de produtos permite que o cliente filtre, através de critérios pré-estabelecidos, a forma mais conveniente de visualização dos mesmos.

Exemplo: Se um cliente quer ver os produtos mais baratos antes dos mais caros, ele pode escolher o filtro  Preço - Menor para o Maior

Essa funcionalidade funciona para a páginas de categorias

1. Adicione o seguinte código Javascript no arquivo layouts/layout.tpl:

Assegure-se de que está inserindo o código dentro de uma tag <script> e também dentro do escopo dessa função $(document).ready(function(){

$('.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. Em template/category.tpl inclua uma referência do snipplet “sort_by” da seguinte maneira:

 {% snipplet 'sort_by.tpl' %}

Atenção, o local onde você adiciona esse snipplet é muito importante. Caso fique com dúvidas, veja o exemplo de alguns de nossos temas fazendo o download

3. Caso não exista, crie um snipplet chamado sort_by.tpl dentro da pasta snipplets. Abaixo você encontra o código do snipplet 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>

4. Adicione as traduções no arquivo config/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"