[FREE TUTORIAL] Smart Shopping Cart Summary (product availability and notices)

[NemoPS]

Hey everybody!

Here comes my new tutorial: it's about displaying product availability and a notice to remove them from the cart if they're out of stock and you still have them in the cart. Basically, like amazon, but in the cart summary page only. Of course, it can be extended to work with the ajax cart as well!

 

Here:

 

http://nemops.com/smart-shopping-cart-for-prestashop/

 

Cheers!

[PrestaCoder.com]

Useful tutorial. Thanks for sharing and keep them coming!

[DylzEn]

Great work and thanks for sharing. I'm trying to figure out how to improve it because as of now it doesn't distinguish between ai item that is out of stock from an item that is simply available in a smaller quantity than the one selected in the cart.

[Wampas]

Hello,

First of all nice tutorial ! Maybe anybody knows how to make real time product availability refresh when you press "+" or "-" for quantity modification? Now you have to refresh manualy to see the result (green, amber or red icons)

Thank you.

Edited July 27, 2013 by Wampas (see edit history)

[NemoPS]

Nice catch. Actually I didn't think about that' I'll try to work it out if I have enough time!

 

If you find a solution feel free to post it here, I'll add it to the tut!

[Wampas]

Nice catch. Actually I didn't think about that' I'll try to work it out if I have enough time!

 

If you find a solution feel free to post it here, I'll add it to the tut!

 

I can give some modification for example when product is available, it should be calculated in this way:

{if $product.quantity_available-$product.cart_quantity >= 0}

 

instead of

 

{if $product.quantity_available > 0}

 

but the main headache is how to make automatic refresh ... I have no idea how to make it and it is very important to me.

Edited July 27, 2013 by Wampas (see edit history)

[Smijn1]

Hi Nemo, nice tut, did you happen to find a solution for the automatic refresh in the meantime?

[NemoPS]

Not yet, I haven't had enough time to look into it, unfortunately!

[Smijn1]

okay too bad.. another question: when a product is completly out of stock, the popup appears and I really like that.

 

However when a products is still in stock but no longer in the quantity that's in the cart, there is no popup. It does say I can't continue the order as it is, however it doesn't say which product is no longer availbe in the quantity wanted.. so when a customer adds like 10 products, he/she will have no idea which product to change.. is there a way to display the popup with product name then as well?

 

thanks

[Smijn1]

Sorry, figured it out after reading the post of wampas again... changed this piece of code:

<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">

to:

