Clicking 'add To Cart' Pop-Up Box Confirmation With 'continue Shopping' + 'checkout' Links

bobbob · February 1, 2010

I guess that title doesn't make too much sense. Have a peek over at "madeleinemarket":http://www.madeleinemarket.com/

Basically, when a customer clicks the 'add to basket' button, a lovely pop-up box appears asking them if they want to continue shopping or checkout. I'm assuming this involves some sort of JQuery goodness, does anyone have any ideas on how to achieve this?

Screenshot attached

Regards

Mokijo

bobbob · February 1, 2010

Shameless bump....

I've looked for paid modules, but have yet to find one.

To Module / PS Developers- This pop-up box I'm trying emulate is common on many ecommerce sites. I doubt it'll appear in the core platform anytime soon, so maybe someone would like to make a paid-for module???

Keep it cheap, and I'll happily pimp it for ya!

:coolsmile:

Burhan BVK · February 1, 2010

I have modified the blockcart module a little bit to have this functionality. I am attaching the modified files. You have to copy the header.php to the root folder.
You should backup your existing files before trying this.

blockcart.zip

bobbob · February 1, 2010

Cheers Whitelighter. Will have a fiddle later and i'll let you know how I get on.

Nice1

mooshi · February 4, 2010

Hi! whitelighter

That's great! thanks very much...but I have noticed it knocks out the SSL on the order.php, I've tried changing the url to the thickbox for the cart to SSL, but still no worky? do you have a solution at all please...

Thanks! very much

greenhorn · August 4, 2010

Whitelighter, you are absolutely brilliant. thanks

willrose84 · September 17, 2010

Hi I have replaced the files and it does not seam to work do you have any ideas on what I might be doing wrong?

many thanks

Will

Sund-og-smuk.dk · December 12, 2010

Hi,

Thanks for sharring this really cool feature!

I am trying to use this in prestashop .1.3.3 i get the popup, but there is an error. (see attachments)

Can anyone help me fix this?

Thanks in advance

Sund-og-smuk.dk · December 17, 2010

Hi everybody,

I have pay'ed a guy to fix this for me.

If you want this to prestashop 1.3.3, send me an email, kontakt(@)sund-og-smuk.dk.

gfxpixeldesigns · January 7, 2011

Hi everybody,

I have pay'ed a guy to fix this for me.

If you want this to prestashop 1.3.3, send me an email, kontakt(@)sund-og-smuk.dk.

Why couldnt you have attached the changes here ?

Anyway, i've modified this for prestashop 1.3.5.0 and the files are attached !

Note there are two files, ajax-cart.js and blockcart.tpl, you need to replace your current files with these but remember to make a backup first ! Also, note that my blockcart.tpl is slightly modified so it may produce varied results depending how your install is setup. If you want to avoid this just add the following after the final but before the  of your blockcart.tpl

<!-- Modal Thickbox content -->
[removed]
// <![CDATA[
   ThickboxI18nImage = '{l s='Image'}';
   ThickboxI18nOf = '{l s='of'}';
   ThickboxI18nClose = '{l s='Close'}';
   ThickboxI18nOrEscKey = '{l s='or Esc key'}';
   ThickboxI18nNext = '{l s='Next'} >';
   ThickboxI18nPrev = '< {l s='Prev'}';
   tb_pathToImage = '{$base_dir}img/loadingAnimation.gif';
//]]>
[removed]





{l s='Continue Shopping' mod='blockcart'}

{l s='Check out' mod='blockcart'}



 
<!-- /Modal Thickbox content -->

blockcart.zip

cassim · January 8, 2011

Hi everybody,

I have pay'ed a guy to fix this for me.

If you want this to prestashop 1.3.3, send me an email, kontakt(@)sund-og-smuk.dk.

Why couldnt you have attached the changes here ?

Anyway, i've modified this for prestashop 1.3.5.0 and the files are attached !

