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.

```js
import { gql } from '@afosto/storefront';

const query = gql`
  query getCart($id: String!, $country_code: String!, $postal_code: String!) {
    cart(id: $id) {
      options {
        shipping {
          methods {
            id
            name
            description
            instruction
            carrier
            is_pickup_point
            pickup_points(
              country_code: $country_code
              postal_code: $postal_code
            ) {
              id
              name
              distance
              address {
                country_code
                administrative_area
                locality
                postal_code
                address_line_1
                address_line_2
                thoroughfare
                premise_number
                premise_number_suffix
              }
            }
            pricing {
              fixed
              percentage
            }
          }
        }
      }
    }
  }
`;

const variables = {
  id: 'my_cart_token',
  countryCode: 'NL',
  postalCode: '9723JA',
};

const 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.

import { gql } from '@afosto/graphql-client';
import CoreProjectionFields from '../CoreProjectionFieldsFragment';

const AddShippingMethodToCart = gql`
  mutation AddShippingMethodToCart($shipping_method_payload: AddShippingMethodToCartInput!) {
    addShippingMethodToCart(input: $shipping_method_payload) {
      cart {
        ...CoreProjectionFields
        id
        delivery {
          method {
            id
            name
          }
        }
      }
    }
  }
`;

const variables = {
  shipping_method_payload: {
    cartId: 'my_cart_token',
    methodId: 'selected_shipping_method_id',
  },
};

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

import { gql } from '@afosto/graphql-client';

const CoreProjectionFields = gql`
  fragment CoreProjectionFields on Cart {
    id
    adjustments {
      description
      amount
      is_discount
      is_percentage
      outcome {
        amount
      }
    }
    items {
      ids
      brand
      mpn
      gtin
      sku
      quantity
      subtotal
      total
      image
      label
      details {
        pricing {
          amount
        }
        meta_data
      }
      vat {
        rate
        amount
      }
    }
    currency
    is_including_vat
    is_vat_shifted
    subtotal
    total
    total_excluding_vat
    fees {
      shipping {
        description
        total
        vat {
          rate
          amount
        }
      }
      payment {
        description
        total
        vat {
          rate
          amount
        }
      }
    }
    vat {
      rate
      amount
    }
  }
`;

export default CoreProjectionFields;

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.

import { gql } from '@afosto/graphql-client';

const getPickupPointsForCartQuery = gql`
  query GetPickupPointsForCart($id: String!, $postal_code: String!, $country_code: String!) {
    cart(id: $id) {
      id
      delivery {
        method {
          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
              address_line_2
              thoroughfare
              premise_number
              premise_number_suffix
            }
          }
        }
      }
    }
  }
`;

const variables = {
  id: 'my_cart_token',
  countryCode: 'NL',
  postalCode: '9712HW', // Update this based on user input
};

const 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.

import { gql } from '@afosto/graphql-client';
import CoreProjectionFields from '../CoreProjectionFieldsFragment';

const addPickupPointToCartMutation = gql`
  ${CoreProjectionFields}
  mutation AddPickUpPointToCart($pickup_point_payload: AddPickUpPointToCartInput!) {
    addPickUpPointToCart(input: $pickup_point_payload) {
      cart {
        ...CoreProjectionFields
        delivery {
          method {
            id
            name
          }
          pickup_point {
            id
            name
          }
        }
      }
    }
  }
`;

export default addPickupPointToCartMutation;

import { gql } from '@afosto/graphql-client';

const CoreProjectionFields = gql`
  fragment CoreProjectionFields on Cart {
    id
    adjustments {
      description
      amount
      is_discount
      is_percentage
      outcome {
        amount
      }
    }
    items {
      ids
      brand
      mpn
      gtin
      sku
      quantity
      subtotal
      total
      image
      label
      details {
        pricing {
          amount
        }
        meta_data
      }
      vat {
        rate
        amount
      }
    }
    currency
    is_including_vat
    is_vat_shifted
    subtotal
    total
    total_excluding_vat
    fees {
      shipping {
        description
        total
        vat {
          rate
          amount
        }
      }
      payment {
        description
        total
        vat {
          rate
          amount
        }
      }
    }
    vat {
      rate
      amount
    }
  }
`;

export default CoreProjectionFields;

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.