A Página de Cupons é uma alternativa para a visualização dos itens favoritados na Tab Bar, substituindo a página por uma Landing Page em que é possível cadastrar, via Contentful, os diferentes Cupons que seu app está oferecendo no momento.
Também é possível visualizar a página de cupons a partir de um redirecionamento da nossa Vitrine de Cupons. Nesse artigo, daremos foco à configuração da Página de Cupons de maneira geral e como redirecionar por meio da barra de navegação.
Cada cupom será visualizado nessa nova página com uma imagem própria, texto, validade, código do cupom, entre outras personalizações possíveis com base no que for de seu interesse.
obs.: É preciso solicitar via ticket para o Suporte (email suporte@kobe.io) a adição desses novos modelos ao seu Contentful.
Configurando Estrutura Básica da Página
- Entre no Contentful e faça login com o e-mail que já possui acesso à ferramenta;
- Na aba "Content", clique em "Add Entry" e selecione a opção do componente "Lista | Cupons".
- Ao abrir o modelo para edição, preencha os campos indicados conforme as instruções abaixo:
- Título: Título vinculado ao modelo no Contentful, não reflete no app.
- Ativo: Define se a lista de cupons deve ou não ser exibida.
- Banner: Permite a adição de um Banner para ser exibido no início da página (configura-se como um banner comum).
- Cupons: Adição de card de cupom conforme explicaremos a seguir.
Configurando Exibição de Cupons (Geral)
- Após clicar em Cupons na criação de sua Página de Cupons clique em "Add content" e selecione a opção do componente "Card Cupom".
- Ao abrir o modelo para edição, preencha os campos indicados conforme as instruções abaixo:
- Nome: Nome vinculado ao modelo no Contentful, não reflete no app.
- Ativo: Define se o cupom deve ou não ser exibido.
- Imagem: Imagem para ser exibida no card do cupom.
-
Tipo de Cupom: Selecione de acordo com o cupom que deseja cadastrar.
- PercentageDiscountCoupon: Desconto em porcentagem no valor do produto.
- FixedValueCoupon: Desconto fixo na compra.
- FreeShipping: Desconto relativo a frete grátis na compra.
- ProgressiveCoupon: Desconto progressivo, possui características específicas a serem explicadas no próximo tópico do artigo.
-
Texto de Aviso (Opcional): Texto em destaque vermelho que fica logo após a imagem cadastrada para o cupom.
-
Texto do Valor de Desconto (Opcional): Com excessão para cupons de frete grátis, diz o valor do desconto que será aplicado.
- Código do Cupom (Opcional): Indica o código do cupom cadastrado.
-
Regras de Uso (Opcional): Adiciona regras de uso extras vinculadas ao cupom.Como Usar
-
Regras Detalhadas: Texto que preenche a modal de informações do cupom. A formatação do texto vai refletir no APP.
-
Validade do Cupom (Opcional): A tag de Validade do cupom é exibida com dia/mês da "Data de fim da exibição" no Card Cupom. Também influencia na exibição do cupom na página de cupons.
-
Redirecionar o usuário ao clicar no card de cupom (Opcional): Para a realização do redirecionamento é necessário preencher os campos de Destino do Cupom, Identificador do destino e AppPage de Destino (em caso de Destino sendo AppPage).
- Tamanho: Tamanhos padrões esperados da imagem exibidas no cupom (Largura x Altura): 800x250, 800x520.
Configurando Exibição de Cupons Progressivos
Ao cadastrar um Cupom de desconto Progressivo, temos algumas características diferentes, a serem explicadas a seguir:
- Texto do Valor de Desconto: Não é preciso cadastrar nada nesse campo.
- Tipo de Cupom: Selecionar ProgressiveCoupon.
-
Cupons progressivos: Adicionar os cupons "filhos" associados a esse cupom de desconto progressivo.
-
Os cupons filhos também são do tipo Card Cupom, porém não é necessário preencher todas as informações. Primeiro preencha o Nome, Ativo? e Tipo de Cupom de acordo com o que foi explicado anteriormente.
-
Para esse caso os únicos tipos de cupom aceitos são: Desconto Percentual ou Desconto Fixo.
-
Preencha o Texto de Valor de Desconto e Regras de Usos, esses dois dados são os informativos para o usuário.
-
Publique o cupom filho e faça novamente esse processo para quantos cupons filhos achar necessário.
- Ao final do cadastro, a exibição do cupom progressivo aparecerá da seguinte forma:
-
Configurando exibição na Navbar
- Na aba "Content", clique em "Add Entry" e selecione a opção do componente "Item na barra de navegação".
- Ao abrir o modelo para edição, preencha os campos indicados conforme as instruções abaixo:
- Nome: Nome vinculado ao modelo no Contentful, não reflete no app.
- Ícone: Ícone exibido na barra de navegação no lugar do ícone de favoritos.
- Destino do item: Selecionar a opção "coupons".
- Id ou termo de busca relativo ao tipo de destino: Pode deixar esse item sem preencher.
- Substituir: Selecionar a opção "favoritos".
- Cor: Modifica a cor do novo item na barra de navegação, deixar vazio mantém as cores default.
- Precisa de login?: Selecione a opção "Não".
Exemplos Gerais no App
.
Filtros, Ordenação e Busca na Página de Cupons
Para otimizar a experiência do usuário ao visualizar a página de cupons, adicionamos a possibilidade de realizar Buscas Textuais, Filtrar e Ordenar cupons. É necessário entrar em contato com o time de suporte para que essas opções sejam habilitadas para a sua Página de Cupons.
As opções disponíveis para ativação, no momento, são:
- Filtro por Tipo: Filtrar cupons pelo tipo dele, de acordo com o Contentful (Desconto Fixo, Desconto Percentual e Frete Grátis).
-
Busca: Foi implementada uma busca textual (ícone de lupa no canto superior direito) na Página de Cupons, que será realizada com base no Nome, Código e Regras do cupom, conforme mostrado abaixo.
-
Ordenação: Permitimos a ordenação por
- Mais recentes: Ordena os cupons a partir da "Data de início" da maior data para a menor, se o cupom não tiver Data de início o cupom vira na ordem que estiver na listagem após os cupom que possuem.
-
Data de expiração: Ordena os cupons a partir da "Data de fim" da menor data para a maior, se o cupom não tiver "Data de fim" o cupom vira na ordem que estiver após os cupom que possuem.
Ao final, lembre-se de publicar a alteração no Contentful para que ela seja aplicada no aplicativo.
Caso fique com alguma dúvida, você pode enviar um e-mail para suporte@kobe.io.