Example of usage

Data attributes

The following example will replace each data-shipup-eta-carrier-service by the prediction result of the carrier.

It will also replace data-shipup-eta-best-carrier with the fastest delivery (the best estimate) by a service, and replace data-shipup-eta-best-cutoff-time with a countdown to that service's cutoff time.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Data attributes</title>
  </head>
  <body>
    <div>
      Mondial relay : <span data-shipup-eta-carrier-service="mondial_relay">loading...</span>
    </div>
    <div>
      Colissimo : <span data-shipup-eta-carrier-service="colissimo">loading...</span>
    </div>
    <div>
      Colissimo Expert Europe : <span data-shipup-eta-carrier-service="colissimo_expert_europe">loading...</span>
    </div>
    <div>
      Best : <span id="data-shipup-eta-best-carrier">loading...</span> if you order within <span id="data-shipup-eta-best-cutoff-time">loading...</span>
    </div>

    <script src="https://cdn.shipup.co/shipup-eta/latest/shipup-eta.js"></script>
    <script>
      ShipupETA.init({
        publicApiKey: 'my-api-key',
      }).fetchPredictions({
        "carriers": [
            { "code": "mondial_relay", service_code: "base" },
            { "code": "colissimo", service_code: "base" },
            { "code": "colissimo", service_code: "colissimo_expert_europe" }
        ]
      }) 
    </script>
  </body>
</html>

Custom carrier mapping

In this example, we use a custom CSS selector using the carrierCodesCssSelectorsMapping option to fill specific DOM nodes with the prediction.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Custom carrier mapping</title>
  </head>
  <body>
    <div>
      Mondial relay : <span id="custom-random">loading...</span>
    </div>
    <div>
      Colissimo : <span class="custom-colissimo">loading...</span>
    </div>
    <div>
      Colissimo Expert Europe : <span class="custom-colissimo-service-expert">loading...</span>
    </div>

    <script src="https://cdn.shipup.co/shipup-eta/latest/shipup-eta.js"></script>
    <script>
      ShipupETA.init({
        publicApiKey: 'my-api-key',
        carrierCodesCssSelectorsMapping: {
          mondial_relay: '#custom-random',
          colissimo: '.custom-colissimo',
          colissimo_expert_europe: '.custom-colissimo-service-expert',
        },
      }).fetchPredictions({
        "carriers": [
            { "code": "mondial_relay", service_code: "base" },
            { "code": "colissimo", service_code: "base" },
            { "code": "colissimo", service_code: "colissimo_expert_europe" }
        ]
      }) 
    </script>
  </body>
</html>

Locale

The below example will change the library language and fetch predictions when the selected value changes.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Locale</title>
  </head>
  <body>
    <select id="select">
      <option value="en">EN</option>
      <option value="fr">FR</option>
      <option value="es">ES</option>
    </select>

    <div>
      Mondial relay : <span data-shipup-eta-carrier-service="mondial_relay"></span>
    </div>
    <div>
      Colissimo : <span data-shipup-eta-carrier-service="colissimo"></span>
    </div>

    <script src="https://cdn.shipup.co/shipup-eta/latest/shipup-eta.js"></script>
    <script>
      ShipupETA.init({
        publicApiKey: 'my-api-key',
      })
      const el = document.querySelector('#select')

      el.value = ShipupETA.language
      el.addEventListener('change', update)
      update()

      function update() {
        ShipupETA
          .changeLanguage(el.value)
          .fetchPredictions({
            "carriers": [
              { "code": "mondial_relay", service_code: "base" },
              { "code": "colissimo", service_code: "base" },
              { "code": "colissimo", service_code: "colissimo_expert_europe" }
            ]
          })
          .catch(error => alert(`Error: ${error.message}`))
      }
    </script>
  </body>
</html>

Change destination address

This example will change the destination address and fetch predictions when the selected value changes.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Change destination address</title>
  </head>
  <body>
    <select id="select">
      <option value="EN">EN</option>
      <option value="FR">FR</option>
      <option value="ES">ES</option>
    </select>

    <div>
      Mondial relay : <span data-shipup-eta-carrier-service="mondial_relay"></span>
    </div>
    <div>
      Colissimo : <span data-shipup-eta-carrier-service="colissimo"></span>
    </div>

    <script src="https://cdn.shipup.co/shipup-eta/latest/shipup-eta.js"></script>
    <script>
      ShipupETA.init({
        publicApiKey: 'my-api-key',
      })
      const el = document.querySelector('#select')

      el.value = 'EN'
      el.addEventListener('change', update)
      update()

      function update() {
        ShipupETA
          .changeDestinationAddress({ country_code: el.value })
          .fetchPredictions({
            "carriers": [
              { "code": "mondial_relay", service_code: "base" },
              { "code": "colissimo", service_code: "base" },
              { "code": "colissimo", service_code: "colissimo_expert_europe" }
            ]
          })
          .catch(error => alert(`Error: ${error.message}`))
      }
    </script>
  </body>
</html>