@runwell/shopify-toolkit 0.18.0 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runwell/shopify-toolkit",
-  "version": "0.18.0",
+  "version": "0.21.0",
   "description": "Reusable Shopify theme modules from Runwell. Replaces typically app-driven features (reviews, wishlist, urgency, FAQ, post-purchase upsell, exit popups, free-ship progress, sticky ATC, testimonials, badges, bundles) with native Liquid + JS + CSS that ship across multiple client themes via a config-driven sync CLI.",
   "type": "module",
   "main": "lib/index.js",