Implementing Add To Cart
Nosto supports the add-to-cart feature out of the box on core platforms such as Magento 1 & 2, Shopify and Prestashop.
As a platform vendor an agency looking to support the add-to-cart feature, you'll need two parts:
- 1.A controller that accepts a product-id, a variation-id or a combination of both.
- 2.A javascript function that accepts the product-id, the variation-id and the reference to the clicked button
Javascript Function
1
if (typeof Nosto === "undefined") {
2
var Nosto = {};
3
}
4
Nosto.addProductToCart = function(productId, element) {
5
Nosto.trackAddToCartClick(productId, element);
6
var fields = {
7
"product": productId,
8
"form_key": "<?php echo $formKey; ?>"
9
};
10
Nosto.postAddToCartForm(fields, "<?php echo $formAction; ?>");
11
};
12
​
13
// Product object must have fields productId and skuId {productId: 123, skuId: 321}
14
Nosto.addSkuToCart = function(product, element) {
15
Nosto.trackAddToCartClick(product.productId, element);
16
var fields = {
17
"product": product.productId,
18
"sku": product.skuId,
19
"form_key": "<?php echo $formKey; ?>"
20
};
21
Nosto.postAddToCartForm(fields, "<?php echo $this->getAddSkuToCartUrl(); ?>");
22
};
23
​
24
Nosto.resolveContextSlotId = function(element) {
25
var m = 20;
26
var n = 0;
27
var e = element;
28
while (typeof e.parentElement !== "undefined" && e.parentElement) {
29
++n;
30
e = e.parentElement;
31
if (e.getAttribute('class') === 'nosto_element' && e.getAttribute('id')) {
32
return e.getAttribute('id');
33
}
34
if (n >= m) {
35
return false;
36
}
37
}
38
return false;
39
};
40
​
41
Nosto.trackAddToCartClick = function(productId, element) {
42
if (typeof nostojs !== 'undefined' && typeof element === 'object') {
43
var slotId = Nosto.resolveContextSlotId(element);
44
if (slotId) {
45
nostojs(function(api) {
46
api.recommendedProductAddedToCart(productId, slotId);
47
});
48
}
49
}
50
};
51
​
52
Nosto.postAddToCartForm = function(data, url) {
53
var form = document.createElement("form");
54
form.setAttribute("method", "post");
55
form.setAttribute("action", url);
56
for (var key in data) {
57
if (data.hasOwnProperty(key)) {
58
var hiddenField = document.createElement("input");
59
hiddenField.setAttribute("type", "hidden");
60
hiddenField.setAttribute("name", key);
61
hiddenField.setAttribute("value", data[key]);
62
form.appendChild(hiddenField);
63
}
64
}
65
document.body.appendChild(form);
66
form.submit();
67
};
Copied!
The Javascript function must be exposed on the parent window so it that it can be directly invoked using
Nosto.addProductToCart and Nosto.addSkuToCart.Controller Endpoint
Most platforms ship with an add-to-cart controller that can be reused. (It is irrelevant whether the controller is an Ajax endpoint or not. How you update your mini-cart is highly platform specific.)
The Javascript function posts the product-id to the controller to add the product to the cart. Here are some examples of the built-in add to cart controller in some platforms
Here's an example of the built-in Magento add-to-cart controller that requires not only identifier but also the attributes of the product being added. The URL has an embedded token and the form post parameters have a CSRF token. This makes the controller hard to reuse.
screen shot 2017-10-19 at 15 22 41
Here's an example of the built-in JTL add-to-cart controller that requires not only identifier but also the attributes of the product being added. The URL is the URL of the product being added and the form post parameters have a CSRF token. This makes the controller hard to reuse.
screen shot 2017-10-19 at 15 20 55
Custom Controllers
If your controller requires additional parameters such the attribute (size and color) of the product being added, you may need to build a custom controller as these attributes aren't easily accessible in the recommendation slot. The examples that shown above highlight some of the complexities involved in reusing the built-in add to cart controller.
If you do create a custom controller, here are some proven guidelines. Your custom controller should require only the following fields:
- Product Id. / Variation Id. (or both)
- The CSRF (security) token
- The quantity
CSRF Protection
If you are reusing an existing controller, the endpoint may have some sort of CSRF protection. The CSRF token generally exists on the page and you should be able to extract it via Javascript before doing the POST. Alternatively, you could render the Javascript snippet onto the page with the CSRF token rendered into the script.
Last modified 2mo ago