Estrutura de Cadastro:
O Card 360 mantém a mesma estrutura de cadastro do Card de Vendas, para facilitar a criação e manutenção por parte do time de conteúdo e conta com Integração com catalogo do Mind para incluir o plugin do Mind para que os dados do card sejam consumidos diretamente do catálogo do e-commerce.
Tagueamento:
Garantimos que o Card 360 seja tagueado de acordo com as necessidades de SEO e métricas de acompanhamento.
Os dados de interação e cliques são capturados corretamente, permitindo análises posteriores.
Acessibilidade:
Garantimos que o componente seja totalmente acessível:
Atender aos critérios de acessibilidade (WCAG 2.1).
Funcionar corretamente em leitores de tela e dispositivos de navegação assistida (NVDA).
Garantimos alto contraste adequado entre elementos no card.
Compatibilidade entre Plataformas:
O Card 360 é responsivo em vários dispositivos desktop, tablet e mobile, garantindo a mesma experiência fluida em diferentes resoluções.
O cadastro do componente Card 360 deve incluir:
Aba Geral: Filtro de Produto (PF e PJ) para Card 360 Catalog Item
Tags
Contexto
Imagem (Sugestão mobile 266X266px e desktop 266X500px)
Descrição
Título
Aba Meio: Valor, Ícone, Brands
Aba Inferior: Preço, condição e links
Aba Opções: Período de Vigência
Pastas do Card 360 normal e com o Catalogo Mind:
"Conteúdos Compartilhados Claro > Card 360 > Itens"
"Conteúdos Compartilhados Claro > Card 360 > Itens Via Catalogo"
"Conteúdos Compartilhados Claro > Card 360 > Listas"
Passo a passo para cadastrar o Accordion no Modal Drawer com conteúdo de texto e outro com conteúdo do plano vindo do Mind:
Card 360 Catalog Item > Aba: Inferior > Card 360 Catalog Actions > Estilo de Link > Drawer Catálogo > Campo: Drawer >
Criar: "Drawer Modal Item: > Accordion Items > Card 360 Catalog Drawer Accordion: Title: Detalhes Claro Pós Internet e “Data Type:” escolha “Vantagens Internet” ou qualquer um da lista.
E cadastrar outro:
Voltar para Aba "Drawer Modal Item" > “Em Geral” > Criar "Accordeon item" > Cadastrar o Título* e Texto* (campo livre)
RGC - Regras da Anatel: Cadastro de Links para Documentos
No Card 360 com Mind, os links para Informações sobre a Oferta e Termo Contratual devem ser inseridos no texto rico do Accordion da Modal Drawer, sob o título “Regulatório”.
- URLs Bases:
- Documento de Informações da Oferta (variável etiqueta):
-PF → https://www.claro.com.br/institucional/regulatorio/baixar-documento?etiqueta=
- PME → https://www.claro.com.br/empresas/regulatorio/baixar-documento?etiqueta=
Documento de Termo Contratual (variável tco):
- PF → https://www.claro.com.br/institucional/regulatorio/baixar-documento?tco=
- PME → https://www.claro.com.br/empresas/regulatorio/baixar-documento?tco=
- Importante: Após o sinal de igual (=) na URL, adicione o código RGC do produto:
{{internet.rgc}}
{{fone.rgc}}
{{celular.rgc}}
{{tv.rgc}}
- Exemplos:
-
PF -
Internet – Informações da oferta → https://www.claro.com.br/institucional/regulatorio/baixar-documento?etiqueta={{internet.rgc}}
-
TV – Termo Contratual → https://www.claro.com.br/institucional/regulatorio/baixar-documento?tco={{tv.rgc}}
-
PME -
Telefone – Informações da oferta → https://www.claro.com.br/empresas/regulatorio/baixar-documento?etiqueta={{fone.rgc}}
-
Celular – Termo Contratual → https://www.claro.com.br/empresas/regulatorio/baixar-documento?tco={{celular.rgc}}
- Como cadastrar no StoryblokMonte o link conforme os exemplos e insira como hiperlink no texto rico do Accordion da Modal Drawer.
Layout do componente no figma:
