Client setup

The Afosto Storefront Client, provided by the @afosto/storefront JavaScript package, allows for seamless interaction with the Afosto GraphQL storefront. This guide will help you install and configure this package in your website or application.

Installation

You can install the Afosto Storefront Client via Yarn, NPM, or directly in your browser.

Yarn / NPM

To install via Yarn or NPM, run one of the following commands:

1# Install with Yarn
2yarn add @afosto/storefront
3
4# Install with NPM
5npm install @afosto/storefront

Browser

If you're integrating directly into a webpage, you can add the package via a script tag. The client supports the last two versions of major browsers (Chrome, Edge, Firefox, Safari).

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

Getting Started

To use the Afosto Storefront Client, you'll first need to import it and initialize an instance of the client.

ES6

Using ES6 imports:

1import StorefrontClient from '@afosto/storefront';
2
3const client = StorefrontClient({
4  storefrontToken: 'STOREFRONT_TOKEN',
5});

CJS

Using CommonJS:

1const StorefrontClient = require('@afosto/storefront');
2
3const client = StorefrontClient({
4  storefrontToken: 'STOREFRONT_TOKEN',
5});

Browser

Directly in the browser:

1<script>
2    const client = afostoStorefront.Client({
3      storefrontToken: 'STOREFRONT_TOKEN'
4    });
5</script>

Configuration

The Afosto Storefront Client can be configured with a variety of options.

storefrontToken (required)

The token used for authentication with the Afosto GraphQL storefront. It links your store to a sales channel.

autoCreateCart

This boolean tells the client if it should automatically create a cart when you try to add an item to a cart. If it is set to true and there is no existing cart, the client will create a new one. By default, this is set to true.

autoGenerateSessionID

When you use the Afosto Storefront client it will automatically generate a session ID for the customer. With this session ID we can follow the customer through the order process. This is set to true by default.

graphQLClientOptions

Our @afosto/graphql-client has additional options that you can use to transform the response and payload that is sent to the GraphQL API. To see what options are available, check the documentation.

storeCartToken

This option tells the client if it should store the cart token in web storage. If set to true, the cart token will be stored in either localStorage or sessionStorage, depending on the select storageType. This is set to true by default.

storageKeyPrefix

Set a prefix for the key that will be used to store the cart token. The default prefix is afosto.storefront.

storageType

Select the type of storage to store the cart token, when storeCartToken is set to true. This can either be localStorage or sessionStorage. The default storage option is localStorage. Note that sessionStorage will forget the cart token when a customer closes the tab of your store.

With the Afosto Storefront Client successfully installed and configured, you can now proceed to interact with the Afosto GraphQL storefront and create and manage carts.