Note there are two files, ajax-cart.js and blockcart.tpl, you need to replace your current files with these but remember to make a backup first ! Also, note that my blockcart.tpl is slightly modified so it may produce varied results depending how your install is setup. If you want to avoid this just add the following after the final
but before the  of your blockcart.tpl

Hi..
I have tryed to make this work but without any luck

I did the following.

Downloaded the first .zip file. (zip1)
Downloaded your .zip file. (zip2)

First i movede header.php to my root folder (zip1)

Than i copyed the files from zip2 into /modules/blockcart/

And agreede to override the files.

Now on my site customdata.info/presta i am still unable to see the box pop op

jolvil · January 8, 2011

I've tried gfxpixeldesigns code on PS1.3.5, the popup works fine on product page adding to cart, but doesn't work on other add to cart buttons: home featured, list of products.

gfxpixeldesigns · January 8, 2011

Hi Martin,

If your using the latest stable prestashop version 1.3.5.0 you shouldnt need to copy header.php to root, at least i didnt need to. Basically if your using the latest version you can ignore the first zip posted since that was for an older version, download the second zip posted, unzip and copy the two files to your /blockcart/ folder.

If you've already replaced your files id suggest starting over with a fresh set of blockcart modules or if you have a backup use that.

Also, remember my blockcart.tpl is modified so you may be better of making the changes manually as posted above.

gfxpixeldesigns · January 8, 2011

I've tried gfxpixeldesigns code on PS1.3.5, the popup works fine on product page adding to cart, but doesn't work on other add to cart buttons: home featured, list of products.

Thanks jolvil i hadnt noticed that but your right, the popup is only appearing on product pages ... will have a look later and post back.

cassim · January 8, 2011

Hi Martin,

If your using the latest stable prestashop version 1.3.5.0 you shouldnt need to copy header.php to root, at least i didnt need to. Basically if your using the latest version you can ignore the first zip posted since that was for an older version, download the second zip posted, unzip and copy the two files to your /blockcart/ folder.

If you've already replaced your files id suggest starting over with a fresh set of blockcart modules or if you have a backup use that.

Also, remember my blockcart.tpl is modified so you may be better of making the changes manually as posted above.

HAHA ofc my demo is the 1.3.5 but my online shop is still runnning the old version
I upped it the same way on both site as you told. made the changes manuel

And my live site did mange to make it work. The demo site dident

Can your "fix" make it display the product titel insted of the product desc?

EDIT:
Have added some pics

gfxpixeldesigns · January 8, 2011

Okay looks like we needed the header.php changes after all, i was just missing two lines of code which call the thickbox js and css files. Its now working on all pages that i can see and works fine in firefox & ie7 +.

Attached zip inlcudes 3 files:

ajax-cart.js
blockcart.tpl
header.php

The first two files (ajax-cart.js & blockcart.tpl) need to be uploaded to /modules/blockcart/
and header.php needs to be uploaded to your root as in /

Again make sure to backup any files before making these changes.

blockcart.zip

cassim · January 8, 2011

Okay looks like we needed the header.php changes after all, i was just missing two lines of code which call the thickbox js and css files. Its now working on all pages that i can see and works fine in firefox & ie7 +.

Attached zip inlcudes 3 files:

ajax-cart.js
blockcart.tpl
header.php

The first two files (ajax-cart.js & blockcart.tpl) need to be uploaded to /modules/blockcart/
and header.php needs to be uploaded to your root as in /

Again make sure to backup any files before making these changes.

uploaded the new files.

Look on the img it still looks fucked tbh.

gfxpixeldesigns · January 8, 2011

Ahhh sorry i just noticed something still isnt working quite right, the popup appears on all pages now but im missing the product description on some pages ! My bad ill post another fix when i figure it out, 3rd times always the charm lol ;-).

cassim · January 8, 2011

Ahhh sorry i just noticed something still isnt working quite right, the popup appears on all pages now but im missing the product description on some pages ! My bad ill post another fix when i figure it out, 3rd times always the charm lol ;-).

