Skip to content

Shopify Cart API with zero dependencies, TypeScript, lightweight and modular

License

Notifications You must be signed in to change notification settings

hayes0724/shopify-cart-fetch

Repository files navigation

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

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

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

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

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: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.
})