Cart Drawer Upsell

{%- comment -%} modblo. Cart Drawer Upsell {%- endcomment -%}
{%- assign rec_collection = collections[section.settings.rec_collection] -%}
{%- assign threshold = section.settings.free_ship_threshold | times: 100 -%}
{%- assign cart_total = cart.total_price -%}
{%- assign remaining = threshold | minus: cart_total -%}

<div class="modblo-cdu" data-modblo-cdu data-section-id="{{ section.id }}"
     style="--modblo-cdu-bg: {{ section.settings.bg }};
            --modblo-cdu-fg: {{ section.settings.fg }};
            --modblo-cdu-accent: {{ section.settings.accent }};
            --modblo-cdu-bar: {{ section.settings.bar_color }};">
  <div class="modblo-cdu__overlay" data-modblo-cdu-close></div>

  <aside class="modblo-cdu__panel" role="dialog" aria-modal="true" aria-label="Shopping cart">
    <header class="modblo-cdu__head">
      <h2 class="modblo-cdu__title">Your cart <span class="modblo-cdu__count">{{ cart.item_count }}</span></h2>
      <button type="button" class="modblo-cdu__x" data-modblo-cdu-close aria-label="Close cart">×</button>
    </header>

    {%- comment -%} Free shipping progress bar {%- endcomment -%}
    {%- if threshold > 0 -%}
      <div class="modblo-cdu__ship">
        {%- if remaining > 0 -%}
          <p class="modblo-cdu__ship-msg">
            You're <strong>{{ remaining | money }}</strong> away from free shipping
          </p>
        {%- else -%}
          <p class="modblo-cdu__ship-msg modblo-cdu__ship-msg--win">
            🎉 You unlocked free shipping
          </p>
        {%- endif -%}
        <div class="modblo-cdu__bar">
          <div class="modblo-cdu__bar-fill"
               style="width: {% if cart_total >= threshold %}100{% else %}{{ cart_total | times: 100.0 | divided_by: threshold }}{% endif %}%"></div>
        </div>
      </div>
    {%- endif -%}

    <div class="modblo-cdu__items">
      {%- if cart.item_count > 0 -%}
        {%- for item in cart.items -%}
          <article class="modblo-cdu__item" data-key="{{ item.key }}">
            {%- if item.image -%}
              {{ item | image_url: width: 160 | image_tag: loading: 'lazy', widths: '80,160', sizes: '80px', class: 'modblo-cdu__item-img' }}
            {%- endif -%}
            <div class="modblo-cdu__item-body">
              <a href="{{ item.url }}" class="modblo-cdu__item-title">{{ item.product.title }}</a>
              {%- unless item.product.has_only_default_variant -%}
                <p class="modblo-cdu__item-variant">{{ item.variant.title }}</p>
              {%- endunless -%}
              <div class="modblo-cdu__item-row">
                <div class="modblo-cdu__qty">
                  <button type="button" data-modblo-cdu-qty="-1" aria-label="Decrease">−</button>
                  <span>{{ item.quantity }}</span>
                  <button type="button" data-modblo-cdu-qty="1" aria-label="Increase">+</button>
                </div>
                <p class="modblo-cdu__item-price">{{ item.final_line_price | money }}</p>
              </div>
            </div>
          </article>
        {%- endfor -%}
      {%- else -%}
        <p class="modblo-cdu__empty">Your cart is empty.</p>
      {%- endif -%}
    </div>

    {%- comment -%} Recommendations row, drives AOV without an app {%- endcomment -%}
    {%- if rec_collection.products.size > 0 and cart.item_count > 0 -%}
      <div class="modblo-cdu__rec">
        <p class="modblo-cdu__rec-h">{{ section.settings.rec_heading | default: 'Frequently added' }}</p>
        <div class="modblo-cdu__rec-row">
          {%- for product in rec_collection.products limit: 4 -%}
            {%- assign rec_var = product.selected_or_first_available_variant -%}
            <form action="/cart/add" method="post" class="modblo-cdu__rec-card">
              <input type="hidden" name="id" value="{{ rec_var.id }}">
              {%- if product.featured_image -%}
                {{ product.featured_image | image_url: width: 200 | image_tag: loading: 'lazy', widths: '100,200', sizes: '100px', class: 'modblo-cdu__rec-img' }}
              {%- endif -%}
              <p class="modblo-cdu__rec-title">{{ product.title }}</p>
              <p class="modblo-cdu__rec-price">{{ rec_var.price | money }}</p>
              <button type="submit" class="modblo-cdu__rec-add" aria-label="Add {{ product.title }}">+ Add</button>
            </form>
          {%- endfor -%}
        </div>
      </div>
    {%- endif -%}

    <footer class="modblo-cdu__foot">
      <div class="modblo-cdu__sub">
        <span>Subtotal</span>
        <strong>{{ cart.total_price | money }}</strong>
      </div>
      <a href="/checkout" class="modblo-cdu__checkout">
        {{ section.settings.cta_label | default: 'Checkout' }}
      </a>
      <p class="modblo-cdu__fine">Shipping &amp; taxes calculated at checkout</p>
    </footer>
  </aside>
