Shopify Cart Fetch

A fork of Eric Hayes's shopify-cart-fetch

Shopify Cart API with zero dependencies, written in TypeScript, and under 1kb gzipped.

Documentation

For more detailed documentation, see the docs

Install

yarn add shopify-cart-fetch

npm install shopify-cart-fetch

Usage

import { ShopifyCart } from 'shopify-cart-fetch';

// use default settings
const shopifyCart = new ShopifyCart();
// provide custom settings
const shopifyCart = new ShopifyCart(settings);

Cart state

Get the cart from Shopify, which is stored in the state property.

Returns Promise<CartState>

shopifyCart.getState().then((state) => console.log(state));

console.log(shopifyCart.state);

Add items

Add one or more items to the cart.

Parameters

• items: CartItems

Returns Promise<CartItemsResponse>

shopifyCart.addItem({ id: 39766656254012 }).then((lineItems) => console.log(lineItems));

shopifyCart
  .addItem([{ id: 39766656254012 }, { id: 39766656254013 }])
  .then((lineItems) => console.log(lineItems));

Add item from form

Adds an item to your cart from a product form. The form must contain an input with name="id". If the quantity specified is more than what is available, the promise will be rejected and the cart state will remain unchanged

Parameters

• form: HTMLFormElement

Returns Promise<CartItemsResponse>

HTML

<form>
  <input type="hidden" name="id" value="39766656254012" />
  <input type="hidden" name="quantity" value="1" />
</form>

JS

const form = document.querySelector('form');

form.addEventListener('submit', () => {
  shopifyCart.addItemFromForm(form).then((lineItems) => console.log(lineItems));
});

Clear attributes

Clear all cart attributes from Shopify and return the state.

Returns Promise<CartState>

shopifyCart.clearAttributes().then((state) => console.log(state));

Clear items

Set all quantities of all line items in the cart to zero.

Returns Promise<CartState>

shopifyCart.clearItems().then((state) => console.log(state));

Clear note

Remove the cart note.

Returns Promise<CartState>

shopifyCart.clearNote().then((state) => console.log(state));

Remove item

Removes an item from the cart using line item key or product id.

Parameters

• items: CartItemRemove

Returns Promise<CartState>

Remove an item from cart using a variant id.

shopifyCart.removeItem({ id: 39766656254012 }).then((state) => console.log(state));

Remove an item from cart using the line number.

shopifyCart.removeItem({ line: 0 }).then((state) => console.log(state));

Update attributes

Update the cart attributes.

Parameters

• attributes: Attributes

Returns Promise<CartState>

shopifyCart.updateAttributes({ 'gift wrap': 'true' }).then((state) => console.log(state));

Update item

Changes the quantity and properties object of a cart line item. Only items already in your cart can be changed, and only one line item at a time can be changed.

Parameters

• item: CartItemUpdate

Returns Promise<CartState>

shopifyCart.updateItem({ id: 39766656254012, quantity: 3 }).then((state) => console.log(state));

Update note

Update or create a cart note.

Parameters

• note: string

Returns Promise<CartState>

shopifyCart.updateNote('updated note').then((state) => console.log(state));

Events

The cart will create events for requests and when it's initialized. The cart class and api route are included in all events.

• cart: ShopifyCart
• route: CartRoute

cart:ready

Triggered after Shopify Cart has completed initialising.

document.addEventListener('cart:ready', (event) => {
  const { cart, route } = event.details;
  // Event handling here.
});

cart:requestStarted

Triggered after Shopify Cart has completed initialising.

document.addEventListener('cart:requestStarted', (event) => {
  const { cart, route } = event.details;
  // Event handling here.
});

cart:requestComplete

Triggered after Shopify Cart has completed initialising.

document.addEventListener('cart:requestComplete', (event) => {
  const { cart, route } = event.details;
  // Event handling here.
});