Smart Shopping Cart Summary for PrestaShop

In this tutorial, we will see how to create a smart shopping cart summary for Prestashop, and allow customers to know if any of the products they are buying went of stock (much like amazon)

Download Project Files

The out of stock problem in Prestashop

If you have a running Prestashop Store and work with stock management and small stocks of products, you may have encountered the case when a person adds a product to the cart, but leaves the site and eventually comes back and buy the next day. In the meantime, the product went out of stock but there was no notice of this in the cart summary, and the customer proceeded with the checkout. Big trouble for you, at this point!

Prestashop does not have any ‘Smart Shopping Cart’ features, thus there is no way for the customer to be informed when a product in his basket is not available anymore. In this short tutorial, we will add an availability status to the cart summary table with 3 statuses: available, on back-order, and out of stock. Then, based on these data we will eventually display an alert box so that even the most distracted person would notice the issue.

The cart summary Page

First, we need to add the relevant column to the cart summary page. To keep the tutorial simple I will replace the reference column that seems to be useless for most people. If you need it and need all the other columns as well, I will add a small notice on how to modify the table. Also, notice that your code might be different, depending on the theme you use. I will go for the default one, as always.

Open up shopping-cart.tpl, that you can find in the theme’s folder. Look for the following code, at about line 77:

				<th class="cart_ref item">{l s='Ref.'}</th>

Change it into

				<th class="cart_ref item">{l s='Avail.'}</th>

If you want to add a new column: add the code above instead of replacing the reference column. Now, some cells have a column span, which will in this case break your design. Based on the number of columns you have, it will behave differently. For the default theme, if you look a couple of lines below, you’ll see

<tr class="cart_total_price">
					<td colspan="5">

If you add a column, simply find all occurrences of that colspan=”5″ in this file, and change it to 6. Again, take note of the number and add 1 if yours is different. Also, depending on the design it might break somewhere else, so, if it does, just look for colspans and adjust them accordingly.

The product lines template

Now we need to tell Prestashop to actually display the product availability instead of the reference (or again, consider adding the cell instead of replacing it if you want to). Place the images that are part of the project files inside the /img folder of your theme, then locate the following at about line 34 of shopping-cart-product-line.tpl


	<td class="cart_ref">
		{if $product.reference}{$product.reference|escape:'htmlall':'UTF-8'}{else}--{/if}
	</td>

Change it to (or add)

	<td class="cart_ref">
		{if $product.quantity_available > 0}
			<img src="{$img_dir}pr_avail.png" alt="{l s='Available'}" title="{l s='Available'}">
		{else if $product.quantity_available <= 0 && $product.allow_oosp}
			<img src="{$img_dir}pr_preorder.png" alt="{l s='On Backorder'}" title="{l s='On Backorder'}">
		{else if $product.quantity_available <= 0 && !$product.allow_oosp}
			<img src="{$img_dir}pr_oost.png" alt="{l s='Out Of Stock'}" title="{l s='Out Of Stock'}">
		{/if}
	</td>

Explanation: We are using the if statement to check if the current product is available. We have 3 options here: if the current product’s quantity is positive, it is of course available. If it has 0 or less as quantity, but the allow out of stock preorder option is active for this product or it has a general ‘use default behavior’ set, and it is set to accept out of stock orders, it will add the preorder image. Else, the unavailable one will be shown.

The floating feedback box

At this point, you might even decide to stop, but to bring the feedback further, we will explicitly tell the customer to remove the unavailable product prom the cart. To do this, we need to write a couple of simple lines of javascript. Open again shopping-cart.tpl. Locate the following javascript block at the beginning of the file


	<script type="text/javascript">
	// <![CDATA[
	var currencySign = '{$currencySign|html_entity_decode:2:"UTF-8"}';
	var currencyRate = '{$currencyRate|floatval}';
	var currencyFormat = '{$currencyFormat|intval}';
	var currencyBlank = '{$currencyBlank|intval}';
	var txtProduct = "{l s='product' js=1}";
	var txtProducts = "{l s='products' js=1}";
	var deliveryAddress = {$cart->id_address_delivery|intval};
	// ]]>
	</script>

