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">
    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 494.999 494.999"><path d="M105.031 119.481h284.938c32.988 0 59.742-26.743 59.742-59.741C449.71 26.743 422.957 0 389.968 0H105.031C72.043 0 45.289 26.743 45.289 59.74c0 32.998 26.754 59.741 59.742 59.741zM389.968 187.757H105.031c-32.987 0-59.742 26.747-59.742 59.744 0 32.994 26.755 59.741 59.742 59.741h284.938c32.988 0 59.742-26.747 59.742-59.741-.001-32.997-26.754-59.744-59.743-59.744zM389.968 375.518H105.031c-32.987 0-59.742 26.747-59.742 59.741 0 32.997 26.755 59.74 59.742 59.74h284.938c32.988 0 59.742-26.743 59.742-59.74-.001-32.994-26.754-59.741-59.743-59.741z"/></svg>
  </span>
  <span id="grid" class="grid">
    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><path d="M10.75 15A2.25 2.25 0 0 1 13 17.25v5.5A2.25 2.25 0 0 1 10.75 25h-5.5A2.25 2.25 0 0 1 3 22.75v-5.5A2.25 2.25 0 0 1 5.25 15h5.5Zm12 0A2.25 2.25 0 0 1 25 17.25v5.5A2.25 2.25 0 0 1 22.75 25h-5.5A2.25 2.25 0 0 1 15 22.75v-5.5A2.25 2.25 0 0 1 17.25 15h5.5Zm-12-12A2.25 2.25 0 0 1 13 5.25v5.5A2.25 2.25 0 0 1 10.75 13h-5.5A2.25 2.25 0 0 1 3 10.75v-5.5A2.25 2.25 0 0 1 5.25 3h5.5Zm12 0A2.25 2.25 0 0 1 25 5.25v5.5A2.25 2.25 0 0 1 22.75 13h-5.5A2.25 2.25 0 0 1 15 10.75v-5.5A2.25 2.25 0 0 1 17.25 3h5.5Z" /></svg>
  </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');
    });
});

Como usar

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

Abra o arquivo pages/catalog.html e substitua o bloco de código abaixo:

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

Por:

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

Copie o bloco de código JAVASCRIPT e cole em seu arquivo .js