Example of usage
A new version of the docs is available here
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>
Updated 6 months ago
Whatβs Next