Verzendmethodes
Het afhandelen van verzending is een cruciaal onderdeel van elke e-commerce oplossing. In deze sectie wordt uitgelegd hoe je beschikbare verzendmethoden kunt ophalen, inclusief afhaalpunten, en hoe je een verzendmethode kunt selecteren met behulp van de Afosto Storefront JavaScript Client. Je leert hoe je deze acties kunt uitvoeren in een aangepast afrekenproces.
Beschikbare verzendmethoden ophalen
We kunnen de verzendmethoden ophalen met behulp van de winkelwagen. Dit zorgt ervoor dat we alleen methoden krijgen die van toepassing zijn op de huidige winkelwagen en de bijbehorende informatie. Op deze manier worden alleen de methoden geretourneerd die beschikbaar zijn voor het geselecteerde verzendland. Het berekent ook eventuele prijsregels voor de verzendmethoden en voegt verzendkosten toe of verwijdert deze.
Hier is een GraphQL query voorbeeld om beschikbare verzendmethoden op te halen, inclusief afhaalpunten op basis van een postcode en landcode. Zonder postcode en landcode zullen de afhaalpunten een foutmelding geven dat deze vereist zijn.
1import { gql } from '@afosto/storefront';
2
3const query = gql`
4 query getCart($id: String!, $country_code: String!, $postal_code: String!) {
5 cart(id: $id) {
6 options {
7 shipping {
8 methods {
9 id
10 name
11 description
12 instruction
13 carrier
14 is_pickup_point
15 pickup_points(
16 country_code: $country_code
17 postal_code: $postal_code
18 ) {
19 id
20 name
21 distance
22 address {
23 country_code
24 administrative_area
25 locality
26 postal_code
27 address_line_1
28 address_line_2
29 thoroughfare
30 premise_number
31 premise_number_suffix
32 }
33 }
34 pricing {
35 fixed
36 percentage
37 }
38 }
39 }
40 }
41 }
42 }
43`;
44
45const variables = {
46 id: 'my_cart_token',
47 countryCode: 'NL',
48 postalCode: '9723JA',
49};
50
51const response = await client.query(query, variables);Een Verzendmethode Selecteren
Wanneer de klant een besluit heeft genomen, kunnen we de verzendmethode aan de winkelwagen toevoegen. Dit kan gedaan worden met het onderstaande voorbeeld.
1import { gql } from '@afosto/graphql-client';
2import CoreProjectionFields from '../CoreProjectionFieldsFragment';
3
4const AddShippingMethodToCart = gql`
5 mutation AddShippingMethodToCart($shipping_method_payload: AddShippingMethodToCartInput!) {
6 addShippingMethodToCart(input: $shipping_method_payload) {
7 cart {
8 ...CoreProjectionFields
9 id
10 delivery {
11 method {
12 id
13 name
14 }
15 }
16 }
17 }
18 }
19`;
20
21const variables = {
22 shipping_method_payload: {
23 cartId: 'my_cart_token',
24 methodId: 'selected_shipping_method_id',
25 },
26};
27
28const response = await client.query(AddShippingMethodToCart, variables);Deze query bevat ook een fragment om informatie voor de projectie te verkrijgen. Het CoreProjectionFields fragment bevat alle informatie die je nodig hebt om een kostenoverzicht te tonen. Het overzicht houdt de klant op de hoogte van extra kosten die worden toegevoegd door hun keuzes. In de gehoste afrekenpagina nemen we dit fragment op bij elke stap om het overzicht up-to-date te houden.
Afhaalpunten
Sommige vervoerders bieden methoden die afhaalpunten zijn. Met deze methoden kan een klant een nabijgelegen afhaalpunt selecteren om hun bestelling naar toe te sturen. In het eerste voorbeeld halen we de afhaalpunten op voor alle methoden die deze hebben. Met deze gegevens kun je de opties aan de klant presenteren in je afrekenproces.
Afhaalpunten Zoeken op Postcode
Als je jouw klant de mogelijkheid wilt bieden om te zoeken naar afhaalpunten op basis van een postcode, kun je de volgende query gebruiken. Het toevoegen van een zoekveld in je afrekenproces dat deze query gebruikt, zal de klant helpen het beste afhaalpunt voor hen te selecteren.
1import { gql } from '@afosto/graphql-client';
2
3const getPickupPointsForCartQuery = gql`
4 query GetPickupPointsForCart($id: String!, $postal_code: String!, $country_code: String!) {
5 cart(id: $id) {
6 id
7 delivery {
8 method {
9 pickup_points(country_code: $country_code, postal_code: $postal_code) {
10 id
11 name
12 carrier
13 distance
14 address {
15 country_code
16 administrative_area
17 locality
18 postal_code
19 address_line_1
20 address_line_2
21 thoroughfare
22 premise_number
23 premise_number_suffix
24 }
25 }
26 }
27 }
28 }
29 }
30`;
31
32const variables = {
33 id: 'my_cart_token',
34 countryCode: 'NL',
35 postalCode: '9712HW', // Update this based on user input
36};
37
38const response = await client.query(getPickupPointsForCartQuery, variables);Het afhaalpunt selecteren
Om het afhaalpunt voor een methode te selecteren, moeten we een aparte mutatie doen. Dit moet gebeuren nadat de verzendmethode is geselecteerd.
1import { gql } from '@afosto/graphql-client';
2import CoreProjectionFields from '../CoreProjectionFieldsFragment';
3
4const addPickupPointToCartMutation = gql`
5 ${CoreProjectionFields}
6 mutation AddPickUpPointToCart($pickup_point_payload: AddPickUpPointToCartInput!) {
7 addPickUpPointToCart(input: $pickup_point_payload) {
8 cart {
9 ...CoreProjectionFields
10 delivery {
11 method {
12 id
13 name
14 }
15 pickup_point {
16 id
17 name
18 }
19 }
20 }
21 }
22 }
23`;
24
25export default addPickupPointToCartMutation;Door deze stappen te volgen, kun je verzendmethoden effectief beheren in je aangepaste afrekenproces met de Afosto Storefront JavaScript Client. De volgende stap is het selecteren van een betaalmethode.