Please add product name insted of product description or both ! not just desc.

Thanks

gfxpixeldesigns · January 8, 2011

Will do Martin i just want to make sure its all working first ;-).

My findings are that it is working BUT for the description and image to show in the popup you need to have the description and image on the actual page, you see the ajax grabs the description and image from the page.

So for this to work on category pages or homepage for example you need to have a description with the class of '.product_desc a' and an image with '.product_img_link', if your on the default prestashop theme this should be the case anyway so it should be working. if your not on the default theme make sure you have those classes active.

cassim · January 8, 2011

Will do Martin i just want to make sure its all working first ;-).

My findings are that it is working BUT for the description and image to show in the popup you need to have the description and image on the actual page, you see the ajax grabs the description and image from the page.

So for this to work on category pages or homepage for example you need to have a description with the class of '.product_desc a' and an image with '.product_img_link', if your on the default prestashop theme this should be the case anyway so it should be working. if your not on the default theme make sure you have those classes active.

they are working.
but as there is no info in the ".product_desc a"

gfxpixeldesigns · January 8, 2011

Okay heres the popup showing the item title rather than the description ...

5 files in the attached zip this time:

blockcart.tpl and ajax-cart.js need to go in your /modules/blockcart/
header.php in your root as in /
product.tpl and product-list.tpl go in /themes/yourtheme/

Please make sure to backup any files before making changes !

Note the above files are all for the default prestashop 1.3.5.0 setup and theme.

Again this should work on all pages providing you have the class .product-title for item title headings and .product_img_link for images. ie lets say you wanted this to work on homefeatured you'd need something like this:

blockcart.zip

gfxpixeldesigns · January 8, 2011

Will do Martin i just want to make sure its all working first ;-).

My findings are that it is working BUT for the description and image to show in the popup you need to have the description and image on the actual page, you see the ajax grabs the description and image from the page.

So for this to work on category pages or homepage for example you need to have a description with the class of '.product_desc a' and an image with '.product_img_link', if your on the default prestashop theme this should be the case anyway so it should be working. if your not on the default theme make sure you have those classes active.

they are working.
but as there is no info in the ".product_desc a"

Martin im not sure if the latest change will work for you since your using cufon's for your headings but give it a try and hope for the best :-).

cassim · January 8, 2011

Will do Martin i just want to make sure its all working first ;-).

My findings are that it is working BUT for the description and image to show in the popup you need to have the description and image on the actual page, you see the ajax grabs the description and image from the page.

So for this to work on category pages or homepage for example you need to have a description with the class of '.product_desc a' and an image with '.product_img_link', if your on the default prestashop theme this should be the case anyway so it should be working. if your not on the default theme make sure you have those classes active.

they are working.
but as there is no info in the ".product_desc a"

Martin im not sure if the latest change will work for you since your using cufon's for your headings but give it a try and hope for the best :-).

