2

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>
vanduc1102
  • 5,769
  • 1
  • 46
  • 43

1 Answers1

6

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}}.

Matt Coy
  • 1,031
  • 2
  • 5
  • Hi @Matt, Is there a way to get full `OrderDetail` in ScriptManager at `order_confirmation_page` rather than calling `fetch("/api/storefront/order/" + orderId)` ? Because calling an API will delay my logic a bit. – vanduc1102 Jun 29 '21 at 08:13
  • 2
    @vanduc1102, unfortunately, no. The only other method I could think of would be to set cookies/localStorage variables while on the checkout page, using the Stencil cart object. Though this is a bit hacky. – Matt Coy Jun 29 '21 at 14:50