On Website

Recommendation Widgets

There are various recommendation widgets (ex: alternative products, basket recommendations, top sellers) that can be used across different pages on your website.

In technical terms a widget is a javascript snippet that requests an array of recommended products from the RMC servers depending on the recommendation algorithm and the specific visitor/customer.

Different recommendation widgets require different parameters like "Category Top Sellers" needs the category code as a parameter whereas an "Alternative Products" widget needs the product being viewed as a parameter. This causes slight differences between the implementation of widgets.

On this Page:

How to Show Recommendation Widgets on your Website

To get the javascript code for your specific widget; visit Personalize > Widgets. You should see the list of widgets as shown below:

Click on Edit next to the Widget Name that you would like to get the code for. You will see a screen similar to the one shown below. The template code is on the bottom part of the screen. Just copy the code and paste it to the specific page.

Do not forget that a widget only returns a recommended product array and you need to implement it according to your requirements in order to display relevant recommendations on your website.

Example Usage

<script>
var vl = new Visilabs();
vl.AddParameter("json",true);
vl.Suggest(1,null,null,TopSellers);
function TopSellers(dataArr){
if (dataArr.length>0){
$.each(dataArr,function(index,element){
$("#content").append("<div><a href='"+element.dest_url+"'>
<img src='"+element.img+"'></a>"+
"<p>Title: "+element.title+"</p>+
"<p>Org.Fiyat"+element.price+"</p>"+
"<p>Disc.Fiyat"+element.dprice+"</p></div>");
});
}
</script

List of Attributes

"title": "Product Name",
"img": "Product Image URL",
"code": "Product Code",
"target": "_self",
"dest_url": "www.website.com/prodpage?OM.zn=widget_adi&OM.zpc=productcode",
"brand": "product brands",
"price": 18.5000, // original price of product
"dprice": 9.0000, // discounted price of product
"cur": "USD", // original price currency
"rating": 0, // customer rating of product
"comment": 0, // number of comments by customers 
"freeshipping": false, // 
"samedayshipping": false, 
"attr1": "", // product attribute (can be anything like color,size)
"attr2": "",
"attr3": "",
"attr4": "",
"attr5": ""

Filtering Recommendation Widgets

You can add filter for the recommendation widgets.

Available Values for Filtering

Name, Category, ProductName, Brand, Color, Material, Gender, AgeGroup, Attribute1, Attribute2, Attribute3, Attribute4, Attribute5, FreeShipping ( “true” veya “false” ), ShippingOnSameDay (“true” veya “false”)

new VL_OfferFilter("Name",VLOfferFilterType.Include,"Value");

Value: These values are comes from the product file. The filtering value must be the same as the value sent in the product file.
Type: Takes VLOfferFilter.Include & VLOfferFilter.Exclude as filter type. Determines whether products should be imported according to the given value.

Example Usage

<script>
var arrFilter = [];
var filterColor = new VL_OfferFilter("COLOR", VL_OfferFilterType.Include, "Mavi");
var filterBrand = new VL_OfferFilter("BRAND", VL_OfferFilterType.Include, "Nike");
arrFilter.push(filterColor);
arrFilter.push(filterBrand);
var vl = new Visilabs();
vl.AddParameter("json",true);
vl.Suggest(ZoneID,null,ViewedProductCode,callBack,null,arrFilter);
</script>

Parent Topic: Getting Data