Ajax Cart

Search…
shopify-theme
Modules
Ajax Cart
Product
Quantity inputs
Links
Github
Ajax Cart
The Ajax Cart module is a wrapper for the Shopify Ajax API.
getCart, addItem, updateCart, updateItem, clearItems and getShippingRates methods are available using this module. An additional getProduct method is currently available seperately via the Product module.
All methods include an event listener.
getCart
Fetches the current cart as a JSON object.
1
import {getCart} from '@elkfox/shopify-theme/scripts/cart';
2
​
3
getCart();
Copied!
Event listener
You can also listen for the getCart event throughout your project.
1
 document.addEventListener('cart:get', (event) => {
2
   // console.log(event.detail.json);
3
 });
Copied!
addItem
Adds an item to the cart.
Requires variant id and quantity
Also accepts properties as an array of value pairs, ie { key : value }
1
import {addItem} from '@elkfox/shopify-theme/scripts/cart';
2
​
3
addItem(item, (result) => {
4
  // console.log(result)
5
});
Copied!
Event listener
1
 document.addEventListener('cart:added', (event) => {
2
   // console.log(event.detail.json);
3
 });
Copied!
updateCart
Updates line items, cart notes and cart attributes.
Accepts properties as an array of value pairs, ie { key : value }
1
import {updateCart} from '@elkfox/shopify-theme/scripts/cart';
2
​
3
updateCart(data, (result) => {
4
  // console.log(result)
5
});
Copied!
Event listener
1
document.addEventListener('cart:update', (event) => {
2
  // console.log(event.detail.json);
3
});
Copied!
updateItem
Updates the quantity of a line item.
Requires variant id or line index, and quantity
1
 import {updateItem} from '@elkfox/shopify-theme/scripts/cart';
2
​
3
 updateItem(data, (result) => {
4
   // console.log(result)
5
 });
Copied!
Event listener
1
 document.addEventListener('cart:change', (event) => {
2
   // console.log(event.detail.json);
3
 });
Copied!
clearItems
Clears all line items, but not cart atrributes or notes.
1
clearItems();
Copied!
Event listener
1
document.addEventListener('cart:clear', (event) => {
2
  // console.log(event.detail.json);
3
});
Copied!
getShippingRates
Fetch the shipping rates as a JSON object.
Requires an address.
1
import {getShippingRates} from '@elkfox/shopify-theme/scripts/cart';
2
​
3
const address = {
4
  'shipping_address[country]': 'Australia',
5
  'shipping_address[province]': 'Victoria',
6
  'shipping_address[zip]': '3000',
7
}
8
​
9
getShippingRates(address);
Copied!
Event listener
1
document.addEventListener('cart:get:rates', (event) => {
2
  // console.log(event.detail.json);
3
});
Copied!
shopify-theme
Next - Modules
Product
Last modified 2yr ago
Copy link
Contents