[Support request] Mini cart problems on single product page

Home Forums Support [Support request] Mini cart problems on single product page

Home Forums Support Mini cart problems on single product page

  • This topic has 18 replies, 4 voices, and was last updated 12 months ago by Elvin.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1488222
    nik9

    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

    #1488951
    Tom
    Lead Developer
    Lead Developer

    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.

    #1491872
    nik9

    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

    #1492410
    Tom
    Lead Developer
    Lead Developer

    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.

    #1492986
    nik9

    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;
    }
    #1493529
    Tom
    Lead Developer
    Lead Developer

    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?

    #1494108
    nik9

    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;
    }
    #1494674
    Tom
    Lead Developer
    Lead Developer

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

    #1495097
    nik9

    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

    #1495887
    Tom
    Lead Developer
    Lead Developer

    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?

    #1496289
    nik9

    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

    #1496329
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1496840
    nik9

    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. πŸ™‚

    #1496988
    David
    Staff
    Customer Support

    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.

    #1497621
    nik9

    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. πŸ™

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.