1. Help Center
  2. Integrate your Store
  3. Integration by module or app
  4. VTEX IO

Configuration of the connectif.product-recommendation component in VTEX IO

Created
Updated
Follow

The "connectif.product-recommendation" component is used to display product recommendations sent from Connectif in carousel format in VTEX IO integrations.

  

To configure this component, you'll need an expert with programming knowledge. Also, for the eCommerce to receive recommended product events, you must create and configure the necessary workflows with the “Share Data” node.

How to Use

The "connectif.product-recommendation" component is designed for integrations with VTEX IO, using native VTEX components such as Slider Layout and Product Summary to display product information and configure the carousel settings.

 

Requirements

To use the "connectif.product-recommendation" component, it is necessary to have the Connectif dependency in the theme, by adding the following code snippet in manifest.json:

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

 

Example

The component will look like this:

"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"], // VTEX Product Summary component 
  "children": ["slider-layout#connectif-products"] // VTEX Slider Layout component 
}, 
"slider-layout#connectif-products": { 
  "props": { 
    "itemsPerPage": { 
      "desktop": 3, 
      "tablet": 3, 
      "phone": 1 
    }, 
    "infinite": true, 
    "fullWidth": false, 
    "blockClass": "shelf" 
  } 
},

Example explanation:

  • connectif.product-recommendation: receives an “id” in its props. This id is the identifier that you must configure in the "Share Data" node.
  • list-context.product-list-static#connectif-products: wraps the product-summary.shelf block and contains the slider-layout#connectif-products component.
  • product-summary.shelf: is the native VTEX component used to display product information.
  • slider-layout#connectif-products is the customizable carousel settings component, which allows you to configure how many products are displayed on each device.

 

 

Congratulations!
You've reached the end of the lesson.

  

Still have questions?
Remember that our Connectif specialists are available for you. To contact them, just open a ticket to Support by clicking the blue “Help” button on your dashboard.

Keep learning!

To make the most of your Connectif account, we recommend continuing with the following articles: