Shopping cart basket opened after product addition

Quote

Post by ssjal » Sat Apr 14, 2012 9:53 pm

hi,
using opencart_v1.5.2.
i want to show the opened view of the shopping cart basket (situated in the header) for 5 seconds after clicking on add-to cart button so that the users could visually see the shopping cart items after each product addition.

The shopping cart contents should show automatically when the user adds the products for sometime and then again clear out.

can someone guide me on this.

thanks...
ssjal
New member
Posts
90
Joined
Thu Sep 17, 2009 4:45 pm
Top

Re: Shopping cart basket opened after product addition

Quote

Post by Avvici » Sun Apr 15, 2012 6:11 am

You need only to add the Ajax Cart code to the AddToCart function in your common.js file. This will open the ajax cart and update it after you press the Add To Cart button. If you want to keep it open for 5 seconds then you just make that happen with a little more javascript.

Open catalog/view/javascript/common.js and find this line:

Code: Select all

function addToCart(product_id) {
Now find this line that is in that function:

Code: Select all

$('html, body').animate({ scrollTop: 0 }, 'slow');

Add the following code right below it. This way it will scroll to the top, then open the ajax cart.

Code: Select all

$('#cart').addClass('active');
		$.ajax({
			url: 'index.php?route=checkout/cart/update',
			dataType: 'json',
			success: function(json) {
				if (json['output']) {
					$('#cart .content').html(json['output']);
				}
			}
		});
Remember that by default there is a function that removes the cart class when your are done hovering with your mouse.

Code: Select all

$('#cart').bind('mouseleave', function() {
			$(this).removeClass('active');
		});
You will be removing the class with a timer instead set to remove it after 5 seconds. All you have to do is set up that in a different function and call it with the timer event. 5 seconds expire to fire this EndTimer();

Code: Select all

function EndTimer(){
$(this).removeClass('active');
}
User avatar
Avvici
Expert Member
Posts
4723
Joined
Tue Apr 05, 2011 12:09 pm
Location - Asheville, NC
Top

[Solved] Auto Slide Shopping Cart on Product Addition

Quote

Post by ssjal » Mon Apr 16, 2012 11:08 pm

Thanks you very much avvici ...
your code suggestions guided me to solve my problem.

so here is the code which will allow shopping basket in header to slide down automatically on product addition, remain showing for 5 seconds and then fade out.

1) Open catalog/view/javascript/common.js and find this line:

Code: Select all

function addToCart(product_id) {
Now find this line that is in that function:

Code: Select all

$('html, body').animate({ scrollTop: 0 }, 'slow');
Add the following code right below it.

Code: Select all

$('#cart .content').stop(true, true).show('fast');
$('#cart').addClass('active');				
$('#cart').load('index.php?route=module/cart #cart > *');

setTimeout(function() {
    $('#cart').removeClass('active');
}, 5000); // <-- time in milliseconds
2) Open theme\default\template\product\product.tpl
Find:

Code: Select all

$('#button-cart').bind('click', function() {
Now find this line that is in that function:

Code: Select all

$('html, body').animate({ scrollTop: 0 }, 'slow');
Add the following code right below it.

Code: Select all

$('#cart .content').stop(true, true).show('fast');
$('#cart').addClass('active');				
$('#cart').load('index.php?route=module/cart #cart > *');

setTimeout(function() {
    $('#cart').removeClass('active');
}, 5000); // <-- time in milliseconds
ssjal
New member
Posts
90
Joined
Thu Sep 17, 2009 4:45 pm
Top
Post Reply
Return to “General Support”
Who is online

Users browsing this forum: No registered users and 39 guests