Jump to content

[Free Module] Pop Cart


Recommended Posts

Hi Community,

Here is the [Module] Pop Cart for Presta 1.5.x
This module improves the add-to-cart event.
Very useful since it incitates customers to follow the checkout process.

It is based on the native PrestaShop 1.6 effect.
Ajax must be activated.

Module developed from the default 1.5.6 theme.
Module only compatible with PrestaShop 1.5.x

+ Live Demo +
Download link below the screenshot.

post-103493-0-28862700-1394447590_thumb.jpg

History
-------
Version 0.1 : Initial release.

Version 0.2 : Now responsive (demo not up-to-date)

popcart.zip

Edited by Yopixel (see edit history)
  • Like 9

Share this post


Link to post
Share on other sites

Thank you Yopixel! Great module that i find from fist time that i see it in 1.6.

 

My suggestions:

- Add lest 10-20px padding to the box - now "Procced to checkout" don`t have a space in right.

- May be will be bether header to be full width.

 

I already make this changes and that is my final result:

post-335617-0-61412000-1394452894_thumb.png

 

My changes:

views\templates\hook\popcart.tpl

<!-- MODULE Pop Cart -->
<div id="layer_cart">
	<div class="clearfix">
        <div class="header"> 
            <span class="cross_ok"></span>
            <h2>{l s='Product successfully added to your shopping cart' mod='popcart'}</h2>
        </div>
        <div class="layer_cart_product col-xs-12 col-md-6">
		<div class="inside_layer b1">
        	<span class="cross" title="{l s='Close window' mod='popcart'}"></span>
            <div class="product-image-container">
                <img class="layer_cart_img img-responsive" alt="img" src="{$base_dir}img/404.gif"/>
            </div>
            <div class="layer_cart_product_info">
                <span id="layer_cart_product_title" class="product-name"></span>
                <span id="layer_cart_product_attributes"></span>
                <div><strong class="dark">{l s='Quantity:' mod='popcart'}</strong><span id="layer_cart_product_quantity"></span></div>
                <div><strong class="dark">{l s='Total:' mod='popcart'}</strong><span id="layer_cart_product_price"></span></div>
            </div>
        </div>
		</div>

and .css:

.cross_ok{background:url(../img/ok_32x32.png) no-repeat rgba(0,0,0,0);float:left;height:32px;margin-right: 15px;padding-right:0;margin-top: -10px;position:relative;width:32px}
#layer_cart .clearfix{}
.col-md-6{width:50%;float:left}
.inside_layer{padding:12px;}
.product-name{font-size:16px;font-weight:700}
.gocontinue{font-size:17px;padding:0;line-height:21px;color:#333;font-weight:700;border:1px solid;border-color:#cacaca #b7b7b7 #9a9a9a #b7b7b7;text-shadow:1px 1px #fff;color:#000;cursor:pointer;display:inline-block;font-weight:700;position:relative;text-align:left;white-space:normal;float:left;margin-left:3px}
.gocontinue span{border:1px solid;border-color:#fff;display:block;padding:7px;background:#f7f7f7;background:-moz-linear-gradient(top,#f7f7f7 0,#ededed 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f7f7f7),color-stop(100%,#ededed));background:-webkit-linear-gradient(top,#f7f7f7 0,#ededed 100%);background:-o-linear-gradient(top,#f7f7f7 0,#ededed 100%);background:-ms-linear-gradient(top,#f7f7f7 0,#ededed 100%);background:linear-gradient(to bottom,#f7f7f7 0,#ededed 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7',endColorstr='#ededed',GradientType=0)}
.gocontinue span:hover{border-color:#9e9e9e #c2c2c2 #c8c8c8}
.gocheck{font-size:17px;line-height:21px;color:#fff;padding:0;font-weight:700;background:#43b754;background:-moz-linear-gradient(top,#43b754 0,#41b757 2%,#41b854 4%,#43b756 6%,#41b354 38%,#44b355 40%,#45af55 66%,#41ae53 74%,#42ac52 91%,#41ae55 94%,#43ab54 96%,#42ac52 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#43b754),color-stop(2%,#41b757),color-stop(4%,#41b854),color-stop(6%,#43b756),color-stop(38%,#41b354),color-stop(40%,#44b355),color-stop(66%,#45af55),color-stop(74%,#41ae53),color-stop(91%,#42ac52),color-stop(94%,#41ae55),color-stop(96%,#43ab54),color-stop(100%,#42ac52));background:-webkit-linear-gradient(top,#43b754 0,#41b757 2%,#41b854 4%,#43b756 6%,#41b354 38%,#44b355 40%,#45af55 66%,#41ae53 74%,#42ac52 91%,#41ae55 94%,#43ab54 96%,#42ac52 100%);background:-o-linear-gradient(top,#43b754 0,#41b757 2%,#41b854 4%,#43b756 6%,#41b354 38%,#44b355 40%,#45af55 66%,#41ae53 74%,#42ac52 91%,#41ae55 94%,#43ab54 96%,#42ac52 100%);background:-ms-linear-gradient(top,#43b754 0,#41b757 2%,#41b854 4%,#43b756 6%,#41b354 38%,#44b355 40%,#45af55 66%,#41ae53 74%,#42ac52 91%,#41ae55 94%,#43ab54 96%,#42ac52 100%);background:linear-gradient(to bottom,#43b754 0,#41b757 2%,#41b854 4%,#43b756 6%,#41b354 38%,#44b355 40%,#45af55 66%,#41ae53 74%,#42ac52 91%,#41ae55 94%,#43ab54 96%,#42ac52 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#43b754',endColorstr='#42ac52',GradientType=0 );border:1px solid;border-color:#399a49 #247f32 #1a6d27 #399a49;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0;cursor:pointer;display:inline-block;position:relative;text-align:left;white-space:normal;float:right;margin-right:3px}
.gocheck:hover{text-decoration:none;background:#3aa04c;background:-moz-linear-gradient(top,#3aa04c 0,#3aa04a 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3aa04c),color-stop(100%,#3aa04a));background:-webkit-linear-gradient(top,#3aa04c 0,#3aa04a 100%);background:-o-linear-gradient(top,#3aa04c 0,#3aa04a 100%);background:-ms-linear-gradient(top,#3aa04c 0,#3aa04a 100%);background:linear-gradient(to bottom,#3aa04c 0,#3aa04a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3aa04c',endColorstr='#3aa04a',GradientType=0 );border-color:#196f28 #399a49 #399a49 #258033}
.gocheck span{ color: #FFFFFF !important;display:block;padding:7px;border:1px solid;border-color:#74d578}
.layer_cart_overlay{background-color:#000;display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:98;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20);opacity:.2}
* html .layer_cart_overlay{position:absolute;left:0;;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20);opacity:.2}
#layer_cart{background-color:#fff;position:absolute;display:none;z-index:99;padding: 15px;width: 80%;margin-right: 9%;margin-left: 9%;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}
#layer_cart .layer_cart_product{overflow:hidden;position:static}
#layer_cart .layer_cart_product h2{display: block;width: 620px;color:#3aa04a;font:400 23px/29px Arial,Helvetica,sans-serif;margin-bottom: 10px;padding-left:0;padding-right:0;z-index: 1;}
@media (max-width:767px){#layer_cart .layer_cart_product h2{font-size:18px;padding-right:0;line-height:normal[spam-filter]
#layer_cart .layer_cart_product .product-image-container{max-width:178px;/* border:1px solid #d6d4d4; */padding:5px;float:left;margin-right:30px}
@media (max-width:480px){#layer_cart .layer_cart_product .product-image-container{float:none;margin-right:0;margin-bottom:10px[spam-filter]
#layer_cart .layer_cart_product .layer_cart_product_info{padding:38px 0 0}
#layer_cart .layer_cart_product .layer_cart_product_info #layer_cart_product_title{display:block;padding-bottom:8px}
#layer_cart .layer_cart_product .layer_cart_product_info>div{padding-bottom:7px}
#layer_cart .layer_cart_product .layer_cart_product_info>div strong{padding-right:3px}
#layer_cart .layer_cart_cart{/* background:#fafafa; *//* -webkit-border-radius:0 4px 4px 0; */-moz-border-radius:0 4px 4px 0;-ms-border-radius:0 4px 4px 0;-o-border-radius:0 4px 4px 0;position:relative}
@media (min-width:1200px){#layer_cart .layer_cart_cart{min-height: 218px;[spam-filter]
@media (min-width:992px) and (max-width:1199px){#layer_cart .layer_cart_cart{min-height:360px[spam-filter]
@media (max-width:991px){#layer_cart .layer_cart_cart{border-left:none;border-top:1px solid #d6d4d4[spam-filter]
#layer_cart .layer_cart_cart h2{font: 400 18px/29px Arial,Helvetica,sans-serif;color:#333;border-bottom:1px solid #d6d4d4;padding-bottom:13px;margin-bottom: 15px;}
@media (max-width:767px){#layer_cart .layer_cart_cart h2{font-size:18px[spam-filter]
#layer_cart .layer_cart_cart .layer_cart_row{padding:0 0 7px}
#layer_cart .layer_cart_cart .button-container{position:absolute;bottom:0;left:0;width:100%;margin-bottom:25px;padding:0}
#layer_cart .layer_cart_cart .button-container .btn{margin-bottom:10px}
#layer_cart .layer_cart_cart .button-container span.exclusive-medium{margin-right:5px}
#layer_cart .layer_cart_cart .button-container span.exclusive-medium i{padding-right:5px;color:#777}
#layer_cart .cross{background:url(../img/pop_close.png) no-repeat rgba(0,0,0,0);color:#333;cursor:pointer;display:block;height:30px;position:absolute;right:-8px;top:-8px;width:30px;z-index:1103}
#layer_cart .cross:hover{color:#515151}
#layer_cart .continue{cursor:pointer}
#layer_cart p{padding:0}
#layer_cart .header{font-size: 14px; color: #79BA1B; padding:10px 0px 0px 10px}

Thanks again for distribution!

Regards,

Detelin

  • Like 1

Share this post


Link to post
Share on other sites

Hm... Strange but i have little problem. Now i integrate module in my live shop that used default 1.5 (but modified from me theme) and product name do not shows properly - looks like:

"Медальон Орел" .

 

My shop use bg (cyrillic - bulgarian). Before that i try on one of the my test shop (there i use EN) and don`t have this problem, can be possible problem to be in cyrillic? Do you have idea from where can be this strange product name i how to fix it? I can see the problem live at: bijutaniki.com (but is in bulgarian only)

 
My live shop use v. 1.5.6.1 and modified default theme.

