Skip to main content
All CollectionsInstant InventoryWidget Support
Add to Cart Button & Integration
Add to Cart Button & Integration

How to add & integrate the Add to Cart option into your website

Philippa Corrick avatar
Written by Philippa Corrick
Updated over a week ago

The diamond widget design includes an add-to-cart button but your developer still needs to create and integrate code to activate the button and make it work.

Follow these steps to implement Add to cart into your website (available only for the Instant Inventory diamond feed).

  1. RapNet Instant Inventory > Diamond Widget > Actions > Customize Design: tick the Add to Cart option.

  2. Copy the publish to website script

  3. Paste the script in the website editor under the HTML field

  4. Put in this Add to Cart code after you have copied widget script

    1. This is a basic code with no criteria.

    2. Your developer needs to modify the code and set the criteria before inserting it into your website editor.

    3. You can find this Add to Cart code on our tech website: https://technet.rapaport.com/Info/RapLink/CustomIntegration.aspx

      • Please note the script parameters.

      • Please find below an explanation for understanding the code. Click here or scroll down the page to read.

  5. The code should look like this:

Note: You do not need to use this code:


Understanding the Add to Cart code

This is an example of 'Add to Cart' code simplified.

  1. Create the product in the e-commerce platform inventory (ie. Shopify/Magento etc) by creating an event listener. This is the event listener code:
    window.addEventListener(

    'ds.addtocart',

  2. Save the output to platform inventory: In our example, the developer uses

    1. product.id to get all the diamond details: ev.detail.diamond[`shopify_product_id`] = product.id;

    2. Jquery code shown above to get details of the stones. Here's what it looks like once you've pulled the data which the developer stores before posting on the website:


      jQuery.post('https://your-website.net/createProduct', ev.detail.diamond, function(data){

      console.log(`data = ${JSON.stringify(data)}`);

      var productJSON = [{

      quantity: 1,

      id: product.variants[0].id,

      properties: {

      Colour: ev.detail.diamond.color.color,

      Clarity: ev.detail.diamond.clarity,

      Shape: ev.detail.diamond.shape,

      Polish: ev.detail.diamond.polish,

      Cut: ev.detail.diamond.cut

      }

      }]

  3. Add a trigger to the details above. This is the trigger:


    console.log(`productJSON = ${JSON.stringify(productJSON)}`);

    var xhr = new XMLHttpRequest();

    xhr.open("POST", '/cart/add.js', true);

    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.send(JSON.stringify({

    items: productJSON}))

    xhr.onload = function(res) {

    jQuery('body').trigger('added.ajaxProduct');

    };

    })

  4. If the trigger is false, it will give this error code 404:


    }).fail(function(err){

    if(err.status == 404) {

    $("#overlay").fadeIn(300); 

    jQuery.post('https://example@example.net/createProduct', ev.detail.diamond, function(data){

    console.log(`data = ${JSON.stringify(data)}`);

    var productJSON = [{

    quantity: 1,

    id: parseInt(data.id.replace("gid://shopify/ProductVariant/","")),

    properties: {

    Colour: ev.detail.diamond.color.color,

    Clarity: ev.detail.diamond.clarity,

    Shape: ev.detail.diamond.shape,

    Polish: ev.detail.diamond.polish,

    Cut: ev.detail.diamond.cut

    }

    }];

    console.log(`productJSON = ${JSON.stringify(productJSON)}`);

    var xhr = new XMLHttpRequest();

    xhr.open("POST", '/cart/add.js', true);

    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.send(JSON.stringify({

    items: productJSON}))

    xhr.onload = function(res) {

    $("#overlay").fadeOut(300);

    jQuery('body').trigger('added.ajaxProduct');

    };

    })

    .fail(function(err){

    console.log(`err = ${JSON.stringify(err)}`);

    })

    }

    })

    }

    );

  5. If the trigger is true:


    // window.document.addEventListener('ds.addtocart', e => {

    // console.error('!!!+++');

    // });

    }

    if (d.addEventListener) {

    d.addEventListener('ds.ready', function() {

    // console.error('2222');

    observeAddToCart();

    }, false);

    } else if (d.attachEvent) {

    d.documentElement.attachEvent('onpropertychange', function(event) {

    if (event.propertyName === 'ds.ready')

    observeAddToCart();

    });

    }

    }(document, window));

Did this answer your question?