Jump to content

Add to cart image transfer effect


razaro
 Share

Recommended Posts

Update : 05.12.2011

I apologize, should have updated this topic long time ago.

Original modification was done for some 1.3.x version and from 1.4 version

PrestaTeam added their own image to cart effect which is much efficient and with less code. So don't use this for any 1.4 version, and if you are on 1.3.x - what are you waiting, update to latest 1.4 version :-)

 

When add to cart button is clicked, if Ajax is enabled,you see transfer effect:

gray square goes from product to cart.This is code for it:

/* transfert effect*/
.transferProduct { border: 2px solid #888; }

I changed ajax-cart.js code so that when you click on add to cart copy of product image is transferred to cart.

This works with default theme on homepage (featured product block), any page that have list of products (category page, search result, price-drop...) and with slightly different effect, on product info page.

Also this should work on other themes that have cart block and ajax enebled.

To make it work go to modules\blockcart backup ajax-cart.js file and then replace it with one in attachment.

Big thanks to ysco for suggestions and testing.

Update v02

Changed code a bit to fix problems with position:relative .

ajax-cart-image-transfer-01.zip

ajax-cart-image-transfer-02.zip

Share this post


Link to post
Share on other sites

Hello Razaro ;)

No problem at all, glad i could help you with testing.

This is a must have and this is much better then the standard transfer square that goes to cart block, people see now the product they buy transfered to the cart block.

Thanks for the work and share Razaro.

Best regards,


ysco..

Share this post


Link to post
Share on other sites

Great work!

I have one wish to the cart transfer, but this meight be more in generel. I resently heard a podcast from an expert in converting optimizing. And he has done tests on "add item to carts", and about 10% of users leave the site because they cant figure out wether or not they have placed the item in the cart. This emage transfer is a great effekt, and so is the original one, but is it posibel to add perhaps a "popup" msg telling the user that the item has bin placed in the cart (with ok confirm button)?

Share this post


Link to post
Share on other sites

  • 1 month later...

That can be changed.
Change this code around line 235

            $(image_block)
           .clone()
           .prependTo('#page')
           .css({'position' : 'absolute','width': newImageWidth, 'height': newImageHeight,'left':productX,'top':productY,'z-index':9999})
           .animate({ marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 900, function() {
               $(this).remove();
               });      
           } 


to

            $(image_block)
           .clone()
           .prependTo('#page')
           .css({'position' : 'absolute','left':productX,'top':productY,'z-index':9999})
           .animate({ marginLeft: gotoX, marginTop: gotoY,opacity:0.6, width: newImageWidth, height: newImageHeight}, 900, function() {
               $(this).remove();
               });      
           }


That way image is animated from original size to 30% of it size.
That also can be adjusted at line 184

                            ajaxCart.imageTransfer('#bigpic','0.3');


Also it animates opacity.

Share this post


Link to post
Share on other sites

  • 2 months later...
  • 1 month later...

I like this idea. I tried it but currently it actually moves a copy of the product image to the cart rather than the grey box - how can I change it - I prefer the grey box. I looked through all the php and tpl files but could not see the 'transfer effect' line

Share this post


Link to post
Share on other sites

If you prefer gray box just restore original ajax-cart.js.
You can change style in global.css

