Unified Shipping Module - Integration

Example

Usage

Add the configuration and script tag anywhere in HEAD or BODY

<link href="https://widget.porterbuddy.com/v2/porterbuddy-checkout.css" rel="stylesheet" type="text/css"/>
<script async src="https://widget.porterbuddy.com/v2/porterbuddy-checkout.js"></script>

Configure the checkout options by defining the global variable "window.porterbuddy" in a script tag. If window.porterbuddy is not defined when the script loads it will delay execution for up to 10 seconds until it finds the configuration.

Shipping Options

The shipping options for each category are defined in the respective array property of the configuration object. A shipping option can be a simple shipping option without any further data to be selected by the recipient, a pickup point option that provides one or more pickup addresses, from which the recipient can select one, a shipping option with a dropdown for service levels with individual prices and delivery times, or Porterbuddy shipping with a list of selectable delivery windows.

The shipping option type is set according to these rules:

• If a property availabilityResponse is present, it's shown as Porterbuddy Shipping
• If a property locations is present, it's shown as pickup point option
• If a property levels is present, it's shown as service level option
• Otherwise, it's shown as simple shipping option

Home Delivery Options

<script>
  var hostUrl = window.location.protocol + '//' + window.location.host;

  var deliveryWindows = [
    {
      product: 'delivery',
      start: '2019-03-14T17:30:00+01:00',
      end: '2019-03-14T19:30:00+01:00',
      expiresAt: '2019-03-14T14:30:00+01:00',
      price: {
        fractionalDenomination: 14900,
        currency: 'NOK',
      },
    },
    {
      product: 'delivery',
      start: '2019-03-14T19:30:00+01:00',
      end: '2019-03-14T21:30:00+01:00',
      expiresAt: '2019-03-14T14:30:00+01:00',
      price: {
        fractionalDenomination: 14900,
        currency: 'NOK',
      },
    },
    {
      product: 'delivery',
      start: '2019-03-14T17:30:00+01:00',
      end: '2019-03-14T21:30:00+01:00',
      expiresAt: '2019-03-14T14:30:00+01:00',
      price: {
        fractionalDenomination: 13900,
        currency: 'NOK',
      },
    },
    // further delivery windows omitted for readability
  ];

  var exampleAvailabilityResponse = {
    deliveryWindows: createDeliveryWindows(),
    destinationResolvedAddress: {
    streetName: null,
    streetNumber: null,
    postalCode: '0278',
    city: 'Oslo',
    country: 'Norway',
    precision: null,
    location: null,
    locationTypes: [],
  },
    consolidatedWindow: null,
  };

  var homeOptions = [
    {
      id: 'porterbuddy',
      name: 'Levert hjem',
      availabilityResponse: exampleAvailabilityResponse,
      discount: 5000,
      default: true,
    },
    {
      id: 'postnord',
      name: 'Levert hjemme',
      price: {
        fractionalDenomination: 9900,
        currency: 'NOK',
      },
      deliveryTime: { format: 'rangeOfWeekdays', minDays: 2, maxDays: 5 },
      logoUrl: hostUrl + '/logos/postnord.svg',
      additionalData: {
        product: 'Standard Insured Parcel',
      }
    },
    {
      id: 'postenhome',
      name: 'Posten på døren',
      logoUrl: hostUrl + '/logos/posten.svg',
      levels: [
        {
          id: 'bedrift',
          name: 'Posten Bedriftspakke',
          deliveryTime: { format: 'rangeOfWeekdays', minDays: 1, maxDays: 3 },
          price: {
            fractionalDenomination: 29900,
            currency: 'NOK',
          },
          description: 'Direkte til din bedrift med sporing',
        },
        {
          id: 'express',
          name: 'Posten Expresspakke',
          deliveryTime: { format: 'exactNumberOfWeekdays', days: 1 },
          price: {
            fractionalDenomination: 49900,
            currency: 'NOK',
          },
          description: 'Levering innen kl. 09:00 eller kl. 11:30 neste morgen, mandag til fredag'
        }
      ]
    }
  ];
</script>

Pickup Point Delivery Options

<script>
  var pickupOptions = [
    {
      id: 'posten',
      name: 'Hente på utleveringssted',
      price: {
        fractionalDenomination: 5900,
        currency: 'NOK',
      },
      deliveryTime: { format: 'rangeOfWeekdays', minDays: 1, maxDays: 3 },
      locations: [
        {
          id: 'location_1',
          name: 'Coop Mega Sjølyst',
          address: 'Karenslyst Allé 58, 0277 Oslo',
          openingHours: 'Man - Fre: 08:00 - 22:00, Lør: 08:00 - 20:00',
          logoUrl: hostUrl + '/logos/posten.svg',
        },
        {
          id: 'location_2',
          name: 'Hoff Post i Butikk',
          address: 'Hoffsveien 10 E, 0275 Oslo',
          openingHours: 'Man - Lør: 06:00 - 23:59',
          logoUrl: hostUrl + '/logos/posten.svg',
        },
        {
          id: 'location_3',
          name: 'Elisenberg postkontor',
          address: 'Balchens Gate 7, 0265 Oslo',
          openingHours: 'Man - Fre: 09:00 - 18:00, Lør: 10:00 - 15:00',
          logoUrl: hostUrl + '/logos/postnord.svg',
        },
      ],
    },
  ];
</script>

Store Pickup Options

<script>
  var storeOptions = [
    {
      id: 'pickup',
      name: 'Store pickup',
      deliveryTime: { format: 'exactNumberOfWeekdays', days: 0 },
      locations: [
        {
          id: 'shop',
          name: 'Butikken på Skøyen',
          address: 'Karenslyst Allé 16, 0278 Oslo',
          openingHours: 'Man - Fre: 09:00 - 17:00, Lør: stengt',
        },
      ],
      logoUrl: hostUrl + '/logos/webshop-logo.svg',
    },
  ];
</script>

Assemble the configuration object to set up the Unified Shipping Module

<script>
  window.porterbuddy = {
    homeDeliveryOptions: homeOptions,
    pickupPointOptions: pickupOptions,
    storeOptions: storeOptions,
    language: 'NO',
    recipientInfo: {
      email: 'person@porterbuddy.com',
      postCode: '0186',
      streetAddress: 'Burgata 1',
    },
    onSelectionChanged: function (type, selectedShipping) {
      // use the selection data
    }
  };
</script>

Finally, add a div with id porterbuddy-checkout to the page at the point where the module should be inserted.

<div id="porterbuddy-checkout">
</div>