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

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

Viewing 15 posts - 1 through 15 (of 40 total)
  • Author
    Posts
  • #1467203
    nik9

    Hello David,

    I was inspired from this topic (https://generatepress.com/forums/topic/floating-button-on-mobile/) here but we want to have this for WooCommerce single product page for the Add to Cart button.
    We already use the “Banner” Add to cart when a user scrolls down. But it would be nice if we can do something that the Add and quantity button or let’s say the class="cart" would be there when a user opens a single product page on mobile like this here: https://www.wehkamp.nl/anytime-lang-gewatteerde-jas-donkergroen-16507877/

    It’s the same topic but the difference is, that we want to have this for on a product page.

    Cheers

    #1467492
    David
    Staff
    Customer Support

    Hi there,

    you can’t use both that script and the Add to cart panel as they will conflict.
    The Add to Cart Panel listens out for when the Button is no longer in the viewport.
    With the script in that linked topic the Button will always be in view so the Add to cart script won’t do its thing

    #1467824
    nik9

    Hi David,

    Okey, I see.

    Tha plan was that we have the Add and quantity buttons available when a user is at the top of a page. When the user reach the position, where the buttons are placed they stay there. When a user scrolls further down, then the stick add to cart banner kicks in.

    So you mean that’s not possible?

    #1468723
    David
    Staff
    Customer Support

    Not sure – could do something like this:

    const findEl = document.querySelector('.findit');
    const observer = new window.IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        // add is-found class if visible
        entry.target.classList.add('is-found');
        return
      }
      // Scroll out of viewport
      if (entry.boundingClientRect.top > 0) {  
        // remove is-found if above viewport
        entry.target.classList.remove('is-found');
      } else {
        // do things if below
      }
    }, {
      root: null,
      threshold: 0,
    });
    
    if (findEl) {
        observer.observe(findEl)
    }

    You will need to hook in an element immediately above the Add to Cart Form with a class of findit
    e.g
    <span class="findit"></span>

    When the element enters the viewport it will be given a class of is-found
    So it becomes:

    <span class="findit is-found"></span>

    We can then use this to manipulate the Add to cart which is immediately after it with CSS:

    .findit:not(.is-found) + form.cart {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    Which simply fixes the form cart if our findit element isnt found.

    #1468875
    nik9

    Hi david,

    thanks.

    Now i add the following code to GP element as a hook element and choose WP_footer and display on all products.

    const findEl = document.querySelector('.findit');
    const observer = new window.IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        // add is-found class if visible
        entry.target.classList.add('is-found');
        return
      }
      // Scroll out of viewport
      if (entry.boundingClientRect.top > 0) {  
        // remove is-found if above viewport
        entry.target.classList.remove('is-found');
      } else {
        // do things if below
      }
    }, {
      root: null,
      threshold: 0,
    });
    
    if (findEl) {
        observer.observe(findEl)
    }

    CSS is in the Customizer.

    So now I only have to add <span class="findit"></span> or hook in that. But how?

    #1469002
    David
    Staff
    Customer Support

    Try this:

    1. Create a new Hook Element to add that HTML.
    2. Select the woocommerce_single_product_summary and set the priority to 29
    3. Set the display rules to Products.

    #1469033
    nik9

    Thanks. But its not working πŸ™

    This are my settings. May I made a config error…

    https://ibb.co/GJCkQrS
    https://ibb.co/nkJPpn2
    https://ibb.co/2hghb9Y
    https://ibb.co/fpTZFB4

    #1469114
    David
    Staff
    Customer Support

    For the Script it needs to be added inside script tags:

    <script>
    // Add script here
    </script>

    The other hook for the findit element looks correct.

    #1469282
    nik9

    Arggg.. haha.. Sometime i’m a idiot^^

    Okey.. now it seems that the script is loaded and also the hooked in html element.

    <span class="findit is-found"></span>

    But the Add & quantity buttons are not floating. Is the hooked in html element at the right place? Its above the stock value. (URL in private note)

    #1469357
    David
    Staff
    Customer Support

    Yeah thats a pain – how is the Discount Info box being added ? As thats hooked in exactly where we need it ( we could use that as the our ‘findit’ element – but i noticed its not on every product )

    #1470074
    nik9

    Hi David,

    I guess comes from a Discount rule plugin. (https://docs.flycart.org/en/collections/2195266-discount-rules-2-0?utm_source=woo-discount-rules-v2&utm_campaign=doc&utm_medium=text-click&utm_content=documentation)

    But I do not know what hook they use for this. πŸ™

    #1470357
    David
    Staff
    Customer Support

    Try selecting a Custom Hook instead and adding this:

    woocommerce_before_add_to_cart_button

    #1470430
    nik9

    Hi David

    Yep, better.. now the html element should be at the right place. But the Add & quantity buttons are not sticky when a user is at the top of a page.

    #1470595
    David
    Staff
    Customer Support

    Nope – still wrong hook lol – try:

    woocommerce_before_add_to_cart_form

    Set the Priority to 30

    #1470849
    nik9

    Hi David, Yes! Now its there. But the button is at the top of the page and not sticky. Guess we need more css. After that it should work.

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