<td class="cart_ref">
    {if $product.quantity_available-$product.cart_quantity >= 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-$product.cart_quantity < 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">

[Wampas]

Hi, 

 

I need auto refresh desperately.... I can`t figure out how to make it work. I think I need to change some javascript code. 

[Emzed]

Hi Wampas,

 

I can give you an example of how you can achieve automatic page refreshes of the availability color using a timer and/or when the quantity is updated. However, these changes will rely on standard AJAX refresh requests from the client side so wouldn't be ideal if bandwidth or server load is an issue. Each request would pull a full json summary (from ~4 kilobytes+) which could add up if your refresh frequency is very high (or if a customer leaves your page open on 10 different browser instances while he's off to the Bahamas for a month). I guess ideally you would want to customise a server function that only checks for the bare minimum required using "page [spam-filter]" (ala the Facebook status button, I believe).

 

I also suppose other features could be added to this modifictiion since the information provided on error is somewhat limited. There is no indication of how many items are actually available for purchase (even though this information is freely available without hacking in the json file). After the quantity change, if you had 7 items but there are only 5 now you can't simply press the down button since Prestashop will present an error (requiring manual entry). Perhaps the pop-up could suggest to rectify the amount to the highest number available or delete instantly where none are left. Or depending on your business model or promotions running you could set limits to 1 item only or suggest to reduce quantity to increase chance of purchasing success. 

 

Anyhoo, here's some modifications to PS1.5.5's default theme.

[Note that I've left the class of the Avail. table field as cart_ref)

 

The big changes happen in cart-summary.js in your theme's js folder.

 

Firsly, I've updated function updateCartSummary(json) to also refresh the availability icon according to the results from the preceding AJAX request (using the same conditions as we've used in shopping-cart-product-line.tpl).

 

Under the for (i in product_list) loop I've added:

if (product_list[i].quantity_available - product_list[i].cart_quantity >= 0) {
				$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="'+ img_dir + 'pr_avail.png" alt="{l s=\'Available\'}" title="{l s=\'Available\'}">');
			} else if (product_list[i].quantity_available - product_list[i].cart_quantity < 0 && product_list[i].allow_oosp) {
				$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="' + img_dir + 'pr_preorder.png" alt="{l s=\'On Backorder\'}" title="{l s=\'On Backorder\'}">');
			} else if (product_list[i].quantity_available - product_list[i].cart_quantity < 0 && !product_list[i].allow_oosp) {
				$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="' + img_dir + 'pr_oost.png" alt="{l s=\'Out Of Stock\'}" title="{l s=\'Out Of Stock\'}">');
			}

Note that I used a reference to img_dir in the js file. I created a javascript reference to smarty-PHP variable {$img_dir} at the top of shopping-cart-product-line.tpl

<script type="text/javascript">
            // <![CDATA[
			var img_dir = "{$img_dir}";
            // ]]>
</script>

In cart-summary.js you can then create a new self-refreshing function called checkAvailability() and load it in (document).ready(function().

 

checkAvailability() just downloads the cart summary and cycles through the availibility of each product in the json product array using the same conditions as above,

function checkAvailability()
{
	$.ajax({
		type: 'POST',
		headers: { "cache-control": "no-cache" },
		url: baseUri + '?rand=' + new Date().getTime(),
		async: true,
		cache: false,
		dataType: 'json',
		data: 'controller=cart'
			+ '&ajax=true'
			+ '&getproductprice=true'
			+ '&summary=true'
			+ '&token=' + static_token
			+ '&allow_refresh=1',
		success: function(jsonData)
		{
			if (jsonData.hasError)
			{
				var errors = '';
				for(var error in jsonData.errors)
					//IE6 bug fix
					if(error !== 'indexOf')
						errors += $('<div />').html(jsonData.errors[error]).text() + "\n";
				alert(errors);
			}
			else
			{
				updateCartAvailability(jsonData.summary);		
			}
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			if (textStatus !== 'abort') {
				//alert("TECHNICAL ERROR: unable to verify quantity \n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus);
				}
		}
	});
	setTimeout ('checkAvailability()', 10000);
} 

In the above example setTimeout ('checkAvailability()', 10000) is set to 10 seconds which you can adjust to your needs (perhaps you'd like to write a function that increases the timeout relative to a counter where it only check every 20 minutes after a day of inactivity ). You might want to remove some levels of error reporting for this function.

 

The checking can be performed in the updateCartAvailability function as below.

function updateCartAvailability(json)
{
	var i;
	var product_list = new Array();

	if (typeof json == 'undefined')
		return;
		
	$('div.error').fadeOut();		

	for (i=0;i<json.products.length;i++)
		product_list[json.products[i].id_product + '_' + json.products[i].id_product_attribute + '_' + json.products[i].id_address_delivery] = json.products[i];
		
	for (i in product_list)
	{
		var key_for_blockcart_nocustom = product_list[i].id_product + '_' + product_list[i].id_product_attribute + '_' + ((product_list[i].quantity_without_customization != product_list[i].quantity)? 'nocustom' : '0') + '_' + product_list[i].id_address_delivery;
		
		if (product_list[i].quantity_available - product_list[i].cart_quantity >= 0) {
				$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="'+ img_dir + 'pr_avail.png" alt="{l s=\'Available\'}" title="{l s=\'Available\'}">');
			} else if (product_list[i].quantity_available - product_list[i].cart_quantity < 0 && product_list[i].allow_oosp) {
				$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="' + img_dir + 'pr_preorder.png" alt="{l s=\'On Backorder\'}" title="{l s=\'On Backorder\'}">');
			} else if (product_list[i].quantity_available - product_list[i].cart_quantity < 0 && !product_list[i].allow_oosp) {
				$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="' + img_dir + 'pr_oost.png" alt="{l s=\'Out Of Stock\'}" title="{l s=\'Out Of Stock\'}">');
			}
	}

}

Note that my comparisons in shopping-cart-product-line.tpl and elsewhere are a little different to those printed by Smijn1 since I made it that if any products would end up on backorder to use the yellow button (as opposed to if the product is already sold out).

	<td class="cart_ref">
		{if $product.quantity_available-$product.cart_quantity >= 0}
			<img src="{$img_dir}pr_avail.png" alt="{l s='Available'}" title="{l s='Available'}">
		{else if $product.quantity_available-$product.cart_quantity < 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-$product.cart_quantity < 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>

Again, you can modify this to be more accurate if you wish.

 

You can also add the pop-up if you wish at longer timeout intervals but I've left it out.

 

cart_availability_refresher.zip ZIP of affected files for 1.5.5

 

Cheers

 

PS Have a play around with quantities in the backend to see it working. Note that you should do more testing before going live with different product customisations.

Edited October 15, 2013 by Emzed (see edit history)

[Wampas]

Hi, 

 

Thank You very much for this update. I will check it and give feedback a little bit latter when I have more time.

[newcommer]

Its a very nice tool but i have a problem.

 

How i can get the stock text from product page

Edited May 11, 2014 by newcommer (see edit history)

[NemoPS]

Do you mean the 'product available' text? It should be $product->available_now

[wolflet]

Hi, I am trying to make the modifications to my shop but i can't seem to find the lines in the shopping-cart.tpl file.

 

I am using prestashop 1.6.0.6 with the default bootstrap theme

[NemoPS]

Well the variable is not there, you can try adding it after $product.name ($product.available_now)

[wolflet]

are you using the shopping-cart.tpl in the themes folder or the file in your working files download? because i can't seem to find any of the lines that u listed

[NemoPS]

this 

 

{$product.name}

[MockoB]

Hi Nemo, 

once again excellent how to and very useful as well! Personally I don't believe that it is not function of prestashop by default but here you come with decision once again!

I followed your guide and I think that every change I made is exactly as showed in the tutorial, now it shows which products are without availability and just the pop up box does not shows up. Is there any chance to lead me where should I look for the mistake I eventually made? I am using PS 1.5.6.1 with custom theme.

Thanks in advance!

Best regards,

Moskov

[NemoPS]

If it's only the popup then it might be a javascript error, any chance you can share the site's url?