</div>

<style>
  .modblo-cdu { position: fixed; inset: 0; z-index: 70; pointer-events: none; visibility: hidden; }
  .modblo-cdu.is-open { pointer-events: auto; visibility: visible; }
  .modblo-cdu__overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,.45);
    opacity: 0; transition: opacity .3s ease;
  }
  .modblo-cdu.is-open .modblo-cdu__overlay { opacity: 1; }
  .modblo-cdu__panel {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: min(440px, 100%);
    background: var(--modblo-cdu-bg, #fff); color: var(--modblo-cdu-fg, #0b0b0c);
    transform: translate3d(100%, 0, 0);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
    display: flex; flex-direction: column;
    box-shadow: -24px 0 60px -20px rgba(0,0,0,.25);
  }
  .modblo-cdu.is-open .modblo-cdu__panel { transform: translate3d(0, 0, 0); }
  .modblo-cdu__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid color-mix(in oklab, var(--modblo-cdu-fg) 10%, transparent);
  }
  .modblo-cdu__title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
  .modblo-cdu__count {
    display: inline-grid; place-items: center;
    min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px;
    border-radius: 999px; background: var(--modblo-cdu-accent, #6366f1); color: #fff;
    font-size: 12px; font-weight: 600;
  }
  .modblo-cdu__x {
    border: 0; background: transparent; color: inherit;
    width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 24px; line-height: 1;
  }
  .modblo-cdu__x:hover { background: color-mix(in oklab, var(--modblo-cdu-fg) 6%, transparent); }

  .modblo-cdu__ship { padding: 16px 24px; border-bottom: 1px solid color-mix(in oklab, var(--modblo-cdu-fg) 10%, transparent); }
  .modblo-cdu__ship-msg { margin: 0 0 10px; font-size: 13px; }
  .modblo-cdu__ship-msg--win { color: #16a34a; font-weight: 600; }
  .modblo-cdu__bar {
    height: 6px; border-radius: 999px;
    background: color-mix(in oklab, var(--modblo-cdu-fg) 10%, transparent);
    overflow: hidden;
  }
  .modblo-cdu__bar-fill {
    height: 100%; background: var(--modblo-cdu-bar, #16a34a);
    transition: width .4s cubic-bezier(.16,1,.3,1);
  }

  .modblo-cdu__items { flex: 1; overflow-y: auto; padding: 8px 24px; }
  .modblo-cdu__empty { padding: 48px 0; text-align: center; opacity: .6; }
  .modblo-cdu__item {
    display: flex; gap: 14px; padding: 16px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--modblo-cdu-fg) 8%, transparent);
  }
  .modblo-cdu__item:last-child { border-bottom: 0; }
  .modblo-cdu__item-img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
  .modblo-cdu__item-body { flex: 1; min-width: 0; }
  .modblo-cdu__item-title {
    color: inherit; text-decoration: none;
    font-weight: 600; font-size: 14px; display: block; margin-bottom: 2px;
  }
  .modblo-cdu__item-variant { font-size: 12px; opacity: .6; margin: 0 0 8px; }
  .modblo-cdu__item-row { display: flex; align-items: center; justify-content: space-between; }
  .modblo-cdu__qty {
    display: inline-flex; align-items: center;
    border: 1px solid color-mix(in oklab, var(--modblo-cdu-fg) 14%, transparent);
    border-radius: 8px; overflow: hidden;
  }
  .modblo-cdu__qty button {
    background: transparent; border: 0; color: inherit; cursor: pointer;
    width: 28px; height: 28px; font-size: 14px;
  }
  .modblo-cdu__qty button:hover { background: color-mix(in oklab, var(--modblo-cdu-fg) 6%, transparent); }
  .modblo-cdu__qty span { padding: 0 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
  .modblo-cdu__item-price { margin: 0; font-weight: 600; font-size: 14px; }

  .modblo-cdu__rec { padding: 16px 24px; border-top: 1px solid color-mix(in oklab, var(--modblo-cdu-fg) 10%, transparent); }
  .modblo-cdu__rec-h {
    text-transform: uppercase; letter-spacing: .14em;
    font-size: 11px; font-weight: 700; opacity: .65; margin: 0 0 12px;
  }
  .modblo-cdu__rec-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
  .modblo-cdu__rec-row::-webkit-scrollbar { height: 6px; }
  .modblo-cdu__rec-card {
    flex: 0 0 130px; background: color-mix(in oklab, var(--modblo-cdu-fg) 4%, transparent);
    border-radius: 12px; padding: 10px; position: relative; border: 0;
  }
  .modblo-cdu__rec-img { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; margin-bottom: 8px; }
  .modblo-cdu__rec-title {
    font-size: 12px; font-weight: 600; margin: 0 0 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .modblo-cdu__rec-price { font-size: 12px; opacity: .7; margin: 0 0 8px; }
  .modblo-cdu__rec-add {
    width: 100%; background: var(--modblo-cdu-accent, #6366f1);
    color: #fff; border: 0; border-radius: 6px; padding: 6px;
    font-size: 11px; font-weight: 600; cursor: pointer;
  }

  .modblo-cdu__foot {
    padding: 20px 24px; border-top: 1px solid color-mix(in oklab, var(--modblo-cdu-fg) 10%, transparent);
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .modblo-cdu__sub { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 15px; }
  .modblo-cdu__sub strong { font-size: 18px; }
  .modblo-cdu__checkout {
    display: block; text-align: center; text-decoration: none;
    background: var(--modblo-cdu-accent, #6366f1); color: #fff;
    padding: 14px 22px; border-radius: 12px; font-weight: 600; font-size: 15px;
  }
  .modblo-cdu__checkout:hover { opacity: .92; }
  .modblo-cdu__fine { font-size: 11px; opacity: .55; margin: 10px 0 0; text-align: center; }
</style>

<script>
  (function () {
    var drawer = document.querySelector('[data-modblo-cdu]');
    if (!drawer) return;

    function open() { drawer.classList.add('is-open'); document.body.style.overflow = 'hidden'; }
    function close() { drawer.classList.remove('is-open'); document.body.style.overflow = ''; }

    // Wire up close
    drawer.querySelectorAll('[data-modblo-cdu-close]').forEach(function (el) {
      el.addEventListener('click', close);
    });

    // Open when any cart link/icon clicked. Customize this selector for your theme.
    document.querySelectorAll('a[href$="/cart"], [data-cart-trigger]').forEach(function (el) {
      el.addEventListener('click', function (e) { e.preventDefault(); open(); });
    });

    // Wire up quantity buttons
    drawer.querySelectorAll('[data-modblo-cdu-qty]').forEach(function (btn) {
      btn.addEventListener('click', function () {
        var item = btn.closest('[data-key]');
        if (!item) return;
        var key = item.dataset.key;
        var current = parseInt(item.querySelector('.modblo-cdu__qty span').textContent, 10);
        var delta = parseInt(btn.dataset.cbCduQty, 10);
        var next = Math.max(0, current + delta);
        fetch('/cart/change.js', {
          method: 'POST', headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id: key, quantity: next }),
        }).then(function () { location.reload(); });
      });
    });

    // Recommendation add, replace cart contents response, then reload
    drawer.querySelectorAll('.modblo-cdu__rec-card').forEach(function (form) {
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        fetch('/cart/add.js', {
          method: 'POST', headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id: form.querySelector('[name="id"]').value, quantity: 1 }),
        }).then(function () { location.reload(); });
      });
    });

    // Expose for theme integration
    window.cbCartDrawer = { open: open, close: close };
  })();
</script>

{% schema %}
{
  "name": "Cart Drawer Upsell",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Free shipping bar" },
    { "type": "number", "id": "free_ship_threshold", "label": "Free shipping threshold ($)", "default": 75 },
    { "type": "header", "content": "Recommendations" },
    { "type": "collection", "id": "rec_collection", "label": "Recommendation collection",
      "info": "Products shown in 'Frequently added' row." },
    { "type": "text", "id": "rec_heading", "label": "Recommendations heading", "default": "Frequently added" },
    { "type": "header", "content": "Layout" },
    { "type": "text", "id": "cta_label", "label": "Checkout button label", "default": "Checkout" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "accent", "label": "Accent / button color", "default": "#6366f1" },
    { "type": "color", "id": "bar_color", "label": "Free-ship bar color", "default": "#16a34a" }
  ],
  "presets": [{ "name": "Cart Drawer Upsell" }]
}
{% endschema %}