@runwell/shopify-toolkit 0.18.0 → 0.23.0

package/modules/runwell-bundle-system/qa/mobile-checklist.md

@@ -0,0 +1,105 @@
+# Mobile QA checklist: runwell-bundle-system v1
+
+Real-device QA at 375px viewport for every enabled bundle surface. Runs on Lushi staging after BS-15 wires the module. Must pass before any production deploy.
+
+## Environment
+
+- Real iPhone (iPhone 12 or newer; iOS 17+).
+- Safari (not Chrome iOS; Safari is the rendering engine on iOS).
+- Lushi staging dev store URL.
+- 3 sample bundles configured per BS-15.
+
+## Per-surface checks
+
+### Surface 1: /bundles collection page
+
+- [ ] Page loads without console errors.
+- [ ] Single-column grid at 375px.
+- [ ] Hero card variant renders for the first bundle when `feature_first_bundle` is on.
+- [ ] Card spacing 24px on mobile.
+- [ ] Sticky page heading visible while scrolling.
+- [ ] All cards tappable; tap routes to bundle PDP.
+- [ ] Strikethrough subtotal + savings badge legible.
+
+### Surface 2: PDP "Pairs well with"
+
+- [ ] Renders below buy box on a non-bundle PDP with matching bundles.
+- [ ] Self-suppresses on a non-bundle PDP without matching bundles.
+- [ ] Card width 96% of viewport.
+- [ ] Eyebrow and heading legible.
+- [ ] Tap routes to bundle PDP.
+
+### Surface 3: home page curated stacks
+
+- [ ] Vertical stack (no horizontal carousel) at 375px.
+- [ ] All 3 to 4 cards visible without horizontal swipe.
+- [ ] Section heading and eyebrow at top.
+- [ ] Background band setting respected (white / oat / celadon-tint).
+- [ ] Each card tappable; tap routes to bundle PDP.
+
+### Surface 4: cart drawer bundle xsell
+
+- [ ] Drawer opens, bundle xsell card visible at top of xsell area.
+- [ ] cart-cross-sell does NOT also render (coordination contract).
+- [ ] CTA "Add bundle and save" visible and tappable.
+- [ ] Tap CTA: in-cart components removed, bundle product added, drawer refreshes.
+- [ ] Performance: match logic runs in under 100ms.
+
+### Surface 5: PDP bundle banner
+
+- [ ] Renders near buy box on non-bundle PDPs with matches.
+- [ ] 44px height enforced.
+- [ ] Tap routes to bundle PDP.
+- [ ] Copy template `{savings_pct}` resolved to actual value.
+- [ ] Background brand-tinted (celadon by default), contrast text legible.
+
+### Surface 6: collection page bundles filter
+
+Skipped for Lushi v1 (no collection pages enabled). Re-enable once Lushi has a /collections/skincare or similar.
+
+- [ ] Filter chip + 2 pinned cards render above the collection grid.
+- [ ] Chip tap filters grid to bundles only.
+- [ ] Chip tap again clears the filter.
+- [ ] URL syncs `?filter=bundle`.
+
+### Bundle PDP, Mode A (Lusha pattern, when v1.1 enables)
+
+- [ ] Radio picker tappable.
+- [ ] Selected tier visually distinct (brand-color border).
+- [ ] Per-tier price + savings badge legible.
+- [ ] FOMO countdown updates (every second when sub-day; every minute when day+).
+- [ ] Sticky ATC at bottom of viewport when scrolled past buy box.
+
+### Bundle PDP, Mode B (Lushi pattern)
+
+- [ ] Component breakdown list legible.
+- [ ] Component thumbnails 60px square (80px at 1024px+).
+- [ ] Cross-supplier disclosure renders when `bundle_cross_supplier` is on and `bundle_supplier_count > 1`.
+- [ ] Strikethrough subtotal + savings badge correct per pricing model.
+- [ ] ATC adds bundle to cart.
+
+## Cross-cutting checks
+
+- [ ] No horizontal scroll on any surface.
+- [ ] All tap targets >= 44px.
+- [ ] Brand fonts loaded; no FOUT.
+- [ ] Lighthouse mobile score >= 80 on bundle PDP and /bundles page.
+- [ ] Total module byte footprint under 80KB combined (Liquid + CSS + JS, pre-minification).
+- [ ] No console errors on any surface.
+
+## Screenshot capture
+
+Per surface, capture 3 states:
+1. Default render.
+2. Interaction state (tap-active, modal open, etc.).
+3. Edge case (no matches, out of stock, cross-supplier disclosure visible).
+
+File path: `_clients/capital-v/lushi/qa/bundle-system-mobile-YYYY-MM-DD/surface-N-state.png`.
+
+## Sign-off
+
+- [ ] All applicable checks above passed.
+- [ ] Screenshots captured and committed.
+- [ ] Any failures logged as follow-up issues and resolved before BS-15 sign-off.
+- [ ] Lighthouse mobile scores documented in the QA handoff doc.
+- [ ] QA owner + date: ___________________

