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);
});