[Resolved] Display add to cart panel on scroll transformation

[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! 🙂

[David]

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.

[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?

[David]

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

[nik9]

Hey Dave

Haha lol. Maybe Tom has a idea for this?

Cheers

[David]

I’ll ask him 😉

[nik9]

Yejj, Thanks 😎

[Tom]

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.

[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

[Tom]

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.

[nik9]

Thanks 🙂

[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);
    }
}

[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);
}

[Tom]

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 🙂

[nik9]

Okei. Cool thanks.

When will 1.12 available? 🙂

Cheers

[Author]

Posts