(solved) block cart on top

[caparuni]

im trying to modify the default theme, and need some help

well im put bolckcart on top its worked fine so far and what i need is to made that blockcart floating so when expanded the menu below is not slidedown too. im already trying to put some z-index but didnt worked ;(

see the attachment for more detail

[razaro]

You could try with something like this for cart_block

position:absolute;right:0;top:25px;

and for header

position:relative;

And also check z-index of top menu and put greater value.

[caparuni]

thank you... the css problem is solved... :kiss:

now about js... ive made that cart is on colapsed/closed state when loading the page and i want to made that cart block expanded automaticly when people add product to cart or when mouse hovering the header.
and then will colapsed/closed automaticly after sometimes....

[razaro]

For mouse hovering try something like this.In blockcart folder, file ajax-cart.js at bottom
change code to this

$(document).ready(function(){

   // expand/collapse management
   $('#cart_block h4').mouseout(function(){
           ajaxCart.collapse();
   });
   $('#cart_block h4').mouseover(function(){
           ajaxCart.expand();
   });
   ajaxCart.overrideButtonsInThePage();
   ajaxCart.refresh();
});

[caparuni]

thanks a lot razarooooooooooo :kiss:

btw any idea about timer for this, so the expanded cart will auto colapsed/close after certain amount of seconds

[caparuni]

anyone got a solution for this?

[razaro]

Try this :
In ajax-cart.js around line 139 add

    ajaxCart.expand();

so it looks like

    // add a product in the cart via ajax
   add : function(idProduct, idCombination, addedFromProductPage, callerElement, quantity, whishlist){
   ajaxCart.expand();

Then add around line 505

setTimeout("ajaxCart.collapse()",3000); 

so it looks like

            setTimeout("ajaxCart.collapse()",3000); 
       //reset the onlick events in relation to the cart block (it allow to bind the onclick event to the new 'delete' buttons added)
       ajaxCart.overrideButtonsInThePage();

And try different values in setTimeout function . 3000 is just for test.

[iboMonkey]

Hi,

How do you place the cart_block in the header?

I've tried several things, through the 'Back Office >> Modules >> Positions', this didn't work; through CSS positioning in the header in the global.css file, this didn't work either; through the modules >> positions placing it in the 'top', this DOES work, but it places it way outside the header...

Please advise me, thanks,
ibo

[razaro]

You need to add this code to modules/blockcart/blockcart.php

    function hookTop($params)
   {
       return $this->hookRightColumn($params);
   }

And then you can transplant module to top and
then set position and css.


And for hover effect this is better solution then i posted earlier

//when document is loaded...
$(document).ready(function(){


   // expand/collapse management
   $('#cart_block').hover(function(){
           ajaxCart.expand();
   },
  function(){
           ajaxCart.collapse();
   });
   ajaxCart.overrideButtonsInThePage();
   ajaxCart.refresh();
}); 

[iboMonkey]

Thanks for the fast reply, it works! However, the word 'cart' for some reason is now positioned right, and the text inside the block is slightly smaller. But I'll try to find my own made errors

[iboMonkey]

Hello razaro,

Your script works fabulous! Though there's one thing, sometimes the page is a little bit slow, or one moves the cursor too fast, upon that, it might happen that the cart won't collapse again but remain open though the mouse is not hovering it.

What could be a solution for that?

Kind regards,
ibo

[razaro]

I had same problem with mouseout/ mouseover but
when i replaced that with hover function problems have disappeared.
And about slowdowns i will look into it.

[iboMonkey]

Hello razaro,

I don't know what did it exactly, but the earlier described troubles seem to have disappeared.

[iboMonkey]

Another thing,

There is a field in the cart that displays the quantity of the ordered items and that field disappears when you hover the cart. I wanted to replace that field with a 'steady' one, that doesn't disappear, but when the 'disappearing field' is being removed, the cart won't fold out. How to fix that? I.e. how to make that 'quantity-field' un-disappearing?

Thanks in advance,
ibo

[razaro]

With out messing to much with code you can do this way.
It is not elegant solution but this first came to my mind.
In blockcart.tpl copy this code

        
{if $cart_qties > 0}{$cart_qties}{/if}
{l s='products' mod='blockcart'}
{l s='product' mod='blockcart'}
{if $cart_qties > 0}{if $priceDisplay == 1}{convertPrice price=$cart->getOrderTotal(false)}{else}{convertPrice price=$cart->getOrderTotal(true)}{/if}{/if}
{if $cart_qties == 0}{l s='(empty)' mod='blockcart'}{/if}

and paste it after

    <!-- block list of products -->

[iboMonkey]

Wow, an amazingly fast reply! However, I applied it but see no difference at all.

As a total scripting-noob I might have messed up something though. May I attach my blockcart.tpl?

blockcart.txt

[razaro]

 {if $cart_qties > 0}{$cart_qties}{/if}

This is not correct tag is just
And maybe i misunderstood your post.
Code in attachment shows quantity in collapsed and in expanded cart.
But code for quantity is duplicated so that way i said it is not elegant.

blockcart.txt

[iboMonkey]

Yeah, hehe as I said 'total scripting-noob' :$

However, I see no duplication in my blockcart of the quantity field...

[iboMonkey]

I noticed that when adding a product to the cart it simply adds to the number displayed, but when removing an item from the cart the 'total products' number doesn't decrease. One needs to refresh the page to get the correct number again.

[joshsherm]

Could someone post a link to view these modifications in actions?

[iboMonkey]

here's my site

[caparuni]

Could someone post a link to view these modifications in actions?

http://kartunama.biz/

[joshsherm]

here's my site

Who did all the work for your store? It's very well done

[joshsherm]

I modified ajax-cart.js according to razaros code... but having major bugs... when you enter the page, the cart is automatically collapsed.... and upon hovering with the mouse, is closes..... backwards... my site is http://decorhousing.com/

[caparuni]

@joshsherm
for me all is worked fine, even ive already combine this with razaro's Add to cart image transfer effect
check the site http://kartunama.biz/

[iboMonkey]

Hi Josh,

Thank you very much. Actually the design is mine, but the specials like the unfolding cart are really from the help of the guys on the forum. Like razaro and others.

@all, on my site I have implemented the unfolding cart. There's also a numbering of the articles added to the cart (in magento). But it updates only on refreshing the site instead of 'live'. Anyone an idea?

Thanks in advance,
ibo

[mel-]

You need to add this code to modules/blockcart/blockcart.php

    function hookTop($params)
   {
       return $this->hookRightColumn($params);
   }

And then you can transplant module to top and
then set position and css.

could you give instructions for position and css? I added the lines to blockcart.php and if I transplant the module to top of pages it puts it on the left and above the logo. I want it to the right and on the same row as the logo which is on the left. other examples in this thread have it in that position, I just can't figure out how to get it over there on the right and after the logo.

if I transplant it to the header then it doesn't show.

any help appreciated.

[enkelhandel]

Hi great thread

I have been trying and trying to reach this function.

1 Cart stay collapsed on page load (or auto collapse after time)
2 Cart thereafter expands / collapse with CLICK
3 cart do not expand for added products


This code performs
1 Cart expands and collapse after "3000"
2 Cart expands with CLICK
-Cart is then not able to collapse again, not with click not auto
3 cart expands for addded products,

What am I doing wrong?

//when document is loaded...
$(document).ready(function(){


   // expand/collapse management
   $('#cart_block').click(function(){
           ajaxCart.expand();
   },
  function(){
           ajaxCart.collapse();
   });
   setTimeout("ajaxCart.collapse()",3000); 
   ajaxCart.overrideButtonsInThePage();
   ajaxCart.refresh();
});

[razaro]

@mel first sorry for really late replay if you still needs help PM me link to your site.

@ impeccabledeals
Try this in ajax-cart.js
First comment out line 488

//ajaxCart.expand();

and change code at bottom to

//when document is loaded...
$(document).ready(function(){

   // expand/collapse management
   $('#block_cart_collapse').click(function(){
           ajaxCart.collapse();
   });
   $('#block_cart_expand').click(function(){
           ajaxCart.expand();
   });
   setTimeout("ajaxCart.collapse()",3000);
   ajaxCart.overrideButtonsInThePage();
   ajaxCart.refresh();
});

Note that click events are connected with arrows(span elements wit ids #block_cart_collapse and #block_cart_expand ) and not whole cart block and you can't use click same way as hover function.

[enkelhandel]

ok the code produces exactly what I wanted though the step:

First comment out line 488
//ajaxCart.expand();

which prevents the cart from expanding on every pageload seems to bring some cookie-related bug when entering e.g. checkout page and going back since some code seems to need the cart to be expanded then. I think I read somewhere that there is a code that checks so the cookie contains expanded for some reason.

do you know anything about the matter, since the visual of that the cart stays collapsed and only expands with click is very much appreciated.

ps.

the click code correction worked like a charm, and seem so dig together with the code also.

[enkelhandel]

hi anyone have any input on this one?

[razaro]

I haven't tested this but try this but try to combine previous with code in this post

[enkelhandel]

Hi, thanks for the reply.

I tried those solutions but unfortunately didnt work.

The uncomment of

ajaxCart.expand();


around line 488 solves the function of keeping the cart collapsed but if bugs the in order.php where the cart seems to have to must expand otherwise the the cart content does not show and if you go back to the store again all the visual functions is buggy.

I was thinking about a solution to put in an if sentence that uncoment the ajaxCart.expand(); line but not when on order.php page. Is it possible to do that in js?

I tried with the $page_name var but got errors.

any ideas on that?

[razaro]

I think because of some bugs ajax cart is disabled in order.php

{if !$order_page}

from blockcart.tpl

So try to add this code in global.css

body#order div#cart_block_summary{display:block}
body#order div#cart_block_list{display:none}

[enkelhandel]

ok, interesting.

The code did no effect on my machine. I am not totally sure, but we might have missunderstood the wanted effect.

An example of a cart functioning exactly as I want is apple store
http://store.apple.com/us

-collapsed from start
-stays collapsed when browsing to new page
-stays collapsed when adding new product
-expand on click or hover

as I wrote your uncomment-solution of code below worked but triggers some buggy functioning of (i think) the ajax update.

ajaxCart.expand();

[razaro]

And have you tried instad of commenting out

ajaxCart.expand();

to change it to

ajaxCart.collapse();

[enkelhandel]

It did not work, the cart again appeared buggy when going to order.php.

Since it is OK for me if the cart expand on order.php (especially if it has too)

only controlling it not to expand on other pages would be sufficient.

[sebastiann]

Maybe you have mentioned it, but i could not find it. Can I change it so it is always closed expect from when the mouse hovers. Right now, it expands on page load.

Edit: Fixed!

[OuchMyAppendix1]

I found another thread that had a solution for the buggy cart behavior - hope it helps ;

http://www.prestashop.com/forums/viewthread/54126/general_discussion/how_to_have_curtain_fall_cart_block_

[pandoria]

hi
i fallow all the steps but there is another issue
when i add product to the cart there is no animation how to solve that this is my website www.flavorynature.co.uk. any ideas why this is happening?
i would be so so so grateful for help

[celestesaad]

Hi guys, I hope someone gets to read this since i've done everything this thread said and I broke my cart when I transplanted it to the top hook. before that, all the hovering effect worked like a charm. Im enclosing a screen of the site i've designed and that im building right now. I just need someone to point me in the right direction, tell me what to paste here if you need it.

 

Thanks in advance.

 

Screenshot: http://i.imgur.com/XpYAr.jpg

[celestesaad]

By the way here's the site > http://www.coolsupertest.com.ar/