Created
October 13, 2015 19:43
-
-
Save vagnerolliver2/c3f83b030fa81b990625 to your computer and use it in GitHub Desktop.
Entendendo como percorrer as váriáveis da tag % aggregations% e montar um filtro por tipo de tag
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
A plataforma vnda possui feature rodando no back para montar e concatenar as url dinamicamente conforme vão sendo selecionados. | |
Sempre que é preciso listar algum dos tipos de filtros disponíveis da plataforma use a tag {% aggregations %}. | |
Para as exibir filtros por um tipo de tag não será mais necessário usar a tag "{% tags type:"categoria"%}", | |
com o novo modelo de filtros de preço, atributos e tipo de tag são carregados através do {% aggregations %}. | |
Recomendável a leitura no guides sobre {% aggregations %} | |
http://guides.vnda.com.br/#aggregations | |
http://guides.vnda.com.br/#filtro-na-busca | |
http://guides.vnda.com.br/#filtro-nas-tags | |
** importante.. esse é arquivo que usamos para filtros usado na loja demo | |
https://github.com/vagnerolliver/loja-demo-filtros-tag-e-busca/blob/master/product_filter.liquid | |
Abaixo temos um código .liquid e alguns comentários para montar um listagem de filtros pelo tipo de tag "categoria" | |
<!-- ############################################################### | |
PÁGINA DE BUSCA | |
#################################################################### --> | |
{% aggregations q:params.q %} | |
<!-- | |
O aggregation retorna os 3 tipos de filtros no formato de um objeto array no formato json | |
{{ price }} // carrega todos os atributos encontrados para dentro da váriavel price | |
{{ properties }} // carrega todos os atributos encontrados para dentro da váriavel properties | |
{{ typed_tags }} // carrega todos os tipo de tags encontrados para dentro da váriavel type_tags | |
Para percorrer as variáveis acioma utilize tag {% for %} ver na linha#21 | |
--> | |
<div class="columns small-12"> | |
<h4> | |
Filtro por Categoria | |
</h4> | |
</div> | |
<div class="columns small-12"> | |
<div id="categoriasDiv"> | |
{% for typetag in typed_tags %} <!-- percorrendo todas as posições do array criado na váriavel typed_tags --> | |
{% if typetag.name == "categoria" %} <!-- verificando se as posições são do tipo categoria--> | |
<!-- {{ typetag.name }} - nome da tag --> | |
<!-- {{ typetag.count }} - total de produtos da tag --> | |
{% for value in typetag.values %} <!-- percorrendo os arrays da posição typetag.values --> | |
<!-- {{ value.name }} --> | |
<a href="{{ value.url }}" class="{% if value.selected %}checked{% endif %">{{ value.title }}</a> | |
<!-- Para redirecionar para página de tag use {{ value.name }} ao invés de {{ value.url }}, value.url é para filtros--> | |
{% endfor %} | |
{% endif %} | |
{% endfor %} | |
</div> | |
</div> | |
{% endaggregations %} | |
{% for product in products %} | |
<!-- lista de produtos encontrados na busca --> | |
{% endfor %} | |
<!-- ############################################################### | |
PÁGINA DE TAG | |
#################################################################### --> | |
{% aggregations tag:tag.name parent_tag:parent_tag.name %} | |
<!-- | |
O aggregation retorna os 3 tipos de filtros no formato de um objeto array no formato json | |
{{ price }} // carrega todos os atributos encontrados para dentro da váriavel price | |
{{ properties }} // carrega todos os atributos encontrados para dentro da váriavel properties | |
{{ typed_tags }} // carrega todos os tipo de tags encontrados para dentro da váriavel type_tags | |
Para percorrer as variáveis acioma utilize tag {% for %} ver na linha#21 | |
--> | |
<div class="columns small-12"> | |
<h4> | |
Filtro por Categoria | |
</h4> | |
</div> | |
<div class="columns small-12"> | |
<div id="categoriasDiv"> | |
{% for typetag in typed_tags %} <!-- percorrendo todas as posições do array criado na váriavel typed_tags --> | |
{% if typetag.name == "categoria" %} <!-- verificando se as posições são do tipo categoria--> | |
<!-- {{ typetag.name }} - nome da tag --> | |
<!-- {{ typetag.count }} - total de produtos da tag --> | |
{% for value in typetag.values %} <!-- percorrendo os arrays da posição typetag.values --> | |
<!-- {{ value.name }} --> | |
<a href="{{ value.url }}" class="{% if value.selected %}checked{% endif %">{{ value.title }}</a> | |
<!-- Para redirecionar para página de tag use {{ value.name }} ao invés de {{ value.url }}, value.url é para filtros--> | |
{% endfor %} | |
{% endif %} | |
{% endfor %} | |
</div> | |
</div> | |
{% endaggregations %} | |
{% products tag:tag.name parent_tag:parent_tag.name page:params.page %} | |
<!-- lista de produtos encontrados na busca --> | |
{% endproducts %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment