Special Cases: Delivery Options Component

The Delivery Options Component automatically displays a toast notification when no delivery options are found for the provided address or location. You don't need to implement custom error handling for "no results" scenarios. The component handles this automatically with user-friendly messages.

// Initial setup
const instance = window.ddoComponent.init({
    containerId: 'ddo-component-container',
    backendUrl: 'https://ddo.metapack.com',
    getToken: async function() {
        const response = await fetch('/api/ddo-token');
        return (await response.json()).token;
    },
    senderDetails: {
        warehouseCode: 'UK',
        wh_cc: 'GB'
    }
});

// Later, update configuration (requires re-initialization)
window.ddoComponent.destroy();
window.ddoComponent.init({
    // New configuration
    containerId: 'ddo-component-container',
    backendUrl: 'https://ddo.metapack.com',
    getToken: async function() {
        const response = await fetch('/api/ddo-token');
        return (await response.json()).token;
    },
    senderDetails: {
        warehouseCode: 'FR', // Changed warehouse
        wh_cc: 'FR'
    }
});

The component is fully responsive and mobile-optimized out of the box. For additional mobile customization:

@media (max-width: 768px) {
    #ddo-component-container {
        padding: 0;
        margin: 0;
    }
    :root {
        --ddo-font-size-sm: 1rem; /* Prevent zoom on iOS */
    }
}

The component includes these built-in accessibility features: