breadcrumb

O breadcrumb é responsável por retornar um array com as informações de localização das categorias relacionadas.

Disponível para uso nas páginas: catalog | product | search

Para saber mais sobre categorias acesse: Cadastrar categorias

Atributos disponíveis

É possível usar o objeto breadcrumb para exibir a estrutura de navegação da hierarquia de categorias e subcategorias até a página atual. Por isso é possível montar uma chamada própria usando os atributos abaixo:

Atributos	Característica
{{ breadcrumb.name }}	Retorna o nome da categoria
{{ breadcrumb.link }}	retorna o link para a categoria

Como Usar

Para imprimir um breadcrumb, é preciso chamar o snippet em um arquivo html do tema, que pode ser a página de produto, de pesquisa ou de categoria, como o exemplo abaixo:

catalog.html

{% element 'snippets/breadcrumb' %}

O uso dos atributos do objeto no código HTML deve seguir como o formato básico abaixo:

Input

<div class="breadcrumb">
  <span class="breadcrumb-item"><a href="/">{{ Translation('pagina_inicial') }}</a></span>
  <span class="icon-breadcrumb">/</span>
  {% if breadcrumb %}
    {% for item in breadcrumb %}
      <span class="breadcrumb-item">
        <a href="{{ item.link}}" title="{{ item.name }}">{{ item.name }}</a>
      </span>
      <span class="icon-breadcrumb">/</span>
    {% endfor %}
    <span class="breadcrumb-item">{{ pages.current == 'product' ? product.name : category.name }}</span>
  {% endif %}
</div>

Output

<div class="breadcrumb">
  <span class="breadcrumb-item"><a href="/">Página Inicial</a></span>
  <span class="icon-breadcrumb">/</span>
  <span class="breadcrumb-item">
    <a href="www.sualoja/outlet" title="Outlet">Outlet</a>
  </span>
  <span class="icon-breadcrumb">/</span>
  <span class="breadcrumb-item">Camisa</span>
</div>