Customization of Shopping Cart

[closeupman]

Hi,

 

I'm trying to change the bg color of the cart block.

I've tried adding css in the block cart module and global css to no avail.

 

I've tried both:

li#shopping_cart {

background: #e4c8ea;

}

 

and

 

#header_nav {

background: #e4c8ea;

}

 

but it stays the default color.

 

Thanks.

Edited July 26, 2013 by closeupman (see edit history)

[NemoPS]

Hi,

can you show us your website?

[closeupman]

Hi,

 

I just enabled it, had it under maintenance mode.

 

it's www.sitinuriatistudio.com

 

I took out my css changes for the bg color because it did nothing. I was just hoping someone could tell me what css class and/or id to use and which file. Should be something simple.

 

(Too bad Prestashop doesn't have a live css editor like avactics....really should try to add that in version 2.0 )

[NemoPS]

Blkockuserinfo.css,m line 16

 

Change the background property of the following rule

 

 

#shopping_cart a {
height: 15px;
padding: 15px 27px 10px 43px;
background: url('img/icon/cart.gif') no-repeat 10px 9px #eee;
min-width: 130px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: block;

[NemoPS]

We cross posted vekia, but I won by 2 mins

[closeupman]

Hehe....thanks you both of you, always helpful when you can!

[closeupman]

ahhh...the only thing is now the cart gif is no longer seen....no way to have my cake and eat it too huh?

[NemoPS]

Well, you can change the color from #eee to yours at the end, it should still display (unless you use black)

[vekia]

another thing:

 

 

it's a transparent backgrund, so you have to add backgrund color to:

#header #cart_block {
z-index: 10;
display: none;
position: absolute;
right: 0;
top: 65px;
height: auto;
width: 200px;
-moz-border-bottom-right-radius: 3px;
-moz-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
box-shadow: 0 1px 0 #C6C6C6;
}

in /modules/blockcart/blockcart.css

[closeupman]

Wow....too bad no way to centralize this....what a headache....thanks you two!

[closeupman]

Thanks for the catch Nemo. I had put it at the front of the bg property....didn't notice about the #eee at the end....it's late here!

 

Thanks Vekia for your catch about the cart display.....fixed.

 

 

thanks again!

Edited July 26, 2013 by closeupman (see edit history)

[vekia]

i will change the topic title to something like "customize the cart block"

if you want to remove 'cart' word, you have to edit .tpl file: modules/blockuserinfo/blockuserinfo.tpl

 

there is:

{l s='Cart' mod='blockuserinfo'}

 

just remove it

[closeupman]

okay, thanks....lol, can you delete the topic I just started? or should I mark it solved and link to this thread?

 

So, if I upgrade later....I'm going to have to redo this right?

[closeupman]

one more thing then, I'll post here.

 

Is there an EASY way to add a thumbnail image next to the product name in the slide out shopping cart (like on the full shopping cart page?)

 

thanks.

[vekia]

well, it is possible, but it's necessary to change several things

Nemo has got nice tutorial related to this: http://nemops.com/quick-tip-product-images-prestashop-ajax-cart/

 

enjoy!

[NemoPS]

I was about to link it thanks vekia!

[closeupman]

thanks....should include this and more in the prestashop guide....

I'll look it over and try my best.

 

====

Just started reading it.....should I have added my previous shopping cart edits in my themes/module folder? I did it in the root/modules folder......

 

 

 

there were also some comments about Nemo's solution not working fully....did you fix it...or was Max wrong?

 

 

thanks.

Edited July 26, 2013 by closeupman (see edit history)

[closeupman]

I took

background: #e4c8ea;

 

out of

 

#header #cart_block

 

of the root/modules/blockcart folder's blockcart.css and created a blockcart.css in my themes/module/blockcart,

but get transparency, so it doesn't seem to override the other css.

 

do I need to include it somewhere or what?

 

thanks.

 

and will I have to do this with all my other changes? if I want to take them out of the root and put them in the theme folder?

 

 

p.s. I put in back in the root, so my site will look okay, but I'd prefer to know how to have it in theme, so I can upgrade easily prestashop when needed.

Edited July 26, 2013 by closeupman (see edit history)

[alpe09ag]

Seams like the border-radius cannot be removed with css changes. Anyone who knows how to remove this?

 

When you hover, the border-radius comes back again: http://www.nordicapparel.com/mikkel-rude/store/index.php?id_product=8&controller=product#/size_clothing-l (Top-Left Corner)

[vekia]

it's hard to browse your website, it doesnt work well (cart feature)

what's goin on there?

[alpe09ag]

it's hard to browse your website, it doesnt work well (cart feature)

what's goin on there?

 

Well in the link that I posted, size was already selected.

Try this one: http://www.nordicapparel.com/mikkel-rude/store/index.php?id_product=8&controller=product

 

I just customized the radio-buttons.

 

Hard to browse? might be because there is no real products added yet?

[NemoPS]

I think your layout is missing a #bigpic element, it spawns a javascript error on add to cart. The main image must have the id 'bigpic'

[vekia]

im confused,

problem with border radius? where?

[alpe09ag]

im confused,

problem with border radius? where?

 

 

The "Cart Block" module was never supposed to be enabled, and for some reason I never realized that it was enabled, because my browser did not show the hover-block like on your screen shot. It is disabled now, and it solved the problem. Thanks  for making me aware with your screen shot.

[alpe09ag]

I think your layout is missing a #bigpic element, it spawns a javascript error on add to cart. The main image must have the id 'bigpic'

 

You are right, the bigpic have been removed. I removed this and displayed only thumbnails as big images. Reason: when the bigpic is there, the page will display the same image two times. (one as bigpic and one as the first thumbnail).

 

Please let me know if you still get the same error selecting size when you use the following link: 

http://www.nordicapparel.com/mikkel-rude/store/index.php?id_product=8&controller=product

 

Thanks,

[NemoPS]

No error, I get redirected to the cart page..... but then there is a redirect loop!

[alpe09ag]

No error, I get redirected to the cart page..... but then there is a redirect loop!

 

I dont know why this problem occurred, but after some time I tried to turn off the friendly url and it seamed to solve the problem. Now I guess that I just need to live with that turned off.