@runwell/shopify-toolkit 0.17.4 → 0.21.0

package/modules/runwell-bundle-system/snippets/runwell-bundle-free-gift.liquid

@@ -0,0 +1,34 @@
+{%- comment -%}
+  runwell-bundle-system: runwell-bundle-free-gift.liquid.
+  Wraps the gift-with-purchase module. The bundle's free-gift handle is
+  passed in. Display only here; the actual auto-add to cart logic lives
+  in the gift-with-purchase module's runwell-gwp.js.
+
+  Inputs:
+    bundle_free_gift_handle (product handle of the gift)
+{%- endcomment -%}
+
+{%- if bundle_free_gift_handle != blank -%}
+  {%- assign gift_product = all_products[bundle_free_gift_handle] -%}
+  {%- if gift_product != blank -%}
+    <div class="runwell-bundle-system__free-gift" data-runwell-bundle-free-gift data-gift-handle="{{ bundle_free_gift_handle }}">
+      <p class="runwell-bundle-system__free-gift-label">Plus a free gift:</p>
+      <div class="runwell-bundle-system__free-gift-product">
+        {%- if gift_product.featured_image -%}
+          {{ gift_product.featured_image | image_url: width: 80 | image_tag:
+            width: 60,
+            height: 60,
+            loading: 'lazy',
+            class: 'runwell-bundle-system__free-gift-thumb',
+            alt: gift_product.title
+          }}
+        {%- endif -%}
+        <span class="runwell-bundle-system__free-gift-name">{{ gift_product.title }}</span>
+        <span class="runwell-bundle-system__free-gift-price">
+          <s>{{ gift_product.price | money }}</s>
+          <strong>Free</strong>
+        </span>
+      </div>
+    </div>
+  {%- endif -%}
+{%- endif -%}

package/modules/runwell-bundle-system/snippets/runwell-bundle-multi-product.liquid

