Configuração do componente connectif.product-recommendation no VTEX IO

O componente "connectif.product-recommendation" serve para exibir recomendações de produtos enviadas pela Connectif em formato de carrossel nas integrações com o VTEX IO.

  

Para configurar este componente, será necessário um especialista com conhecimentos em programação. Além disso, para que o eCommerce possa receber eventos de produtos recomendados, você precisará criar e configurar os fluxos de trabalho necessários com o nó “Compartilhar dados”.

Como usar

O componente "connectif.product-recommendation" é projetado para integrações com o VTEX IO, utilizando componentes nativos da VTEX como Slider Layout e Product Summary para exibir as informações do produto e configurar os ajustes do carrossel.

 

Requisitos

Para poder usar o componente "connectif.product-recommendation", é necessário ter a dependência da Connectif no tema, adicionando o seguinte trecho de código no manifest.json:

 "peerDependencies": { 
    "connectif.connectif": "1.x" 
  },

 

Exemplo

O componente terá este formato:

"connectif.product-recommendation": { 
  "props": { 
      "id": "product-recommendation-home" 
  }, 
  "children": ["list-context.product-list-static#connectif-products"] 
}, 
"list-context.product-list-static#connectif-products": { 
  "blocks": ["product-summary.shelf"], // Componente VTEX Product Summary 
  "children": ["slider-layout#connectif-products"] // Componente VTEX Slider Layout 
}, 
"slider-layout#connectif-products": { 
  "props": { 
    "itemsPerPage": { 
      "desktop": 3, 
      "tablet": 3, 
      "phone": 1 
    }, 
    "infinite": true, 
    "fullWidth": false, 
    "blockClass": "shelf" 
  } 
},

Explicação do exemplo:

  • connectif.product-recommendation: recebe nas props um “id”. Esse id é o identificador que você deve configurar no nó "Compartilhar dados".
  • list-context.product-list-static#connectif-products: envolve o bloco product-summary.shelf e contém o componente slider-layout#connectif-products.
  • product-summary.shelf: é o componente nativo da VTEX usado para exibir as informações dos produtos.
  • slider-layout#connectif-products representa as configurações personalizáveis do carrossel, permitindo definir quantos produtos exibir em cada tipo de dispositivo.

 

 

Parabéns!
Você chegou ao final da lição.

  

Ficou com dúvidas?
Lembre-se que você pode contar com nossos especialistas da Connectif. Para entrar em contato com eles, basta abrir um ticket com o Suporte clicando no botão azul “Ajuda” no seu dashboard.


Continue aprendendo!

Para aproveitar ao máximo sua conta na Connectif, recomendamos seguir com os seguintes artigos: