Busca reativa e por voz

Use este guia somente em um componente header. Busca reativa e busca por voz são opt-in: um Header válido pode oferecer apenas a busca tradicional com action="{{ search_url }}" e name="q".

Busca reativa

Ative a busca reativa com .header-search[data-reactive-search] e uma das variantes abaixo.

Variante	Desktop	Mobile
dropdown	Painel abaixo do campo.	Drawer.
top	Overlay a partir do topo.	Drawer.
side	Drawer lateral.	Drawer.

O valor precisa ser exatamente dropdown, top ou side. O markup deve conter todos os seletores desta tabela.

Papel	Seletor ou atributo
Wrapper	.header-search[data-reactive-search]
Form	.search-form.search-form-reactive-search
Campo	.reactive-search-input e name="q"
Painel	.reactive-search[data-search-result]
Categorias	[data-suggested-categories] e .categories-list
Produtos	[data-suggested-products], [data-suggested-products-slider] e [data-list-products]
Abrir	.search-opener[data-action="show-form-reactive-search"] quando o campo não estiver visível
Fechar	.search-closer[data-action="hide-form-reactive-search"] para drawer, top e side
Fundo desktop	[data-search-background][data-action="hide-form-reactive-search"]
Mobile	data-mobile-view="true" no painel .reactive-search

No desktop, dropdown pode usar o campo visível e o fundo para fechamento. Em top e side, inclua o botão de fechar também no desktop. No mobile, todas as variantes funcionam como drawer e o painel precisa de data-mobile-view="true".

Markup completo

Este exemplo usa dropdown, campo visível no desktop e botão de abertura no mobile. Para top ou side, altere o valor de data-reactive-search e mantenha o botão de fechar também fora do bloco mobile.

{% getparam 'q' as params_q %}

{% if mobile %}
  <button type="button" class="search-opener" data-action="show-form-reactive-search" aria-label="Abrir busca">
    <svg class="icon"><use xlink:href="#icon-search" /></svg>
  </button>
{% endif %}

<div class="header-search" data-reactive-search="dropdown">
  {% unless mobile %}
    <div class="background" data-search-background data-action="hide-form-reactive-search"></div>
  {% endunless %}

  <form class="search-form search-form-reactive-search" action="{{ search_url }}">
    <div class="container">
      <div class="search-heading">
        <label class="field" for="header-search">
          <input
            id="header-search"
            class="input header-search-input reactive-search-input"
            type="search"
            name="q"
            value="{{ params_q }}"
            placeholder="Buscar"
            required
          />
        </label>
        {% if mobile %}
          <button type="button" class="search-closer" data-action="hide-form-reactive-search" aria-label="Fechar busca"></button>
        {% endif %}
      </div>

      <div class="reactive-search" data-search-result {% if mobile %}data-mobile-view="true"{% endif %}>
        <div class="suggested-categories" data-suggested-categories>
          <p class="title">Sugestões</p>
          <div class="categories-list"></div>
        </div>
        <div class="suggested-products -loading" data-suggested-products>
          <div class="swiper" data-suggested-products-slider>
            <div class="swiper-wrapper" data-list-products></div>
            <div class="swiper-pagination"></div>
          </div>
          <p class="message-response"></p>
        </div>
      </div>
    </div>
  </form>
</div>

Estilize a aparência inicial do campo e do seu Header. Confira em desktop e mobile o foco, abertura, fechamento, sugestões de categorias, produtos sugeridos e carrossel.

Busca por voz

Busca por voz é opcional. No mesmo bloco da busca, inclua [data-speech-search], .mic-button e .header-search-input. Sem suporte do navegador, o botão não deve ser apresentado como recurso disponível.

<div class="header-search" data-reactive-search="dropdown" data-speech-search>
  <form class="search-form search-form-reactive-search" action="{{ search_url }}">
    <label class="field" for="header-search">
      <button class="mic-button" type="button" aria-label="Usar pesquisa por voz">
        <svg class="icon"><use xlink:href="#icon-mic" /></svg>
      </button>
      <input id="header-search" class="header-search-input reactive-search-input" type="search" name="q" required />
    </label>
  </form>
</div>

Para um formulário de busca somente no menu mobile, mantenha data-speech-search, .mic-button, .header-search-input, action="{{ search_url }}" e name="q"; não inclua os elementos de sugestões se ele não for reativo.

Volte ao Cabeçalho para o contrato geral e à Validação e publicação para o checklist final.