Showcase ( List / Grid )

Snippet para exibir os produtos da pagina catalogo em forma de lista ou grid

HTML

{#
# Showcase (List/Grid)
# elements/snippets/showcase_catalog.html
#}
<div id="wrap-list">
    <span id="list" class="list glyphicon glyphicon-th-list"></span>
    <span id="grid" class="grid glyphicon glyphicon-th"></span>
</div>
{% if products|length > 0 %}
  <div class="row">
    {% for product in products %}
    <div class="col-sm-4 grid product">
        {% element 'snippets/product' {"product": product} %}
    </div>
    {% endfor %}
  </div>
{% endif %}

Javascript

$(function(){
    $('#list').click(function(){
          $('.product').removeClass('col-sm-4 grid');
          $('.product').addClass('col-md-12 list');
    });

    $('#grid').click(function(){
          $('.product').removeClass('col-md-12 list');
          $('.product').addClass('col-sm-4 grid');
    });
});

Exemplo

Como usar

Copie o bloco de codigo HTML e crie um arquivo separado, ex: elements/snippets/showcase_catalog.html

Copie o bloco de codigo JAVASCRIPT e cole em seu arquivo JS

Abra o arquivo pages/catalog.html e substitua o bloco de codigo abaixo:

{% element 'snippets/showcase' {
  "products": products
} %}

Por:

{% element('snippets/showcase_catalog') %}