BigCommerce Inject Order Details on the Order Confirmation page
Problem
Adding additional variables to the order confirmation page.
I've edited the en.json to customize the messages shown to the customer on the order confirmation page. However, I would like to show some additional information to the customer, specifically their own email address. We have way too many customers that call and complain they didn't get any email confirmations or tracking numbers and it's almost always due to them mistyping their email address. I have tried every manner of placeholder in the language file to invoke the customer's email from the order and they are all 'undefined'. Is there a way to inject this somehow on the page either via the language file or by editing the order confirmation template?
Before
After
Solution
It is a common request to add Order Details to the BigCommerce Order Confirmation page. I have created a public gist with the code needed inject any order information into the page.
By following the Storefront API guide to query an order, we have created the following script to add Billing Info to the order confirmation page.
<script>
// https://developer.bigcommerce.com/docs/rest-storefront/orders#get-order
fetch("/api/storefront/order/{{checkout.order.id}}", {
credentials: "include",
})
.then(function (response) {
// The API call was successful! Do something
return response.json();
})
.then(function (orderDetails) {
// uncomment for local testing to log the order details to the console
// console.log(orderDetails);
// wait for .orderConfirmation-section to load, then add custom divs
var interval = setInterval(function() {
if (document.querySelector(".orderConfirmation-section")) {
clearInterval(interval);
addBillingInfo(orderDetails);
}
}, 100);
})
.catch((error) => {
});
function addBillingInfo(orderDetails) {
var orderDetailsNode = document.createElement("div");
orderDetailsNode.innerHTML = `
<h4>Billing Info</h4>
${orderDetails.billingAddress.email}<br />
<address>${orderDetails.billingAddress.firstName} ${orderDetails.billingAddress.lastName}<br />
${orderDetails.billingAddress.address1}<br />
${orderDetails.billingAddress.address2}<br />
${orderDetails.billingAddress.city}, ${orderDetails.billingAddress.stateOrProvince} ${orderDetails.billingAddress.postalCode}</address>
`;
document.querySelector(".orderConfirmation-section").appendChild(orderDetailsNode);
}
</script>
Links
BigCommerce Forum Request
BigCommerce Rest Storefront API Get Order
Brod Solutions Public Gist - Add Order Object Order Confirmation
Tags
BigCommerce
Dated
Created: Oct 04, 2024
Updated: Oct 04, 2024