How can I delay the visibility of a sticky add to cart button?

CKBIZ1 · ‎08-04-2023

I've implemented a Sticky add to cart via code, but the Sticky add to cart is already visible at the beginning of the page when loading. Is there any chance to delay the sticky add to cart so that id will be visible later on when scrolling down for example after the normal ATC button is visible?

Website: https://punchbuddy.co/

No PW needed.

The Add to cart code is in: main-product.liquid

Code below:

Thank you sticky ATC1.JPG

CodingSolution · ‎08-04-2023

Use this code

<!-- Add this in the <head> section of your website -->
<style>
  /* Hide the sticky button initially */
  .sticky-add-to-cart {
    display: none;
  }
</style>

<!-- Add this at the end of the <body> section, just before the closing </body> tag -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var normalAddToCartButton = document.querySelector(".product__form-wrapper .product__form button[type='submit']");
    var stickyAddToCartButton = document.querySelector(".sticky-add-to-cart");

    function showStickyAddToCartButton() {
      // Show the sticky button when the normal button is about to be out of view
      var rect = normalAddToCartButton.getBoundingClientRect();
      if (rect.bottom <= 0) {
        stickyAddToCartButton.style.display = "block";
      } else {
        stickyAddToCartButton.style.display = "none";
      }
    }

    // Call the function on page load
    showStickyAddToCartButton();

    // Call the function on scroll
    window.addEventListener("scroll", showStickyAddToCartButton);
  });
</script>

banned

CKBIZ1 · ‎08-04-2023

Hi,

Thank you for your help.

Can you please confirm where do I implement the code? In the main-product.liquid?

Also, do I need to implement all code together? Hoping you can please advise. Thank you

MRamzan · ‎08-23-2024

Here is the complete tutorial for sticky add to cart:

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112

How can I delay the visibility of a sticky add to cart button?

How can I delay the visibility of a sticky add to cart button?

Community Blog Articles