Problem hooking Block Cart to displayNav

[Wartin]

Hello, I read several posts about the subject here and in PS1.6 forums, but I can't make it work 100% well.

I'd like to have the Block Cart on the top-right of the screen.

I tried several things, the first obviusly was unhooking it from the displayTop and move it to the displayNav. That comes with problems with the dropdown, when passing the mouse it's contents shows as narrow as ~20px. Changing module CSS I could make it work in desktop and cellphones, particularly #blockcart.

BUT, when I thought it worked as expected, I tried to add something to the cart... The overlay appears way off the screen, to the right, with a horizontal scroll bar. It has something to do with .layer_cart_overlay, but I really could't fix it.

Could you give me a hand? I have no problems studying and reading documentation.

Thanks!

 

PS: I'm using Niara theme

Edited May 8, 2020 by Wartin
forgot to say about the theme

[Wartin]

Anyone? I've tried this:

1) install a new instance of TB

2) go to modules -> positions of modules

3) erase Block Cart

4) Add new hook Block Cart in displayNav

The cart's dropdown is very narrow and, when you buy something, the overlay appears way to the right.

(I can't upload images here, it says "NoDecodeDelegateForThisImageFormat")

[Wartin]

I read in other post that now image upload works, I will show you the problem with de cart in displayNav.

I've just downloaded Niara theme from github, maybe it was working now, but no.

This is a clean instalation of 30bees, with new Niara from Github.

 

Thanks!

[datakick]

Yes, the css for block cart is specific for blockTop position, it's not possible to just move it to displayNav without modifying css and/or associated js. But it's possible. You noted that you have the first problem solved, so I'll just comment on the second problem. Change the #layer_cart css rule to this

#layer_cart {
  background-color: #fff;
  position: fixed;
  top: calc(50vh - 250px) !important;
  left: 8%;
  display: none;
  z-index: 99;
  width: 84%;
}

That might help. Of course, adjust according to your needs

[Wartin]

Thank you. It works (with little changes) in desktop.

The problem is with mobiles. I think because it's fixed, you cannot see the whole overlay when you buy something, thus you cannot see or press the buttons.

 

About the first problem, I'm not sure if I did it OK. I added to themes/niara/css/modules/blockcart/blockcart.css

#blockcart {
  position: relative;
  margin-top: 30px;
  text-align: right;
  left: 5em;            /* this */
  width:250px;          /* and this */
}

In mobile when I press the cart it fastly appears and folds up, dissapears. If you press it again it unfolds as expected. I couldn't fix it.

Thanks!

[Wartin]

On 5/13/2020 at 11:38 PM, Wartin said:

The problem is with mobiles. I think because it's fixed, you cannot see the whole overlay when you buy something, thus you cannot see or press the buttons.

the solution was to add this in custom CSS code :

@media screen and (min-width: 0px) and (max-width: 768px) {

#layer_cart {position: fixed; top: calc(0vh - 0px) !important;
width: 90%;
overflow-y: scroll;
top: 0; left: 0; right: 0; bottom: 0;
}
}

Now I can scroll the overlay in mobiles.

 

The other thing, the first part of tienda/themes/niara/modules/blockcart/blockcart.tpl

{if isset($blockcart_top) && $blockcart_top}
<li>
  {/if}
  <div id="blockcart" class="shopping_cart">
    {include file='./includes/header.tpl'}
    {if !$PS_CATALOG_MODE}
      {include file='./includes/dropdown.tpl'}
    {/if}
  </div>
  {if isset($blockcart_top) && $blockcart_top}
</li>
{/if}

Note I added <li></li> and erased one <div></div>