Idiomas e moedas no cabeçalho | Documentação para Web Designers

No seguinte siguiente tutorial, vamos a adicionar um menu para poder exibir os idiomas y moedas no cabeçalho.

HTML

1. Para começar, vamos criar um novo snipplet chamado navigation-lang.tpl dentro da pasta sniplets/navigation onde criamos o dropdown com as opções de idioma e moeda. Se você já tiver esse arquivo em seu layout, provavelmente só precisará fazer alguns ajustes ou ir diretamente para a etapa 2.

<ul class="list-unstyled font-small">
    {% for language in languages %}
        <li class="{% if not loop.last %}mb-2{% endif %}{% if language.active %} font-weight-bold{% endif %}">
            <a href="{{ language.url }}" class="d-flex align-items-center">
                <img class="lazyload mr-2" src="{{ 'images/empty-placeholder.png' | static_url }}" data-src="{{ language.country | flag_url }}" alt="{{ language.name }}" />
                {{ language.country_name }}
            </a>
        </li>
    {% endfor %}
</ul>

2. No arquivo navigation.tpl, onde está incluído o ícone do menu hambúrguer, adicionamos o link para idiomas e moedas.

{% if languages | length > 1 and settings.languages_header %}
    <span class="utilities-item nav-dropdown position-relative">
        {% include "snipplets/svg/globe.tpl" with {svg_custom_class: "icon-inline icon-w-16 svg-icon-text"} %}
        <div class="nav-dropdown-content desktop-dropdown-small position-absolute">
            {% include "snipplets/navigation/navigation-lang.tpl" with { header: true } %}
        </div>
    </span>
{% endif %}

3. Por fim para a parte HTML, precisamos adicionar na pasta SVG, um novo arquivo SVG para o ícone de idiomas chamado globe.tpl

<svg class="{{ svg_custom_class }}" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm179.3 160h-67.2c-6.7-36.5-17.5-68.8-31.2-94.7 42.9 19 77.7 52.7 98.4 94.7zM248 56c18.6 0 48.6 41.2 63.2 112H184.8C199.4 97.2 229.4 56 248 56zM48 256c0-13.7 1.4-27.1 4-40h77.7c-1 13.1-1.7 26.3-1.7 40s.7 26.9 1.7 40H52c-2.6-12.9-4-26.3-4-40zm20.7 88h67.2c6.7 36.5 17.5 68.8 31.2 94.7-42.9-19-77.7-52.7-98.4-94.7zm67.2-176H68.7c20.7-42 55.5-75.7 98.4-94.7-13.7 25.9-24.5 58.2-31.2 94.7zM248 456c-18.6 0-48.6-41.2-63.2-112h126.5c-14.7 70.8-44.7 112-63.3 112zm70.1-160H177.9c-1.1-12.8-1.9-26-1.9-40s.8-27.2 1.9-40h140.3c1.1 12.8 1.9 26 1.9 40s-.9 27.2-2 40zm10.8 142.7c13.7-25.9 24.4-58.2 31.2-94.7h67.2c-20.7 42-55.5 75.7-98.4 94.7zM366.3 296c1-13.1 1.7-26.3 1.7-40s-.7-26.9-1.7-40H444c2.6 12.9 4 26.3 4 40s-1.4 27.1-4 40h-77.7z"/></svg>

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).

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

Se em seu layout você usar um stylesheet para o CSS crítico, precisaremos do seguinte código dentro dele, do contrário, você pode unificar o CSS dos passos 2 e 3 em um único arquivo.

.font-small {
  font-size: 12px!important;
}
.nav-dropdown-content {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear .3s, opacity .3s linear;
}

2. Adicionamos o seguinte SASS de cores em style-colors.scss.tpl (ou na stylesheet do seu layout que possui as cores e fontes da loja). Lembre-se de que as variáveis de cores e fontes podem variar em relação ao seu layout:

.desktop-dropdown-small {
  background-color: $main-background;
}

3. Adicione os estilos no arquivo static/style-async.tpl

Se em seu layout você usar um stylesheet CSS assíncrono, precisaremos do seguinte código dentro dela, do contrário, você pode unificar o CSS dos passos 2 e 3 em um único arquivo.

.nav-dropdown-content:hover,
.nav-dropdown:hover .nav-dropdown-content {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.desktop-dropdown-small {
  top: calc(100% - 10px);
  left: -10px;
  z-index: 9;
  width: 150px;
  padding: 15px;
}

@media (min-width: 768px) { 

  {# /* //// Components */ #}

  {# /* Header */ #}

  .desktop-dropdown-small {
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
}

Configurações

Vamos adicionar configurações para que possa habilitar idiomas e moedas no cabeçalho. Adicionamos o arquivo config/settings.txt na seção Cabeçalho:

checkbox
    name = languages_header
    description = Mostrar idiomas y monedas en el encabezado

Traduções

Nesta etapa adicionamos os textos para as traduções no arquivo config/translations.txt

es "Mostrar idiomas y monedas en el encabezado"
pt "Mostrar idiomas e moedas no cabeçalho"
es_mx "Mostrar idiomas y monedas en el encabezado"

Ativação

Por fim, para poder mostrar os idiomas e moedas no cabeçalho, você deve fazê-lo a partir da customização do seu layout na seção Cabeçalho: