Cronômetro de Ofertas (CMS VTEX)

A funcionalidade do Cronômetro de Ofertas permite que os assinantes possam configurar uma contagem regressiva para ofertas especiais. É ativado através do CMS e está conectado ao modelo do Carrossel de Produtos.

obs.: Não é necessário vincular uma promoção da VTEX para que o cronômetro funcione, basta fazer toda a configuração via CMS. 

Configurando Crômetro de Ofertas

1. Realize o login no painel administrativo da VTEX e entre no espaço destinado app 
   Exemplo: 
   
2. Vá no módulo "Storefront" e clique na função "Headless CMS"  
3. Entre no componente "Home" , selecione o símbolo de + na posição onde você deseja inserir o componente e selecione a opção de conteúdo "Carrosel | Produto".
   
4. Ao abrir o modelo para edição, preencha os campos já conhecidos como:
   • Título: Título para identificar o modelo, pode ser exibido para os usuários a partir da ativação do campo "Exibir o título"
   • Ativo: Determina se o componente será exibido no aplicativo.
   • Plano de Fundo: não é necessário o preenchimento
   • Tipo de listagem: Define se será um carrossel feito a partir de uma lista de produtos, de uma categoria, de uma coleção ou de uma pesquisa.
   • Identificador: Identificador(es) relacionado(s) à opção escolhida em "tipo de listagem".
   • Ordenação: Define o método de ordenação do carrossel de produtos.
   • Exibição programada (Data de início e fim): Programa a data e hora em que esse carrossel deverá ficar visível no app.
   • Exibir o título: Define se o título escolhido para o modelo será exibido ou não no app.
5. Após as configurações iniciais dos produtos que irão ter sua promoção marcada pelo cronômetro, preencha os campos indicados conforme as instruções abaixo:
    
   1. Exibir timer: Habilite esse componente, assim o cronômetro será exibido atrelado ao carrossel de produtos.
   2. Cor do background: Insira o código hexadecimal da  cor desejada para  definir o background do cronômetro de ofertas.
   3. Cor do texto do timer: Insira o código hexadecimal da  cor desejada para definir o texto exibido no cronômetro de ofertas.

   4. Cor do botão do carrossel: Insira o código hexadecimal da  cor desejada para definir o ícone de seta do botão "Ver mais" no cronômetro de ofertas. 

Exibição na PLP 

 

Para exibir o cronômetro na PDP e na PLP, utiliza-se o campo Tipo de Listagem, configurado no Carrossel de Produtos.

Na PLP, o cronômetro aparecerá nas seguintes situações:

1. Categoria: Aparece ao clicar em "Ver mais" no carrossel a partir da página inicial e em qualquer fluxo onde o app redireciona para a categoria (Banner, carrossel de categoria, menu de categorias e etc).
2. Search: Aparece somente ao clicar em "Ver mais" no carrossel da home.
3. Collection: Aparece somente ao clicar em "Ver mais" no carrossel da home e em fluxos onde o app redireciona para a collection (Ex: através de banners).

Exemplo:

 

Exibição na PDP 

Na PDP, o cronômetro aparecerá nas seguintes situações:

1. Categoria: Aparece ao acessar o produto por qualquer fluxo no aplicativo.
2. Collection: Aparece ao acessar o produto por qualquer fluxo no aplicativo.
3. Search: Os carrosséis configurados com este tipo de listagem não aparecerão na PDP, pois os termos de pesquisa podem ser genéricos e fazer referência a vários produtos.

obs.: Se houver mais de um cronômetro atrelado ao produto pelo contentful, aparecerá o cronômetro que foi cadastrado primeiro.

Exemplo:

 

                                                     

Ao finalizar a criação, lembre-se de clicar em "Salvar" e depois em "Publicar" para garantir que as alterações sejam armazenadas e o conteúdo seja disponibilizado no app

Caso fique com alguma dúvida, você pode enviar um e-mail para [e-mail].