All Collections
Product recommendation engine
HTML or JavaScript recommendation frame
HTML or JavaScript recommendation frame

Find out how to create a recommendation frame in JSON format.

Written by Martyna Woźniszczuk
Updated over a week ago

If you want your recommendation frames to:

  • contain advanced CSS3 effects,

  • contain the called actions in PHP language using the POST method,

  • display products in different languages depending on the currently active language version in the customer's browser,

  • contain the lower price of the product than the standard one due to the logged in regular customer,

it is possible to generate recommendations in JSON format. Thanks to this, the products indicated for recommendations are transmitted through the JSON format, and the appearance of the frame and the used attributes (price, name, image) are determined by the customer.

To enable such a script response format, switch the option Active JS callback mode to Yes in the Drag&drop editor.

Three additional fields will appear below:

  • JS callback code: your javascript function, which will process the JSON returned by us with the products and generate a frame on your website.

  • Select fields from the catalogue: not required; names of the fields describing the product (separated by a space) to be found in the returned JSON.

  • JS callback timeout: time in milliseconds, which defines how long our script can wait for your function to appear (value between 0 and 100000).

After entering the appropriate settings (only the function name is required) and saving the frame, the next time you call our QON.js script, instead of the widget HTML, JSON with the product list and JavaScript will be downloaded, which will call the function given in the JS callback code.

Your function provided in the JS Code callback field must accept as a parameter the JSON call with a list of products that are to appear in the widget, for example:


This recommendation variable takes over the content of the JSON object.

The example of JSON content with recommendations

quartic_rec([{"id":"389231","title":"Produkt 1","link":"","image":"","price":"7,50","old_price":"9,75","custom_1":"","custom_2":"","custom_3":"","custom_4":"","custom_5":""},{"id":"349605","title":"Produkt 2","link":"","image":"","price":"24,75","old_price":null,"custom_1":"","custom_2":"","custom_3":"","custom_4":"","custom_5":""}])

The example function that triggers recommendations

function quartic_rec(recommendations){
for (var i=0;i< recommendations.length;i++({
console.log(recommendations [i].title);

The above example function, quartic_rec will display the name of each product in the console.

Field names describing the product

In the Select from catalogue field you should specify the product fields that you want to be visible in the returned JSON. If the field is empty, JSON will contain all fields describing the product, which are:

In order to see in the generated JSON only those fields that you want, you need to enter only those of the above field names that you are interested in into the Select fields from the catalogue.

If you want only id fields to appear in the returned JSON, because the rest of the data will be downloaded from your server depending on the language version of the e-shop, enter the following content in the Select from catalogue field:

id link

How does a JSON request work?

  1. After downloading the widget snippet in JSON format with javascript, it is checked if the given function is defined. If it is, it stops the script and triggers your function with JSON with products specified as the function request parameter. If it is not defined, it tries again after 15 minutes.

  2. After the timeout specified in JS callback timeout, the script will stop working.

  3. If an error occurs while your function is triggered, the operation of the script is interrupted and information about the error is sent to us at the address:<errormessage>

Redirection from the recommendation frame to the product

In order to ensure that the QuarticOn system correctly registers clicks and sales from recommendation frames, it is required to use links to the product, which are provided in recommendations in JSON format. However, in order not to show clearly links to products redirecting through QuarticOn's servers, it is advisable to use onclick function for elements of a given recommended product. Below is an example of HTML code built in the way described above:

<a href=”″ onclick=”window.location.href = ‚;qdpi=9l89&amp;pid=4&amp;ci=50996&amp;c=a6f271f4043b5ba0&amp;p=73007&amp;ss=rtb_8329&amp;’; return false;”>Product 1</a>

As you can see in the example above, the href attribute for the clicked item remained unchanged, while using the onclick method, indicating a different URL for window.location.href with additional return false instruction, we block redirection through the standard href attribute and we implicitly use redirection through the URL specified in the onclick method.

The ultimate address of the product visible in the browser will be the original address htttp://

Did this answer your question?