[Resolved] Floating button Add to cart button on single product page

Home Forums Support [Resolved] Floating button Add to cart button on single product page

Home Forums Support Floating button Add to cart button on single product page

  • This topic has 39 replies, 2 voices, and was last updated 11 months ago by David.
Viewing 15 posts - 16 through 30 (of 40 total)
  • Author
    Posts
  • #1470934
    David
    Staff
    Customer Support

    Its there, just the sticky nav is hiding it.
    Try this CSS it will move it in front of the nav and i have added a background to make it easier to see:

    .findit:not(.is-found) + form.cart {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        background-color: #fff;
    }
    #1470971
    nik9

    Awesome!

    Now Iโ€˜m trying to get this from the top of the screen to the bottom with position:. But this it not working. Do i have to use other css settings?

    Like this here: https://www.wehkamp.nl/anytime-lang-gewatteerde-jas-donkergroen-16507877/

    I read, that I have to use position: fixed for this. In your css is this already. What do I miss here? ๐Ÿ™‚

    #1471004
    David
    Staff
    Customer Support

    Replace top: 0; with bottom: 0;

    #1471094
    nik9

    This is working! ๐Ÿ™‚

    Now only one thing. The fade-out when the users scrolls down is very fast and itโ€˜s not like on the mentioned page. I guess, that there they use it as sticky and stays when the user reach the position of the original button.

    Is something also possible?

    #1471446
    David
    Staff
    Customer Support

    You can’t transition the change between the fixed and not fixed state.
    That other site is actually using a separate element – like the Add to Cart Panel – and is simply fading one element out before the other one appears.

    You could try adjusting:

    (entry.boundingClientRect.top > 0)

    and changing 0 to 0.1

    This should delay the image going from fixed to static.

    #1472549
    nik9

    Hi david,

    This has no effect of the delay.

    // Scroll out of viewport
      if (entry.boundingClientRect.top > 0.1)

    Anything other that I can try?

    #1472750
    David
    Staff
    Customer Support

    We could try this CSS to move the findit element down the page:

    .findit {
        position: relative;
        bottom: -60px;
        pointer-events: none;
        z-index: -1;
    }

    Then edit this CSS to include the padding property to the fixed cart form:

    .findit:not(.is-found) + form.cart {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        background-color: #fff;
        padding: 0 20px; /* add some left right padding */
    }

    Hopefully that makes it look like the button just attaches itself to the page on scroll.

    #1472781
    nik9

    Hi david,

    Now itโ€˜s far better. But the button still jumps a little.

    Iโ€˜m trying with (entry.boundingClientRect.top > 0) and 0.1

    But its the same.

    #1472792
    David
    Staff
    Customer Support

    You can try reducing the bottom: -60px; to a lower number eg. -65px
    This will reduce the ‘gap’ between fixed and static.

    But you can only take it so far – if you position it too low then the findit element will be below the button and will break the JS.

    #1472814
    nik9

    Yes, I already playing with these values. I can go to bottom: -67px; below it breaks the js.

    So no chance for more smoothness? ๐Ÿ™‚

    Whats is better technical setup? 0 or 0.1 for (entry.boundingClientRect.top > 0)?

    #1472884
    David
    Staff
    Customer Support

    Ignore that – it was the totally wrong part of the script.
    It would actually be this line that needed changing:

    if (entry.isIntersecting) {

    to

    if (entry.intersectionRatio > 0.1) {

    The value can be from 0 to 1 and determines how much of the element is in the viewport.
    However, i cannot see this working. As our findit element is not ‘tall’ enough to be detected earlier or later.

    I don’t think there is any other option here with this method.
    I notice when scrolling normally it looks great – its only when we look at it like a dev/designer and scroll at a snails pace is the jump noticeable.

    #1472952
    nik9

    Hi David.

    Nice! So i set the value to 0.9 and also change some value of your CSS. With bottom: -20px the sticky add to cart is now very smooth because the whole container is 20px further down.

    .findit:not(.is-found) + form.cart {
        position: fixed;
        bottom: -20px;
        left: 0;
        right: 0;
        z-index: 10000;
        background-color: #fff;
        padding: 5px 20px; /* add some left right padding */
    }

    Looks now awesome, even when we look at the snails pace. ๐Ÿ™‚

    What you think. Is this a good idea to put -20px or are there maybe sideeffects?

    #1472962
    David
    Staff
    Customer Support

    Well that works surprisingly well – tested it and cannot see any issues with that.

    #1472969
    nik9

    Yeah Me neither.

    Thank you David. Awesome support!

    Cheers

    #1473209
    David
    Staff
    Customer Support
Viewing 15 posts - 16 through 30 (of 40 total)
  • You must be logged in to reply to this topic.