package/modules/runwell-bundle-system/qa/v1.5-mobile-qa-checklist.md

@@ -0,0 +1,103 @@
+# v1.5 mobile QA checklist: Mode C BYOB + admin block
+
+Re-validates the storefront at 375 px after Mode C BYOB lands, plus admin block usability on Shopify's mobile admin app. Mirrors BS-14's v1 pass; adds the new v1.5 surfaces.
+
+## Environment
+
+- Real iPhone (iPhone 12 or newer; iOS 17+).
+- Safari for storefront; Shopify mobile admin app for admin block.
+- Staging tenant with at least:
+  - 1 Mode A bundle (Lusha pattern, for regression).
+  - 1 Mode B bundle (Lushi pattern, for regression).
+  - 1 Mode C bundle per layout: grid, accordion, radio.
+
+## Storefront checks (per Mode C layout)
+
+### Grid layout
+
+- [ ] Picker renders at 2 columns at 375 px.
+- [ ] Each candidate card has a 44 px tap target.
+- [ ] Tap toggles selection; checkmark / border state matches the rest of the bundle module.
+- [ ] Live counter updates as you tap.
+- [ ] Subtotal + savings refresh client-side.
+- [ ] ATC stays disabled until min picks reached; enables when in range.
+- [ ] Max-pick cap drops the oldest selection (or refuses the new one, depending on convention).
+- [ ] Required candidates are pre-checked and not deselectable.
+- [ ] Unavailable candidates render disabled, not removed.
+- [ ] Submit posts a multi-line cart add; cart drawer reflects the picks.
+
+### Accordion layout
+
+- [ ] Categories render as `<details>` blocks; first one open by default.
+- [ ] Per-category count badge updates on each pick.
+- [ ] Total picks across categories enforced against bundle_byob_max_picks.
+- [ ] Required candidates ship pre-checked in their parent category.
+
+### Radio layout
+
+- [ ] Each category renders as a radio group; first option pre-selected.
+- [ ] One pick per category enforced (radios).
+- [ ] Total picks equals category count; ATC enables once every category has a pick.
+- [ ] Switching pick within a category updates subtotal + total.
+
+## Storefront regression (v1 surfaces with a Mode C bundle in catalog)
+
+- [ ] /bundles page lists the Mode C bundle alongside Mode A and Mode B.
+- [ ] Bundle card hero variant renders correctly with the BYOB savings badge.
+- [ ] PDP pairs-with widget shows the Mode C bundle when a component is the current PDP.
+- [ ] Home page curated stacks strip includes the Mode C bundle when picked.
+- [ ] Cart drawer cross-sell offers the Mode C bundle when a partial set is in cart.
+- [ ] PDP banner with a Mode C bundle reads "Save N% when bundled".
+
+## Admin block checks (Shopify mobile admin app)
+
+Best-effort: mobile admin is rare; document any limitations.
+
+### Composition panel (BS-205)
+
+- [ ] Mode selector toggles between tier / component / candidate sub-UIs.
+- [ ] Add / remove / reorder works in each mode.
+- [ ] Validation banner surfaces when constraints are violated.
+
+### Pricing panel (BS-206)
+
+- [ ] Pricing model dropdown limits to allowed modes per bundle_mode.
+- [ ] Value editor changes shape with model.
+- [ ] Save disabled when value is empty.
+
+### Surfaces panel (BS-207)
+
+- [ ] All 6 surface toggles render.
+- [ ] Toggle state persists after save.
+
+### Cross-supplier banner (BS-208)
+
+- [ ] Banner appears when components span multiple suppliers.
+- [ ] Mentions the actual supplier count.
+- [ ] Suppresses when count is 1.
+
+### Bundle preview (BS-209)
+
+- [ ] Iframe renders at 375 px.
+- [ ] Preview reflects the saved state (not buffered edits).
+
+## Cross-cutting
+
+- [ ] No horizontal scroll on any storefront surface.
+- [ ] All tap targets >= 44 px.
+- [ ] Total module bytes still under 80 KB (CSS + JS, pre-minification).
+- [ ] No console errors on storefront or admin.
+- [ ] Lighthouse mobile score >= 80 on the BYOB PDP.
+
+## Screenshot capture
+
+Per surface, capture 3 states (default, mid-interaction, validation error).
+
+Path: `runwell-shopify-toolkit/docs/bundle-system/qa/v1.5-screenshots-YYYY-MM-DD/`.
+
+## Sign-off
+
+- [ ] All applicable checks passed.
+- [ ] Screenshots captured and committed.
+- [ ] P1 failures fixed; P2 logged for v1.5 patch.
+- [ ] QA owner + date: ___________________

