Card de vendas

Componente Sales Card aceita os itens abaixo:

 - Imagem (266X380px)
 - Ícone;

 - Bill offer;

 - Titulo

 - Subtitulo

 - Texto rico

 - Botao - link interno, externo, modal multimedia, link ancora

 - Link arrow - link interno, externo, modal multimidia, link ancora
 - Brands

Regras de funcionamento:

 - Swiper-button de seleção de cards direita e esquerda - No desktop só exibido com 5 cards ou mais. Não deve ser exibido com total de cards entre 1 e 4.

 - Swiper-button de seleção de cards direita e esquerda - No mobile só exibido com 2 cards ou mais. Não deve ser exibido com total de 1 cards.

 - Imagem tamanho - A largura recomendada tanto para mobile quanto em desktop deve ser 266px. A altura pode variar. Ex: 266X174px ou 266X500px

  - Layout - Padrão ou Inverso somente na cor vermelha. A Opção de Layout está no menu "Opções" na página onde o seu card será inserido.
- Campo "Descrição" e "Produto" dentro do "Preço Card Vendas", Só exibe no card de vendas quando o Layout preço for "Com Subtotal".

Navegar em: Conteúdo>Conteúdos Compartilhados>Sales Card>Itens>Clicar em +Item e inserir o nome do arquivo

O nome do arquivo deve seguir a semântica: 
1 - Nome do componente

2 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj: 

Ex: item-card-vendas-home-fone-fixo-pf >Salvar
3 - Serão exibidas os menus: General, Preços, Detalhes e Modais

Preenchimento dos campos de cada Menu:

Campos do menu General:

1 - Destaque: para este campo inserimos o nome que ficará em evidência destacada como uma aba em vermelho acima de cada Card;

2 - Imagem: para este campo adicionamos uma imagem para o card, sempre respeitando o tamanho descrito nas regras de negócio
deste manual, lembrando que a imagem deve ser cadastrada por fora em Itens compartilhados>Imagens para  Claro/Embratel ou Beon;

3 - Card aberto Habilitado?: para este campo mantemos a oferta do card sempre expandida sem a opção de retrair se desejar;

4 - Ícone, Buscar ícone no Mondrian: para este campo preenchemos o nome do ícone que desejarmos e o sistema faz a busca automática diretamente do Mondrian;

5 - Título: para este campo inserimos um título que ficará em destaque em seu card de vendas;

6 - Título Accordion: para este campo inserimos um título do accordion onde serão exibidas as setas para que se expandam ou recolham a medida que clicamos nas mesmas.

7 - Descrição: para este campo temos o texto rico, onde aceitam: Texto-1, Texto-2, Hiperlink, Limpeza de formatação, Layout - esquerda, direita, centralizado e texto negrito.

8 - Título Brands: para este campo iremos inserir o Título que irá anteceder as marcas que irão ser exibidas logo abaixo no campo Brands;

9 - Brands: para este campo iremos clicar em "Adicionar Bloco" e depois em "Brand Group Item", serão exibidos os campos: "Nome" e "Brand". Nome da sua marca que desejar e Brand, Buscar Brand Mondrian, é só realizar a busca automática inserindo sua marca desejada, como exemplo "Facebook", clicar na marca desejada e Salvar.

10 - Opções: logo abaixo do campo Brand temos o campo opções: Clicando nele o sistema exibe o campo "Categoria Brand", onde podemo filtrar quais tipos de Brand desejamos incluir, bem como: Apps, Bandeiras, Canais de TV, marcas Claro e Marcas de pagamento.

11 - Detalhes: depois do campo "Adicionar Bloco" em "Brands", temos o campo detalhe: aqui outro texto rico que fará parte da descrição abaixo das marcas que adicionamos anteriormente.

12 - Link Arrow: para este campo o link arrow que tem que ser montado por fora como nos outros componentes em Itens compartilhados>Links

Preenchimento dos campos de cada Menu:

Campos do menu Preço:

1 - Layout preço: para este campo temos as opções de exibição: Padrão e Sub-total, onde Padrão são exibidos os detalhes de cada preço e o Sub-total onde são exibidos o valor geral englobando os valores mencionados de cada produto;

2 - Com Fidelidade: para este campo acionamos se desejamos exibir o botão de fidelidade ou não;

3 - Descrição Fidelidade: para este campo inserimos o texto que desejamos comunicar sobre a fidelidade;

4 - Lista de Preços: para este campo clicamos em "Adicionar bloco" e depois em "Preço Card Vendas", serão exibidos os campos:

 - "Selecionado por padrão", Habilitado? que é a opção de preço que virá selecionada por padrão,
 - "É fidelidade?" , Habilitado?: esses são os preços fidelidade que aparecerão somente quando o Card Vendas estiver com fidelidade habilitada.

5 - Prefixo: para este campo inserimos o texto que fica acima do valor/preço;

6 - Produto: para este campo inserimos o nome do produto que desejarmos;

7 - Preço: para este campo inserimos o valor do produto;

8 - Período: para este campo inserimos o que vai na frente do preço: Ex. mensal, anual, por mês..etc.;

9 - Sufixo: para este campo inserimos o que vem abaixo do preço: Ex. no combo com tv ou móvel;

10 - Descrição: para este campo inserimos a descrição que vem abaixo do valor quando a opção de fidelidade estiver acionada;

11 - Link: para este campo inserirmos o botão, link interno ou link externo.

Preenchimento dos campos de cada Menu:

Campos do menu Detalhes:

1 - Detalhes: para este campo Clicar em "Adicionar bloco" e depois em Sales Card Details, serão exibidos os campos "Título Accordion" e "Descrição" que é o nosso texto rico, aqui serão exibidas aqueles acordeons que ficam abaixo do card de vendas, como exemplo (Benefícios, Detalhes e Regulamentos);

2 - Título Brands: para este campo inserimos o título da marcas que desejarmos inserir;

3 - Brands: para este campo iremos clicar em "Adicionar Bloco" e depois em "Brand Group Item", serão exibidos os campos: "Nome" e "Brand". Nome da sua marca que desejar e Brand, Buscar Brand Mondrian, é só realizar a busca automática inserindo sua marca desejada, como exemplo "Facebook", clicar na marca desejada e Salvar;

4 - Opções: logo abaixo do campo Brand temos o campo opções: Clicando nele o sistema exibe o campo "Categoria Brand", onde podemo filtrar quais tipos de Brand desejamos incluir, bem como: Apps, Bandeiras, Canais de TV, marcas Claro e Marcas de pagamento;

5 - Detalhes: para este campo iremos inserir o texto que fará parte do seu acordeon como exemplo (Benefícios, Detalhes e Regulamentos);

6- Link Arrow: para este campo o link arrow que tem que ser montado por fora como nos outros componentes em Itens compartilhados>Links.