Explore

#43788 - [Chocolat du jour ] - Página Nossas Lojas

Documentação de Funcionalidade – Nossas Lojas

1. Descrição Geral

Página institucional que exibe todas as lojas físicas da marca, permitindo ao usuário filtrar e visualizar informações detalhadas de cada unidade. Desenvolvida de acordo com o layout fornecido no Figma, com responsividade e interatividade para desktop e mobile.

⁠

2. Estrutura da Página

Section principal com banner e filtro

Banner principal com título configurável.

Campo de busca/filtro por estado (todos os estados do Brasil).

Listagem de lojas em cards

Nome da loja

Endereço

Horário de funcionamento

Botão "Como chegar" (redireciona para Google Maps)

Interatividade

Hover no card (reduz imagem para sensação de interação).

Hover no botão "Como chegar" (feedback visual de clique).

Mobile

Slider dos cards, permitindo navegação horizontal entre lojas.

⁠

3. Cadastro no Admin VTEX

Local de configuração: /admin/cms/site-editor/institucional/nossas-lojas Bloco criado: Nossas Lojas

⁠

4. Configurações Disponíveis no Bloco

Título da página (exibido acima do filtro e no banner).

Imagem do banner principal.

Cadastro de lojas com os seguintes campos:

ID da loja (uso interno).

Nome da loja (exibido no card).

Imagem da loja (exibida no card).

Estado (define filtragem na página).

Endereço (exibido no card e redirecionando no botão Como chegar para o google maps).

Telefone (não exibido no card).

Horário de funcionamento:

Campo para dias da semana (exibido no card).

Campo livre para horário (exibido no card após os dias).

Exemplo de exibição: Segunda - das 10h às 22h.

⁠

5. Gerenciamento

Lojas cadastradas podem ser editadas ou excluídas diretamente pelo Site Editor.

Horários cadastrados também podem ser editados ou excluídos individualmente.

⁠

6. Evidências Visuais (Tutorial)

1. Acesso ao bloco no Site Editor.

/admin/cms/site-editor/institucional/nossas-lojas

2. Configuração do título e banner.

⁠

⁠

3. Cadastro de loja (campos preenchidos).

⁠

⁠

4. Visualização na página.

Desktop:

⁠

Mobile:

⁠

5. Funcionalidade de filtro por estado.

Filtro por estado que permite selecionar qualquer estado do Brasil e exibe apenas as lojas cadastradas com aquele estado no CMS/Site Editor. Por padrão, mostra todas as lojas; ao escolher um estado, a listagem é atualizada em tempo real sem recarregar a página. No desktop, as lojas são exibidas como uma lista de cards. No mobile, os cards são apresentados em um slider para navegação horizontal.

6. Vídeo de Processos

⁠

https://www.loom.com/share/abc263339ff94ce18fde4ab08c2ed422?sid=7f800242-70e2-49fb-b47c-9155a98610e2⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.