Barra de categorias na página inicial

Neste tutorial vamos adicionar um componente na página inicial para mostrar as categorias.

HTML

A primeira coisa que vamos fazer é criar as pastas home e navigation dentro da pasta snipplets, se você ainda não as tiver.

1. Dentro da pasta snipplets/home, adicionamos um snipplet com o nome home-nav-categories.tpl com o seguinte conteúdo:

<section class="section-nav-categories text-center">
    <div class="container">
        <div class="row">
            <div class="col nav-categories-container d-block p-0">
               <div class="nav-categories">
                    <ul class="nav-list-categories">
                        {% for category in categories %}
                            <li class="nav-list-categories-item">
                                <a class="nav-list-categories-link {{ item.current ? 'selected' : '' }}" href="{{ category.url }}">{{ category.name }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

2. Assim que tivermos o snipplet, precisamos chamá-lo nos templates template/home.tpl, no local que preferir dentro do seu layout.

{% include 'snipplets/home/home-nav-categories.tpl' %}

CSS

Requisito:

Ter adicionado helper classes em seu layout. Você pode seguir este pequeno tutorial para fazer isso (é só copiar e colar algumas classes, não leva mais que 1 minuto).

Adicione os estilos no arquivo static/style-critical.tpl

Se no seu layout você não usar um CSS stylesheet crítico, precisaremos do seguinte código dentro do seu CSS principal.

{# /* // Nav categories */ #}

.nav-categories {
  overflow-x: scroll;
}

.nav-list-categories {
  margin: 4px 0;
  padding: 0 15px;
  list-style: none;
  white-space: nowrap!important;
}

.nav-list-categories-item {
  position: initial;
  display: inline-block;
  padding: 0 10px;
}

.nav-list-categories-link {
    padding: 0 5px;
    font-weight: 700;
    font-size: 14px;
    line-height: 50px;
    letter-spacing: 1px;
}

{# /* // Min width 768px */ #}

@media (min-width: 768px) { 

  {# /* //// Home */ #}

    {# /* // Nav categories */ #}

    .nav-categories {
      overflow-x: auto;
    }
    .nav-list-categories {
      white-space: normal!important;
    }
}