OpenCart Community

Posted: **Sat Jun 17, 2017 6:50 pm**

How can I make the cart button, beside the search bar on top, to blink or glow whenever a customer is adding a product to the cart? Can anyone help me out on this?
Thanks in advance

Posted: **Sun Jun 18, 2017 3:36 am**

Blinking Cart & more cart displaying options OC v.2.0.0.0 - 2.3.0.2:
https://www.opencart.com/index.php?rout ... n_id=29290
found here:
https://www.opencart.com/index.php?rout ... ing%20cart

and others also exist, like those linked below:

https://www.opencart.com/index.php?rout ... n_id=26304
https://www.opencart.com/index.php?rout ... n_id=24818
Ernie

Posted: **Thu Jun 22, 2017 6:42 pm**

Assuming you're using default theme, you must edit these files:
for add to cart button in product page

Code: Select all

catalog/view/theme/default/template/product/product.tpl

for add to cart in other pages

Code: Select all

catalog/view/javascript/common.js

Ther are 4 occurrence in this file
find in both file:

Code: Select all

$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

replace with:

Code: Select all

$('#cart > button').addClass('blinker_cart').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>').delay(3000).queue(function(){
	$(this).removeClass('blinker_cart');
});

open your stylesheet file:

Code: Select all

catalog/view/theme/default/stylesheet/stylesheet.css

add this:

Code: Select all

.blinker_cart {
  -webkit-animation: blinker_cart 500ms linear infinite;
          animation: blinker_cart 500ms linear infinite;
}
@-webkit-keyframes blinker_cart {  
	50% {
		opacity: 0.2;
		-webkit-transform: scale(1.04);
		        transform: scale(1.04);
	}
}
@keyframes blinker_cart {  
	50% {
		opacity: 0.2;
		-webkit-transform: scale(1.04);
		        transform: scale(1.04);
	}
}

This is a simple effect, you can write your own css.
Tested with OpenCart 2.3.0.2

OpenCart Community

I need a button indicating the cart

I need a button indicating the cart

Re: I need a button indicating the cart

Re: I need a button indicating the cart