package/modules/runwell-bundle-system/sections/runwell-bundle-cart-xsell.liquid

@@ -0,0 +1,59 @@
+{%- comment -%}
+  runwell-bundle-system: runwell-bundle-cart-xsell.liquid.
+  Surface 4: cart drawer bundle cross-sell. Suggests "complete the
+  stack" when 1 to N-1 components of a defined bundle sit in cart.
+
+  How it wires:
+  1. This section emits a JSON island with the bundle_index forward and
+     reverse maps so the JS does not need a network round trip.
+  2. The section also emits an empty <div> slot that JS fills with a
+     bundle card (rendered via Section Rendering API call when a match
+     is detected).
+  3. JS dispatches `runwell:bundle-xsell-active` when it injects content
+     so the cart-cross-sell snippet can short-circuit.
+
+  Coordination contract: see modules/cart-cross-sell/snippets/runwell-cart-xsell.liquid
+  for the receiving guard. See _clients/capital-v/lushi/specs/bundle-system/spec.md
+  section 6.1.
+{%- endcomment -%}
+
+{%- if settings.bundle_system__surface_4_cart_drawer_xsell_enabled == false -%}
+  {%- comment -%} Tenant has disabled this surface. {%- endcomment -%}
+{%- else -%}
+  {%- assign bundle_index = shop.metaobjects.bundle_index.entries.value -%}
+  {%- assign render_slot = false -%}
+  {%- if bundle_index and bundle_index.products and bundle_index.bundles -%}
+    {%- assign render_slot = true -%}
+  {%- endif -%}
+
+  {%- if render_slot -%}
+    <aside
+      class="runwell-bundle-cart-xsell"
+      data-runwell-bundle-xsell-slot
+      data-eyebrow="{{ section.settings.eyebrow | escape }}"
+      data-cta="{{ section.settings.cta | escape }}"
+    ></aside>
+
+    <script type="application/json" data-runwell-bundle-index>
+      {{ bundle_index | json }}
+    </script>
+
+    {{ 'runwell-bundle-system.css' | asset_url | stylesheet_tag }}
+    <script src="{{ 'runwell-bundle-system.js' | asset_url }}" defer="defer"></script>
+  {%- endif -%}
+{%- endif -%}
+
+{% schema %}
+{
+  "name": "Bundle cart cross-sell",
+  "tag": "section",
+  "class": "section-runwell-bundle-cart-xsell",
+  "settings": [
+    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Complete the stack" },
+    { "type": "text", "id": "cta", "label": "CTA label", "default": "Add bundle and save" }
+  ],
+  "presets": [
+    { "name": "Bundle: cart drawer cross-sell", "category": "Runwell" }
+  ]
+}
+{% endschema %}

