You are here: Pleisty > Docs

---

Inserting widgets into your shop via API

Inserting widgets into your shop via JavaScript API is done using callback functions. For each widget, you setup a callback function that will be called when the recommended products are received from the Pleisty server.

Setting up the callback function

The syntax for setting up a callback function is the following:

<script type="text/javascript">
  // Pleisty callback setup for WIDGET_ID
  var _pleistyq = _pleistyq || [];
  _pleistyq.push(['_req_widget_callback', WIDGET_ID, options, callback_function]);
</script>

The parameters are to be set as described in the following table:

Parameter	Description
WIDGET_ID	The identifier of the widget for which recommendations are generated.
options	A JavaScript object with these fields: _items_cnt - number of recommended items _params - additional parameters for the widget (necessary for multi-purpose widgets) _params is optional and by default can be left empty, as the widget will draw its context from the page URL or JavaScript tracking. One case of using widget parameters is multi-currecy scenarios where you can add the currency as parameter in order to retrieve the product recommendations together with their prices in the specified currency.
callback_function	The JavaScript callback function that is executed when the recommendations are received from the server.

Retrieving the recommendations

The callback function receives two parameters: err and recommendation_response.

If the recommendations were generated without errors, err will be null and you will find the recommendations in the recommendation_response object. If there were errors generating the recommendations the error details will be available in the err object.

recommendation_response is an object that contains the recommended items and has the following structure:

{
  items: 
  [
    { // first recommended item
      item_code: "123", // product code
      other_attr: "attr value", // other optional attribute
    },
    { // second recommended item
      item_code: "456", // product code
      other_attr: "attr value", // other optional attribute
    }, 
    //...
  ],

  global: 
  {     
    title: "Most popular this week", // widget title (optional)
    other_attr: "value" // other optional attribute
    // ...
  }
}

Sample Code

The following snippet shows how to setup a Pleisty widget and the callback function that renders the recommended products:

<script type="text/javascript">
  var _pleistyq = _pleistyq || [];
  _pleistyq.push([
    '_req_widget_callback',
    'WIDGET ID', // Widget ID
    {
      '_items_cnt': 5,     // Desired number of recommended products (if you want to overide)
      '_params': []        // Other parameters for the widget (optional)
    },
    function (err, recommendation_response) {    
      if (err) {
        alert("Error in response from Pleisty. Please check the console");
        console.log("Pleisty  recommendation_response error", err);
      } else {
        // debug output in the browser console
        console.log("pleisty recommendation_response", err, recommendation_response);
      }
    }
  ]); 
</script>