modify default-bootstrap so ajax cart has no cart popup on add to cart - and fly-in cart image

[David Eschmeyer]

edit /themes/default-bootstrap/css/global.css, adding this to the end

#layer_cart, .layer_cart_overlay {
display: none!important;
}

edit /themes/default-bootstrap/product-list.tpl, line 148 so we know product was added to cart... (this fixes category pages and front page (popular, best sellers, new products))

change:

<span>{l s='Add to cart'}</span>

to

<span onClick="this.innerHTML='---added---'; return false" onmouseout="this.innerHTML='Add to cart';">{l s='Add to cart'}</span>

The product page has it's own action of the cart image changing to a checkbox so you don't have to modify it.

 

all done.

 

The only thing i see is that on phones they don't register a mouseout event so the button will not revert text back to "Add to cart" without a page refresh, pretty miniscule.  Danny has a solution for that.

 

now if you want the image fly-in to the cart like 1.5...

 

edit:

/themes/default-bootstrap/js/modules/blockcart/ajax-cart.js

at line 324 you have the success function callback

			success: function(jsonData,textStatus,jqXHR)
			{

move down what is there and insert this code, i left the line above in so you can see placement

success: function(jsonData,textStatus,jqXHR)
{
	// add the picture to the cart
	var $element = $(callerElement).parent().parent().parent().find('a.product_image img,a.product_img_link img');
	if (!$element.length)
		$element = $('#bigpic');
	var $picture = $element.clone();
	var pictureOffsetOriginal = $element.offset();
	pictureOffsetOriginal.right = $(window).innerWidth() - pictureOffsetOriginal.left - $element.width();

	if ($picture.length)
	{
		$picture.css({
			position: 'absolute',
			top: pictureOffsetOriginal.top,
			right: pictureOffsetOriginal.right
		});
	}

	var pictureOffset = $picture.offset();
	var cartBlock = $('#cart_block');
	if (!$('#cart_block')[0] || !$('#cart_block').offset().top || !$('#cart_block').offset().left)
		cartBlock = $(parent.document).find('.shopping_cart');
	var cartBlockOffset = cartBlock.offset();
	cartBlockOffset.right = $(window).innerWidth() - cartBlockOffset.left - cartBlock.width();

	// Check if the block cart is activated for the animation
	if (cartBlockOffset != undefined && $picture.length)
	{
		$picture.appendTo('body');
		$picture
			.css({
				position: 'absolute',
				top: pictureOffsetOriginal.top,
				right: pictureOffsetOriginal.right,
				zIndex: 9999
			})
			.animate({
				width: $element.attr('width')*0.66,
				height: $element.attr('height')*0.66,
				opacity: 0.2,
				top: cartBlockOffset.top + 30,
				right: cartBlockOffset.right + 15
			}, 1000)
			.fadeOut(100, function() {
				ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
				$(this).remove();
			});
	}

And it is done, with image fly-in!  

 

 

Edited February 20, 2017 by David Eschmeyer (see edit history)

[bedandw]

Hi- It does not work for me at www.bedandwood.com

[Frank G.]

Hi David.

Have seen your modification and it works well !

 

Special thanks to you.

 

Kind regards from Sweden

Frank

[Frank G.]

3 questions:

 

1. You wrote that there is a problem with mobile devices. I have seen it and that´s not good (tested with Responsinator.com). Have you a solution for this ?

2. It looks strange if there is a language mix between swedish and english (button show "Add to card" and "added". Is there a solution to translate it ? On my site are 3 different languages.

3. It do not work to add products to cart from categories - did not count (only after site refresh). Any solution for this ?

 

Greetz

Frank

[David Eschmeyer]

1)  i have to see if dan remembers

2)  you may be able to replace the add to cart with onmouseout="this.innerHTML={l s='Add to cart'};">{l s='Add to cart'}

so it uses the translation system... if it works then fix the ---added--- one too to {l s='---Added---'}

3) dunno, you will have to study it

[Soyons Solidaire]

Hi, my friend it works, but I have this window that opens at the same time, I join capture..Thanks you

[loulou66]

HI

Good soluce but  for the span in product-list.tpl you must added
 

<span onClick="this.innerHTML='{l s='---added---'}'; return false" onmouseout="this.innerHTML='Add to cart';">{l s='Add to cart'}</span>

the bug is ---addded--- solo  it s better with translation and single quote ^^

tested on Ps 1.6.1.20

PS: dont forget to empty cache  PS and Navigator ^^

@++

Loulou66