Getting Started

A lightweight, customizable JavaScript component for integrating Metapack delivery options into any website. Built with Svelte for optimal performance and minimal bundle size.

Installation

Add the Delivery Options Component to your website by including the script from CDN:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website</title>
</head>
<body>
    <!-- 1. Create a container for the component -->
    <div id="ddo-component-container">

    </div><!-- 2. Load the Delivery Options Component script -->
    <script src="[CDN_URL]/ddo-component.umd.js"></script>

    <!-- 3. Initialize the component -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            window.ddoComponent.init({
                containerId: 'ddo-component-container',
                backendUrl: 'https://ddo.metapack.com',

                // Authentication function (required)
                getToken: async function() {
                    const response = await fetch('https://your-backend.com/api/ddo-token');
                    const data = await response.json();
                    return data.token;},

                // Warehouse configuration (required)
                senderDetails: {
                    warehouseCode: 'UK',
                    wh_cc: 'GB',
                    wh_pc: 'SW1A 1AA'
                },
                // Callback when user selects an option
                onDeliveryOptionSelected: function(option) {
                    console.log('Selected:', option);
                    // Handle the selected delivery option
                }
            });
        });
    </script>
</body>
</html>

Minimal Example

The absolute minimum configuration requires:

Container element
Backend URL
Authentication function ( getToken)
Warehouse details ( senderDetails)

window.ddoComponent.init({
    containerId: 'ddo-component-container',
    backendUrl: 'https://ddo.metapack.com',

    getToken: async function() {
        // Call your backend to get Metapack Delivery Options authentication
token
        const response = await fetch('/api/token');
        const data = await response.json();
        return data.token;
    },
    senderDetails: {
        warehouseCode: 'UK',
        wh_cc: 'GB'
    }
});

Full Example (All Available Options)

Here's a comprehensive example showing all available configuration parameters:

window.ddoComponent.init({
    // ===== REQUIRED PARAMETERS =====
    containerId: 'ddo-component-container',
    backendUrl: 'https://ddo.metapack.com',
    
    // Authentication function (required)
    getToken: async function() {
        const response = await fetch('/api/token');
        const data = await response.json();
        return data.token;
    },

    // Warehouse/sender details (required)
    senderDetails: {
        warehouseCode: 'UK-MAIN',
        wh_cc: 'GB',
        wh_pc: 'SW1A 1AA',
        wh_l1: '123 Warehouse Street',
        wh_l2: 'Building A',
        wh_l3: 'London',
        wh_l4: 'Greater London'
    },

    // ===== DISPLAY OPTIONS =====
    title: 'Choose Your Delivery Option',
    showHeader: true,
    width: '100%',
    height: 'auto',
    customCssUrl: '/css/custom-theme.css',

    // ===== FEATURE TOGGLES =====
    enableDelivery: true,
    enableClickCollect: true,
    enableLocalCollection: true,
    combineCollectionOptions: false,
    showCountrySelector: true,

    // ===== INTERNATIONALIZATION =====
    userLocale: 'en', // 'en', 'pl', 'de', 'fr'

    // ===== MAP CONFIGURATION =====
    ownStoreIconPath: '/images/store-marker.png',

    // ===== ADVANCED OPTIONS =====
    r_t: 'lsc', // 'lgg', 'lsc', 'ggg', 'gsc'
    calendarGroupCode: 'NOMINATED',

    // ===== ORDER INFORMATION =====
    orderInformation: {
        // Dimensions
        parcelHeight: '10',
        parcelWidth: '20',
        parcelDepth: '15',
        parcelWeight: '2.5',

        // Units
        dimensions_unit: 'CM',
        weight_unit: 'KG',

        // Value
        e_v: '99.99',
        e_v_currency: 'GBP',

        // Cash on Delivery
        cod_amount: '99.99',
        cod_currency: 'GBP',

        // Hazardous Materials
        hazmat_codes: 'UN1234,UN5678',

        // Estimated values
        e_w: '2.5',
        e_maxdim: '25',
        e_maxweight: '2.5',

        // Other
        consignmentLevelDetailsFlag: 'false'
    },

    // ===== FILTERING PARAMETERS =====
    filteringParameters: {
        limit: '10',
        radius: '5000',
        minown: '1',
        maxown: '5',
        minpudo: '2',
        maxpudo: '10',
        multiCountry: 'false'
    },

    // ===== SERVICE GROUPS =====
    serviceGroups: {
        excgrp: 'EXPRESS,PREMIUM', // Use either excgrp OR incgrp, not both
        // incgrp: 'STANDARD,ECONOMY'
    },

    // ===== ACCEPTABLE SLOTS =====
    acceptableSlots: {
        acceptableCollectionSlots: '2024-01-15T09:00:00Z,2024-01-
15T17:00:00Z',
        acceptableDeliverySlots: '2024-01-16T09:00:00Z,2024-01-16T18:00:00Z'
    },

    // ===== CALLBACKS =====
    onDeliveryOptionSelected: function(option) {
        console.log('Selected delivery option:', option);
        // Handle the selected delivery option
        // option contains: bookingCode, fullName, price, currency,
deliveryDate, etc.
    },
    
    onDeliveryOptionChange: function(optionType) {
        console.log('Delivery type changed to:', optionType);
        // optionType: 'HOME', 'PUDO', 'OWNSTORE', or 'COLLECTION'
    }
});