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.
import {getCart} from '@elkfox/shopify-theme/scripts/cart';
​
getCart();
Event listener
You can also listen for the getCart event throughout your project.
 document.addEventListener('cart:get', (event) => {
   // console.log(event.detail.json);
 });
addItem
Adds an item to the cart.
Requires variant id and quantity
Also accepts properties as an array of value pairs, ie { key : value }
import {addItem} from '@elkfox/shopify-theme/scripts/cart';
​
addItem(item, (result) => {
  // console.log(result)
});
Event listener
 document.addEventListener('cart:added', (event) => {
   // console.log(event.detail.json);
 });
updateCart
Updates line items, cart notes and cart attributes.
Accepts properties as an array of value pairs, ie { key : value }
import {updateCart} from '@elkfox/shopify-theme/scripts/cart';
​
updateCart(data, (result) => {
  // console.log(result)
});
Event listener
document.addEventListener('cart:update', (event) => {
  // console.log(event.detail.json);
});
updateItem
Updates the quantity of a line item.
Requires variant id or line index, and quantity
 import {updateItem} from '@elkfox/shopify-theme/scripts/cart';
​
 updateItem(data, (result) => {
   // console.log(result)
 });
Event listener
 document.addEventListener('cart:change', (event) => {
   // console.log(event.detail.json);
 });
clearItems
Clears all line items, but not cart atrributes or notes.
clearItems();
Event listener
document.addEventListener('cart:clear', (event) => {
  // console.log(event.detail.json);
});
getShippingRates
Fetch the shipping rates as a JSON object.
Requires an address.
import {getShippingRates} from '@elkfox/shopify-theme/scripts/cart';
​
const address = {
  'shipping_address[country]': 'Australia',
  'shipping_address[province]': 'Victoria',
  'shipping_address[zip]': '3000',
}
​
getShippingRates(address);
Event listener
document.addEventListener('cart:get:rates', (event) => {
  // console.log(event.detail.json);
});
Last modified 2yr ago