package/modules/runwell-bundle-system/sections/runwell-bundle-collection.liquid

@@ -0,0 +1,121 @@
+{%- comment -%}
+  runwell-bundle-system: runwell-bundle-collection.liquid.
+  Shared by Surface 1 (/bundles dedicated page, mode 'grid') and
+  Surface 6 (collection-page bundles filter chip, mode 'filter_chip').
+
+  Bundle detection: prefers products with the runwell.bundle_mode
+  metafield set; falls back to products tagged 'bundle'.
+
+  See _clients/capital-v/lushi/specs/bundle-system/spec.md sections 5, 8.1, 8.6.
+{%- endcomment -%}
+
+{%- assign mode = section.settings.mode | default: 'grid' -%}
+
+{%- comment -%} Build the bundles list from collection.products if present, otherwise scan all_products. {%- endcomment -%}
+{%- assign source_products = collection.products -%}
+{%- if source_products == blank or source_products.size == 0 -%}
+  {%- assign source_products = all_products -%}
+{%- endif -%}
+
+{%- assign bundles_meta = source_products | where: 'metafields.runwell.bundle_mode' -%}
+{%- assign bundles = bundles_meta -%}
+{%- if bundles == empty or bundles.size == 0 -%}
+  {%- assign bundles = source_products | where: 'tags', 'bundle' -%}
+{%- endif -%}
+
+{%- if mode == 'grid' -%}
+  {%- if settings.bundle_system__surface_1_collection_page_enabled == false -%}
+    {%- comment -%} Tenant has disabled the /bundles page surface. {%- endcomment -%}
+  {%- else -%}
+    <section
+      class="runwell-bundle-collection runwell-bundle-collection--grid color-{{ section.settings.color_scheme }}"
+      style="padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px;"
+    >
+      <div class="runwell-bundle-collection__inner page-width">
+        {%- if section.settings.show_heading -%}
+          <header class="runwell-bundle-collection__heading">
+            <h1 class="runwell-bundle-collection__title">{{ section.settings.title }}</h1>
+            {%- if section.settings.subline != blank -%}
+              <p class="runwell-bundle-collection__subline">{{ section.settings.subline }}</p>
+            {%- endif -%}
+          </header>
+        {%- endif -%}
+
+        <div class="runwell-bundle-collection__grid">
+          {%- for bundle_product in bundles -%}
+            {%- assign card_variant = 'default' -%}
+            {%- if forloop.first and section.settings.feature_first_bundle -%}
+              {%- assign card_variant = 'hero' -%}
+            {%- endif -%}
+            {% render 'runwell-bundle-card', bundle_product: bundle_product, variant: card_variant %}
+          {%- else -%}
+            <p class="runwell-bundle-collection__empty">
+              No bundles configured yet. Add the <code>bundle</code> tag to a product or set the <code>runwell.bundle_mode</code> metafield to surface it here.
+            </p>
+          {%- endfor -%}
+        </div>
+      </div>
+    </section>
+  {%- endif -%}
+
+{%- elsif mode == 'filter_chip' -%}
+  {%- if settings.bundle_system__surface_6_collection_filter_enabled == false -%}
+    {%- comment -%} Tenant has not enabled the collection-page filter surface. {%- endcomment -%}
+  {%- else -%}
+    {%- if bundles and bundles.size > 0 -%}
+      <section
+        class="runwell-bundle-collection runwell-bundle-collection--filter-chip"
+        data-bundle-handles="{%- for b in bundles -%}{{ b.handle }}{%- unless forloop.last -%},{%- endunless -%}{%- endfor -%}"
+      >
+        <button class="runwell-bundle-collection__chip" data-runwell-bundle-filter-chip aria-pressed="false">
+          {{ section.settings.chip_label | default: 'Bundles' }}
+          <span class="runwell-bundle-collection__chip-count">({{ bundles.size }})</span>
+        </button>
+        <div class="runwell-bundle-collection__pinned">
+          {%- for bundle_product in bundles limit: 2 -%}
+            {% render 'runwell-bundle-card', bundle_product: bundle_product, variant: 'compact' %}
+          {%- endfor -%}
+        </div>
+      </section>
+    {%- endif -%}
+  {%- endif -%}
+{%- endif -%}
+
+{{ 'runwell-bundle-system.css' | asset_url | stylesheet_tag }}
+<script src="{{ 'runwell-bundle-system.js' | asset_url }}" defer="defer"></script>
+
+{% schema %}
+{
+  "name": "Bundle collection",
+  "tag": "section",
+  "class": "section-runwell-bundle-collection",
+  "settings": [
+    {
+      "type": "select",
+      "id": "mode",
+      "label": "Layout mode",
+      "options": [
+        { "value": "grid", "label": "Grid (/bundles page)" },
+        { "value": "filter_chip", "label": "Filter chip (collection page)" }
+      ],
+      "default": "grid",
+      "info": "Grid: standalone /bundles page (Surface 1). Filter chip: pinned cards + filter on a collection page (Surface 6)."
+    },
+    { "type": "header", "content": "Grid mode" },
+    { "type": "checkbox", "id": "show_heading", "label": "Show page heading", "default": true },
+    { "type": "text", "id": "title", "label": "Heading", "default": "Bundles" },
+    { "type": "text", "id": "subline", "label": "Subline", "default": "Curated combinations, save more" },
+    { "type": "checkbox", "id": "feature_first_bundle", "label": "Feature first bundle as hero card", "default": true },
+    { "type": "header", "content": "Filter chip mode" },
+    { "type": "text", "id": "chip_label", "label": "Chip label", "default": "Bundles" },
+    { "type": "header", "content": "Layout" },
+    { "type": "color_scheme", "id": "color_scheme", "label": "Color scheme", "default": "scheme-1" },
+    { "type": "range", "id": "padding_top", "label": "Top padding", "min": 0, "max": 160, "step": 4, "default": 64, "unit": "px" },
+    { "type": "range", "id": "padding_bottom", "label": "Bottom padding", "min": 0, "max": 160, "step": 4, "default": 64, "unit": "px" }
+  ],
+  "presets": [
+    { "name": "Bundle: collection grid", "category": "Runwell", "settings": { "mode": "grid" } },
+    { "name": "Bundle: collection filter chip", "category": "Runwell", "settings": { "mode": "filter_chip" } }
+  ]
+}
+{% endschema %}

