Klant gegevens verzamelen

In de context van een maatwerk checkout is het verzamelen en verwerken van klantinformatie een cruciaal aspect. In deze gids gebruiken we de Afosto Storefront JavaScript-client om gegevens te verzamelen en verwerken, zoals contactinformatie van de klant en verzend- en factuurgegevens.

Contact

De eerste stap is het definiëren van de benodigde informatie over de klant. De vereiste velden zijn email, givenName, familyName en isGuest, waarbij additionalName optioneel is.

```js
const contactData = {
  email: 'customer@afosto.com',
  isGuest: true,
  givenName: 'John',
  additionalName: 'Michael',
  familyName: 'Appleseed',
};

Als je te maken hebt met een bestaande klant, kun je hun ID gebruiken in plaats van het contact object.

## Organisatie

Voor zakelijke bestellingen kan er ook een organisatie-entiteit aan de klant worden toegevoegd. Dit vereist de velden naam, isGuest en administration.email, met ccNumber en registration als optioneel.

const organisationData = {
  name: 'Afosto',
  isGuest: true,
  administration: {
    email: 'organisation@afosto.com',
  },
  ccNumber: '123456789',
  registration: {
    countryCode: 'NL',
    number: 'NL123B456789',
  }
};

## Telefoonnummer

Vervolgens kunnen we een telefoonnummer toevoegen aan de klant en aan de winkelwagen. Hiervoor zijn de velden countryCode en number vereist.

const phoneNumberData = {
  countryCode: 'NL',
  number: '0507119519',
};

## Verzendadres

Het laatste stukje data dat verzameld moet worden, is het verzend- en factuuradres. Beide adressen hebben hetzelfde formaat en bevatten de vereiste velden: countryCode, locality, postalCode, addressLine1, thoroughfare, en premiseNumber..

const shippingAddressData = {
  countryCode: 'NL',
  locality: 'Groningen',
  administrativeArea: 'Groningen',
  postalCode: '9723JA',
  addressLine1: 'Kieler Bocht 15C',
  addressLine2: null,
  premiseNumber: '15',
  premiseNumberSuffix: 'C',
  thoroughfare: 'Kieler bocht',
  givenName: 'John',
  additionalName: 'Michael',
  familyName: 'Appleseed',
  organisation: 'Afosto',
};

## Factuuradres

Je kunt hetzelfde object hergebruiken voor het factuuradres of een ander adres definiëren.

const billingAddressData = {
  ...shippingAddressData,
  // or define a different address with the same fields
};

## Informatie toevoegen aan winkelwagen

Met deze opgeslagen data is het tijd om een GraphQL-mutatie te maken om de informatie aan de winkelwagen toe te voegen. Deze mutatie combineert meerdere bewerkingen, zoals het aanmaken van een klant, het toevoegen van een telefoonnummer en het toewijzen van verzend- en factuuradressen. Hoewel deze mutaties in dit voorbeeld zijn gecombineerd, kunnen ze ook afzonderlijk worden gebruikt.

Het onderstaande voorbeeld laat zien hoe je de verzamelde gegevens samenvoegt in een enkele mutatie.

import StorefrontClient, { gql, CoreCartFragment } from '@afosto/storefront';

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

// get the cart id from the search params
const params = new URL(document.location).searchParams;
const cartId = params.get('cart_id');

const contactData = {
  // contact data
};
const organisationData = {
  // organisation data
};
const phoneNumberData = {
  // phone number data
};
const shippingAddressData = {
  // shipping address data
};
const billingAddressData = {
  // billing address data
}

// Combine the addresses into an object for easy reuse
const addressingData = {
  billing: billingAddressData,
  shipping: shippingAddressData,
};

// merge data

 into the contact and organisation and combine
// contact and organisation into a customer object.
const customerData = {
  contact: {
    ...contactData,
    phoneNumber: phoneNumberData,
  },
  organisation: {
    ...organisationData,
    phoneNumber: phoneNumberData,
  },
};

const variables = {
  customerInput: { cartId, customer: customerData },
  phoneNumberInput: { cartId, phoneNumber: phoneNumberData },
  shippingAddressInput: { address: shippingAddressData, cartId, type: 'ADDRESS' },
  billingAddressInput: { address: billingAddressData, cartId },
  // optional fields to use for fetching pickup points in the return data
  countryCode: billingAddressData?.countryCode,
  postalCode: billingAddressData?.postalCode,
};

const query = gql`
  mutation AddInformationToCart(
    $customer_input: AddCustomerToCartInput!
    $phone_number_input: AddPhoneNumberToCartInput!
    $shipping_address_input: AddShippingAddressToCartInput!
    $billing_address_input: AddBillingAddressToCartInput!
    $country_code: String!
    $postal_code: String!
  ) {
    addCustomerToCart(input: $customer_input) {
      cart {
        id
      }
    }
    addPhoneNumberToCart(input: $phone_number_input) {
      cart {
        id
      }
    }
    addShippingAddressToCart(input: $shipping_address_input) {
      cart {
        id
      }
    }
    addBillingAddressToCart(input: $billing_address_input) {
      cart {
        options {
          shipping {
            methods {
              id
              name
              description
              instruction
              carrier
              is_pickup_point
              pickup_points(country_code: $country_code, postal_code: $postal_code) {
                id
                name
                carrier
                distance
                address {
                  country_code
                  administrative_area
                  locality
                  postal_code
                  address_line_1
                  thoroughfare
                  premise_number
                  premise_number_suffix
                }
              }
              pricing {
                fixed
                percentage
              }
            }
          }
        }
        shipping {
          method {
            id
          }
        }
        ...CoreProjectionFields
      }
    }
  }
`;

const response = await client.query(query, variables);

Met de Afosto Storefront JavaScript-client wordt het verzamelen en beheren van klantinformatie een eenvoudig en gestroomlijnd proces.