Displaying the order resume at the Order Confirmation in Prestashop

Customers love visual feedback, and most of them often like to see a resume of their order right after pay. Let’s see how to display the order resume on the order confirmation page in Prestashop.

Download Project Files

Creating a simple module

The best way to add new elements to the order confirmation page, in Prestashop, is through a very simple module that hooks to orderConfirmation. Even if you are not familiar with advanced coding, this very step should be pretty simple to follow.

First off, download the sample module archive you find at the beginning of the article. Open it and place the first psconfresume folder you see inside modules/.

Navigate to it, and open psconfresume.php in your favorite code editor, then paste in the following, inside php tags:

if (!defined('_PS_VERSION_'))
	exit;

class psConfResume extends Module
{

	protected $_errors = array();


	public function __construct()
	{
		$this->name = 'psconfresume';
		$this->tab = 'front_office_features';
		$this->version = '1.0';
		$this->author = 'Nemo';
		$this->need_instance = 0;


		$this->bootstrap = true;


	 	parent::__construct();

		$this->displayName = $this->l('psconfresume');
		$this->description = $this->l('Adds a block.');
		$this->confirmUninstall = $this->l('Are you sure you want to delete this module?');
	}
	
	public function install()
	{
		if (!parent::install() OR
			!$this->registerHook('orderConfirmation')
			)
			return false;
		return true;
	}
	
	public function uninstall()
	{
		if (!parent::uninstall())
			return false;
		return true;
	}
}

These are just the barebones of a module. Just make sure you register the orderConfirmation hook if you do it from scratch.

Assigning parameters to the hook

Once done with the basic setup, we need to do something with the hook. Add the following as last method:


	public function hookOrderConfirmation($params)
	{

		$order = $params['objOrder'];
		$products = $order->getProducts();

		$this->context->smarty->assign(array(
			'order'=> $order,
			'order_products' => $products
		));
		
		return $this->display(__FILE__, 'confirmation.tpl');
	}

There is nothing too fancy going on here. First, we take advantage of the order object, which comes through the $params array, and use it to get more details on the ordered products. Then, we simply assign both variables to the template, returning it in the end. Make sure this .tpl file is located inside the module’s folder, views/templates/hook.

The order resume table

At this point, we are just throwing in an empty template, so we need to fill it with data. Open up views/templates/hook/confirmation.tpl and paste the following (yeah it’s long):

<table class="std">
	<thead>
		<tr>
			<th>{l s='Product' mod='psconfresume'}</th>
			<th>{l s='Price' mod='psconfresume'}</th>
			<th>{l s='Qty' mod='psconfresume'}</th>
		</tr>
	</thead>
	<tbody>
		{foreach from=$order_products item=product}
			<tr>
				<td>{$product.product_name}</td>
				<td>
					{if $use_taxes}
						{displayPrice price=$product.total_price_tax_incl}
					{else}
						{displayPrice price=$product.total_price_tax_excl}
					{/if}
				</td>
				<td>{$product.product_quantity}</td>
			</tr>
		{/foreach}
	</tbody>
	<tfoot>
		<tr>
			<td style="text-align:right">
				{l s='Products Total' mod='psconfresume'}
			</td>
			<td colspan="2">
				{if $use_taxes}
					{displayPrice price=$order->total_products_wt}
				{else}
					{displayPrice price=$order->total_products}
				{/if}
				
			</td>
		</tr>	
		<tr>
			<td style="text-align:right">
				{l s='Shipping' mod='psconfresume'}
			</td>
			<td colspan="2">
				{if $use_taxes}
					{displayPrice price=$order->total_shipping_tax_incl}
				{else}
					{displayPrice price=$order->total_shipping_tax_excl}
				{/if}
				
			</td>
		</tr>
		{if $order->total_discounts != '0.00'}
			<tr>
				<td style="text-align:right">
					{l s='Discounts' mod='psconfresume'}
				</td>
				<td colspan="2">-
					{if $use_taxes}
						{displayPrice price=$order->total_discounts_tax_incl}
					{else}
						{displayPrice price=$order->total_discounts_tax_excl}
					{/if}
				</td>
			</tr>
		{/if}
		{if $use_taxes}
			<tr>
				<td style="text-align:right">
					{l s='Taxes Paid' mod='psconfresume'}
				</td>
				<td colspan="2">
					{$taxamt = $order->total_paid_tax_incl - $order->total_paid_tax_excl}
					{displayPrice price=$taxamt}

				</td>
			</tr>
		{/if}
		<tr>
			<td style="text-align:right">
				{l s='TOTAL' mod='psconfresume'}
			</td>
			<td colspan="2">
				{if $use_taxes}
					{displayPrice price=$order->total_paid_tax_incl}
				{else}
					{displayPrice price=$order->total_paid_tax_excl}
				{/if}
			</td>
		</tr>
	</tfoot>
