A fork of Eric Hayes's shopify-cart-fetch
Shopify Cart API with zero dependencies, written in TypeScript, and under 1kb gzipped.
For more detailed documentation, see the docs
yarn add shopify-cart-fetch
npm install shopify-cart-fetch
import { ShopifyCart } from 'shopify-cart-fetch';
// use default settings
const shopifyCart = new ShopifyCart();
// provide custom settings
const shopifyCart = new ShopifyCart(settings);
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 one or more items to the cart.
- 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));
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
- form:
HTMLFormElement
Returns Promise<CartItemsResponse>
<form>
<input type="hidden" name="id" value="39766656254012" />
<input type="hidden" name="quantity" value="1" />
</form>
const form = document.querySelector('form');
form.addEventListener('submit', () => {
shopifyCart.addItemFromForm(form).then((lineItems) => console.log(lineItems));
});
Clear all cart attributes from Shopify and return the state.
Returns Promise<CartState>
shopifyCart.clearAttributes().then((state) => console.log(state));
Set all quantities of all line items in the cart to zero.
Returns Promise<CartState>
shopifyCart.clearItems().then((state) => console.log(state));
Remove the cart note.
Returns Promise<CartState>
shopifyCart.clearNote().then((state) => console.log(state));
Removes an item from the cart using line item key or product id.
- 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 the cart attributes.
- attributes:
Attributes
Returns Promise<CartState>
shopifyCart.updateAttributes({ 'gift wrap': 'true' }).then((state) => console.log(state));
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.
- item:
CartItemUpdate
Returns Promise<CartState>
shopifyCart.updateItem({ id: 39766656254012, quantity: 3 }).then((state) => console.log(state));
Update or create a cart note.
- note: string
Returns Promise<CartState>
shopifyCart.updateNote('updated note').then((state) => console.log(state));
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
Triggered after Shopify Cart has completed initialising.
document.addEventListener('cart:ready', (event) => {
const { cart, route } = event.details;
// Event handling here.
});
Triggered after Shopify Cart has completed initialising.
document.addEventListener('cart:requestStarted', (event) => {
const { cart, route } = event.details;
// Event handling here.
});
Triggered after Shopify Cart has completed initialising.
document.addEventListener('cart:requestComplete', (event) => {
const { cart, route } = event.details;
// Event handling here.
});