Client setup

De Afosto Storefront Client, te gebruiken d.m.v. de @afosto/storefront JavaScript package, maakt naadloze interactie mogelijk met de Afosto GraphQL storefront. Deze handleiding helpt je deze package te installeren en configureren in je website of applicatie.

Installatie

Je kunt de Afosto Storefront Client installeren via Yarn, NPM of direct in je browser.

Yarn / NPM

Om te installeren via Yarn of NPM, voer je een van de volgende commando's uit:

```bash
# Installeren met Yarn
yarn add @afosto/storefront

# Installeren met NPM
npm install @afosto/storefront

### Browser

Als je direct integreert in een webpagina, kun je het pakket toevoegen via een scripttag. De client ondersteunt de laatste twee versies van de belangrijkste browsers (Chrome, Edge, Firefox, Safari).

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

## Aan de slag

Om de Afosto Storefront Client te gebruiken, moet je deze eerst importeren en een instantie van de client initialiseren.

### ES6

Bij gebruik van ES6 imports:

import StorefrontClient from '@afosto/storefront';

const client = StorefrontClient({
  storefrontToken: 'STOREFRONT_TOKEN',
});

### CJS

Bij gebruik van CommonJS:

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

const client = StorefrontClient({
  storefrontToken: 'STOREFRONT_TOKEN',
});

### Browser

Direct in de browser:

<script>
    const client = afostoStorefront.Client({
      storefrontToken: 'STOREFRONT_TOKEN'
    });
</script>

> Zorg ervoor dat het Afosto Storefront-script aan je webpagina is toegevoegd voordat je de client initialiseert (zie de installatiesectie hierboven).

## Configuratie

De Afosto Storefront Client kan worden geconfigureerd met verschillende opties.

**storefrontToken (vereist)**

Het token gebruikt voor authenticatie met de Afosto GraphQL storefront. Het koppelt je winkel aan een verkoopkanaal.

**autoCreateCart**

Deze boolean vertelt de client of er automatisch een winkelwagen moet worden aangemaakt als je een item probeert toe te voegen. Als het op true staat en er is geen bestaande winkelwagen, maakt de client een nieuwe aan. Standaard is dit true.

**autoGenerateSessionID**

Als je de Afosto Storefront-client gebruikt, wordt er automatisch een sessie-ID gegenereerd voor de klant. Met deze sessie-ID kunnen we de klant volgen tijdens het bestelproces. Standaard staat dit op true.

**graphQLClientOptions**

Onze [@afosto/graphql-client](https://www.npmjs.com/package/@afosto/graphql-client) heeft extra opties die je kunt gebruiken om de respons en payload die naar de GraphQL API wordt gestuurd te transformeren. Bekijk de [documentatie](https://www.npmjs.com/package/@afosto/graphql-client) om te zien welke opties beschikbaar zijn.

**storeCartToken**

Deze optie vertelt de client of hij de cart token in web storage moet opslaan. Als het op true staat, wordt de token opgeslagen in localStorage of sessionStorage, afhankelijk van het geselecteerde storageType. Standaard staat dit op true.

**storageKeyPrefix**

Stel een voorvoegsel in voor de sleutel die wordt gebruikt om de cart token op te slaan. Het standaard voorvoegsel is afosto.storefront.

**storageType**

Selecteer het type opslag om de cart token in op te slaan, wanneer storeCartToken op true staat. Dit kan localStorage of sessionStorage zijn. De standaard opslagoptie is localStorage. Let op: sessionStorage zal de cart token vergeten als een klant het tabblad van je winkel sluit.

Met de Afosto Storefront Client succesvol geïnstalleerd en geconfigureerd, kun je nu doorgaan met interactie met de Afosto GraphQL storefront en winkelwagens aanmaken en beheren.