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 @hayes0724/shopify-cart-fetch

npm install @hayes0724/shopify-cart-fetch

Usage

import { ShopifyCart } from '@hayes0724/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.
})