[Override Ajax BlockCart] "Product Added" notification + animation

[studioneko]

Warning! This hack has been tested on 1.4.x only! The live example has been modified since the client asked for a fixed "added to cart" notification

 

Hi everyone,

I recently modified the blockcart module to show a "Product added to Cart" notification whenever the user clicks on the "Add to Cart" button, useful when your product, search or manufacturer page is full of products and the customer has to scroll down a lot

 

Just want to share this little hack

 

You can see a live example on my latest project http://www.farmasubito.com/2-cosmetici

Just scroll a bit down and try to add a product to cart

 

To do that, we are goin to modify 2 files

- ajax-cart.js (from your blockcart module's folder)

- product-list.tpl (from your theme's folder)

 

Let's create an override file first.

- Open the ajax-cart.js located in modules/blockcart

- Create the module's override folder mytheme/js/modules/blockcart and save a copy of the ajax-cart.js there

 

If you want you can just edit the original ajax-cart.js file, just be sure to backup it if you are updating the blockcart module in the future

 

Open the ajax-cart.js, on line 31 you will find

//override every button in the page in relation to the cart
overrideButtonsInThePage : function(){
 //for every 'add' buttons...
 $('.ajax_add_to_cart_button').unbind('click').click(function(){
  var idProduct =  $(this).attr('rel').replace('ajax_id_product_', '');
  if ($(this).attr('disabled') != 'disabled')
ajaxCart.add(idProduct, null, false, this);
  return false;
 });

 

Replace it with

//override every button in the page in relation to the cart
overrideButtonsInThePage : function(){
 //for every 'add' buttons...
 $('.ajax_add_to_cart_button').unbind('click').click(function(){
  var idProduct =  $(this).attr('rel').replace('ajax_id_product_', '');
  if ($(this).attr('disabled') != 'disabled')
ajaxCart.add(idProduct, null, false, this);
$(this).next('.add_ok').fadeIn(300).delay(6500).fadeOut(500);
  return false;
 });

 

Open the product-list.tpl and find the "add to cart button" line

<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>

 

After that line, let's add our "Product added to cart" notification, so that it looks like

<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>

<div class="add_ok">{l s='Product Added to Cart'}
<div class="go_to_cart">{l s='Check Your Cart'}</div>
</div>

 

At the end of product-list.tpl, find the closing {/if}

<!-- /Products list -->
{/if}

 

...and add there the jQuery snippet handling our "Check Your Cart" animation, so that it looks like

<!-- /Products list -->
<script type="text/javascript">
 function scrollWin(){
  $('html, body').animate({
scrollTop: $("#columns").offset().top
}, 1000);
  }
 $('.go_to_cart').click(function(){
  scrollWin();
  });

 $(window).scroll(function(){
  var x = $(window).scrollTop();
  if( x > 500 ){
$('.go_to_cart').show();
} else {
 $('.go_to_cart').hide();
 }
 });  
</script>
{/if}

 

The next part is up to you, since you should style our "add_ok" and "go_to_cart" divs with CSS

To handle the "hide & seek" animations, the basic CSS must be

.add_ok { display: none }
.go_to_cart { display: none }

 

[continues]

Edited August 9, 2013 by studioneko (see edit history)

[studioneko]

- To modify the time after our add_ok div disappears: open the ajax-cart.js and modify the "delay" value in milliseconds

$(this).next('.add_ok').fadeIn(300).delay(6500).fadeOut(500);

delay(5000) = 5 seconds delay before it disappears

delay(10000) = 10 seconds delay before it disappears

and so on...

 

The jQuery in product-list.tpl checks the current scroll-height of the browser and shows our "go_to_cart" div only if our window has been scrolled for a certain amount of pixels. That totally depends on your theme's layout.

For me, the cart wasn't anymore visible after the window has been scrolled for about 500 pixels, so I used that value in the conditional

if( x > 500 )

You can change it to any value, for example:

The "Check Your Cart" message shows up after the widow has been scrolled for 200px

if( x > 200 )

The "Check Your Cart" message shows up after the widow has been scrolled for 600px

if( x > 600 )

and so on...

 

Enjoy : )

[[email protected]]

Hi, your website is superbly done.. can you please tell me the homefeatured module theme you have used.. i want to implement the same theme on my website as well but only for featured products

[vekia]

it's a bit old topic, i suggest you to write PM to the author

if you will send him PM - he will receive an email

[studioneko]

Hi, your website is superbly done.. can you please tell me the homefeatured module theme you have used.. i want to implement the same theme on my website as well but only for featured products

 

Luckily, I had post reply notification by email on

 

I'm using the standard homefeatured module included in prestashop, I did override it with my custom html + css and added this php line in homefeatured.php to show products in random order everytime the page is refreshed:

 

find this function in homefeatured.php

function hookHome($params)
{
 global $smarty;
 $category = new Category(1, Configuration::get('PS_LANG_DEFAULT'));
 $nb = (int)(Configuration::get('HOME_FEATURED_NBR'));
 $products = $category->getProducts((int)($params['cookie']->id_lang), 1, ($nb ? $nb : 10));
 $smarty->assign(array(
 'products' => $products,
 'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),
 'homeSize' => Image::getSize('home')));
 return $this->display(__FILE__, 'homefeatured.tpl');
}

 

and replace it with

 

function hookHome($params)
{
 global $smarty;
 $category = new Category(1, Configuration::get('PS_LANG_DEFAULT'));
 $nb = (int)(Configuration::get('HOME_FEATURED_NBR'));
 $products = $category->getProducts((int)($params['cookie']->id_lang), 1, ($nb ? $nb : 10));
 /* Shuffle featured products */
 shuffle($products);
 /* End of Shuffle featured products */
 $smarty->assign(array(
 'products' => $products,
 'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),
 'homeSize' => Image::getSize('home')));
 return $this->display(__FILE__, 'homefeatured.tpl');
}

 

Hope it helps : )

[badfreek]

Hello Studioneko - I'm interested in the main slider on the index page it's full width - how did you achived that?

 

thanks for info...

[vekia]

Hello Studioneko - I'm interested in the main slider on the index page it's full width - how did you achived that?

 

thanks for info...

your questions isn't related to main case in this topic, please create new thread with your question - im convinced that you will get positively feedback then

 

thanks in advance

 

best regards

[Breckland Retail]

I just can't get this to work. I have created the files exactly as you have said, but nothing happens still when you add an item to cart. The one thing it might be linked to is that I'm unsure where to put the css lines, so have added them to the product_list.css, but as inline. Anything I can do to check this?

[papich]

Very nice anyone test in on 1.5.6.1?

[amodkarmarkar]

It was a success for me in 1.5.6.0.

 

But the live example shown in the link differs from this example. In the live site you actually get a dropdown window for some time.

 

How to get that

[itzbilly]

Hi, has anyone tested this for 1.6?

[AnilMhaske]

Hi 

I'm using 1.6.4 version. In that when I click on add to cart button animation is not working.  In http://www.farmasubito.com/2-cosmetici that website is working fine I want to implement same. I have changed product-list.tpl and ajax-cart.js but is not working please any one help ?