package/modules/runwell-bundle-system/sections/runwell-bundle-home-stacks.liquid

@@ -0,0 +1,77 @@
+{%- comment -%}
+  runwell-bundle-system: runwell-bundle-home-stacks.liquid.
+  Surface 3: home page strip of 3 to 4 featured bundle cards. Editorial
+  pacing for new visitors. Merchant picks the bundles via a comma-
+  separated handle list; v1.5 can upgrade to a multi-product selector.
+
+  See _clients/capital-v/lushi/specs/bundle-system/spec.md sections 5, 8.3.
+{%- endcomment -%}
+
+{%- if settings.bundle_system__surface_3_home_stacks_enabled == false -%}
+  {%- comment -%} Tenant has disabled this surface. {%- endcomment -%}
+{%- else -%}
+  {%- assign picked_handles = section.settings.bundle_handles | split: ',' -%}
+  {%- assign rendered_count = 0 -%}
+
+  <section
+    class="runwell-bundle-home-stacks runwell-bundle-home-stacks--bg-{{ section.settings.bg_band }} color-{{ section.settings.color_scheme }}"
+    style="padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px;"
+  >
+    <div class="runwell-bundle-home-stacks__inner page-width">
+      <p class="runwell-bundle-home-stacks__eyebrow">{{ section.settings.eyebrow }}</p>
+      <h2 class="runwell-bundle-home-stacks__heading">{{ section.settings.heading }}</h2>
+      <div class="runwell-bundle-home-stacks__cards">
+        {%- for raw_handle in picked_handles limit: 4 -%}
+          {%- assign handle = raw_handle | strip -%}
+          {%- assign bundle_product = all_products[handle] -%}
+          {%- if bundle_product != blank -%}
+            {% render 'runwell-bundle-card', bundle_product: bundle_product, variant: 'default' %}
+            {%- assign rendered_count = rendered_count | plus: 1 -%}
+          {%- endif -%}
+        {%- endfor -%}
+        {%- if rendered_count == 0 -%}
+          <p class="runwell-bundle-home-stacks__empty">
+            Add bundle product handles in section settings to populate this strip.
+          </p>
+        {%- endif -%}
+      </div>
+    </div>
+  </section>
+
+  {{ 'runwell-bundle-system.css' | asset_url | stylesheet_tag }}
+{%- endif -%}
+
+{% schema %}
+{
+  "name": "Bundle stacks",
+  "tag": "section",
+  "class": "section-runwell-bundle-home-stacks",
+  "settings": [
+    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Editor's picks" },
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Curated stacks" },
+    {
+      "type": "textarea",
+      "id": "bundle_handles",
+      "label": "Bundle product handles (comma-separated, max 4)",
+      "info": "Example: morning-stack, recovery-stack, glow-stack"
+    },
+    {
+      "type": "select",
+      "id": "bg_band",
+      "label": "Background",
+      "options": [
+        { "value": "white", "label": "White" },
+        { "value": "oat", "label": "Oat" },
+        { "value": "celadon-tint", "label": "Celadon tint" }
+      ],
+      "default": "white"
+    },
+    { "type": "color_scheme", "id": "color_scheme", "label": "Color scheme", "default": "scheme-1" },
+    { "type": "range", "id": "padding_top", "label": "Top padding", "min": 0, "max": 160, "step": 4, "default": 64, "unit": "px" },
+    { "type": "range", "id": "padding_bottom", "label": "Bottom padding", "min": 0, "max": 160, "step": 4, "default": 64, "unit": "px" }
+  ],
+  "presets": [
+    { "name": "Bundle: curated stacks", "category": "Runwell" }
+  ]
+}
+{% endschema %}

