JS Doc

Current version: 1.1.0

Our You May Also Like widget provides an image based recommendation engine for your site. This widget presents the recommended results in a slick carousel format as shown below:

recommendation-example-gif

Quick start

This quick start guide demonstrates how to load and initialize our ViSenze You May Also Like widget. This guide uses basic options to initialize the widget. However, you can also customize advanced options if you want to do so.

Setup the Widget

2 simple steps to integrate our You May Also Like widget:

Place the placeholder element
Initialize the widgets in javascript

1. Place the placeholder element

Simply place the placeholder html element at your desired page location. The widget will embed the You May Also Like section inside this placeholder element.

<div id="vs-you-may-also-like"></div>

2. Initialize the widget

To get the widget linked with your data, you need to initialize widget using the following js code snippet. The customizable parameter object contains three sub-objects:

vsSettings: parameters to configure the search options
displaySettings: parameters for UI presentation

You can place this initialization script using either inline javascript or a external javascript file.

var options = {
    vsSettings: {
        imName: 'IM_NAME', // IM_NAME - Dynamic Value, to be programmatically set on the page
        appKey: 'APP_KEY', // AppKey can be found in ViSenze Dashboard
        trackerCode: 'TRACKING_ID' // Tracking ID can be found in ViSenze Dashboard
    },
    displaySettings: {
        productDetails: { // datafeed field name to map to product card
            image: 'im_url', // fixed value
            heading: 'SCHEMA_NAME',
            productUrl: 'SCHEMA_NAME',
            label: 'SCHEMA_NAME',
            price: "SCHEMA_NAME",
            discountPrice: "SCHEMA_NAME" 
        },
    }
    customTracker: (action, params) => {} // OPTIONAL, pass tracking events to custom tracker defined here
};

// define the widget src
var vsYamlSrc = "//cdn.visenze.com/widgets/dist/js/youmayalsolike.1.1.0.js";
var vsYamlScript = document.createElement('script');                
vsYamlScript.setAttribute('src', vsYamlSrc);
vsYamlScript.async = true;
document.head.appendChild(vsYamlScript);

// first time widget load, wait for async loading finish
vsYamlScript.addEventListener('load', function() {
    YouMayAlsoLike(options); // Invoke the widget with config options
})

Please update the following parameters in the code snippet according to your own app configurations:

Parameters	Explanation
`IM_NAME`	This is the same `im_name` used in datafeed indexing. This field need to be programmatically generated (Either use JS selector to retrieve from the page, or use server side to push the value). Detailed explanation on `im_name` can be found here.
`APP_KEY`	This is the credential to call our API. You should be able to find these in the Integration/Client-side Integration section on dashboard. Detailed explanation on key pairs can be found here.
`SCHEMA_NAME`	The corresponding schema field values to be linked. The value of the schema should be the one that is being configured in your schema setting. You can find the full list in the Your Images -> Schema section on dashboard. Detailed explanation on schema configuration can be found here.

That's it! With these 2 simple steps, you should be able to see the widget on your page. If you need any advanced customizations, please feel free to talk to us or refer to the Advanced Options below.

Advanced options

Below are the additional config options that we have in the widget. In the widget source code, we have default value for these advanced options. You can update the value by copying the option to its corresponding sub-structure in the initialization script and update the config value. The widget will replace the default value with the value you specified.

vsSettings

You can config the vsSettings section in the Config Options to apply addition controls to the /uploadsearch API:

vsSettings: {
    appKey: 'APP_KEY',
    //----Additional Configs----//
    fq: [], // Any custom fq specified here will be applied to all /uploadsearch calls
    limit: 25, // The number of results per page
    additionalParams: {} // additional API parameters to be specified, in key-value pair format 
}

displaySettings

You can config the displaySettings section in the Config Options to customize the UI elements

displaySettings: {
        youMayAlsoLikeSelector: 'vs-you-may-also-like',
        title: 'YOU MAY ALSO LIKE', // Solution Title, leave empty '' if it is not required
        currencySymbol: '$', // Currency Symbol
        productImageAspectRatio: '100%', // Original ProductCard Image Height / Width %

        // when click on product, redirect to same tab or new tab
        clickRedirectToNewTab: true, 

        // functionality of Carousel Slider
        draggable: true, // Toggle Drag to Slide feature on Carousel
        cardsToScroll: 2, // No of Product Card to scroll at one time
        cardsToShow: 4, // No of Product Card to show on page
        dots: true, // Toggle navigation dots below the Carousel
        // responsive settings for the Carousel display
        responsive: [
                    {
                        breakpoint: 994,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 500,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2,
                            dots:false
                        }
                    }
                ]


        //Custom styles to be applied to product image. 
        productImageStyle: {
            // Use Camel Case for CSS attributes -> e.g border-radius => borderRadius
            borderRadius: '0', 
        },

        //Custom styles to be applied to product card.
        productCardStyle: { 
            // Use Camel Case for CSS attributes -> e.g box-shadow => boxShadow
            border: 'none',
            borderRadius: '0',
            padding: '6px',
            transition: 'none',
            boxShadow: 'none',
        },

        productDetails: { // datafeed field name to map to product card
            image: 'im_url', // fixed value
            heading: 'SCHEMA_NAME',
            productUrl: 'SCHEMA_NAME',
            label: 'SCHEMA_NAME',
            price: "SCHEMA_NAME",
            discountPrice: "SCHEMA_NAME" 
        }
    }