At the end (before closing the cdata tag), add the following

	var unavailable_products = new Array;

This array will store all of the unavailable products, whose names will be shown to the customer. Back to our shopping-cart-product-line.tpl file, change our previous if switch as follows

	<td class="cart_ref">
		{if $product.quantity_available > 0}
			<img src="{$img_dir}pr_avail.png" alt="{l s='Available'}" title="{l s='Available'}">
		{else if $product.quantity_available <= 0 && $product.allow_oosp}
			<img src="{$img_dir}pr_preorder.png" alt="{l s='On Backorder'}" title="{l s='On Backorder'}">
		{else if $product.quantity_available <= 0 && !$product.allow_oosp}
			<img src="{$img_dir}pr_oost.png" alt="{l s='Out Of Stock'}" title="{l s='Out Of Stock'}">
			<script type="text/javascript">
				// <![CDATA[
				var prod_name = "{$product.name}";
				{if isset($product.attributes) && $product.attributes}
					prod_name += ' - ' + "{$product.attributes|escape:'htmlall':'UTF-8'}"
				{/if}

				unavailable_products.push(prod_name);

				// ]]>
			</script>
		{/if}
	</td>

So that the product name is added to the list, and, eventually, if the product has attributes, the attributes names are added too.

Finally, we need to display the box. Add the following at the very end of shopping-cart.tpl.


<script type="text/javascript">

if(unavailable_products.length > 0)
{
	// <![CDATA[
	var unavail_text = "{l s='The following products are not available any more, please remove them from the cart before proceeding with the checkout'}";
	var floatbox_close_text = "[{l s='Click To Close'}]";
	// ]]>

	/* Creating the floating box */

	var floating_box = $('<div></div>')
	                    .addClass('add-to-cart-popup')
	                    .css({
	                        position: 'fixed',
	                        left: '50%',
	                        top: '30%',
	                        display: 'none',
	                        width: '450px',
	                        padding: '20px',
	                        'margin-left': '-225px',
	                        backgroundColor : 'white',
	                        'box-shadow' : '0 0 15px rgba(0,0,0,.4)',
	                        'z-index' : 100
	                    })

	// Add the products list to the box!

	floating_box.append($('<h3>'+unavail_text+'</h3>'))

	$.each(unavailable_products, function(index, val) {
		 floating_box.append('<strong>' + val + '</strong><br />')
	});

	floating_box.append($('<br/><p style="text-align:center; padding-bottom:0"><small>'+floatbox_close_text+'</small></p>'))

	{literal}
	floating_box.click(function(){$(this).fadeOut()});
	{/literal}
	floating_box.appendTo($('body')).fadeIn();
}

</script>

Explanation:: Sca-ree! Lots of stuff going on, but it is actually simpler than it seems: first, we check that there are unavailable products. No sense to show the floating box if all are available! Then, we create translatable strings to be used in the box itself.

Next, we create the floating box object with some arbitrary styling (you can use css for this; I added inline style to be quicker). Then, we append: the text to inform customers those products are unavailable; all unavailable products in the list (using $.each()); a small text to inform on how to close the floating box.

Lastly, we append the box to the body right away. Save & refresh, if you have unavailable products, the box will pop out!

Looking for quality PrestaShop Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , | Posted under PrestaShop | RSS 2.0

Author Spotlight

Fabio Porta

Fabio Porta

Fabio has been involved in web development and design since 2005, when launched his first website at the age of 16. He’s now highly skilled in both client and server side development, along with design, and since August 2012 runs a successful website about PrestaShop tutorials and Prestashop Modules called Nemo’s Post Scriptum, at http://nemops.com

Leave a Reply

Your email address will not be published. Required fields are marked *


2 − 2 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>