</table>

I didn’t break it into steps because it’s quite simple: we create a table with Product name, price and quantity as headers. Then, in the body, we loop through products themselves and display what we need. Lastly, we take care of shipping, discounts, taxes and total in the tfoot element. Please notice I used the $use_taxes variable to detect whether or not we have to display the taxed amount. You might want to tweak these parts depending on your needs, such as adding gift wrap as well or using DIV tags instead of a table.

That is basically it, create and order and see if everything works:

Prestashop order confirmation resume

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

  • Kuba

    Hi Nemo! Thanks for another great tutorial. I wonder, if it is possible, to add it also resume to payment (step 5) page.

    • NemoPS

      It’s odd, it should be there already, using a custom template?

      • Kuba

        Yes, unfortunately.

        • NemoPS

          CHeck out the order-payment template of the default one, and try copying/pasting to start with

        • Kuba

          Nope, no changes, I think rather modules/bankwire/ payment_execution somewhere. Sorry for bothering you, but I’d like to learn.

  • Nick

    Hi nemo,

    Thank you for this great turorial (one again)
    I am using this to add to our website some analytics entries. All goes well execpt that I can not add $id_order

    Can you please help ?

    • NemoPS

      Hi Nick,
      Are your using the order object to get its ID?

      • Nick

        Hi nemo,

        Thanks for answering. I am mostly using the module unchanged. I am trying to put $id_order but it does not work. all other seem to work OK. I have added this code to the .tpl file.

        {literal}
        sa(‘ecommerce’, ‘addItem’, JSON.stringify({
        order_id: ‘{/literal}{$id_order}{literal}’, // Order ID. Required.
        product_id: ‘{/literal}{$product.product_id}{literal}’, // Product ID. Required.
        name: ‘{/literal}{$product.product_name}{literal}’, // Product Name. Required.
        price: ‘{/literal}{displayPrice price=$product.total_price_tax_incl}{literal}’, // Price per Unit. Required.
        quantity: ‘{/literal}{$product.product_quantity}{literal}’ // Quantity of Items. Required.
        }));
        {/literal}

        Kind Regards

      • Nick

        After playing around with the code (thank god I found {debug}) I changed the code to

        sa(‘ecommerce’, ‘addItem’, JSON.stringify({

        order_id: ‘{/literal}{$order->reference}{literal}’, // Order ID. Required.

        product_id: ‘{/literal}{$product.product_id}{literal}’, // Product ID. Required.

        name: ‘{/literal}{$product.product_name}{literal}’, // Product Name. Required.

        price: ‘{/literal}{displayPrice price=$product.unit_price_tax_incl}{literal}’, // Price per Unit. Required.

        quantity: ‘{/literal}{$product.product_quantity}{literal}’ // Quantity of Items. Required.

        }));

        Hope I have done everything right :-)
        Do you agree ?

You like the tuts and want to say "thank you"? Well, you can always feel free to donate: