In order to get Recommendations live on your site there are two things that need to be done:
- Step 1 - Add a Javascript Snippet
- Step 2- Add a HTML-tag per container
- Optional step - Add styling to the recommender
Step 1 - Javascript
Add a javascript snippet to the bottom of your <BODY> tag on every page where you want to use Recommendations.
<script async src="https://static.sooqr.com/recommendations/sooqr-recommender.js"></script>
Step 2 - HTML-tag per carousel
For every carousel (container) you want to add to your store, you will need to place an HTML tag. This tag has some optional attributes.
<ins
class="sqr-recommender"
data-sqr-container-uuid="<CONTAINER UUID>"
</ins>
The Container UUID can be found under the name of the recommendations container in Spotler Activate Search. But the easiest option is to click Options and click Copy Script. That will copy the script to your clipboard.
The options to use for the HTML tag:
Attribute | Required | Type | Description |
---|---|---|---|
data-sqr-placeholder-uuid | YES | string | Unique identifier of placeholder (UUID) |
data-sqr-product-id | Only required for Product-based Recommendations | string | Product ID to show recommendations for. Required for Product-based Recommendations. |
data-sqr-items-per-page | NO | number | Limit the number of items per slide page |
data-sqr-automatic-sliding | NO | bool | Enable or disable automatic sliding (default: true) |
data-sqr-slide-timeout | NO | number | Interval between each slide, in milliseconds (default: 3000) |
Optional step - Add styling to the recommender
Adding custom styling to the Recommender can help it to blend into your webshop more seamlessly. However, navigating the complicated maze that is CSS-classes can be a bit overwhelming. To that purpose, we’ve created a list of CSS classes and elements with a short description of their function below, in LESS / SCSS format. You can use these classes in your own CSS-file to attribute styling to the Recommender.
Please note that the short description of the element the class is on is written as a comment above the class.
// The main outer div of the recommender.
.sqr-recommender {
// Overlay div for the recommender slider.
.srq-recommender-slider-container {
// Title of the recommender slider
.srq-recommender-slider-title {
}
// Navigation arrow left.
.sqr-recommender-navigation.is--left {
// Icon of the navigation arrow.
.sqr-recommender-navigation.is--left span {
}
}
// Navigation arrow right.
.sqr-recommender-navigation.is--right {
// Icon of the navigation arrow.
.sqr-recommender-navigation.is--right span {
}
}
// Outer div for the recommender tile.
.srq-recommender-slider-outer {
// Flex div for the recommender tile.
.srq-recommender-slider {
// Inner div for the recommender tile.
.sqr-recommender-slide {
// Anchor for the recommender tile.
.sqr-recommender-link.sqr-recommender-title {
// Container for the image.
.sqr-recommender-image-container {
// Image, img element.
.sqr-recommender-image {
}
}
// Title of the individual recommender item.
.sqr-recommender-title {
}
// Price of the individual recommender item.
.sqr-recommender-prices {
}
}
}
}
}
}
}