Filtro de preço

Neste tutorial, veremos como adicionar o filtro de preço. Recomendamos que você tenha o restante dos filtros implementados como base (variantes e marca), neste artigo pode visualizar os passos para obtê-los (também inclui o filtro de preços)

HTML

1. A primeira coisa que faremos é atualizar o código snipplet filters.tpl dentro da pasta snipplets/grid com o seguinte código:

{% if applied_filters %}
 
   {# Applied filters chips #}

   {% if has_applied_filters %}
       <div class="col-12 mb-3">
           <div class="d-md-inline-block mr-md-2 mb-3">{{ 'Filtrado por:' | translate }}</div>
           {% for product_filter in product_filters %}
               {% for value in product_filter.values %}

                   {# List applied filters as tags #}
                  
                   {% if value.selected %}
                       <button class="js-remove-filter chip" data-filter-name="{{ product_filter.key }}" data-filter-value="{{ value.name }}">
                           {{ value.pill_label }}
                       </button>
                   {% endif %}
               {% endfor %}
           {% endfor %}
           <a href="#" class="js-remove-all-filters d-inline-block px-0">{{ 'Borrar filtros' | translate }}</a>
       </div>
   {% endif %}
{% else %}
   {% if product_filters is not empty %}
       <div id="filters" data-store="filters-nav">
           {% for product_filter in product_filters %}
               {% if product_filter.type == 'price' %}

                   {{ component(
                       'price-filter',
                       {'group_class': 'filters-container mb-5', 'title_class': 'h6 mb-3', 'button_class': 'btn btn-default px-2 px-md-3 align-bottom' }
                   ) }}

               {% endif %}
           {% endfor %}
       </div>
   {% endif %}
{% endif %}

2. No template category.tpl adicione a variável abaixo

{% set has_filters_available = products and has_filters_enabled and (filter_categories is not empty or product_filters is not empty) %}

Inclua o botão “filtro” e o modal (ou onde os filtros são exibidos) usando a variável abaixo:

{% if has_filters_available %}
    {% snipplet "grid/filters.tpl" %}
{% endif %}

CSS

Adicione os estilos no arquivo static/style-async.tpl

.filter-input-price-container {
 display: inline-block;
 width: 85px;
 margin-right: 5px;
 .filter-input-price {
   padding: 10px;
 }
}

Configurações

No arquivo config/settings.txt, adicionaremos o checkbox para ativar e desativar o filtro. Vamos colocá-lo na seção Lista de produtos.

title
       title = Filtros
   checkbox
       name = price_filters
       description = Precio

Traduções

Nesta etapa, adicionamos os textos para as traduções no arquivo  config/translations.txt

--- --- Config

es "Filtros"
pt "Filtros"
es_mx "Filtros"

es "Precio"
pt "Preço"
es_mx "Precio"

Ativação

Por fim, para ativar os filtros, você poderá fazer através do Administrador Nuvem, na seção “Personalizar meu layout atual” na Lista de produtos.

Por fim, recomendamos que você implemente todos os tipos de filtros seguindo este artigo.