Paazl checkout widget en requirejs

Dit artikel legt uit hoe je de Paazl checkout-widget integreert als je Require.js gebruikt. Require.js is een bibliotheek waarmee je modules als afhankelijkheden (dependencies) kunt injecteren. Als jouw webshop al Require.js gebruikt voor de eigen codebibliotheken, kun je dit ook gebruiken om de Paazl checkout-widget te integreren.

In plaats van een initialisatie-codefragment toe te voegen aan de <head>-sectie van jouw checkout-pagina zoals getoond in De Paazl checkout-widget integreren, geef je de initialisatiecode door als een Require.js-afhankelijkheid, zoals te zien is in het onderstaande voorbeeld.

Zie De Paazl checkout-widget initialiseren voor een uitleg van de verschillende parameters in het codefragment.

De parameters waaraan je verplicht een waarde moet toekennen zijn: apiKey, token, consigneeCountryCode en consigneePostalCode.

Alle andere parameters zijn optioneel. In het onderstaande codefragment hebben de optionele parameters hun standaardwaarden gekregen.

requirejs(["myPaazlCheckoutPath"], function(PaazlCheckout) {
    PaazlCheckout.init({
      mountElementId: "paazl-checkout",

      apiKey: "12345",
      token: "0a9g8ddhkj883kgfs890sh7s7gg",
      loadPaazlBasedData: true,
      loadCarrierBasedData: false,
      availableTabs: ["DELIVERY", "PICKUP", "STORE"],
      defaultTab: "DELIVERY",
      style: "GREEN",
      nominatedDateEnabled: false,

      consigneeCountryCode: "NL",
      consignorCountryCode: "NL",
      consigneePostalCode: "1019HD",
      consignorPostalCode: "1020HD",

      customerNumber: 123456789,

      numberOfProcessingDays: 5,
      tags: ["CASH_ON_DELIVERY"],

      deliveryDateOptions: {
         startDate: "2018-10-25",
         numberOfDays: 5
      },

      language: "eng",
      currency: "EUR",
      isPricingEnabled: true,
      isShowAsExtraCost: true,
      deliveryRangeFormat: "DATE",
      deliveryOptionDateFormat: "ddd DD MMM",
      deliveryEstimateDateFormat: "dddd DD MMMM",
      pickupOptionDateFormat: "ddd DD MMM",
      pickupEstimateDateFormat: "dddd DD MMMM",

      sortingModel: {
         orderBy: "PRICE",
         sortOrder: "ASC",
         distributor: "TNT",
      },

      shipmentParameters: {
         totalWeight: 3.14,
         totalVolume: 100,
         totalPrice: 14.77,
         numberOfGoods: 2,
         startMatrix: "AA",
         goods: [
            {
               quantity: 2,
               weight: 3.1,
               length: 12,
               width: 10,
               height: 88,
               volume: 1.33,
               price: 213.14
            },
            {
               quantity: 1,
               weight: 3.1,
               length: 12,
               width: 10,
               price: 113.14
            }
         ]
      },

      shippingOptionsLimit: 3,
      pickupLocationsPageLimit: 10,
      pickupLocationsLimit: 20,
      initialPickupLocations: 3
    });
 });