/* transfert effect*/
.transferProduct { border: 2px solid #888; }


and that is called in ajax-cart.js here

                elementToTransfert.TransferTo({
                           to: $('#cart_block').get(0),
                           className:'transferProduct',

Share this post


Link to post
Share on other sites

For some reason now, when ajax cart is activated I get a page error in IE and the cart collapses showing only that one product is in the cart and no effects when add to cart is clicked - you just go straight to the cart. When I turn off ajax cart the cart tabs reappear and all works ok - but no effect when add to cart is clicked - any ideas? I just added and then removed one module which didn't work (coolshare) but this surely couldn't have affected any files?

Share this post


Link to post
Share on other sites

You have some JavaScript error and that is why it goes straight to the cart.
In ajax-cart.js you have on line 238

.animate({ marginLeft: gotoX, marginTop: gotoY,opacity:0.4, newImageWidth, height: newImageHeight}, 900, function() {


but it should be

.animate({ marginLeft: gotoX, marginTop: gotoY,width: newImageWidth, height: newImageHeight}, 900, function() {



so you are missing width:

Share this post


Link to post
Share on other sites

Hi, ok - that's weird how you knew which line text it was?? I changed it to add the width, but should i take out the 'opacity' - this is mentioned in the same post above.

I have done this and uploaded the file but still I get the same error below, but all is ok. I am editing in notepad so can't see the line numbers but I believe it's the same place.

In mozilla it works ok but with the grey box - not the picture. In IE it just is a collapsed box. If I make changes it should be immediate, no?

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; InfoPath.2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C)
Timestamp: Thu, 7 Oct 2010 22:15:06 UTC


Message: Expected ':'
Line: 238
Char: 77
Code: 0
URI: http://www.marisrom.com/e-boutique/modules/blockcart/ajax-cart.js

Share this post


Link to post
Share on other sites

Ok, sorted. It seems the ftp was not changing the file to the one I corrected as you said and then uploaded. So I saved as a text file and uploaded and then changed it to .js and it worked. All back to normal. Why it happened though don't know.

But very appreciative of the help - super, thanks! Now I can go and sleep easy :)

Share this post


Link to post
Share on other sites

I use Google Chrome and its developer tools and also Notepad++.

Look at code

.animate({ marginLeft: gotoX, marginTop: gotoY,opacity:0.6, width: newImageWidth, height: newImageHeight}, 900, function() {



So it animates pairs property : value like opacity:0.6 and if you don't want to animate opacity just delete opacity:0.6,

Try both cases.

Share this post


Link to post
Share on other sites

Hi, this is working now, but by chance I worked on another laptop and the page looks different. So I have loaded my webpage on three separate laptops (all with IE8) 2 with vista one with XP and it shows different on one of the laptops with vista - with nothing working correctly at all - how can this be?

Also what google tools do you use? Can you send me a link? Google Chrome I have just downloaded, but boy is it messy.

Share this post


Link to post
Share on other sites

  • 2 weeks later...
  • 2 weeks later...
  • 2 months later...
Sorry but I have this module does not work ((
Maybe there are solutions?

www.mypozitiv.ru


Fant63- How did you achieve this visual where the zoom-in feature shows when you hover over cart? Anyone with suggestions or codes please post. Thanks in advance.

Share this post


Link to post
Share on other sites

  • 1 month later...

Hello, very good contribution! but I have a problem to see if someone has a solution, my site is inside a container div (div scroller / div content / div page), the problem is that when you add the product if the page is moved (scroll) and not detect the position of the image of the product and the effect by adding the product is not the end, how I can fix it? Thanks and regards

Site: www.bohoworld.com

Share this post


Link to post
Share on other sites

  • 2 months later...

I have Prestashop 1.4.7 and I did a mod to slightly alter the blockcart.tpl file and ajax-cart.js and now your lovely animation effect is gone..

here is my code below.. do you think you can help?


//JS Object : update the cart by ajax actions
var ajaxCart = {

//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, $('#quantity_wanted_'+idProduct).val());
return false;
});
//for product page 'add' button...
$('body#product p#add_to_cart input').unbind('click').click(function(){
ajaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
return false;
});
//for 'delete' buttons in the cart block...
$('#cart_block_list .ajax_cart_block_remove_link').unbind('click').click(function(){
// Customized product management
var customizationId = 0;
var productId = 0;
var productAttributeId = 0;
if ($($(this).parent().parent()).attr('name') == 'customization')
// Reverse two levels: a >> div >> li
var customizableProductDiv = $($(this).parent().parent()).find("div[id^=deleteCustomizableProduct_]");
else
var customizableProductDiv = $($(this).parent()).find("div[id^=deleteCustomizableProduct_]");
if (customizableProductDiv && $(customizableProductDiv).length)
{
$(customizableProductDiv).each(function(){
var ids = $(this).attr('id').split('_');
if (typeof(ids[1]) != 'undefined')
{
customizationId = parseInt(ids[1]);
productId = parseInt(ids[2]);
if (typeof(ids[3]) != 'undefined')
productAttributeId = parseInt(ids[3]);
return false;
}
});
}

// Common product management
if (!customizationId)
{
//retrieve idProduct and idCombination from the displayed product in the block cart
var firstCut = $(this).parent().parent().attr('id').replace('cart_block_product_', '');
firstCut = firstCut.replace('deleteCustomizableProduct_', '');
ids = firstCut.split('_');
productId = parseInt(ids[0]);
if (typeof(ids[1]) != 'undefined')
productAttributeId = parseInt(ids[1]);
}

// Removing product from the cart
ajaxCart.remove(productId, productAttributeId, customizationId);
return false;
});
},

// try to expand the cart
expand : function(){
if ($('#cart_block #cart_block_list').hasClass('collapsed'))
{
$('#cart_block #cart_block_summary').slideUp(200, function(){
$(this).addClass('collapsed').removeClass('expanded');
$('#cart_block #cart_block_list').slideDown({
duration: 600,
complete: function(){$(this).addClass('expanded').removeClass('collapsed');}
});
});
// toogle the button expand/collapse button
$('#cart_block h4 span#block_cart_expand').fadeOut('slow', function(){
$('#cart_block h4 span#block_cart_collapse').fadeIn('fast');
});

// save the expand statut in the user cookie
$.ajax({
type: 'GET',
url: baseDir + 'modules/blockcart/blockcart-set-collapse.php',
async: true,
data: 'ajax_blockcart_display=expand' + '&rand;=' + new Date().getTime()
});


}
},

// cart to fix display when using back and previous browsers buttons
refresh : function(){
//send the ajax request to the server
$.ajax({
type: 'GET',
url: baseDir + 'cart.php',
async: true,
cache: false,
dataType : "json",
data: 'ajax=true&token;=' + static_token,
success: function(jsonData)
{
ajaxCart.updateCart(jsonData);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
//alert("TECHNICAL ERROR: unable to refresh the cart.\n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus);

Share this post


Link to post
Share on other sites

  • 2 weeks later...

this is not working.. it is still requiring I hit refresh for it to show in the cart..
anyone know how to add a line of code so that after it adds it to the cart it will automatically refresh the page to show the item in the cart?

That is really all I need to make this work.

Share this post


Link to post
Share on other sites

  • 6 months later...

Very Good module. I have installed it and every thing works good but....

 

After adding product cart, Product image transfer effect is shown, but the product is not appearing in the cart block. If wee refresh the page then the product is shown in the cart block.

 

Please help me to achieve that.

Share this post


Link to post
Share on other sites

I apologize, should have updated this topic long time ago.

Original modification was done for some 1.3.x version and from 1.4 version

PrestaTeam added their own image to cart effect which is much efficient and with less code. So don't use this for any 1.4 version, and if you are on 1.3.x - what are you waiting, update to latest 1.4 version :-)

Share this post


Link to post
Share on other sites

  • 2 months later...

Hi can you upload the code in the txt file? thank's

 

I have Prestashop 1.4.7 and I did a mod to slightly alter the blockcart.tpl file and ajax-cart.js and now your lovely animation effect is gone..

 

here is my code below.. do you think you can help?

//JS Object : update the cart by ajax actions

var ajaxCart = {

 

//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, $('#quantity_wanted_'+idProduct).val());

return false;

});

//for product page 'add' button...

$('body#product p#add_to_cart input').unbind('click').click(function(){

ajaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);

return false;

});

//for 'delete' buttons in the cart block...

$('#cart_block_list .ajax_cart_block_remove_link').unbind('click').click(function(){

// Customized product management

var customizationId = 0;

var productId = 0;

var productAttributeId = 0;

if ($($(this).parent().parent()).attr('name') == 'customization')

// Reverse two levels: a >> div >> li

var customizableProductDiv = $($(this).parent().parent()).find("div[id^=deleteCustomizableProduct_]");

else

var customizableProductDiv = $($(this).parent()).find("div[id^=deleteCustomizableProduct_]");

if (customizableProductDiv && $(customizableProductDiv).length)

{

$(customizableProductDiv).each(function(){

var ids = $(this).attr('id').split('_');

if (typeof(ids[1]) != 'undefined')

{

customizationId = parseInt(ids[1]);

productId = parseInt(ids[2]);

if (typeof(ids[3]) != 'undefined')

productAttributeId = parseInt(ids[3]);

return false;

}

});

}

 

// Common product management

if (!customizationId)

{

//retrieve idProduct and idCombination from the displayed product in the block cart

var firstCut = $(this).parent().parent().attr('id').replace('cart_block_product_', '');

firstCut = firstCut.replace('deleteCustomizableProduct_', '');

ids = firstCut.split('_');

productId = parseInt(ids[0]);

if (typeof(ids[1]) != 'undefined')

productAttributeId = parseInt(ids[1]);

}

 

// Removing product from the cart

ajaxCart.remove(productId, productAttributeId, customizationId);

return false;

});

},

 

// try to expand the cart

expand : function(){

if ($('#cart_block #cart_block_list').hasClass('collapsed'))

{

$('#cart_block #cart_block_summary').slideUp(200, function(){

$(this).addClass('collapsed').removeClass('expanded');

$('#cart_block #cart_block_list').slideDown({

duration: 600,

complete: function(){$(this).addClass('expanded').removeClass('collapsed');}

});

});

// toogle the button expand/collapse button

$('#cart_block h4 span#block_cart_expand').fadeOut('slow', function(){

$('#cart_block h4 span#block_cart_collapse').fadeIn('fast');

});

 

// save the expand statut in the user cookie

$.ajax({

type: 'GET',

url: baseDir + 'modules/blockcart/blockcart-set-collapse.php',

async: true,

data: 'ajax_blockcart_display=expand' + '&rand;=' + new Date().getTime()

});

 

 

}

},

 

// cart to fix display when using back and previous browsers buttons

refresh : function(){

//send the ajax request to the server

$.ajax({

type: 'GET',

url: baseDir + 'cart.php',

async: true,

cache: false,

dataType : "json",

data: 'ajax=true&token;=' + static_token,

success: function(jsonData)

{

ajaxCart.updateCart(jsonData);

},

error: function(XMLHttpRequest, textStatus, errorThrown) {

//alert("TECHNICAL ERROR: unable to refresh the cart.\n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus);

 

 

 

[color=#343943][font=Arial, Helvetica, sans-serif][size=3]Hi can you upload the code in the txt file? thank's [/size][/font][/color]

Share this post


Link to post
Share on other sites

  • 9 months later...

Hello,

 

I have some trouble with the module as well. On my website the add to cart image effect is not visible. It has never been, but now feels about the right time to fix it. After a lot of reading and tweaking I found out that the image effect is taking place, only behind my content. I managed to tweak the code so much that the image effect started and ended on the dark grey background on the left of my side. So it is before the dark grey, but behind all other content.

I modified my theme and modules quite a lot and I have been trying to use the Z-index code in CSS, but no succes. The website is http://www.tuinkoken.nl and any help would be greatly appreciated.Oh yeah, the standard blockcart(1) does work on the default theme.

 

Thank in advance!

 

Ray

Share this post


Link to post
Share on other sites

  • 4 weeks later...

$(image_block)

.clone()

.prependTo('#page')

.css({'position' : 'absolute','z-index':9999,'left':productX,'top':productY})

.animate({ marginLeft: gotoX, marginTop: gotoY}, 1400, function() {

 

$(this).remove();

});

}

 

 

problem is #page is not there to mansion height and width

how can i mention it?

Share this post


Link to post
Share on other sites

$(image_block)

.clone()

.prependTo('#page')

.css({'position' : 'absolute','z-index':9999,'left':productX,'top':productY})

.animate({ marginLeft: gotoX, marginTop: gotoY}, 1400, function() {

 

$(this).remove();

});

}

 

 

problem is #page is not there to mansion height and width

how can i mention it?

 

 

ya i got it !!!

 

This is challenge to every one to get me solution !

 

but now if the image of the product is too far then speed of animation is too fast cant see when the product is moved into cart.....

so please any one is there to help me about how to control over speed :(

Edited by kiranrathod (see edit history)

Share this post


Link to post
Share on other sites

First I must say if you haven't read first post this solution is for alder versions.

And you should check new code for transferring effect.

 

But for your question, you can use .prependTo('body') and increase value 1400 in animate function.

Share this post


Link to post
Share on other sites

First I must say if you haven't read first post this solution is for alder versions.

And you should check new code for transferring effect.

 

But for your question, you can use .prependTo('body') and increase value 1400 in animate function.

i am using 1.4.7.3 V

thanks for your ans: but it is not working :(

 

i'll clear my question:- my page contains 300 products so if i click add to cart button at the bottom most product(which is too far from the distance to My Cart ) it will go vary fast to the My Cart place. if in case the product is near to My Cart it will go nicely(slowly )

 

here is the code. it is calculating gotoX and gotoY: please have a look.

 

i need to make speed of the product towards cart same ??????

 

 

imageTransfer : function(image_block,ratio){

var productX = $(image_block).offset().left;

var productY = $(image_block).offset().top;

var cartX = $("#cart_block").offset().left;

var cartY = $("#cart_block").offset().top;

var gotoX = cartX - productX;

var gotoY = cartY - productY;

 

if(ratio==0){

 

$(image_block)

.clone()

.prependTo('#page')

.prependTo('body')

.css({'position' : 'absolute','z-index':9999,'left':productX,'top':productY,'height':'120px','width':'120px'})

.animate({ marginLeft: gotoX, marginTop: gotoY}, 6400, function() {

 

$(this).remove();

});

}

Edited by kiranrathod (see edit history)

Share this post


Link to post
Share on other sites

This was written for 1.3 but never mind, for long list of products it would show same effect.

You could try to calculate duration depending on position, so look at this code, it is from my head and not tested so

you should adjust values in var aduration = 6400 + Math.abs(gotoY)*0.05;

I wrote here 0.05 but maybe it needs 0.005 or some other.

 

imageTransfer : function(image_block,ratio){
var productX  = $(image_block).offset().left;
var productY  = $(image_block).offset().top;
var cartX  = $("#cart_block").offset().left;
var cartY  = $("#cart_block").offset().top;
var gotoX  = cartX - productX;
var gotoY  = cartY - productY;
var aduration = 6400 + Math.abs(gotoY)*0.05;
if(ratio==0){
$(image_block)
.clone()
.prependTo('#page')
.prependTo('body')
.css({'position' : 'absolute','z-index':9999,'left':productX,'top':productY,'height':'120px','width':'120px'})
.animate({ marginLeft: gotoX, marginTop: gotoY}, aduration, function() {
$(this).remove();
});
}

Share this post


Link to post
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More