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).
RapNet Instant Inventory > Diamond Widget > Actions > Customize Design: tick the Add to Cart option.
Copy the publish to website script
Paste the script in the website editor under the HTML field
Put in this Add to Cart code after you have copied widget script
This is a basic code with no criteria.
Your developer needs to modify the code and set the criteria before inserting it into your website editor.
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.
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.
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',
Save the output to platform inventory: In our example, the developer uses
product.id to get all the diamond details: ev.detail.diamond[`shopify_product_id`] = product.id;
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
}
}]
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');
};
})
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)}`);
})
}
})
}
);
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));