Sticky Add to Cart

{%- comment -%} modblo. Sticky Add To Cart {%- endcomment -%}
{%- assign product = section.settings.product -%}
{%- if product == blank and template contains 'product' -%}
  {%- assign product = product -%}
{%- endif -%}

{%- if product != blank -%}
<div class="modblo-satc" data-modblo-satc data-section-id="{{ section.id }}"
     style="--modblo-satc-bg: {{ section.settings.bg }}; --modblo-satc-fg: {{ section.settings.fg }}; --modblo-satc-accent: {{ section.settings.accent }};">
  <div class="modblo-satc__inner page-width">
    <div class="modblo-satc__product">
      {%- if product.featured_image -%}
        {{ product.featured_image | image_url: width: 120 | image_tag:
          loading: 'lazy', widths: '60,120', sizes: '60px', class: 'modblo-satc__img' }}
      {%- endif -%}
      <div class="modblo-satc__meta">
        <p class="modblo-satc__title">{{ product.title }}</p>
        <p class="modblo-satc__price">
          {%- if product.compare_at_price > product.price -%}
            <s>{{ product.compare_at_price | money }}</s>
          {%- endif -%}
          <strong>{{ product.price | money }}</strong>
        </p>
      </div>
    </div>

    <form action="/cart/add" method="post" enctype="multipart/form-data" class="modblo-satc__form">
      {%- if product.has_only_default_variant -%}
        <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
      {%- else -%}
        <select name="id" class="modblo-satc__variant" aria-label="Variant">
          {%- for variant in product.variants -%}
            <option value="{{ variant.id }}" {% if variant.available == false %}disabled{% endif %}>
              {{ variant.title }}, {{ variant.price | money }}
            </option>
          {%- endfor -%}
        </select>
      {%- endif -%}

      <button type="submit" class="modblo-satc__btn" {% if product.available == false %}disabled{% endif %}>
        {%- if product.available -%}
          {{ section.settings.cta_label | default: 'Add to cart' }}
        {%- else -%}
          Sold out
        {%- endif -%}
      </button>
    </form>
  </div>
</div>

<style>
  .modblo-satc {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--modblo-satc-bg, #0b0b0c); color: var(--modblo-satc-fg, #fff);
    border-top: 1px solid color-mix(in oklab, var(--modblo-satc-fg) 12%, transparent);
    transform: translate3d(0, 100%, 0);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .modblo-satc.is-visible { transform: translate3d(0, 0, 0); }
  .modblo-satc__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 12px 24px; max-width: 1200px; margin: 0 auto;
  }
  .modblo-satc__product { display: flex; gap: 12px; align-items: center; min-width: 0; }
  .modblo-satc__img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
  .modblo-satc__meta { min-width: 0; }
  .modblo-satc__title {
    margin: 0; font-size: 14px; font-weight: 600; max-width: 220px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .modblo-satc__price { margin: 2px 0 0; font-size: 13px; opacity: .9; display: flex; gap: 8px; }
  .modblo-satc__price s { opacity: .55; }
  .modblo-satc__form { display: flex; gap: 8px; align-items: center; }
  .modblo-satc__variant {
    background: color-mix(in oklab, var(--modblo-satc-fg) 8%, transparent);
    color: inherit; border: 1px solid color-mix(in oklab, var(--modblo-satc-fg) 18%, transparent);
    border-radius: 10px; padding: 10px 12px; font-size: 13px;
    max-width: 180px;
  }
  .modblo-satc__btn {
    background: var(--modblo-satc-accent, #6366f1);
    color: #fff; border: 0; cursor: pointer;
    padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: 14px;
    transition: opacity .2s, transform .2s;
  }
  .modblo-satc__btn:hover { opacity: .92; }
  .modblo-satc__btn:active { transform: scale(.98); }
  .modblo-satc__btn[disabled] { opacity: .6; cursor: not-allowed; }
  @media (max-width: 640px) {
    .modblo-satc__variant { display: none; }
    .modblo-satc__title { max-width: 140px; }
  }
</style>

<script>
  (function () {
    var bar = document.currentScript.previousElementSibling;
    while (bar && !bar.classList.contains('modblo-satc')) bar = bar.previousElementSibling;
    if (!bar) return;
    var threshold = {{ section.settings.show_after | default: 600 }};
    function onScroll() {
      if (window.scrollY > threshold) bar.classList.add('is-visible');
      else bar.classList.remove('is-visible');
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
  })();
</script>
{%- endif -%}

{% schema %}
{
  "name": "Sticky Add to Cart",
  "tag": "section",
  "settings": [
    { "type": "product", "id": "product", "label": "Product (leave blank to auto-bind on PDP)" },
    { "type": "text", "id": "cta_label", "label": "CTA label", "default": "Add to cart" },
    { "type": "range", "id": "show_after", "min": 200, "max": 2000, "step": 100, "unit": "px",
      "label": "Show after scroll", "default": 600 },
    { "type": "color", "id": "bg", "label": "Background", "default": "#0b0b0c" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#ffffff" },
    { "type": "color", "id": "accent", "label": "Button color", "default": "#6366f1" }
  ],
  "presets": [{ "name": "Sticky Add to Cart" }]
}
{% endschema %}