[Resolved] Display add to cart panel on scroll transformation

Home Forums Support Display add to cart panel on scroll transformation

  • This topic has 16 replies, 3 voices, and was last updated 1 month ago by nik9.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1407154
    nik9

    Hello GP Team,

    We have some questions regarding Display add to cart panel on scroll.

    1.) We want to adjust the slide-in from the Display add to cart panel on scroll on Desktop. In Niche default, the Display add to cart panel on scroll does not look nice together with the sticky navigation. When the Display add to cart panel on scroll slides in, it overlaps some time the sticky navigation. It would be nice if the Display add to cart panel on scroll would slide in from the sticky navigation bottom instead from the page top.

    Is something like this possible with css?

    2.) On Mobile the add to cart panel on scroll does overlaps the header navigation. By default the add to cart panel on scroll is at the bottom. So we want this at the top under the navigation. For this we use this css:

    @media (max-width: 768px) {
        .add-to-cart-panel {
            bottom: auto;
            top: 0;
            -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
            transform: translateY(-100%);
        }
    }

    How how can we this adjust that the mobile header will be shown?

    Thanks & Cheers! 🙂

    #1407454
    David
    Staff
    Customer Support

    Hi there,

    its not possible to change where the transform position occurs as the sticky add to cart has to start off screen, it then calculates the height of the header to work out where to move to.

    But you could try this CSS:

    .add-to-cart-panel {
        transition: opacity .5s ease-in-out !important;
    }

    Then the panel will just fade in below the header.

    #1407475
    nik9

    Hi David,

    Cool! It work as wanted. But only the fade in works. The fade out is not like a “fade out” its more a instantaneous disappearance. How do I have to adjust the fade out CSS?

    #1407555
    David
    Staff
    Customer Support

    Nope – don’t think its possible – i tried a few methods to ‘delay’ the outgoing transition – but they all failed lol

    #1407628
    nik9

    Hey Dave

    Haha lol. Maybe Tom has a idea for this?

    Cheers

    #1407672
    David
    Staff
    Customer Support
    #1408080
    nik9

    Yejj, Thanks 😎

    #1408126
    Tom
    Lead Developer
    Lead Developer

    Tricky one..

    I fixed the fade out with this CSS:

    .add-to-cart-panel {
        transform: translateY(65px);
    }

    Problem there is the element sits under the header with no opacity, but you can still click on things.

    There isn’t a class that is added/removed when it displays/hide, which would allow us to fix that.

    I’ve made a note to get a class added dynamically in GPP 1.12.0.

    #1408163
    nik9

    Perfect! Thank you so much! 🙂

    P.s: Do we have to change something after you would implement the class or is everything fine?

    Cheers

    #1408331
    Tom
    Lead Developer
    Lead Developer

    Shouldn’t have to. Careful with the CSS I wrote above though, the element always exists below the header and can be interacted with even though it’s not visible.

    #1408957
    nik9

    Thanks 🙂

    #1409324
    nik9

    Hi Tom,

    Now I found the first problem. The sub pages from the Navigation node “Partner” can’t not be selected. Hover on “Parter” will show the child navigation nodes. But they disappear when we try to select one of them. 🙁

    We use this css here, it works well except this navigation error…

    .add-to-cart-panel {
        transition: opacity .5s ease-in-out !important;
    }
    	
    .add-to-cart-panel {
        transform: translateY(85px);
    }
    
    @media (max-width: 767px) {
        .add-to-cart-panel {
    margin-top: 56px
        }
    }
    
    @media (max-width: 768px) {
        .add-to-cart-panel {
            bottom: auto;
            top: 0;
            -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
            transform: translateY(-100%);
    transform: translateY(56px);
        }
    }
    #1409760
    nik9

    Update:

    I have to remove your code Tom. The side effects are to high.
    Is there a other option to get this to work without sideeffects?

    .add-to-cart-panel {
        transform: translateY(85px);
    }
    #1409790
    Tom
    Lead Developer
    Lead Developer

    Not at this time, unfortunately. We’ll need to modify to javascript to allow for more effects.

    I’ll make sure this is added to 1.12 🙂

    #1409815
    nik9

    Okei. Cool thanks.

    When will 1.12 available? 🙂

    Cheers

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