This library provides a JS client which communicates with the Afosto GraphQL storefront. ## Installation ### Yarn / NPM ```sh # Install with Yarn yarn add @afosto/storefront # Install with NPM npm install @afosto/storefront ``` ### Browser This library supports the **last two** versions of major browsers (Chrome, Edge, Firefox, Safari). ```html ``` ## Get started ### ES6 ```js import StorefrontClient from '@afosto/storefront'; const client = StorefrontClient({ storefrontToken: 'STOREFRONT_TOKEN', }); ``` ### CJS ```js const StorefrontClient = require('@afosto/storefront'); const client = StorefrontClient({ storefrontToken: 'STOREFRONT_TOKEN', }); ``` ### Browser ```html ``` ## Configuration 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' | ## Examples Before using these examples check the **Get started** section how to initialize the client. ### Get cart information ```js // Fetch the cart information if an cart exists. Returns null when no cart exists. const cart = await client.getCart(); ``` ### Add items to cart ```js // 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 ```js // 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 ```js // Add a coupon code to the cart. const cart = await client.addCouponToCart('my-coupon-code'); ``` ### Remove coupon code from the cart ```js // Add a coupon code to the cart. const cart = await client.removeCouponFromCart('my-coupon-code'); ``` ### Set the alpha-2 country code on the cart ```js // Set the alpha-2 country code on the cart. const cart = await client.setCountryCodeOnCart('US'); ``` ### Create an order by confirming the cart ```js // Confirm the cart which creates an order. const order = await client.confirmCart(); ``` ### Get order information ```js // 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. ```js // 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) { subtotal total items { ids image label sku } } } `; // Define your variables const variables = { id: 'my_cart_token', }; // Execute the query / mutation const response = await client.query(query, variables); ```