Integrate recommendations

Recommendations in Data Platform allow you to dynamically display related products on your page. To integrate this feature, you’ll use the <zoovu-recommendations> tag from the zoovu tag library. This component identifies and displays related products based on specific relationship types or IDs.

Relations are configured in the data platform.

Embedding recommendations

You can integrate recommendations into your website using either HTML or JavaScript.

HTML

Add a script to load the Zoovu tag library and configure the recommendations either via a JSON script or custom element attributes.

Example JSON configuration script

<script src="https://orca-cdn.zoovu.com/core-js/zoovu-tag-library/zoovu-tag-library-latest.min.js"></script>
<script id="zoovu-recommendations-config" type="application/json">
{
    "region": "eu",
    "projectId": 123,
    "relationType": "Compatible",
    "sku": "sku"
}
</script>
<zoovu-recommendations></zoovu-recommendations>

Example: attributes-based configuration

<zoovu-recommendations 
    region="eu" 
    project-id="123" 
    relation-type="Compatible" 
    sku="sku">
</zoovu-recommendations>

Using JavaScript API

You can dynamically create and configure the <zoovu-recommendations> element using JavaScript.

Example JavaScript integration

const script = document.createElement("script");
script.setAttribute('src', "https://orca-cdn.zoovu.com/core-js/zoovu-tag-library/zoovu-tag-library-latest.min.js");
document.head.appendChild(script);

const element = document.createElement('zoovu-recommendations');
element.setAttribute('region', "eu");
element.setAttribute('project-id', "123");
element.setAttribute('relation-type', "Compatible");
element.setAttribute('sku', "sku");

document.body.appendChild(element);

Configuration options

Property	Description	Required
region	API region: eu (Europe) or us (North America)	Yes
projectId	Zoovu project ID from the data platform	Yes
sku	Product identifier (or provide alternatives – see "retrieving SKU")	Yes (if not using a selector or attribute)
relationId	ID of the product relation to resolve recommendations	Yes (if relationType is not provided)
relationType	Type of relation to use for recommendations	Yes (if relationId is not provided)

Optional properties

Property	Description
limit	Maximum number of recommended products
layout	Display layout (grid or list)
heading	Title for the recommendations section
priceDataPoint	Name of the price attribute to display
imagePosition	Position of the product image (top, left, bottom, right)
colsLg, colsMd, etc.	Number of columns in grid layout for various screen size

Retrieving SKU dynamically

If the product SKU is not explicitly provided, the <zoovu-recommendations> component can extract it from the page using these methods (in order of priority):

From an element with a CSS selector

Use the skuSelector property to point to the element containing the SKU.

Example:

{ "skuSelector": ".sku" }

This extracts the SKU from <div class="sku">123</div>.

From a specific attribute.

Example:

{ "skuAttribute": "data-sku" }

This extracts the SKU from <div data-sku="123">...</div>.

If your webpage contains structured or linked data, the component will automatically attempt to extract the SKU.

Style recommendations

You can style <zoovu-recommendations> to match your website's design using CSS.

Apply global CSS styles or target specific shadow parts.

Main element styling

Example:

zoovu-recommendations {
    --heading-color: #333;
    --cta-text-color: #fff;
    --gutter: 20px;
    border: 1px solid #ccc;
}

Product card customization

Example:

zoovu-recommendations::part(product) {
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
}

Handling CTA clicks

If you include a call-to-action (CTA) button, you can listen for clicks using the cta-click event.

Example:

document.querySelectorAll('zoovu-recommendations').forEach((node) => {
    node.addEventListener('cta-click', (e) => {
        const productData = e.detail;
        console.log('CTA clicked for SKU:', productData.identifier);
    });
});