Tutorial: filtro de produtos

Por: Dannie Karam
Criado em: 17/06/15.
Atualizado em 16/02/18.
5 min
de leitura

Índice

    Filtro

    No tutorial de hoje, vamos ensinar como configurar a loja de seus clientes para ter o novo filtro de produtos, funcionalidade nova da Nuvemshop, que será liberada em etapas para nossos lojistas. Em cinco passos, aproveite para dar continuidade aos tutoriais de filtro de produtos da semana passada e deixa a loja de seu cliente ainda mais otimizada:

    1. Copie os três principais snipplets de qualquer tema base: sidebar.tpl, categories.tpl e filters.tpl.

    2. Edite o template category.tpl.

    {% set show_sidebar = settings.product_filters %}
    
    ...
    
    <div class="row">
    
    {% if show_sidebar %}
    
      {% snipplet 'sidebar.tpl' %}
    
    {% endif %}
    
    <div {% if show_sidebar %}class="span10"{% else %}class="span12"{% endif %} >
    
    ... product grid goes here ...
    
    </div>
    
    </div>

    3. Adicione as configurações em settings.txt em Menus

    checkbox
    
           name = product_filters
    
           description = Mostrar barra lateral con filtros en listado de productos

    4. Adicione configurações em defaults.txt

    product_filters = 1
    
    5. Adicione traduções em translations.txt
    
    es "Tamaño"
    
    pt "Tamanho"
    
    en "Size"
    
     
    
    es "Color"
    
    pt "Cor"
    
    en "Color"
    
     
    
    es "Más colores"
    
    pt "Mais cores"
    
    en "More colors"
    
     
    
    es "Categorías"
    
    pt "Categorias"
    
    en "Categories"
    
     
    
    es "Mostrar más categorías"
    
    pt "Mostrar mais categorias"
    
    en "Show more categories"
    
     
    
    es "Mostrar barra lateral con filtros en listado de productos"
    
    pt "Mostrar barra lateral com filtros na lista de produtos"

     

    Adicione o estilo CSS de acordo com o seu próprio tema. Veja os principais estilos:

    #categories-column #show-more-cats {
    
       text-align: center;
    
       display: block;
    
       border-top: 1px solid #ccc;
    
       position: relative;
    
       margin-top: 20px;
    
       margin-bottom: 40px;
    
    }
    
    #categories-column #show-more-cats i.fa {
    
       color: #ccc;
    
       top: -1px;
    
       position: absolute;
    
       background: #fff;
    
       padding: 0 10px 5px 10px;
    
       left: 38%;
    
       width: 20px;
    
       border-left: 1px solid #ccc;
    
       border-right: 1px solid #ccc;
    
       border-bottom: 1px solid #ccc;
    
    }
    
    #filters-column .color-filter {
    
       width: 20px;
    
       height: 20px;
    
       border: 1px solid #ccc;
    
       margin: 0 8px 8px 0;
    
    }
    
    #filters-column .size-filter {
    
       background: transparent;
    
       border: 1px solid #999;
    
       margin: 0 8px 8px 0;
    
    }
    
    #filters-column .other-filter {
    
       background: transparent;
    
       width: 100%;
    
       margin: 0 8px 0 0;
    
       border: 0;
    
       text-align: left;
    
    }
    
    .filter-remove {
    
       background: #eee;
    
       border: 1px solid #999;
    
       width: 100%;
    
       text-align: left;
    
       position: relative;
    
       margin: 0 0 10px 0;
    
       color: #333;
    
    }
    
    .filter-remove:hover {
    
       border: 1px solid #000;
    
       color: #000;
    
    }
    
    .filter-remove:after {
    
       display: inline-block;
    
       position: absolute;
    
       right: 10px;
    
       top: 5px;
    
       font: normal normal normal 14px/1 FontAwesome;
    
       font-size: inherit;
    
       text-rendering: auto;
    
       -webkit-font-smoothing: antialiased;
    
       -moz-osx-font-smoothing: grayscale;
    
       transform: translate(0, 0);
    
       content: "\f00d";
    
    }

    Feito! 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.

    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”. Seria interessante poder filtrar os produtos listados por outras categorias/taxonomias.

        • nuvemshop

          Olá, Saulo! Como vai?

          Para qualquer dúvida sobre categorização de produtos, indicamos os tutoriais da nossa Central de Atendimento: https://bit.ly/2KvHBWU

          Esperamos ter te auxiliado, até mais 🙂

      Registre-se gratuitamente

      Receba posts sobre marketing e empreendedorismo diretamente no seu e-mail.

      Coloque o conhecimento na prática

      +15 mil alunos já aplicaram o aprendizado na Universidade e criaram seus negócios com a Nuvemshop.

      Teste 15 dias grátis

      Faça sua marca crescer

      Cria sua loja virtual com a Nuvemshop e venda de maneira profissional como eles:

      Osmoze - www.osmozestore.com.br
      Morango Brasil - morangobrasil.com.br
      Osram - loja.osram.com.br
      Testar 15 dias grátis