Skip to main content

JSON Integration: Add to Cart Page

The add to cart page is typically any page displayed immediately after a customer adds a product to their shopping cart. It is a distinct page separate from the cart, typically offering other products, options, or information relevant to the product just added to the cart. It may be a modal window or an interstitial page before cart, such as an options page.

How To Make This Code Work For You

Follow the sample integration code below, making these changes:

Function Requirement
R3_COMMON.setApiKey('API Key'); Replace API Key with your site’s API key, a unique identifier for your account.
R3_COMMON.setBaseUrl(window.location.protocol+'//RR Server'); Set RR Server URL to one of the following values:

For initial development:
For production:
R3_COMMON.setSessionId('User Session ID'); Replace User Session ID with the session ID for the current user and session. The session ID is a crucial variable that allows Algonomy to track shopper behavior when they visit your site so recommendations can be generated. This parameter should remain the same from start to finish for a user’s shopping session.
R3_COMMON.setUserId('User ID'); Replace User ID with the user ID, a unique string to identify each user. All user behavior will be stored using this key. It is case-sensitive and should be the same UserId sent to Algonomy in other applications. User IDs are often connected to email addresses, and can be directly linked to the login credentials a consumer uses to log into and buy products from the e-commerce site. To avoid sending personally identifiable information to Algonomy, you can use a hash of your site’s user ID (if, for example, your site uses email addresses as user IDs, then you should not send that information directly to Algonomy).

Note: If the User ID is unknown, leave it blank.
R3_ADDTOCART.addItemIdToCart('Item ID','SKU'); Replace Item ID with the item ID, a unique identifier for the item.
Replace SKU with the specific SKU the user has added to the cart. If there is no SKU ID, this can be left empty.​
R3_COMMON.addPlacementType('add_to_cart_page.Placement Name'); Replace Placement Name with the Placement ID. You can find your Placement IDs in the Dashboard under the Placements section. If you do not display personalization on this page, call R3_COMMON.addPlacementType('add_to_cart_page');instead.

No changes are required.

This code enables the client to send the domain for click-through URL through the p13n_generated.js call if relative URLs are supplied in the feed. For example, if the domain calling our code is or, we can automatically redirect to the correct domain.

Sample Integration Code

Algonomy JavaScript Library

<!-- Primary function library placed before the callback and Primary Code Block. -->
<script src="//"></script>

Callback Function

This function will consume the JSON response object. Place anywhere in between your <script> tag that loads p13n.js and the r3() function call.

<script charset="utf-8" type="text/javascript">
  RR.jsonCallback = function(){
    // Place your rendering logic here. Actual code varies depending on your website implementation.

Primary Code Block

<!-- Place this code inside the <body> element as close to the top as possible -->
<script charset="utf-8" type="text/javascript">
  var R3_COMMON = new r3_common();
  R3_COMMON.setUserId('10987');  // if no user ID is available, please leave this blank
  // Use this code if you are not requesting placement(s) for personalization

  // Use this code if you are not requesting placement(s) for personalization
  // Replace placement_name with the placement name you set up in Dashboard.
  // Call multiple times to display more than one placement.

  var R3_ADDTOCART = new r3_addtocart();

Integration with FindTM

Find requires additional parameters on the add to cart request. If there is already an add to cart integration on product detail page, then store the add to cart parameters returned by the search request, on local storage under a key like 'rr-find-atcparams' on the search results page. 

Add the code similar to following before making r3() call to launch add to cart event.

if(localStorage) {
    var productId = '';
    //example parameter : query=blue&lang=pt&page=1&searchConfigId=1234ABC
    var findA2CParameters = localStorage.getItem('rr-find-atcparams');
    var params = JSON.parse('{"' + decodeURI(findA2CParameters.replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}');
    if(params.query && params.lang && && params.searchConfigId) {
          "st": params.query,
          "lang": params.lang,
          "searchConfigId": params.searchConfigId


Please note that, the above is not a working code. It's a pseudo code to exemplify the logic. 


  • Placements requested via addPlacementType() should always be displayed on the page.
  • In some situations you may wish to request for recommendations more than once, or subsequent to the context of the initial request at a time after page load. A common example of this use case is to display recommendations on an interstitial “add to cart” overlay when items are added to the cart from an item page or quick view.  For more information see: Multiple Requests.
  • Was this article helpful?