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

  • Programmers need to integrate code in order for the Add to Cart button to function.

  • Add to Cart integration is for Instant Inventory diamond feed and API only.

  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 Technet: 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?