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!

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

  • philippe guiziou

    Hi,

    It seems to be perfectly what i need ! But one question, for which prestashop is ? I work with 1.5.6.2

    Best Regards

    • NemoPS

      It was created on 1.5, so it should run fine on that version. On 1.6 as well actually, with small modifications

      • philippe guiziou

        Hello,
        Ok it works but something don’t work. If a customer makes several products in his shopping-cart and it comes back a few days later to finalize the purchase. If during this time a product is no longer available, the image is still green, how can i do for get the red image automatically ?

        Best regards

      • Fernando Maroto

        Hello. This is great and it would help me a lot, but I have presta 1.6. Could you write those modifications?

  • http://mdusamaansari.com/ Mohammed Usama

    Hi Nemo,

    I found this script is very useful for me, but I have a small request, when quantity increased by customer, the image to be changed to yellow from green without loading the page.

  • http://privateshareonly Brian

    Hi –

    Thank you so much for sharing this code. I just made the changes and we DO in fact have very low inventory on some sizes. I gave the system a test and it seemed to work perfectly.

    Really appreciate your assistance. Donation enroute.

    Brian

Store Top Sales

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