Today’s quick lesson is based on a question I was asked in a recent comment – how do we add a summary of the customers order on the order confirmation page?
As things stand, the confirmation page in BigCommerce simply displays a thank you message and if you have set up a “pay later” option, details on how to complete the order, plus some links to new/popular products. So how to add the order confirmation details?
I initially tried calling the %%Panel.ConfirmOrder%% into the order.html template, but while this is read by the template file, and pulls in the table structure, it seems the cart/order session data is emptied between checkout success and order confirmation, resulting in an empty summary.
The workaround lies in the email templates.
I remembered that the order confirmation email sends a customer a summary of the order, and amazingly after a quick test, the snippet is rendered by the order confirmation template.
So here is how to get the summary:
Head over to Design > Browse Template Files… and open the order.html template file. On line 50 (assuming you’re in an unedited version of the template), above %%GLOBAL_OrderConfirmationDetails%%, paste the following code:
<div id="OrderSummary"><br>
<div id="OrderSummaryHeader"><br>
%%GLOBAL_CartItemColumns%%<br>
</div><br>
<div id="OrderSummaryBody"><br>
%%SNIPPET_CartItems%%<br>
</div><br>
<div id="OrderSummaryTotal"><br>
%%SNIPPET_TotalRows%%<br>
</div><br>
</div>
Now when you place an order, you will get a summary on the confirmation page.
<img title="Order confirmation page summary" src="http://www.flairconsultancy.com/wp-live/wp-content/uploads/2011/11/order-summary.png" alt="Order confirmation page summary" width="570" height="300">
To style the order summary, because the table IDs aren’t set up
properly, I have wrapped each snippet in a div tag with a unique ID. You
can then reference them in your CSS file as <em>#OrderSummaryTable td</em> etc.