The Instant Inventory diamond widget includes an optional Add to Cart button, but this feature requires developer integration to function on your retail website.
Note: The Add to Cart functionality is available only for the diamond widget (not jewelry).
Step-by-Step: Enable & Integrate Add to Cart
Enable Add to Cart in Widget Settings
Go to RapNet Instant Inventory > Diamond Widget > Actions > Customize Design > Tick the Add to Cart checkbox > Save to update your widget
Copy & Paste the Widget Script
Click Publish to My Website > Copy the widget script
Paste it into your website’s HTML field
Add the Add to Cart Integration Code after the widget script
This is a basic code with no criteria. Your developer needs to modify the code and set the correct criteria before inserting it into your website.
You can find the Add to Cart integration code on our tech site - https://raptech.rapaport.com/instant-inventory/#add-to-cart-integration
Please note the script parameters. Below is a simplified explanation of the code, followed by a full code sample.
Your developer must configure it to work with your e-commerce platform (Shopify, Magento, WooCommerce, etc)
Understanding the Add to Cart Code
To integrate the "Add to Cart" functionality, you'll need to set up an event listener in your e-commerce platform's inventory (e.g., Shopify, Magento). Here’s a breakdown of the steps:
1. Set up the event listener
Create an event listener to trigger the "Add to Cart" action:
javascriptCopyEditwindow.addEventListener('ds.addtocart', function(ev) {2. Save the diamond details to the platform's inventory
For example, using product.id, the developer saves the diamond details:
javascriptCopyEditev.detail.diamond['shopify_product_id'] = product.id;
3. Use jQuery to send the product details to the website
Once the data is pulled, the developer can store it and send it to the website:
javascriptCopyEditjQuery.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 } }];4. Trigger the Add to Cart action and handle success
javascriptCopyEdit 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'); }; });5. Handle errors (e.g., 404 not found)
If the product is not found (404 error), the system will attempt to create the product again:
javascriptCopyEdit.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)}`); }) } });6. Observe Add to Cart status
Finally, the code can observe the ds.addtocart event for readiness:
javascriptCopyEditif (d.addEventListener) { d.addEventListener('ds.ready', function() { observeAddToCart(); }, false); } else if (d.attachEvent) { d.documentElement.attachEvent('onpropertychange', function(event) { if (event.propertyName === 'ds.ready') observeAddToCart(); }); }This version should be much cleaner and more readable, and it keeps the same tech
Listens for
ds.addtocarteventCollects diamond data from the widget
Formats and sends the item to your cart using platform-specific logic
Includes error handling and retry logic for failed requests
📌 Sample logic includes:
Developer Notes
The example provided is for Shopify, but can be adapted to other platforms.
Be sure to check and modify:
product.idEndpoint URLs
Required product properties
Add error handling and confirmation for production use.