Thanks in advance!

 

Note: In my live shop after install your module looks little messy:

post-335617-0-01913200-1394460223_thumb.png

 

I fix it with several css changes main problem may be is in box %

 

After changes look like:

post-335617-0-38240800-1394460940_thumb.png

 

To get this result i separate two boxes in different css with change:

        <div class="layer_cart_cart col-xs-12 col-md-7"> /*Change last number in second box*/

and add smaller % with adding css:

.col-md-7{width: 40%;float:left}

And my final css is (in liveshop):

.cross_ok{background:url(../img/ok_32x32.png) no-repeat rgba(0,0,0,0);float:left;height:32px;margin-right: 15px;padding-right:0;margin-top: -10px;position:relative;width:32px}
#layer_cart .clearfix{}
.col-md-6{width: 60%;float:left}
.col-md-7{width: 40%;float:left}
.inside_layer{padding:12px;}
.product-name{font-size: 14px;font-weight: 500;}
.gocontinue{font-size:17px;padding:0;line-height:21px;color:#333;font-weight:500;border:1px solid;border-color:#cacaca #b7b7b7 #9a9a9a #b7b7b7;text-shadow:1px 1px #fff;color:#000;cursor:pointer;display:inline-block;font-weight:700;position:relative;text-align:left;white-space:normal;float:left;margin-left:3px}
.gocontinue span{border:1px solid;border-color:#fff;display:block;padding:7px;font-weight: 500;background: #F4F4F4;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7',endColorstr='#ededed',GradientType=0)}
.gocontinue span:hover{border-color: #eee;background: #eee;}
.gocheck{font-size:17px;line-height:21px;text-decoration: none;color:#fff;padding:0;font-weight:500;background: #1AC5F9;border:1px solid;border-color: #1AC5F9;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0;cursor:pointer;display:inline-block;position:relative;text-align:left;white-space:normal;float:right;margin-right:3px}
.gocheck:hover{font-size:17px;line-height:21px;text-decoration: none;color:#fff;padding:0;font-weight:500;background: #FD642D;border:1px solid;border-color: #FD642D;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0;cursor:pointer;display:inline-block;position:relative;text-align:left;white-space:normal;float:right;margin-right:3px}
.gocheck span{ color: #FFFFFF !important;display:block;padding:7px; border:1px solid;}
.layer_cart_overlay{background-color:#000;display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:98;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20);opacity:.2}
* html .layer_cart_overlay{position:absolute;left:0;;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20);opacity:.2}
#layer_cart{background-color:#fff;position:absolute;display:none;z-index:99;padding: 15px;width: 100%;margin-right: 0%;margin-left: 0%;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}
#layer_cart .layer_cart_product{overflow:hidden;position:static}
#layer_cart .layer_cart_product h2{display: block;width: 620px;color:#3aa04a;font:400 23px/29px Arial,Helvetica,sans-serif;margin-bottom: 10px;padding-left:0;padding-right:0;z-index: 1;}
@media (max-width:767px){#layer_cart .layer_cart_product h2{font-size:18px;padding-right:0;line-height:normal[spam-filter]
#layer_cart .layer_cart_product .product-image-container{display: block;max-width:178px;/* border:1px solid #d6d4d4; */padding:5px;float:left;margin-right:30px}
@media (max-width:480px){#layer_cart .layer_cart_product .product-image-container{float:none;margin-right:0;margin-bottom:10px[spam-filter]
#layer_cart .layer_cart_product .layer_cart_product_info{display: block;float: left;font-size: 12px;width: 250px;padding: 40px 0 0;}
#layer_cart .layer_cart_product .layer_cart_product_info #layer_cart_product_title{display:block;padding-bottom:8px}
#layer_cart .layer_cart_product .layer_cart_product_info>div{padding-top: 7px;}
#layer_cart .layer_cart_product .layer_cart_product_info>div strong{font-size: 12px;padding-right:3px}
#layer_cart .layer_cart_cart{/* background:#fafafa; *//* -webkit-border-radius:0 4px 4px 0; */-moz-border-radius:0 4px 4px 0;-ms-border-radius:0 4px 4px 0;-o-border-radius:0 4px 4px 0;position:relative}
@media (min-width:1200px){#layer_cart .layer_cart_cart{min-height: 218px;[spam-filter]
@media (min-width:992px) and (max-width:1199px){#layer_cart .layer_cart_cart{min-height:360px[spam-filter]
@media (max-width:991px){#layer_cart .layer_cart_cart{border-left:none;border-top:1px solid #d6d4d4[spam-filter]
#layer_cart .layer_cart_cart h2{font: 400 18px/29px Arial,Helvetica,sans-serif;color:#333;border-bottom:1px solid #d6d4d4;padding-bottom: 10px;margin-bottom: 15px;}
@media (max-width:767px){#layer_cart .layer_cart_cart h2{font-size:18px[spam-filter]
#layer_cart .layer_cart_cart .layer_cart_row{font-size: 12px;padding:0 0 7px}
#layer_cart .layer_cart_cart .button-container{position:absolute;bottom:0;left:0;width:100%;margin-bottom:25px;padding:0}
#layer_cart .layer_cart_cart .button-container .btn{margin-bottom:10px}
#layer_cart .layer_cart_cart .button-container span.exclusive-medium{margin-right:5px}
#layer_cart .layer_cart_cart .button-container span.exclusive-medium i{padding-right:5px;color:#777}
#layer_cart .cross{background:url(../img/pop_close.png) no-repeat rgba(0,0,0,0);color:#333;cursor:pointer;display:block;height:30px;position:absolute;right:-8px;top:-8px;width:30px;z-index:1103}
#layer_cart .cross:hover{color:#515151}
#layer_cart .continue{cursor:pointer}
#layer_cart p{padding:0}
#layer_cart .header{font-size: 14px; color: #79BA1B; padding:10px 0px 0px 10px}
#layer_cart h2{display:block;padding-bottom: 15px;}

P.S: Module works very fast and is awesome, bravo!

Regards from Bulgaria,

Detelin

 

Regards

Share this post


Link to post
Share on other sites

Try this :
Open the file in (if not overriden) modules>blockcart>blockcart-json.tpl
Look line 36 "name". At the end of this line, change 'html' with 'htmlall'.
It should fix your problem.

  • Like 1

Share this post


Link to post
Share on other sites

Hm... My blockcart-json.tpl already have "htmlall" at the end. I try to make it "html" and now product name shows properly but picture of product disappear.

 

Try to get back to "htmlall" and both do not show/work properly. I again put "html" at the end and product name is fine but picture don`t show. Html of product picture is:

<img class="layer_cart_img img-responsive" alt="Медальон Орел" src="http://bijutaniki.com/img/404.gif" title="Медальон Орел">

Thank`s for help!

  • Like 1

Share this post


Link to post
Share on other sites

Yes, html, not htmlall, sorry !

To put back the picture, in the blockcart-json.tpl file you have just edited, around line 32, add :

"image":         "{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|addslashes|replace:'\\\'':'\''}",
  • Like 1

Share this post


Link to post
Share on other sites

Hello Yopixel,

Thanks for sharing this nice module ;-)

Module is not working correct on Tablet, see attached screenshot.

Maybe you can fix this issue so that the module is also working correct on Tablet and mobile phone.

 

Best regards,

 

ysco..

post-31440-0-51797700-1394476630_thumb.png

  • Like 1

Share this post


Link to post
Share on other sites

Hello Yopixel,

 

Great to hear that it will be fixed in next release, Will keep a eye on this thread ;-)

 

Best regards,

 

ysco..

Share this post


Link to post
Share on other sites

First thank you for the module. It's great.

 

I was just going to report that the responsive feature isn't yet ready for small screens, but ysco posted first.

 

I hope you keep at it. I'd really like to use this. I could see this becoming a very popular module very fast if you get the responsive thing fixed.

  • Like 1

Share this post


Link to post
Share on other sites

Hello Yopixel,

 

That's great news, can't wait to try it out ;-)

Thanks again for sharing this cool module, it is very appreciated.

Any screenshot about the two alternative layouts, just curious.

 

Best regards,

 

ysco..

  • Like 1

Share this post


Link to post
Share on other sites

Updated.

 

Now responsive (you must have a responsive template as well / Demo website is still running the old version, since its theme is not responsive).

 

Just replace the old module folder with the new one. You do not need to desinstall/reinstall.

Clear the cache if needed.

Edited by Yopixel (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

@Bill Dalton, there is a sub-folder 'extrafile' in the popcart module. Open it and replace the same named file (located in modules>blockcart, if not overidden in the template folder) with this one.

Or see post #8.

Or desinstall/reinstall popcart module, as you prefer.

Edited by Yopixel (see edit history)

Share this post


Link to post
Share on other sites

Right, that did fix the image thing. But now I notice that it breaks my theme a bit. For example, see here,

http://mobbplus.ca/out/en/home/2-consectetur-adipiscing-elit.html

 

All my right column is forced down to the bottom. It also effects several other parts of the theme.

 

I'll try to figure out why. Probably just some little thing.

Share this post


Link to post
Share on other sites

If I remove,

.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}

 

It fixes most problems but not all. My column is fixed but some alignment issues remain with the drop down of topmenu and block language.

Share this post


Link to post
Share on other sites

Open js/popcart.js

Line 679

$("#shopping_cart a:first").hover(
		function() {
			$(this).css('border-radius', '3px 3px 0px 0px');
			if (ajaxCart.nb_total_products > 0)
				$("#header #cart_block").stop(true, true).slideDown(450);
		},
		function() {
			$('#shopping_cart a').css('border-radius', '3px');
			setTimeout(function() {
				if (!shopping_cart.isHoveringOver() && !cart_block.isHoveringOver())
					$("#header #cart_block").stop(true, true).slideUp(450);
			}, 200);
		}
	);

Replace slideDown(450) with slideDown(1200) and slideUp(450) with slideUp(1200) // Time in milliseconds

  • Like 1

Share this post


Link to post
Share on other sites
  • 1 month later...

Good module, don´t know if you´re the original creator, or if you´ve rewritten the 1.6 element to 1.5.X either way good job!

 

I´m running 1.5.4.1 and had to remove the top line in popcart.css, so the conflicts with my theme were resolved. Other than that and a few design issues, i see this as a great addition that i will use on all my future 1.5.x projects!

This module also fixed a display error i´ve had for a while, think the error was in the json file....thx Yopixel:-)

 

-NB

Share this post


Link to post
Share on other sites

Great module!

I'm just missing one thing, I'd like it to appear centered on the page, no matter how far down I have scrolled.

Is that possible? I know it is, but HOW? :D

 

I have redesigned my shop so some customizable products has a lot of text which is placed above the add to cart button.

So when you scroll down to the Add to cart button you can only see the page become dark (popcarts background) and then you have to scroll up to see the cart box. :/

Share this post


Link to post
Share on other sites

So when you scroll down to the Add to cart button you can only see the page become dark (popcarts background) and then you have to scroll up to see the cart box. :/

Me too have same experience. Waiting for fix :-)

Share this post


Link to post
Share on other sites

Hello,

interesting module.

I just have one issue. This module effect my theme, it effect probably the CCS style.

Where to edit the module CCS to get it correct?

 

BTW. why this module effect front theme CCS ?

 

regards

Otto

Share this post


Link to post
Share on other sites
  • 3 weeks later...
  • 2 weeks later...

Hi yopixel,

Great module. Very usefull :)
I have one issue and maybe You can help me with.

 

I add product quantity at homepage according to free tutorials (mypresta.eu) (homefeatured module etc) and at category list and if i add 20 products the popcart (and cart) shows that i have add only 1 item ;/

Any clue? At the product page module and cart works good 20pcs add and 20 pcs goes to the basket

 

Thanks in advance!
 

Share this post


Link to post
Share on other sites

Thank you Yopixel! Great module that i find from fist time that i see it in 1.6.

 

My suggestions:

- Add lest 10-20px padding to the box - now "Procced to checkout" don`t have a space in right.

- May be will be bether header to be full width.

 

I already make this changes and that is my final result:

attachicon.gifdetelin-markov135631001.png

 

My changes:

views\templates\hook\popcart.tpl

<!-- MODULE Pop Cart -->
<div id="layer_cart">
	<div class="clearfix">
        <div class="header"> 
            <span class="cross_ok"></span>
            <h2>{l s='Product successfully added to your shopping cart' mod='popcart'}</h2>
        </div>
        <div class="layer_cart_product col-xs-12 col-md-6">
		<div class="inside_layer b1">
        	<span class="cross" title="{l s='Close window' mod='popcart'}"></span>
            <div class="product-image-container">
                <img class="layer_cart_img img-responsive" alt="img" src="{$base_dir}img/404.gif"/>
            </div>
            <div class="layer_cart_product_info">
                <span id="layer_cart_product_title" class="product-name"></span>
                <span id="layer_cart_product_attributes"></span>
                <div><strong class="dark">{l s='Quantity:' mod='popcart'}</strong><span id="layer_cart_product_quantity"></span></div>
                <div><strong class="dark">{l s='Total:' mod='popcart'}</strong><span id="layer_cart_product_price"></span></div>
            </div>
        </div>
		</div>

and .css:

.cross_ok{background:url(../img/ok_32x32.png) no-repeat rgba(0,0,0,0);float:left;height:32px;margin-right: 15px;padding-right:0;margin-top: -10px;position:relative;width:32px}
#layer_cart .clearfix{}
.col-md-6{width:50%;float:left}
.inside_layer{padding:12px;}
.product-name{font-size:16px;font-weight:700}
.gocontinue{font-size:17px;padding:0;line-height:21px;color:#333;font-weight:700;border:1px solid;border-color:#cacaca #b7b7b7 #9a9a9a #b7b7b7;text-shadow:1px 1px #fff;color:#000;cursor:pointer;display:inline-block;font-weight:700;position:relative;text-align:left;white-space:normal;float:left;margin-left:3px}
.gocontinue span{border:1px solid;border-color:#fff;display:block;padding:7px;background:#f7f7f7;background:-moz-linear-gradient(top,#f7f7f7 0,#ededed 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f7f7f7),color-stop(100%,#ededed));background:-webkit-linear-gradient(top,#f7f7f7 0,#ededed 100%);background:-o-linear-gradient(top,#f7f7f7 0,#ededed 100%);background:-ms-linear-gradient(top,#f7f7f7 0,#ededed 100%);background:linear-gradient(to bottom,#f7f7f7 0,#ededed 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7',endColorstr='#ededed',GradientType=0)}
.gocontinue span:hover{border-color:#9e9e9e #c2c2c2 #c8c8c8}
.gocheck{font-size:17px;line-height:21px;color:#fff;padding:0;font-weight:700;background:#43b754;background:-moz-linear-gradient(top,#43b754 0,#41b757 2%,#41b854 4%,#43b756 6%,#41b354 38%,#44b355 40%,#45af55 66%,#41ae53 74%,#42ac52 91%,#41ae55 94%,#43ab54 96%,#42ac52 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#43b754),color-stop(2%,#41b757),color-stop(4%,#41b854),color-stop(6%,#43b756),color-stop(38%,#41b354),color-stop(40%,#44b355),color-stop(66%,#45af55),color-stop(74%,#41ae53),color-stop(91%,#42ac52),color-stop(94%,#41ae55),color-stop(96%,#43ab54),color-stop(100%,#42ac52));background:-webkit-linear-gradient(top,#43b754 0,#41b757 2%,#41b854 4%,#43b756 6%,#41b354 38%,#44b355 40%,#45af55 66%,#41ae53 74%,#42ac52 91%,#41ae55 94%,#43ab54 96%,#42ac52 100%);background:-o-linear-gradient(top,#43b754 0,#41b757 2%,#41b854 4%,#43b756 6%,#41b354 38%,#44b355 40%,#45af55 66%,#41ae53 74%,#42ac52 91%,#41ae55 94%,#43ab54 96%,#42ac52 100%);background:-ms-linear-gradient(top,#43b754 0,#41b757 2%,#41b854 4%,#43b756 6%,#41b354 38%,#44b355 40%,#45af55 66%,#41ae53 74%,#42ac52 91%,#41ae55 94%,#43ab54 96%,#42ac52 100%);background:linear-gradient(to bottom,#43b754 0,#41b757 2%,#41b854 4%,#43b756 6%,#41b354 38%,#44b355 40%,#45af55 66%,#41ae53 74%,#42ac52 91%,#41ae55 94%,#43ab54 96%,#42ac52 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#43b754',endColorstr='#42ac52',GradientType=0 );border:1px solid;border-color:#399a49 #247f32 #1a6d27 #399a49;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0;cursor:pointer;display:inline-block;position:relative;text-align:left;white-space:normal;float:right;margin-right:3px}
.gocheck:hover{text-decoration:none;background:#3aa04c;background:-moz-linear-gradient(top,#3aa04c 0,#3aa04a 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3aa04c),color-stop(100%,#3aa04a));background:-webkit-linear-gradient(top,#3aa04c 0,#3aa04a 100%);background:-o-linear-gradient(top,#3aa04c 0,#3aa04a 100%);background:-ms-linear-gradient(top,#3aa04c 0,#3aa04a 100%);background:linear-gradient(to bottom,#3aa04c 0,#3aa04a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3aa04c',endColorstr='#3aa04a',GradientType=0 );border-color:#196f28 #399a49 #399a49 #258033}
.gocheck span{ color: #FFFFFF !important;display:block;padding:7px;border:1px solid;border-color:#74d578}
.layer_cart_overlay{background-color:#000;display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:98;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20);opacity:.2}
* html .layer_cart_overlay{position:absolute;left:0;;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20);opacity:.2}
#layer_cart{background-color:#fff;position:absolute;display:none;z-index:99;padding: 15px;width: 80%;margin-right: 9%;margin-left: 9%;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}
#layer_cart .layer_cart_product{overflow:hidden;position:static}
#layer_cart .layer_cart_product h2{display: block;width: 620px;color:#3aa04a;font:400 23px/29px Arial,Helvetica,sans-serif;margin-bottom: 10px;padding-left:0;padding-right:0;z-index: 1;}
@media (max-width:767px){#layer_cart .layer_cart_product h2{font-size:18px;padding-right:0;line-height:normal[spam-filter]
#layer_cart .layer_cart_product .product-image-container{max-width:178px;/* border:1px solid #d6d4d4; */padding:5px;float:left;margin-right:30px}
@media (max-width:480px){#layer_cart .layer_cart_product .product-image-container{float:none;margin-right:0;margin-bottom:10px[spam-filter]
#layer_cart .layer_cart_product .layer_cart_product_info{padding:38px 0 0}
#layer_cart .layer_cart_product .layer_cart_product_info #layer_cart_product_title{display:block;padding-bottom:8px}
#layer_cart .layer_cart_product .layer_cart_product_info>div{padding-bottom:7px}
#layer_cart .layer_cart_product .layer_cart_product_info>div strong{padding-right:3px}
#layer_cart .layer_cart_cart{/* background:#fafafa; *//* -webkit-border-radius:0 4px 4px 0; */-moz-border-radius:0 4px 4px 0;-ms-border-radius:0 4px 4px 0;-o-border-radius:0 4px 4px 0;position:relative}
@media (min-width:1200px){#layer_cart .layer_cart_cart{min-height: 218px;[spam-filter]
@media (min-width:992px) and (max-width:1199px){#layer_cart .layer_cart_cart{min-height:360px[spam-filter]
@media (max-width:991px){#layer_cart .layer_cart_cart{border-left:none;border-top:1px solid #d6d4d4[spam-filter]
#layer_cart .layer_cart_cart h2{font: 400 18px/29px Arial,Helvetica,sans-serif;color:#333;border-bottom:1px solid #d6d4d4;padding-bottom:13px;margin-bottom: 15px;}
@media (max-width:767px){#layer_cart .layer_cart_cart h2{font-size:18px[spam-filter]
#layer_cart .layer_cart_cart .layer_cart_row{padding:0 0 7px}
#layer_cart .layer_cart_cart .button-container{position:absolute;bottom:0;left:0;width:100%;margin-bottom:25px;padding:0}
#layer_cart .layer_cart_cart .button-container .btn{margin-bottom:10px}
#layer_cart .layer_cart_cart .button-container span.exclusive-medium{margin-right:5px}
#layer_cart .layer_cart_cart .button-container span.exclusive-medium i{padding-right:5px;color:#777}
#layer_cart .cross{background:url(../img/pop_close.png) no-repeat rgba(0,0,0,0);color:#333;cursor:pointer;display:block;height:30px;position:absolute;right:-8px;top:-8px;width:30px;z-index:1103}
#layer_cart .cross:hover{color:#515151}
#layer_cart .continue{cursor:pointer}
#layer_cart p{padding:0}
#layer_cart .header{font-size: 14px; color: #79BA1B; padding:10px 0px 0px 10px}

Thanks again for distribution!

Regards,

Detelin

Beste detelin,

please maybe you can tell me what i can do to get the pop cart moving with scrolling.

to let the pop cart move automatic with page when scrolling ?

now it is stay standig on the top of the page and it doesnt move.

please

( www.leespleziervoorjou.nl )

best regards,

 

alex

Share this post


Link to post
Share on other sites
  • 2 weeks later...
  • 4 weeks later...

Hi Yopixel,

I use Vekia tutorial to add quantity field into product list and homefeatured modules.

When Your module is disabled quantity input box works. When enabled only one product is send to cart even when i add more than one. Any ideas? ;)

 

Thanks!

 

Haha! Autosolved ;)
If someone used Vekia tutorial

http://mypresta.eu/en/art/developer/prestashop-quantity-field-featured-products-module.html

 

we need to change line 41 of the popcart.js from

ajaxCart.add(idProduct, null, false, this);

to

ajaxCart.add(idProduct, null, false, this, $('#quantity_to_cart_'+idProduct+'').val());

Cheers! :)

Edited by PrestaShark (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites
  • 3 weeks later...

Hi

Many thanks,

your module is awesome

 

but as i have a problem with this module and also i see other users have , i think the main reason of this issues is some CSS conflict . maybe some of the classes that are used in your module are used in other part of prestashop and this conflict causes some Inconsistency.

 

is it a way to prevent this conflict ? or we must change the classes and names in the module ?

 

 

_____ edit >>

 

i checked up css file and for example in first line : 

*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} 

you inherited the *,* , i changed it with this and my problem solved :

#layer_cart *,*:before,#layer_cart *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

thank you again for sharing your good module with us. 

Edited by the_raven (see edit history)

Share this post


Link to post
Share on other sites
  • 2 weeks later...

hi, congratulations for this module and for sharing.
I have the same problem as some fellow by the page centered.
I expose my solution by modifying the file popcart.css

we need to change line 14

change:

#layer_cart{background-color:#fff;position:absolute;display:none;z-index:9999;width:80%;margin-right:10%;margin-left:10%;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}

to:

#layer_cart {background-color: #fff;border-radius: 4px;display: none;height: 320px;left: 50%;;margin-top: -160px;position: fixed;top: 50%;width: 750px;z-index: 9999;}

Share this post


Link to post
Share on other sites
  • 1 month later...

Is it possible disable buttons (Not to show them) and just pop up confirmation make it disappear after 3 or 5 sec so customer continues shopping without being asked to "Continue Shopping" Or "Checkout".

Share this post


Link to post
Share on other sites
  • 1 month later...

Thx for great module, works and look realy good!!

 

Cant change the amount of symbols in product name, don't know what's wrong.

 

in blockcart-json.tpl changed truncate :



"name":          "{$product.name|html_entity_decode:2:'UTF-8'|truncate:100:'...':true|escape:'html'}",

but anyway it shows only 13 symbols  :(

(prestashop 1.5.6.2 and default theme)

Edited by katanaka (see edit history)

Share this post


Link to post
Share on other sites
  • 3 weeks later...
  • 8 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

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