it don't..
Still the null null on the frontpage (dident use the

as i dident know where to put it.

The product page and product list dident get to show, at all

gfxpixeldesigns · January 8, 2011

Martin give this a try ...

Edit /themes/yourtheme/product-list.tpl

find a line that resembles something similar to:

{$product->name|escape:'htmlall':'UTF-8'}

in your case i think its a h5 tag so you just look for :

$product->name

change your

to:

Save the changes and see if it works.

It should look like this http://www.tronicextreme.co.uk/tronicextreme_redesign/25-blue

cassim · January 8, 2011

Martin give this a try ...

Edit /themes/yourtheme/product-list.tpl

find a line that resembles something similar to:
{$product->name|escape:'htmlall':'UTF-8'}
in your case i think its a h5 tag so you just look for :
$product->name
change your

to:

Save the changes and see if it works.

It should look like this http://www.tronicextreme.co.uk/tronicextreme_redesign/25-blue

just getting this pic on the product page.

I only have a few products with the shot desc.
All my products have pics.
All my products have long desc.

the pic is from the productpage.
All others are just giving null null insted of the img

gfxpixeldesigns · January 8, 2011

just getting this pic on the product page.

I only have a few products with the shot desc.
All my products have pics.
All my products have long desc.

the pic is from the productpage.
All others are just giving null null insted of the img

The null is because it cant find the class selector ie your missing one or both of .product-title and .product_img_link, see attachment h2 is missing .product-title. Plus your on a custom theme so i cant really tell you what to edit, your theme doesnt appear to be using product-list.tpl or product.tpl either so editing those wont do a thing. Maybe if you could post the contents of your tpl files i could change it for you.

snatch1974 · January 21, 2011

hi,

i have about same problem with "null" and "null" on home page and categories pages.

in ajax-cart.js, i have this:

var th, desc;
if($('#short_description_content').html()!=null){
 th=$('#thumbs_list_frame li:first').html();
 desc=$('#short_description_content').html();
}else{
 th=$(callerElement).parent().prev().children('.product_img_link').html();
 desc=$(callerElement).parent().prev().children('.product_desc a').html();
}

and you can check on the website www.marguerite-compagnies.com, each class

if someone could help me, it will be perfect!
Thanks

it's ok, i succeed to fix it!!!
it was because of my template.

ccyyrriillee · January 24, 2011

Thank you for this code, works great!
I only have one question: where can i change image size?
"medium" is the current size, i would like to change it to "home" size and i don't know how to do it.

Thanks for your help

snatch1974 · January 25, 2011

Hi,
everything was working fine until i check on ie8!
there is a trouble between this code and the add-on "Block Login Slide Jquery".
when we put something in the cart, i have this error:"no valid argument. eval code, ligne 1 caractère 42921"

{a.elem.style[a.prop]=a.now+a.unit}

How can i fix it please?
or can i have a condition who says "when ie don't use this fonction for the cart"?
Thanks

Annie_j · January 28, 2011

I've just been reading about the block cart - continue shopping.

I have downloaded the zip file you have provided , can I ask please do I just upload it to the modules and then configure it. cause I'm not techie minded and if it involves replacing code etc. then I'll do without it.

Hoping for the right reply!!!

yours

Annie.

evolution.x · February 4, 2011

Hi,

I am trying to achieve the thickbox but when i put the code:

/* CSS */
$css_files[_THEME_CSS_DIR_.'global.css'] = 'all';
$css_files[_THEME_CSS_DIR_.'custom.css'] = 'all';
$css_files[__PS_BASE_URI__.'css/thickbox.css'] = 'all';
$js_files[] = __PS_BASE_URI__.'js/jquery/thickbox-modified.js';

In my header.php the categories disappear on my homepage: please see pics.

Timpet · February 5, 2011

This popup comes even though the last item has bin placed in the cart and there are no more on stock. Does anyone have a fix for that issue?

archproject · February 14, 2011

Hi there,

I am selling tees and I want to have my customers to click the "add to cart" button and a popup will be displaying the attributes of the t-shirt and 2 buttons saying "Configuration is OK Continue to add to cart" (will add the product with the default attribute combinations to cart) and "Customise Further" (will go to the product page)

Can this be done ?

hulk · June 7, 2011

thank you for this contribution
I'm using version 1.2.5 and I can not run this module on this version.
I edit the file header.php and replace the 2 files ajax-blockcart.tpl and ajax-cart.js but still nothing
is that the 3 zip files are compatible with this version?

hulk · June 28, 2011

hi again
no one can answer me?
this modification is compatible with version 1.2.5 or not ?
up plz it's urgent

zaglebie · June 29, 2011

i tried to install this on latest prestashop and its not working

hulk · July 1, 2011

no one can answer me? :question: :question: :question:
up plz
thx

cassim · July 4, 2011

Hallo

I got this working on all other pages than the front page.

Are any of you able to help me on how i can get it to work their ??

http://customdata.dk have a look and see it. (it writes the null null)..

hulk · July 7, 2011

upppppppppppppp plz
it don't work in any version : 1.2.5, 1.3.1 and 1.3.7
i do all the modification but no pop up in any page of site
can someone tell me what's wrong??

cassim · July 7, 2011

upppppppppppppp plz
it don't work in any version : 1.2.5, 1.3.1 and 1.3.7
i do all the modification but no pop up in any page of site
can someone tell me what's wrong??

I run it on 1.3.7 works fine

hulk · July 7, 2011

can you send me your module folder blockcart and the header.php to try it in my version and tell me the modification that you made if possible.
thx

hulk · July 12, 2011

can somoene send me his blockcart module to test it in my shop or tell me how it work coz it don't work with my 1.2.5, 1.3.1 and 1.3.7 version
thx

hulk · July 15, 2011

now it work fine in my 1.2.5 but i have a little mistake, i need to change the heigt and width of the pop up.
my pop up have

but in my blockcart.tpl i have this dimension i change it

href="#TB_inline?height=200&width=300&inlineId=checkoutorcontinue"

how can i change it?

overdoze · July 18, 2011

thank you for this tip
I have a problem when I have a product with quantity = 1 in stock and I I add to cart the pop up is working properly but when I add it again a message appears "you have reached the maximum quantity for this product, "I close the window and then pop up appears again.
I do not want it displayed when I exceed the maximum amount of the product
how I can proceed
thx

noname001 · August 10, 2011

This module don't work with prestashop version 1.4, how can I modify this module to work with prestashop version 1.4

Thanks

September 3, 2011

his module don't work with prestashop version 1.4

popo559 · September 15, 2011

This module don't work with prestashop version 1.4, how can I modify this module to work with prestashop version 1.4

Thanks

same question

hulk · September 15, 2011

how to make the pop up does not appear when I order a quantity greater than that in stock because it appears just after the error message that tells me that the product is no longer available.

thx

PrestashopTrackglobe · September 18, 2011

Is this module available for the 1.4 version?if yes, does it works good?

Regards, and thanks

PrestashopTrackglobe · September 18, 2011

Is this module available for the 1.4 version?If yes, is it working good?

Thanks and regards

marcel13 · October 19, 2011

up

November 28, 2011

up

acateon · December 22, 2011

Bump.

This mod for 1.4 would be awesome!

December 24, 2011

this modules is great. i like it.

tiga · February 28, 2012

Yeah this would be great for 1.4...no one working on that?

tiga · February 28, 2012

I've found exactly what we are looking for but is paid and it is not cheap.. http://addons.prestashop.com/en/checkout/3665-confirmation-panier-plus--cart-confirmation-plus---modulo.html

msk69 · March 1, 2012

Here is another (paid) one: http://www.presta-module.com/en/prestashop-modules/21-modal-cart.html

nouvtech · March 22, 2012

Here is another one (paid, but cheaper) : http://shop.cibles.fr/en/prestashop-modules/5-block-cart-cibles.html

BeamerInTilburg.nl · May 30, 2012

Does anyone have a working free module for 1.4? This should be included into the main release though...

fernandokerber · May 31, 2012

Does anyone have a working free module for 1.4? This should be included into the main release though...

i want it too

zacha · July 9, 2012

me too

fernandokerber · July 10, 2012

zzzz

safa · July 12, 2012

i working confiruge for ps1.4.x .

shlomisarahlhanuka · July 15, 2012

i working confiruge for ps1.4.x .

hii Safa

Thanks for the help

Did you solved it already?

Can you post the changes in the files?, for manually files change

safa · July 15, 2012

i working give me a littele time. i have to make this .

shlomisarahlhanuka · July 15, 2012

i working give me 1-2 days. i have to make this

thanks thanks thanks

ysco · July 15, 2012

Hello guys,

You can also check out the free module from OEB in the frence forum here,

http://www.prestashop.com/forums/topic/172108-module-bloc-panier-premium/

This just might be what your looking for

They share some other nice modules too with the community.

Regards,

ysco..

Edited July 15, 2012 by ysco (see edit history)

fernandokerber · July 16, 2012

Hello guys,

You can also check out the free module from OEB in the frence forum here,

http://www.prestasho...panier-premium/

This just might be what your looking for

They share some other nice modules too with the community.

Regards,

ysco..

Thanks. I'll have a try.

fernandokerber · July 16, 2012

i working give me 1-2 days. i have to make this

Thanks!

we're waiting for your solution.

Lets work together

fernandokerber · August 2, 2012

Hi..

I found a module in a Portuguese forum that does exactly this.

This is the original post..

http://forum.prestashopbr.com/viewtopic.php?f=3&t=5418

It still have some issues to be solved. but its ok

raul · August 22, 2012

Hello,

Frist I wan t to say THANKS for this, I m from spain and I would like to translate "Product Has Been Sucessfully Added To Your Cart !" and I can´t find it.

Somebody can hlep me

Thanks

Raul

hightone69 · September 28, 2013

I Thank you for your blockcart Module! your module works for the list of products, but when you're on the product page is not in the image of the product on the popup, how to cure this problem?

PS 1.25

SkyHiRider · January 26, 2014

Hi..

I found a module in a Portuguese forum that does exactly this.

This is the original post..

http://forum.prestashopbr.com/viewtopic.php?f=3&t=5418

It still have some issues to be solved. but its ok

Could you share a new link? The old one is dead :/

Maskca · March 13, 2014

if someone else needs a similar module, you can look here: XXXXXX

moderated

read forum rules before posting.

mbpp · August 14, 2014

I have modified the blockcart module a little bit to have this functionality. I am attaching the modified files. You have to copy the header.php to the root folder.

You should backup your existing files before trying this.

Strange, is not working for me :S

ozerom · November 26, 2014

thanks

kajilama · March 13, 2016

Hi all,

I am very new to Prestashop and this forum. I am also trying to accomplish the same thing - remove the pop-up notification and instead show an animation or text somewhere at the top (to allow wholesale buyers to add multiple products quickly without repeatedly closing the popup notification which definitely is a time waster). Kapil's solution seemed like something I can use, but I am not able to download the ajax-cart file due to forum permission issues. Could someone direct me how to achieve this functionality (or how I can download Kapil's code)? Thanks in advance.