package/modules/runwell-bundle-system/sections/runwell-bundle-pdp-banner.liquid

@@ -0,0 +1,50 @@
+{%- comment -%}
+  runwell-bundle-system: runwell-bundle-pdp-banner.liquid.
+  Surface 5: subtle single-line banner near the buy box on non-bundle
+  PDPs. "Save 17% when bundled. View bundle." Tap routes to the bundle
+  PDP. Picks the first matching bundle (highest savings_pct if multiple).
+
+  See _clients/capital-v/lushi/specs/bundle-system/spec.md sections 5, 8.5.
+{%- endcomment -%}
+
+{%- if settings.bundle_system__surface_5_pdp_banner_enabled == false -%}
+  {%- comment -%} Tenant has disabled this surface. {%- endcomment -%}
+{%- else -%}
+  {%- assign bundle_index = shop.metaobjects.bundle_index.entries.value -%}
+  {%- assign matching_handles = '' -%}
+  {%- if bundle_index and bundle_index.products -%}
+    {%- assign matching_handles = bundle_index.products[product.handle] -%}
+  {%- endif -%}
+
+  {%- if matching_handles and matching_handles.size > 0 -%}
+    {%- assign bundle_handle = matching_handles | first -%}
+    {%- assign bundle_product = all_products[bundle_handle] -%}
+    {%- if bundle_product != blank -%}
+      {%- assign savings_pct = bundle_product.metafields.runwell.bundle_savings_pct.value | default: 15 -%}
+      {%- assign savings_amount = 0 -%}
+      {%- assign template = section.settings.copy_template | default: settings.bundle_system__surface_5_copy_template | default: 'Save {savings_pct}% when bundled' -%}
+      {%- assign copy = template | replace: '{savings_pct}', savings_pct | replace: '{savings_amount}', savings_amount -%}
+
+      <a class="runwell-bundle-pdp-banner" href="{{ bundle_product.url }}" data-bundle-handle="{{ bundle_handle }}">
+        <span class="runwell-bundle-pdp-banner__copy">{{ copy }}</span>
+        <span class="runwell-bundle-pdp-banner__chevron" aria-hidden="true">&rsaquo;</span>
+      </a>
+
+      {{ 'runwell-bundle-system.css' | asset_url | stylesheet_tag }}
+    {%- endif -%}
+  {%- endif -%}
+{%- endif -%}
+
+{% schema %}
+{
+  "name": "Bundle banner",
+  "tag": "section",
+  "class": "section-runwell-bundle-pdp-banner",
+  "settings": [
+    { "type": "text", "id": "copy_template", "label": "Copy template", "default": "Save {savings_pct}% when bundled", "info": "Use {savings_pct} or {savings_amount} placeholders. Leave blank to use the site-wide default." }
+  ],
+  "presets": [
+    { "name": "Bundle: PDP banner", "category": "Runwell" }
+  ]
+}
+{% endschema %}

