TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published


Afosto Storefront Client

npm version License

This library provides a JS client which communicates with the Afosto GraphQL storefront.


Yarn / NPM

# Install with Yarn
yarn add @afosto/storefront

# Install with NPM
npm install @afosto/storefront


This library supports the last two versions of major browsers (Chrome, Edge, Firefox, Safari).

<script src="https://cdn.jsdelivr.net/npm/@afosto/storefront@latest/dist/umd/afosto-storefront.min.js"></script>

Get started


import StorefrontClient from '@afosto/storefront';

const client = StorefrontClient({
  storefrontToken: 'STOREFRONT_TOKEN',


const StorefrontClient = require('@afosto/storefront');

const client = StorefrontClient({
  storefrontToken: 'STOREFRONT_TOKEN',


    // Make sure you've added the afosto-storefront script (See installation). 
    // Use the code below to initialize the storefront client after the script has been loaded.
    const client = afostoStorefront.Client({
      storefrontToken: 'STOREFRONT_TOKEN'


If you would like to use the client with other configuration than the default configuration.

Option Description Default
storefrontToken (required) This is the token being used for authentication with the Afosto GraphQL storefront.
autoCreateCart Whether to automatically create a cart when adding an item if there is no cart. true
autoGenerateSessionID Whether to automatically generate a session ID for the storefront client. true
graphQLClientOptions The options that are provided to the Afosto GraphQL client. {}
storeCartToken Whether to store the cart token in web storage. true
storageKeyPrefix The prefix used for storing storefront information in web storage. 'afosto.storefront'
storageType The type of storage you would like to use for storing storefront information 'localStorage' or 'sessionStorage'. 'localStorage'


Before using these examples check the Get started section how to initialize the client.

Get cart information

// Fetch the cart information if an cart exists. Returns null when no cart exists.

const cart = await client.getCart();

Add items to cart

// Add one or multiple items to the existing cart. 
// If the autoCreateCart option is true, it will create a new cart when a cart doesn't exist yet.

const cart = await client.addCartItems([
    sku: 'sku-123',
    quantity: 1,

Remove items from the cart

// Remove items from the cart by item ids. 

const cart = await client.removeCartItems(['item_id_1', 'item_id_2']);

Add coupon code to the cart

// Add a coupon code to the cart.

const cart = await client.addCouponToCart('my-coupon-code');

Remove coupon code from the cart

// Add a coupon code to the cart.

const cart = await client.removeCouponFromCart('my-coupon-code');

Set the alpha-2 country code on the cart

// Set the alpha-2 country code on the cart.

const cart = await client.setCountryCodeOnCart('US');

Create an order by confirming the cart

// Confirm the cart which creates an order.

const order = await client.confirmCart();

Get order information

// Fetch order information for an order ID. Returns null when the order doesn't exist.

const order = await client.getOrder('order_id');

Custom queries / mutations

You can also write your own queries and mutations. For the available fields, queries and mutations you can check the Afosto GraphQL storefront.

// ES6 import
import { gql } from '@afosto/storefront';

// CJS import
const { gql } = require('@afosto/storefront');

// Browser
const gql = afostoStorefront.gql;

// Write your query / mutation
const query = gql`
  query getCart($id: String!) {
    cart(id: $id) {
      items {

// Define your variables
const variables = {
  id: 'my_cart_token',

// Execute the query / mutation
const response = await client.query(query, variables);


npm i @afosto/storefront

DownloadsWeekly Downloads






Unpacked Size

365 kB

Total Files


Last publish


  • rapid0o
  • gijsbotje
  • tdahorsten