Kogkalidis · February 20, 2018

On 8/1/2011 at 1:36 PM, gfxpixeldesigns said:

Will do Martin i just want to make sure its all working first ;-).

My findings are that it is working BUT for the description and image to show in the popup you need to have the description and image on the actual page, you see the ajax grabs the description and image from the page.

So for this to work on category pages or homepage for example you need to have a description with the class of '.product_desc a' and an image with '.product_img_link', if your on the default prestashop theme this should be the case anyway so it should be working. if your not on the default theme make sure you have those classes active.

I faced this issue today as I am developing my own theme (plus a few modules) and despite the fact that I try to keep the tags classes/IDs as homemade as possible, I had this issue with the cart popup. On product add there was the right picture but no title, price, size etc.

There was some js issue, as on scroll I give sticky class to header. Removed that js snippet and cart popup is being displayed normally.

Clicking 'add To Cart' Pop-Up Box Confirmation With 'continue Shopping' + 'checkout' Links

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

to:

Save the changes and see if it works.It should look like this http://www.tronicextreme.co.uk/tronicextreme_redesign/25-blue

Link to comment

Share on other sites

to:

Save the changes and see if it works.It should look like this http://www.tronicextreme.co.uk/tronicextreme_redesign/25-blue

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Save the changes and see if it works.

It should look like this http://www.tronicextreme.co.uk/tronicextreme_redesign/25-blue

Save the changes and see if it works.

It should look like this http://www.tronicextreme.co.uk/tronicextreme_redesign/25-blue