Pipeline 7 Alpine js buy it now button sticky add to cart

gistfile1.txt

{%- comment -%}
Uses the shopify permalink to generate the cart link
https://help.shopify.com/en/manual/products/details/cart-permalink#creating-a-cart-permalink

Example:
https://my-shop-name.myshopify.com/cart/36485954240671:1
{%- endcomment -%}

{%- if product.selling_plan_groups.size == 0 -%}
<div x-data="{sectionId: '{{ section.id }}', productId: '{{ product.handle }}', ...handleClick}">
<button
@click="handleClick"
class= "btn btn--primary btn--full uppercase btn--add-to-cart buy-it-now">Buy it now</button>
</div>
<script>
  function handleClick(e) {
    const id = document.querySelector(`[data-section-id="${this.sectionId}"] form[data-product-handle="${this.productId}"] input[name="id"]`);
      
    if(id){
        window.location.href = `${theme.routes.cart}/${id.value}:1`
    }
  }
</script>
{%- endif -%}

sticky_add_to_cart_button_v2.liquid

{%- if product.available -%}
<div x-data="{visible: false, sectionId: '{{ section.id }}', productId: '{{ product.handle }}', ...handleClick, ...showButton}">
<template x-teleport="body">
  <button
    @theme:scroll.document="showButton"
    x-show.opacity="visible"
    @click="handleClick"
    class= "btn btn--primary btn--full uppercase btn--add-to-cart buy-it-now block left-0 bottom-0 fixed z-20 w-full">{{'products.product.add_to_cart' | t}}</button>
</template>
</div>
<script>
    function handleClick(e){
        const button = document.querySelector(`[data-section-id="${this.sectionId}"] form[data-product-handle="${this.productId}"] button[type="submit"].btn--add-to-cart`);
        if(button){
            button.click();
        }
    }
    function showButton(e){
        const button = document.querySelector(`[data-section-id="${this.sectionId}"] form[data-product-handle="${this.productId}"] button[type="submit"].btn--add-to-cart`);
        if(button){
            const top = button.getBoundingClientRect().top + button.getBoundingClientRect().height + window.scrollY;
            this.visible = window.pageYOffset > top;
        }
    }
</script>
{%- endif -%}

sticky_buy_now_button.liquid

{%- comment -%}
Uses the shopify permalink to generate the cart link
https://help.shopify.com/en/manual/products/details/cart-permalink#creating-a-cart-permalink

Example:
https://my-shop-name.myshopify.com/cart/36485954240671:1
{%- endcomment -%}

{%- if product.selling_plan_groups.size == 0 -%}
<div x-data="{visible: false, sectionId: '{{ section.id }}', productId: '{{ product.handle }}', ...handleClick}"
@theme:scroll.document="visible = window.pageYOffset > window.innerHeight"
x-show.opacity="visible"
>
<button
@click="handleClick"
class= "btn btn--primary btn--full uppercase btn--add-to-cart buy-it-now">Buy it now</button>
</div>
<script>
  function handleClick(e) {
    const id = document.querySelector(`[data-section-id="${this.sectionId}"] form[data-product-handle="${this.productId}"] input[name="id"]`);
      
    if(id){
        window.location.href = `${theme.routes.cart}/${id.value}:1`
    }
  }
</script>
<style>
@media only screen and (max-width: 1800px){
  .btn--add-to-cart.buy-it-now {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
  }
}
</style>
{%- endif -%}

sticky_scroll_to_add_to_cart_button.liquid

{%- if product.available -%}
<div x-data="{visible: false, sectionId: '{{ section.id }}', productId: '{{ product.handle }}', ...handleClick}"
class="buy-it-now">
<template x-teleport="body">
    <button
    @theme:scroll.document="visible = window.pageYOffset > window.innerHeight"
    x-show.opacity="visible"
    @click="handleClick"
    class= "btn btn--primary btn--full uppercase btn--add-to-cart buy-it-now">{{'products.product.add_to_cart' | t}}</button>
</template>
</div>
<script>
    function handleClick(e){
        const button = document.querySelector(`[data-section-id="${this.sectionId}"] form[data-product-handle="${this.productId}"] button[type="submit"].btn--add-to-cart`);
        if(button){
            const scrollToElement = button.offsetTop;
            window.scrollTo({
                top: scrollToElement,
                left: 0,
                behavior: 'smooth'
            });
        }
    }
</script>
<style>
    @media only screen and (max-width: 1800px){
    .btn--add-to-cart.buy-it-now {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        width: 100%;
    }
    }
    </style>
{%- endif -%}

sticky_scroll_to_add_to_cart_button_v2.liquid

{%- if product.available -%}
<div x-data="{visible: false, sectionId: '{{ section.id }}', productId: '{{ product.handle }}', ...handleClick, ...showButton}">
<template x-teleport="body">
  <button
    @theme:scroll.document="showButton"
    x-show.opacity="visible"
    @click="handleClick"
    class= "btn btn--primary btn--full uppercase btn--add-to-cart buy-it-now block left-0 bottom-0 fixed z-20 w-full">{{'products.product.add_to_cart' | t}}</button>
</template>
</div>
<script>
    function handleClick(e){
        const button = document.querySelector(`[data-section-id="${this.sectionId}"] form[data-product-handle="${this.productId}"] button[type="submit"].btn--add-to-cart`);
        if(button){
            const scrollToElement = button.offsetTop;
            window.scrollTo({
                top: scrollToElement,
                left: 0,
                behavior: 'smooth'
            });
        }
    }
    function showButton(e){
        const button = document.querySelector(`[data-section-id="${this.sectionId}"] form[data-product-handle="${this.productId}"] button[type="submit"].btn--add-to-cart`);
        if(button){
            const top = button.getBoundingClientRect().top + button.getBoundingClientRect().height + window.scrollY;
            this.visible = window.pageYOffset > top;
        }
    }
</script>
{%- endif -%}