Archived topic

Mini cart problems on single product page

18 replies · Started by nik9 on October 14, 2020

Viewing posts 1–15 of 19

October 14, 2020 at 3:21 am #1488222

Hello

We are facing two problems with the mini cart menu when hovering over the cart icon.

1.) When a user is at the top of a page (no scroll) then the mini cart overview looks transparent. After the user scrolls down, the mini cart overview look fine: https://ibb.co/c2j2LBX

2.) After the "Sticky Add to cart banner" kicks in after a user scrolls down, the mini cart menu is not in the front. So a user can not see the first product in the mini cart hoover overview. I tried some stuff with the z-index
but no success so far. => https://ibb.co/db7bJ3V

Cheers

October 14, 2020 at 10:10 am #1488951

Hi there,

1. What kind of customizations have you made to the mini cart? This isn't the default functionality: https://gpsites.co/merch/shop/

2. This is likely the same issue as above - the mini cart's z-index (what tells it to display above other elements) isn't working.

October 16, 2020 at 6:36 am #1491872

Hello Tom,

I guess it has something to do with the following CSS which we need for the off canvas close transition from that support case here: https://generatepress.com/forums/topic/push-sticky-nav-to-right-when-canvas-opens/

.main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) {
    transform: translateX(0px);
    transition-duration: 300ms;
    transition-timing-function: unset;
}

So when we delete this CSS code then the mini cart is shown normal BUT it's not possible to hover on the items on the mini cart.

Cheers

October 16, 2020 at 11:10 am #1492410

There must be other CSS causing that as well, as the default functionality works. Can you narrow down the rest of the offending CSS? Then we can look at what needs to be tweaked.

October 17, 2020 at 4:35 am #1492986

Hello Tom,

Yes, I found the CSS which is responsible for that error. It looks like that this is comming from the CSS below. This CSS is also a support case on which we working together. So we have side effects here: https://generatepress.com/forums/topic/display-add-to-cart-panel-on-scroll-transformation/page/2/#post-1492973

.add-to-cart-panel {
    transition: opacity .5s ease-in-out !important;
    transform: translateY(85px);
    pointer-events: auto;
}

@media (min-width:767px) {
.add-to-cart-panel {
    transform: translateY(56px);
}
}

@media (min-width:992px) {
.add-to-cart-panel {
    transform: translateY(85px);
}
}

.add-to-cart-panel.show-sticky-add-to-cart,
.add-to-cart-panel.item-added {
    pointer-events: auto;
}

October 17, 2020 at 11:36 am #1493529

Hmm, I'm not seeing anything there that would affect the mini cart - all of the selectors are specific to the add to cart panel. If you re-add each block of CSS one by one, when does it break again?

October 18, 2020 at 5:22 am #1494108

Hello Tom,

It looks that I was wrong.

It's only the following CSS code which makes some problems with the mini cart.
When we delete those lines, then the mini cart looks normal.

.main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) {
    transform: translateX(0px);
    transition-duration: 300ms;
    transition-timing-function: unset;
}

October 18, 2020 at 12:12 pm #1494674

What if you remove this part?: transform: translateX(0px);

October 19, 2020 at 12:47 am #1495097

Hi tom,

This is working! But it the transform: translateX(0px); really not needed?

Last thing is the problem with the add to cart banner. The mini cart is below that banner. z-index has no effect. https://ibb.co/LR8b4kC

October 19, 2020 at 9:54 am #1495887

It shouldn't be.

How exactly are you getting both to show up at the same time? Is that something a user is going to run into?

October 19, 2020 at 4:08 pm #1496289

Hi Tom,

Yes. Actually its very easy to show up both. Scroll down the page until the add to cart banner shows up and the hover with the mouse on the cart icon in the header.

Why does z-index here not work? I try and try and try.. but no success :(

Cheers

October 19, 2020 at 5:28 pm #1496329

Hi,

Why does z-index here not work? I try and try and try.. but no success

It doesn't work because of the DOM structure of your site.

Your cart banner is a direct child of the <body> tag of the page while your cart content goes way far down the element descendant tree.

If you're able to hook your cart banner to a different place(ideally generate_after_header), you should be able to make z-index work.

October 20, 2020 at 5:19 am #1496840

Hello Elvin,

Thanks. But why do I have a different DOM structure? Add to cart banner and mini cart are stuff from GP I guess. We do not implement custom stuff for this. :)

October 20, 2020 at 7:12 am #1496988

Hi there,

z-index is related to whats known as the stacking index - these indexes are relative to the parent container. However certain properties such as CSS transform changes the index. So instead of z-index you would need to transform the Z axis as well.

So instead of this CSS:

.add-to-cart-panel {
    transition: opacity .5s ease-in-out !important;
    transform: translateY(85px);
    pointer-events: auto;
}

Try this:

.add-to-cart-panel {
    transition: opacity .5s ease-in-out !important;
    transform: translate3d(0,85px,-1em) !important;
    transform-style: preserve-3d;
    pointer-events: auto;
}

My only concern with this is it may not eliminate the elements implied position and block the pointer events over the mini cart.

October 20, 2020 at 1:36 pm #1497621

hi david,

CSS is active but the banner still overlaps the mini cart. I also delete all my CSS for testing. However.. even without any custom CSS from the customizer the mini cart is under the banner. This is strange. :(

This archived topic is closed to new replies.

Start building better websites today.