package/modules/runwell-bundle-system/sections/runwell-bundle-pdp-pairs-with.liquid

@@ -0,0 +1,72 @@
+{%- comment -%}
+  runwell-bundle-system: runwell-bundle-pdp-pairs-with.liquid.
+  Surface 2: PDP "Pairs well with" widget. Renders 1 to N bundle cards
+  on non-bundle PDPs when the current product appears in at least one
+  bundle. Uses the bundle_index shop metaobject for fast reverse lookup
+  (one read).
+
+  Self-suppresses (renders nothing) if no bundles match.
+  See _clients/capital-v/lushi/specs/bundle-system/spec.md sections 5, 7.
+{%- endcomment -%}
+
+{%- if settings.bundle_system__surface_2_pdp_pairs_with_enabled == false -%}
+  {%- comment -%} Tenant has disabled this surface. {%- endcomment -%}
+{%- else -%}
+  {%- assign bundle_index = shop.metaobjects.bundle_index.entries.value -%}
+  {%- assign matching_handles = '' -%}
+  {%- if bundle_index and bundle_index.products -%}
+    {%- assign matching_handles = bundle_index.products[product.handle] -%}
+  {%- endif -%}
+
+  {%- if matching_handles and matching_handles.size > 0 -%}
+    <section
+      class="runwell-bundle-pdp-pairs-with color-{{ section.settings.color_scheme }}"
+      data-product-handle="{{ product.handle }}"
+      style="padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px;"
+    >
+      <div class="runwell-bundle-pdp-pairs-with__inner page-width">
+        <p class="runwell-bundle-pdp-pairs-with__eyebrow">{{ section.settings.eyebrow }}</p>
+        <h3 class="runwell-bundle-pdp-pairs-with__heading">{{ section.settings.heading }}</h3>
+        <div class="runwell-bundle-pdp-pairs-with__cards" data-runwell-card-scroll>
+          {%- assign max_cards = section.settings.max_cards | plus: 0 | default: 2 -%}
+          {%- for handle in matching_handles limit: max_cards -%}
+            {%- assign bundle_product = all_products[handle] -%}
+            {%- if bundle_product != blank -%}
+              {% render 'runwell-bundle-card', bundle_product: bundle_product, variant: 'compact' %}
+            {%- endif -%}
+          {%- endfor -%}
+        </div>
+      </div>
+    </section>
+
+    {{ 'runwell-bundle-system.css' | asset_url | stylesheet_tag }}
+  {%- endif -%}
+{%- endif -%}
+
+{% schema %}
+{
+  "name": "Bundle pairs-with",
+  "tag": "section",
+  "class": "section-runwell-bundle-pdp-pairs-with",
+  "settings": [
+    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Pairs well with" },
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Complete the routine" },
+    {
+      "type": "select",
+      "id": "max_cards",
+      "label": "Max bundle cards",
+      "options": [
+        { "value": "1", "label": "1" },
+        { "value": "2", "label": "2" }
+      ],
+      "default": "2"
+    },
+    { "type": "color_scheme", "id": "color_scheme", "label": "Color scheme", "default": "scheme-1" },
+    { "type": "range", "id": "padding_top", "label": "Top padding", "min": 0, "max": 100, "step": 4, "default": 32, "unit": "px" },
+    { "type": "range", "id": "padding_bottom", "label": "Bottom padding", "min": 0, "max": 100, "step": 4, "default": 32, "unit": "px" }
+  ],
+  "presets": [
+    { "name": "Bundle: pairs well with", "category": "Runwell" }
+  ]
+}
+{% endschema %}