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.
1const contactData = {
2 email: 'customer@afosto.com',
3 isGuest: true,
4 givenName: 'John',
5 additionalName: 'Michael',
6 familyName: 'Appleseed',
7};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.
1const organisationData = {
2 name: 'Afosto',
3 isGuest: true,
4 administration: {
5 email: 'organisation@afosto.com',
6 },
7 ccNumber: '123456789',
8 registration: {
9 countryCode: 'NL',
10 number: 'NL123B456789',
11 }
12};Telefoonnummer
Vervolgens kunnen we een telefoonnummer toevoegen aan de klant en aan de winkelwagen. Hiervoor zijn de velden countryCode en number vereist.
1const phoneNumberData = {
2 countryCode: 'NL',
3 number: '0507119519',
4};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..
1const shippingAddressData = {
2 countryCode: 'NL',
3 locality: 'Groningen',
4 administrativeArea: 'Groningen',
5 postalCode: '9723JA',
6 addressLine1: 'Kieler Bocht 15C',
7 addressLine2: null,
8 premiseNumber: '15',
9 premiseNumberSuffix: 'C',
10 thoroughfare: 'Kieler bocht',
11 givenName: 'John',
12 additionalName: 'Michael',
13 familyName: 'Appleseed',
14 organisation: 'Afosto',
15};Factuuradres
Je kunt hetzelfde object hergebruiken voor het factuuradres of een ander adres definiëren.
1const billingAddressData = {
2 ...shippingAddressData,
3 // or define a different address with the same fields
4};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.
1import StorefrontClient, { gql, CoreCartFragment } from '@afosto/storefront';
2
3const client = StorefrontClient({
4 storefrontToken: 'STOREFRONT_TOKEN',
5});
6
7// get the cart id from the search params
8const params = new URL(document.location).searchParams;
9const cartId = params.get('cart_id');
10
11const contactData = {
12 // contact data
13};
14const organisationData = {
15 // organisation data
16};
17const phoneNumberData = {
18 // phone number data
19};
20const shippingAddressData = {
21 // shipping address data
22};
23const billingAddressData = {
24 // billing address data
25}
26
27// Combine the addresses into an object for easy reuse
28const addressingData = {
29 billing: billingAddressData,
30 shipping: shippingAddressData,
31};
32
33// merge data
34
35 into the contact and organisation and combine
36// contact and organisation into a customer object.
37const customerData = {
38 contact: {
39 ...contactData,
40 phoneNumber: phoneNumberData,
41 },
42 organisation: {
43 ...organisationData,
44 phoneNumber: phoneNumberData,
45 },
46};
47
48const variables = {
49 customerInput: { cartId, customer: customerData },
50 phoneNumberInput: { cartId, phoneNumber: phoneNumberData },
51 shippingAddressInput: { address: shippingAddressData, cartId, type: 'ADDRESS' },
52 billingAddressInput: { address: billingAddressData, cartId },
53 // optional fields to use for fetching pickup points in the return data
54 countryCode: billingAddressData?.countryCode,
55 postalCode: billingAddressData?.postalCode,
56};
57
58const query = gql`
59 mutation AddInformationToCart(
60 $customer_input: AddCustomerToCartInput!
61 $phone_number_input: AddPhoneNumberToCartInput!
62 $shipping_address_input: AddShippingAddressToCartInput!
63 $billing_address_input: AddBillingAddressToCartInput!
64 $country_code: String!
65 $postal_code: String!
66 ) {
67 addCustomerToCart(input: $customer_input) {
68 cart {
69 id
70 }
71 }
72 addPhoneNumberToCart(input: $phone_number_input) {
73 cart {
74 id
75 }
76 }
77 addShippingAddressToCart(input: $shipping_address_input) {
78 cart {
79 id
80 }
81 }
82 addBillingAddressToCart(input: $billing_address_input) {
83 cart {
84 options {
85 shipping {
86 methods {
87 id
88 name
89 description
90 instruction
91 carrier
92 is_pickup_point
93 pickup_points(country_code: $country_code, postal_code: $postal_code) {
94 id
95 name
96 carrier
97 distance
98 address {
99 country_code
100 administrative_area
101 locality
102 postal_code
103 address_line_1
104 thoroughfare
105 premise_number
106 premise_number_suffix
107 }
108 }
109 pricing {
110 fixed
111 percentage
112 }
113 }
114 }
115 }
116 shipping {
117 method {
118 id
119 }
120 }
121 ...CoreProjectionFields
122 }
123 }
124 }
125`;
126
127const response = await client.query(query, variables);Met de Afosto Storefront JavaScript-client wordt het verzamelen en beheren van klantinformatie een eenvoudig en gestroomlijnd proces.