Frequent use cases

Displaying estimates on a Product page

When on a product page, you may want to display the most optimistic delivery estimate to online shoppers.

An example configuration can be:

<script>
  ShipupETA.init({
    publicApiKey: 'XXX',
    estimationMode: 'early'
  });
  
  ShipupETA.fetchPredictions({
    // Replace getWarehouseFromShopperAddress(...) with any logic that allows you to determine the warehouse to use
    // based on any info you have on the shopper address (via a user account, their IP, etc.)
    origin: getOriginFromShopperAddress(...)
  })
</script>

<div>
  Order within the next <span id="data-shipup-eta-best-cutoff-time">Loading countdown...</span>
  and receive your product by <span id="data-shipup-eta-best-carrier">Loading estimation...</span>
</div>

Displaying estimates on the checkout page

When on a checkout page, shoppers can usually:

specify a delivery address
select the carrier service they want to use

Hence what we want here is to display an estimate for each available carrier service, and configure the module to use the address that the user entered.

<script>
  // Let's assume here that you always use the same warehouse except for the US and Canada
  const warehouseMapping = {
    US: 'warehouse_US',
    CA: 'warehouse_US'
  };
  const DEFAULT_WAREHOUSE = 'warehouse_EU';
  
  ShipupETA.init({
    publicApiKey: 'XXX'
  });
  
  ShipupETA.fetchPredictions({
    // The line below assumes that the country of the delivery address is stored
    // and accessible from a `userCountryCode` variable
    origin: { warehouse_merchant_id: warehouseMapping[userCountryCode] || DEFAULT_WAREHOUSE },
    destination: { country_code: userCountryCode },
    carriers: [{ code: 'mondial_relay' }, { code: 'ups' }]
  })
</script>

<div>
  Estimated delivery with:
  - Mondial Relay: <span data-shipup-eta-carrier-service="mondial_relay">Loading...</span>
  - UPS: <span data-shipup-eta-carrier-service="ups">Loading...</span>
</div>