I need a button indicating the cart

Quote

Post by amaresh_forum » 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
amaresh_forum
Newbie
Posts
2
Joined
Sat Jun 17, 2017 6:45 pm
Top

Re: I need a button indicating the cart

Quote

Post by IP_CAM » 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: :D
https://www.opencart.com/index.php?rout ... n_id=26304
https://www.opencart.com/index.php?rout ... n_id=24818
Ernie

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.

User avatar
IP_CAM
Legendary Member
Posts
13014
Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland
Top

Re: I need a button indicating the cart

Quote

Post by DigitCart » 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

My Extensions

User avatar
DigitCart
Active Member
Posts
901
Joined
Thu Jun 22, 2017 5:32 pm
Top
Post Reply
Return to “Template Support”
Who is online

Users browsing this forum: Bing [Bot] and 95 guests