Problem with "layer_cart" div

[DARKF3D3]

I have a problem with the div that appear when you add a product to the cart clicking on the "Add to cart" button.

For some reason there's no margin on top op it, in fact is attached to the top ov the browser.

 

Inspecting with Chrome i see this style on it: style="top: 0px; display: block;" while on prestashop demo the top is set to 500px.

 

Do you know which is the part of code involved into this?

[LinhNguyen]

u can find it in your theme folder/ js. modules/ blockcart/ ajax-cart.js

find this line in function 'updateLayer'

  var n = parseInt($(window).scrollTop()) + 'px';

and fix it to

  var n = parseInt($(window).scrollTop()) + 500 + 'px';

for example ^^!

[DARKF3D3]

Thanks, but I think that the top value should be variable, because giving a fixed value on a responsive theme could create some problems. I need to find out why on my theme I always have a 0px value.

[LinhNguyen]

i think u can use jquery to detect if the resolution changes to change the fixed value

[DARKF3D3]

I think something happens to my store because on default PS1.6 that feature it's working but on mine no.

[DARKF3D3]

Now the store is live (link in signature), you can see the different position of layer_cart on my store vs the PS demo:

http://demo.prestashop.com/en/?view=front

 

The PS demo layer_cart is horizzontally/vertically centered, while on my storit's attached to the top of the page.

 

 

Any idea on which could be the problem?

[LinhNguyen]

i think it refers to your cart position

the default one is hooked to displayTop and your cart is hooked to nav

i ve found the best solution for my shop

@media (min-width: 768px){

#layer_cart{

  position: fixed;

  left: 0;

  top: 15%!important;}

}

although it's different to the default one but works perfect for me hope you like it

[DARKF3D3]

But in that way you don't center the box but you add a fixed space to the top.

[Daniel - PrestaBR]

I believe you have a problem with $('.layer_cart_overlay') div.

I had a similar problem and it fixed when I changed the div used for overlay in ajax-cart.js function:  

updateLayer : function(product){
$('#layer_cart_product_title').text(product.name);
$('#layer_cart_product_attributes').text('');
if (product.hasAttributes && product.hasAttributes == true)
$('#layer_cart_product_attributes').html(product.attributes);
$('#layer_cart_product_price').text(product.price);
$('#layer_cart_product_quantity').text(product.quantity);
$('.layer_cart_img').html('<img class="layer_cart_img img-responsive" src="' + product.image + '" alt="' + product.name + '" title="' + product.name + '" />');


var n = parseInt($(window).scrollTop()) + 'px';


$('.layer_cart_overlay').css('width','100%');
$('.layer_cart_overlay').css('height','100%');
$('.layer_cart_overlay').show();
$('#layer_cart').css({'top': n}).fadeIn('fast');
crossselling_serialScroll();
},

Good luck

[DARKF3D3]

Thanks Daniel,

but I don't understand where's the top: 0px style is assigned to the "layer_cart" div <div id="layer_cart" style="display: block; top: 0px;">.

 

 

The proble should be on this line, but i don't understand why it doesn't take the right height:

var n = parseInt($(window).scrollTop()) + 'px';

Edited September 26, 2014 by DARKF3D3 (see edit history)

[DARKF3D3]

While I was looking for a solution I modifidied that line of code in this way:

		var n = parseInt($(window).scrollTop()) + 100 + 'px';

So the div will have always a margin above of 100px.

 

 

I think I'm near to the solution... For vertically centering the div I should do

scrollposition + ((window height - layer cart div height)/2)

 

So...

$(window).scrollTop() + (($(window).height()-???????)/2)

 

The problem is that I don't know where I can take the div position.

 

 

 

What i don't understand how prestashop demo could have the div vertically alligned if it has the same code.

Edited September 26, 2014 by DARKF3D3 (see edit history)

[Daniel - PrestaBR]

parseInt($(window).scrollTop()) + 'px';

This part get the height from top to the actual position (after scrolling).

So, it should work unless you deactivate JavaScript.

 

There are many other ways to center the div onscroll.

I'd rather use fancybox, as it is already loaded in most pages, but you have to figure it out how to make it work for you.

 

There are many topics in stackoverflow:

http://stackoverflow.com/questions/11263115/background-position-bottom-parseint

http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen

http://stackoverflow.com/questions/21701805/centering-a-div-on-screen-resize

http://stackoverflow.com/questions/2583108/how-to-place-a-div-center-of-the-window-after-scrolling

 

Good luck.

[DARKF3D3]

Infact I can't figure out how on PS demo the div it's vertically centered if it use only parseInt($(window).scrollTop()).

That code should simply position the div on top of the page independently from the position of the scrollbar. Or I miss something?

[Daniel - PrestaBR]

You misunderstood:

var n = parseInt($(window).scrollTop()) + 'px';

This part gets the height from top to the actual position: (a number - integer) 

$('#layer_cart').css({'top': n}).fadeIn('fast');

This part positions the div in the exact position from top.

If you inspect the #layer_cart element on PS demo, after adding a poduct to cart you will see sth like:

<div id="layer_cart" style="top: 723px; display: block;">

Here, n = '723px'.

[DARKF3D3]

Ok, but if I inspect mine i see top:0px, it i haven't scrolled the page, while if it's scrolled has top value I have exaclty the px scrolled, as result the div is always attached to the top border of page.

Practically the first line assign to the variable "n" the value in pixel of scrolled page, and the second line add a style top: with value = n.

 

I don't see anything that could center the div like of PS demo, maybe they have a custom code?

 

 

Meanwhile thanks for the help...