Shopify Sticky Add to Cart Generator

{%- comment -%}
  Sticky add-to-cart bar. Appears once the button matching the watch selector scrolls out of view.
  Uses Shopify's {% raw %}{% form 'product', product %}{% endraw %}, so it submits like your theme's own form.
{%- endcomment -%}
{%- style -%}
  .ea-stickycart{position:fixed;left:0;right:0;bottom:0;z-index:20;background:{{ section.settings.bg }};color:{{ section.settings.fg }};border-top:1px solid rgba(0,0,0,.1);box-shadow:0 -4px 16px rgba(0,0,0,.08)}
  .ea-stickycart[hidden]{display:none}
  .ea-stickycart__inner{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem}
  .ea-stickycart__img{width:40px;height:40px;object-fit:cover;border-radius:6px;flex-shrink:0}
  .ea-stickycart__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .ea-stickycart__title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ea-stickycart__price{font-size:12px;opacity:.75}
  .ea-stickycart__form{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
  .ea-stickycart__variants,.ea-stickycart__qty{font:inherit;padding:.4em .5em;border:1px solid #ccc;border-radius:6px;max-width:130px}
  .ea-stickycart__qty{width:56px}
  .ea-stickycart__btn{padding:.6em 1.1em;border-radius:6px;background:{{ section.settings.fg }};color:{{ section.settings.bg }};border:0;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
  @media (max-width:749px){.ea-stickycart__title{display:none}}
{%- endstyle -%}
<ea-sticky-cart class="ea-stickycart" data-watch=".product-form__submit, [name=&#39;add&#39;], .product__add-to-cart, .single_add_to_cart_button" data-mobile-only="false" hidden>
  <div class="ea-stickycart__inner">
    {%- if product.featured_media -%}
      <img class="ea-stickycart__img" src="{{ product.featured_media | image_url: width: 80 }}" alt="" width="40" height="40" loading="lazy">
    {%- endif -%}
    <div class="ea-stickycart__info">
      <span class="ea-stickycart__title">{{ product.title | escape }}</span>
      <span class="ea-stickycart__price">{{ product.selected_or_first_available_variant.price | money }}</span>
    </div>
    {%- form 'product', product, class: 'ea-stickycart__form' -%}
      {%- if product.variants.size > 1 -%}
        <select name="id" class="ea-stickycart__variants" aria-label="Variant">
          {%- for variant in product.variants -%}
            <option value="{{ variant.id }}"{% if variant == product.selected_or_first_available_variant %} selected{% endif %}{% unless variant.available %} disabled{% endunless %}>{{ variant.title | escape }}{% unless variant.available %} - Sold out{% endunless %}</option>
          {%- endfor -%}
        </select>
      {%- else -%}
        <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
      {%- endif -%}
      <input type="number" name="quantity" value="1" min="1" class="ea-stickycart__qty" aria-label="Quantity">
      <button type="submit" class="ea-stickycart__btn">Add to cart</button>
    {%- endform -%}
  </div>
</ea-sticky-cart>

<script>
  if (!customElements.get('ea-sticky-cart')) {
    customElements.define('ea-sticky-cart', class extends HTMLElement {
      connectedCallback() {
        if (this.dataset.mobileOnly === 'true' && window.matchMedia('(min-width: 750px)').matches) return;
        var target = document.querySelector(this.dataset.watch);
        if (!target) return;
        var self = this;
        var observer = new IntersectionObserver(function (entries) {
          entries.forEach(function (entry) { self.hidden = entry.isIntersecting; });
        });
        observer.observe(target);
      }
    });
  }
</script>

{% schema %}
{
  "name": "Sticky add to cart",
  "tag": "section",
  "class": "ea-sticky-cart-section",
  "settings": [
    {
      "type": "color",
      "id": "bg",
      "label": "Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "fg",
      "label": "Text color",
      "default": "#1a1a1a"
    }
  ],
  "presets": [
    {
      "name": "Sticky add to cart"
    }
  ]
}
{% endschema %}