@@ -0,0 +1,86 @@
+{%- comment -%}
+  runwell-bundle-system: runwell-bundle-multi-product.liquid.
+  Mode B render. Lists the bundle's component products (thumbnail, qty,
+  name, individual price), the bundle pricing block (delegated to
+  runwell-bundle-pricing), and the single Add to Cart button that adds
+  the bundle product as one line item.
+
+  Inputs:
+    product
+    bundle_pricing_model
+    bundle_components       (array of {product_handle, qty})
+    bundle_subtotal         (sum of component prices)
+    bundle_price            (the bundle product's price)
+    bundle_savings_amount
+    bundle_savings_pct
+{%- endcomment -%}
+
+{% render 'runwell-bundle-pricing',
+  bundle_pricing_model: bundle_pricing_model,
+  bundle_price: bundle_price,
+  bundle_subtotal: bundle_subtotal,
+  bundle_savings_amount: bundle_savings_amount,
+  bundle_savings_pct: bundle_savings_pct
+%}
+
+<div class="runwell-bundle-system__components">
+  <p class="runwell-bundle-system__components-heading">Includes:</p>
+  <ul class="runwell-bundle-system__components-list" role="list">
+    {%- if bundle_components and bundle_components.size > 0 -%}
+      {%- for component in bundle_components -%}
+        {%- assign comp_product = all_products[component.product_handle] -%}
+        {%- assign comp_qty = component.qty | default: 1 -%}
+        <li class="runwell-bundle-system__component">
+          {%- if comp_product != blank and comp_product.featured_image -%}
+            {{ comp_product.featured_image | image_url: width: 120 | image_tag:
+              width: 60,
+              height: 60,
+              loading: 'lazy',
+              class: 'runwell-bundle-system__component-thumb',
+              alt: comp_product.title
+            }}
+          {%- else -%}
+            <span class="runwell-bundle-system__component-thumb runwell-bundle-system__component-thumb--placeholder" aria-hidden="true"></span>
+          {%- endif -%}
+
+          <span class="runwell-bundle-system__component-qty">{{ comp_qty }}x</span>
+
+          <span class="runwell-bundle-system__component-name">
+            {%- if comp_product != blank -%}
+              {{ comp_product.title }}
+            {%- else -%}
+              <em>(unavailable)</em>
+            {%- endif -%}
+          </span>
+
+          {%- if comp_product != blank -%}
+            <span class="runwell-bundle-system__component-price">{{ comp_product.price | money }}</span>
+          {%- endif -%}
+        </li>
+      {%- endfor -%}
+    {%- else -%}
+      <li class="runwell-bundle-system__component runwell-bundle-system__component--empty">
+        <em>No components configured. Set the runwell.bundle_components metafield on this bundle product.</em>
+      </li>
+    {%- endif -%}
+  </ul>
+</div>
+
+{%- form 'product', product, class: 'runwell-bundle-system__form', novalidate: 'novalidate' -%}
+  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
+  <input type="hidden" name="quantity" value="1">
+  <button
+    type="submit"
+    name="add"
+    class="runwell-bundle-system__atc button button--primary button--full-width"
+    {% if product.available == false %}disabled{% endif %}
+  >
+    <span class="runwell-bundle-system__atc-label">
+      {%- if product.available -%}
+        Add bundle to cart
+      {%- else -%}
+        Sold out
+      {%- endif -%}
+    </span>
+  </button>
+{%- endform -%}

package/modules/runwell-bundle-system/snippets/runwell-bundle-pricing.liquid

@@ -0,0 +1,30 @@
+{%- comment -%}
+  runwell-bundle-system: runwell-bundle-pricing.liquid.
+  Shared price + strikethrough subtotal + savings badge. Used by Mode B
+  (multi-product) and bundle cards on Surfaces 1 to 5.
+
+  Inputs:
+    bundle_price          (the bundle product's selling price, in cents)
+    bundle_subtotal       (sum of component prices, in cents; 0 if not multi-product)
+    bundle_savings_amount (subtotal - price, in cents; 0 if no savings)
+    bundle_savings_pct    (savings_amount / subtotal * 100; 0 if no savings)
+    bundle_pricing_model  (used to choose dollar vs percent badge format)
+{%- endcomment -%}
+
+<div class="runwell-bundle-system__pricing">
+  <span class="runwell-bundle-system__pricing-current">{{ bundle_price | money }}</span>
+
+  {%- if bundle_subtotal > bundle_price -%}
+    <span class="runwell-bundle-system__pricing-strikethrough">{{ bundle_subtotal | money }}</span>
+  {%- endif -%}
+
+  {%- if bundle_savings_amount > 0 -%}
+    <span class="runwell-bundle-system__pricing-badge">
+      {%- if bundle_pricing_model == 'percent_off_subtotal' -%}
+        Save {{ bundle_savings_pct }}%
+      {%- else -%}
+        Save {{ bundle_savings_amount | money_without_trailing_zeros }}
+      {%- endif -%}
+    </span>
+  {%- endif -%}
+</div>

package/modules/runwell-bundle-system/snippets/runwell-bundle-quantity-tiers.liquid

@@ -0,0 +1,73 @@
+{%- comment -%}
+  runwell-bundle-system: runwell-bundle-quantity-tiers.liquid.
+  Mode A radio picker. Renders one row per tier in bundle_quantity_tiers
+  metafield. Default selection is the highest discount_pct tier (last in
+  the array, by convention). Display only; the discount itself is applied
+  by a Shopify Function (see module.json admin_steps:
+  configure-quantity-tier-discount-function).
+
+  Inputs (passed via render):
+    product
+    bundle_pricing_model
+    bundle_quantity_tiers (array of {qty, discount_pct})
+    section
+{%- endcomment -%}
+
+{%- if bundle_quantity_tiers and bundle_quantity_tiers.size > 0 -%}
+  {%- assign default_tier_index = bundle_quantity_tiers.size | minus: 1 -%}
+
+  {%- form 'product', product, class: 'runwell-bundle-system__form', novalidate: 'novalidate' -%}
+    <fieldset class="runwell-bundle-system__tiers" aria-label="Choose quantity">
+      <legend class="visually-hidden">Choose quantity</legend>
+      {%- for tier in bundle_quantity_tiers -%}
+        {%- assign discount_amount = product.price | times: tier.discount_pct | divided_by: 100 -%}
+        {%- assign per_unit_price = product.price | minus: discount_amount -%}
+        {%- assign total_price = per_unit_price | times: tier.qty -%}
+        {%- assign full_price = product.price | times: tier.qty -%}
+        {%- assign savings = full_price | minus: total_price -%}
+
+        <label class="runwell-bundle-system__tier" data-qty="{{ tier.qty }}" data-discount-pct="{{ tier.discount_pct }}">
+          <input
+            type="radio"
+            name="quantity"
+            value="{{ tier.qty }}"
+            class="runwell-bundle-system__tier-input"
+            {% if forloop.index0 == default_tier_index %}checked{% endif %}
+          >
+          <span class="runwell-bundle-system__tier-row">
+            <span class="runwell-bundle-system__tier-qty">{{ tier.qty }}{% if tier.qty == 1 %} unit{% else %} units{% endif %}</span>
+            {%- if tier.discount_pct > 0 -%}
+              <span class="runwell-bundle-system__tier-savings-badge">Save {{ tier.discount_pct }}%</span>
+            {%- endif -%}
+          </span>
+          <span class="runwell-bundle-system__tier-row runwell-bundle-system__tier-row--prices">
+            <span class="runwell-bundle-system__tier-total">{{ total_price | money }}</span>
+            {%- if tier.discount_pct > 0 -%}
+              <span class="runwell-bundle-system__tier-strikethrough">{{ full_price | money }}</span>
+            {%- endif -%}
+            <span class="runwell-bundle-system__tier-per-unit">{{ per_unit_price | money }} / unit</span>
+          </span>
+        </label>
+      {%- endfor -%}
+    </fieldset>
+
+    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
+
+    <button
+      type="submit"
+      name="add"
+      class="runwell-bundle-system__atc button button--primary button--full-width"
+      {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
+    >
+      <span class="runwell-bundle-system__atc-label">
+        {%- if product.selected_or_first_available_variant.available -%}
+          Add to cart
+        {%- else -%}
+          Sold out
+        {%- endif -%}
+      </span>
+    </button>
+  {%- endform -%}
+{%- else -%}
+  <p class="runwell-bundle-system__empty">No quantity tiers configured for this bundle.</p>
+{%- endif -%}

package/modules/testimonials-medvi/README.md

@@ -0,0 +1,44 @@
+# testimonials-medvi
+
+Interleaved photo card + quote card mosaic in a CSS grid. Magazine-spread feel. Blocks of type `quote` and `photo` are user-droppable in the Theme Editor; the designer controls visual rhythm by ordering blocks.
+
+Category: `social-proof`
+
+## Files
+
+- `sections/runwell-testimonials-medvi.liquid`
+- `assets/runwell-testimonials-medvi.css`
+
+## Layout
+
+- Header: centered eyebrow + 2-color split headline + lede.
+- Grid: responsive 1/2/4 columns at 320 / 768 / 1024 px breakpoints. Each cell has a 5:6 aspect ratio; photos and quote cards line up.
+- Cells flow naturally; designer arranges blocks in the Theme Editor for the photo + quote interleave.
+- Up to 12 blocks (max_blocks).
+
+## Tokens consumed
+
+Brand: `--runwell-oat`, `--runwell-primary`, `--runwell-tertiary`. Design system: `--runwell-radius-lg`. Typography: `--runwell-eyebrow-size`, `--runwell-h2-size`, `--runwell-body-size`, `--runwell-meta-size`, `--runwell-cta-size`.
+
+## Block types
+
+- **quote**: author, rating (range 0 to 5), quote (richtext). Renders as padded card with author + star rating row + quote body.
+- **photo**: image (uploaded) with image_asset fallback, image_focal (center / top / bottom). Renders as full-bleed portrait card with `object-fit: cover` driven by focal point.
+
+## Lineage
+
+Extracted from `https://home.medvi.org/` on 2026-05-06. Framer label: `What Our Clients Say Parallax Scroll Section`. Scrape path: `_clients/capital-v/lushi/research/medvi-reference/site-scrape/`.
+
+The medvi reference uses an interleaved row pattern: row 1 = `[photo, quote, quote, quote]`, row 2 = `[quote, quote, photo, quote]`. We keep the layout flexible (CSS grid plus block order) rather than encoding the pattern in code; designers reproduce the rhythm by ordering blocks.
+
+## Tenant overrides
+
+- `runwell.config.json` brand block: rewires the global tokens.
+- Per-instance Theme Editor: header copy, accent color, card background, star color, bg band, plus block ordering and content.
+
+## Notes
+
+- Photo focal point: medvi crops portraits tight with face at top of frame. Default is `center`; use `top` for headshots and `bottom` for full-body shots where the bottom should anchor the visual.
+- Star rating: ASCII `★` glyph in the configured color. Zero rating hides the star row.
+- Default preset includes 6 quote cards + 2 photo placeholders, using medvi's reference quotes (with anonymised first names). Tenants replace the preset content with their own customer testimonials post-launch.
+- Mobile: grid collapses to 1 column, then 2 columns at 768px, then 4 columns at 1024px.

package/modules/testimonials-medvi/assets/runwell-testimonials-medvi.css

@@ -0,0 +1,239 @@
+/* Runwell testimonials-medvi.
+
+   Two horizontal marquee rows. Each row scrolls continuously; row 2
+   reverses direction. Cards are landscape (~16:9), ~400px wide. Photos
+   fill cards with object-fit cover. Quote cards have tinted background,
+   padded interior with author + star row + quote body.
+
+   Loop: each row's content rendered twice in DOM. CSS animation
+   translates by -50% (one full set width) over the configured duration
+   (--rw-tm-duration). When set 1 leaves viewport, set 2 has taken its
+   place; loop is seamless.
+
+   Accessibility: pause on hover and on focus-within for users navigating
+   with keyboard. Stops entirely on prefers-reduced-motion.
+
+   Tokens: --runwell-oat, --runwell-primary, --runwell-tertiary,
+   --runwell-radius-lg.
+*/
+
+.runwell-testimonials-medvi {
+  padding: clamp(3rem, 8vw, 7rem) 0;
+  font-family: var(--font-body-family, inherit);
+  color: var(--runwell-tertiary, #0B3D38);
+
+  /* css custom properties driven from Liquid; defaults below are fallbacks */
+  --rw-tm-duration: 60s;
+  --rw-tm-card-w: 400px;
+  --rw-tm-gap: 20px;
+}
+
+.runwell-testimonials-medvi--bg-white {
+  background: #ffffff;
+}
+
+.runwell-testimonials-medvi--bg-oat {
+  background: var(--runwell-oat, #F5F0EE);
+}
+
+.runwell-testimonials-medvi--bg-celadon-tint {
+  background: color-mix(in srgb, var(--runwell-celadon, #ADDDBD) 18%, white);
+}
+
+/* ----- Header ----- */
+
+.runwell-testimonials-medvi__header {
+  max-width: 760px;
+  margin: 0 auto clamp(2rem, 5vw, 4rem);
+  padding: 0 clamp(1.5rem, 4vw, 3rem);
+  text-align: center;
+}
+
+.runwell-testimonials-medvi__eyebrow {
+  font-size: var(--runwell-eyebrow-size, 0.78rem);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  font-weight: 600;
+  margin: 0 0 1rem;
+  opacity: 0.85;
+}
+
+.runwell-testimonials-medvi__headline {
+  font-family: var(--font-heading-family, inherit);
+  font-size: var(--runwell-h2-size, clamp(3rem, 5vw, 4.8rem));
+  font-weight: 700;
+  line-height: 1.1;
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.runwell-testimonials-medvi__headline-pre,
+.runwell-testimonials-medvi__headline-post {
+  display: inline;
+}
+
+.runwell-testimonials-medvi__lede {
+  font-size: var(--runwell-body-size, 1.6rem);
+  line-height: 1.5;
+  opacity: 0.85;
+  margin: 1rem auto 0;
+  max-width: 50ch;
+}
+
+/* ----- Marquee rows ----- */
+
+.runwell-testimonials-medvi__rows {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.75rem, 1.5vw, 1.25rem);
+  width: 100%;
+}
+
+.runwell-testimonials-medvi__row {
+  position: relative;
+  width: 100%;
+  overflow: hidden;        /* clip the moving track at viewport edges */
+  -webkit-mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%);
+          mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%);
+}
+
+.runwell-testimonials-medvi__track {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--rw-tm-gap, 20px);
+  width: max-content;
+  animation: runwell-tm-marquee var(--rw-tm-duration, 60s) linear infinite;
+  will-change: transform;
+}
+
+/* Row 2 direction: same (default, medvi-faithful) keeps both rows scrolling left.
+   `reverse` flips row 2 to create visual rhythm. */
+.runwell-testimonials-medvi__rows--row2-reverse .runwell-testimonials-medvi__row--2 .runwell-testimonials-medvi__track {
+  animation-direction: reverse;
+}
+
+.runwell-testimonials-medvi__row:hover .runwell-testimonials-medvi__track,
+.runwell-testimonials-medvi__row:focus-within .runwell-testimonials-medvi__track {
+  animation-play-state: paused;
+}
+
+@keyframes runwell-tm-marquee {
+  from { transform: translateX(0); }
+  to   { transform: translateX(calc(-50% - var(--rw-tm-gap, 20px) / 2)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .runwell-testimonials-medvi__track {
+    animation: none;
+    transform: none;
+  }
+}
+
+/* ----- Items + cards ----- */
+
+.runwell-testimonials-medvi__item {
+  flex: 0 0 auto;
+  width: var(--rw-tm-card-w, 400px);
+}
+
+.runwell-testimonials-medvi__card {
+  margin: 0;
+  border-radius: var(--runwell-radius-lg, 20px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Per-card aspect ratios: photos default 16:9 (medvi-faithful native landscape),
+   quotes default 5:3 (taller for multi-line text). Either can be overridden
+   per-instance via section settings. */
+.runwell-testimonials-medvi__rows--photo-aspect-16-9 .runwell-testimonials-medvi__card--photo { aspect-ratio: 16 / 9; }
+.runwell-testimonials-medvi__rows--photo-aspect-5-3  .runwell-testimonials-medvi__card--photo { aspect-ratio: 5 / 3; }
+.runwell-testimonials-medvi__rows--photo-aspect-4-3  .runwell-testimonials-medvi__card--photo { aspect-ratio: 4 / 3; }
+.runwell-testimonials-medvi__rows--photo-aspect-1-1  .runwell-testimonials-medvi__card--photo { aspect-ratio: 1 / 1; }
+
+.runwell-testimonials-medvi__rows--quote-aspect-16-9 .runwell-testimonials-medvi__card--quote { aspect-ratio: 16 / 9; }
+.runwell-testimonials-medvi__rows--quote-aspect-5-3  .runwell-testimonials-medvi__card--quote { aspect-ratio: 5 / 3; }
+.runwell-testimonials-medvi__rows--quote-aspect-4-3  .runwell-testimonials-medvi__card--quote { aspect-ratio: 4 / 3; }
+.runwell-testimonials-medvi__rows--quote-aspect-1-1  .runwell-testimonials-medvi__card--quote { aspect-ratio: 1 / 1; }
+
+/* Quote card */
+.runwell-testimonials-medvi__card--quote {
+  padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1.75rem, 2.6vw, 2.25rem);
+  justify-content: flex-start;
+  gap: 0.85rem;
+}
+
+.runwell-testimonials-medvi__card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.runwell-testimonials-medvi__card-author {
+  font-family: var(--font-heading-family, inherit);
+  font-size: var(--runwell-body-size, 1.6rem);
+  font-weight: 700;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.runwell-testimonials-medvi__card-rating {
+  display: inline-flex;
+  gap: 0.15em;
+  font-size: var(--runwell-body-size, 1.6rem);
+  letter-spacing: 0.05em;
+  line-height: 1;
+}
+
+.runwell-testimonials-medvi__star {
+  line-height: 1;
+}
+
+.runwell-testimonials-medvi__card-quote {
+  font-size: var(--runwell-cta-size, 1.5rem);
+  line-height: 1.5;
+  opacity: 0.85;
+  flex: 1 1 auto;
+  display: -webkit-box;
+  -webkit-line-clamp: 6;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.runwell-testimonials-medvi__card-quote p {
+  margin: 0 0 0.4em;
+}
+
+.runwell-testimonials-medvi__card-quote p:last-child {
+  margin-bottom: 0;
+}
+
+/* Photo card */
+.runwell-testimonials-medvi__card--photo {
+  background: var(--runwell-oat, #F5F0EE);
+  padding: 0;
+}
+
+.runwell-testimonials-medvi__card--photo img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.runwell-testimonials-medvi__card--photo-focal-center img { object-position: center; }
+.runwell-testimonials-medvi__card--photo-focal-top img    { object-position: 50% 25%; }
+.runwell-testimonials-medvi__card--photo-focal-bottom img { object-position: 50% 75%; }
+
+/* Mobile: smaller card width but keep marquee */
+@media (max-width: 767px) {
+  .runwell-testimonials-medvi {
+    --rw-tm-card-w: 280px;
+  }
+}

package/modules/testimonials-medvi/module.json

@@ -0,0 +1,68 @@
+{
+  "name": "testimonials-medvi",
+  "version": "0.3.0",
+  "category": "social-proof",
+  "source": "medvi",
+  "base": "testimonials",
+  "qualifier": null,
+  "description": "Two horizontal marquee rows of testimonial cards. Cards are landscape (16:9), ~400px wide. Photos and quote cards are auto-split across two rows; row 2 scrolls in reverse for visual rhythm. Pauses on hover or focus; stops on prefers-reduced-motion.",
+  "replaces": null,
+  "files": {
+    "sections": [
+      "sections/runwell-testimonials-medvi.liquid"
+    ],
+    "snippets": [],
+    "assets": [
+      "assets/runwell-testimonials-medvi.css"
+    ]
+  },
+  "config": {
+    "schema": {
+      "section_eyebrow": {
+        "type": "string",
+        "default": "THOSE WHO CHOSE US",
+        "label": "Section eyebrow"
+      },
+      "headline_pre": {
+        "type": "string",
+        "default": "There's a reason people are",
+        "label": "Headline first part"
+      },
+      "headline_post": {
+        "type": "string",
+        "default": "raving about us.",
+        "label": "Headline accent part"
+      },
+      "headline_accent_color": {
+        "type": "string",
+        "default": "{{brand.primary}}",
+        "label": "Accent color for headline post"
+      },
+      "lede": {
+        "type": "string",
+        "default": "Join the multitude of people who have trusted us to help change their lives.",
+        "label": "Centered lede paragraph"
+      },
+      "card_bg": {
+        "type": "string",
+        "default": "{{brand.oat}}",
+        "label": "Quote card background"
+      },
+      "star_color": {
+        "type": "string",
+        "default": "{{brand.primary}}",
+        "label": "Star rating color"
+      },
+      "bg_band": {
+        "type": "string",
+        "default": "white",
+        "label": "Background band: white, oat, celadon-tint"
+      }
+    }
+  },
+  "lineage": {
+    "extracted_from": "https://home.medvi.org/",
+    "scrape_path": "_clients/capital-v/lushi/research/medvi-reference/site-scrape/",
+    "framer_label": "What Our Clients Say Parallax Scroll Section"
+  }
+}