I am developing an app for BigCommerce, which i have to inject a Script into Order Confirmation page.
In the script, I want to read the current order detail, so i try this
<script>
function getOrderDetail(orderId) {
return fetch("/api/storefront/order/" + orderId, {
credentials: "include",
}).then(function (response) {
return response.json();
});
}
let ORDER_ID=123;
getOrderDetail(ORDER_ID).then(data=>{
// do this ,do that,
})
</script>
I don't find any docs related to get current Order_ID, I have inspected the HTML code and tried
function getOrderId() {
const orderIdRegex = /\s+orderId:\s'(\d+)',/;
return document.body.innerHTML.match(orderIdRegex)[1];
}
I know the code may break if there is a change in UI.
In Shopify
, there is a global variable window.Shopify
,
I am wondering if there is a better solution, or something similar to Shopify.
Update with correct answer
Thanks @MattCoy
<script>
function getOrderDetail(){
return fetch("/api/storefront/order/{{checkout.order.id}}", {
credentials: "include",
}).then(function (response) {
return response.json();
});
}
getOrderDetail().then(data=>{
// do this ,do that,
})
</script>
If this is a script in the Script Manager, you should have access to all the Stencil theme objects via Handlebars. In this case, try
{{checkout.order.id}}
.