MOB SDK

window.eliteBundle.sdk.mob — live Multi-Option Bundle state and actions, updated on every React render.

Available after the elite:mob:ready event fires. null when no MOB bundle is on the current page.

---

Option modes

MOB supports two option modes, set per-option in the admin:

Mode	Behavior
"products"	Customer picks from a flat list of product/variant combos. Use selectableItems + selectItem.
"single_product_options"	Customer picks Shopify option values (size, color…) for a single product. Use optionSelections + setOptionSelection.

Most options use "products" mode. Read options[i].optionMode to determine which applies.

---

State

bundleId

string

Shopify product ID of the bundle.

---

options

BundleStep[]

The configured bundle options from the admin. Each option has title, optionMode, and product GID references.

---

optionProducts

Product[][]

Fetched Shopify products indexed by option: optionProducts[optionIndex][productIndex].

---

selectableItems

MobSelectableItem[][]

Flat list of selectable product/variant combos per option (products mode only).

interface MobSelectableItem {
  key: string;           // unique key, e.g. "prod-1/var-3"
  product: Product;
  variant: ProductVariant;
  label: string;         // e.g. "Cotton Shirt - Red / Small"
  imageUrl: string;
  price: number;         // numeric
  priceFormatted: string; // e.g. "$29.99"
  available: boolean;
}

Example:

document.addEventListener('elite:mob:ready', () => {
  const { options, selectableItems, selectItem } = window.eliteBundle.sdk.mob;

  options.forEach((option, i) => {
    const items = selectableItems[i] ?? [];
    items.forEach(item => {
      const card = renderProductCard(item);
      card.addEventListener('click', () => selectItem(i, item.key));
      document.querySelector(`#option-${i}`).appendChild(card);
    });
  });
});

---

selectedItemKeys

Record<number, string | null>

Currently selected item key per option (products mode). { [optionIndex]: itemKey | null }. null means nothing selected yet.

const isSelected = window.eliteBundle.sdk.mob.selectedItemKeys[0] === item.key;

---

optionSelections

Record<number, Record<string, string>>

Selected Shopify option values per option (single_product_options mode). { [optionIndex]: { [optionName]: selectedValue } }.

// e.g. { 0: { "Size": "M", "Color": "Red" } }
const sizeForOption0 = window.eliteBundle.sdk.mob.optionSelections[0]?.["Size"];

---

selectedVariants

(ProductVariant | null)[]

Resolved variant for each option. null if that option has no valid selection yet.

---

totalPrice

number

Sum of all selected variant prices. 0 when nothing is selected. Rounded to 2 decimal places.

---

totalPriceFormatted

string

totalPrice formatted using the store's money format, e.g. "$59.99". Use this for display.

---

discountedPrice

number | null

Price after the bundle discount is applied. null when no discount is active.

---

discountedPriceFormatted

string | null

discountedPrice formatted for display, e.g. "$49.99". null when no discount is active.

---

discountPercent

number

The active discount percentage. 0 when no discount applies.

---

currencyCode

string

ISO 4217 currency code from the first fetched product, e.g. "USD".

---

allSelected

boolean

true when every option has a valid selection. Gate your add-to-cart button on this.

---

allSelectedVariantsAvailable

boolean

true when all selected variants are available for purchase. A variant may be selected but out of stock.

---

isAddingToCart

boolean

true while the cart POST request is in flight. Show a loading spinner on your add-to-cart button.

---

addToCartError

string | null

Non-null when the last add-to-cart attempt failed.

---

isLoading

boolean

true while products are being fetched from the Storefront API.

---

error

string | null

Non-null when product fetching failed.

---

discountConfig

DiscountSettings

The discount configuration for this bundle.

type DiscountSettings =
  | { discountType: "none" }
  | { discountType: "percentage"; tiers: DiscountTier[] }
  | { discountType: "fixed"; tiers: DiscountTier[] };

---

Actions

formatPrice(amount)

formatPrice(amount: number): string

Formats a monetary amount using the store's money format and active currency rate.

const { formatPrice, totalPrice, discountedPrice } = window.eliteBundle.sdk.mob;
const display = discountedPrice !== null ? formatPrice(discountedPrice) : formatPrice(totalPrice);
document.querySelector('#price').textContent = display;

---

selectItem(optionIndex, itemKey)

selectItem(optionIndex: number, itemKey: string): void

Selects a product/variant combo for an option (products mode). Replaces any previous selection for that option.

const { selectableItems, selectItem } = window.eliteBundle.sdk.mob;

// Select the first available item in option 0
const firstAvailable = selectableItems[0].find(i => i.available);
if (firstAvailable) selectItem(0, firstAvailable.key);

---

setOptionSelection(optionIndex, optionName, value)

setOptionSelection(optionIndex: number, optionName: string, value: string): void

Sets a Shopify option value for an option (single_product_options mode). Call once per Shopify option name.

// Render a <select> for each Shopify option
product.options.forEach(shopifyOption => {
  const select = document.createElement('select');
  shopifyOption.values.forEach(val => {
    const opt = document.createElement('option');
    opt.value = val;
    opt.textContent = val;
    select.appendChild(opt);
  });
  select.addEventListener('change', e => {
    setOptionSelection(optionIndex, shopifyOption.name, e.target.value);
  });
  container.appendChild(select);
});

---

addToCart(redirectTarget?)

addToCart(redirectTarget?: "checkout" | "cart" | "stay_on_page"): Promise<void>

Adds all selected variants to cart as a bundle. Only call when allSelected is true.

redirectTarget	Behavior
"checkout" (default)	Redirects to Shopify checkout
"cart"	Redirects to /cart
"stay_on_page"	No redirect

document.querySelector('#add-btn').addEventListener('click', () => {
  const { allSelected, isAddingToCart, addToCart } = window.eliteBundle.sdk.mob;
  if (!allSelected || isAddingToCart) return;
  addToCart('checkout');
});

---

Full example

document.addEventListener('elite:mob:ready', () => {
  const sdk = window.eliteBundle.sdk.mob;

  sdk.options.forEach((option, i) => {
    const container = document.querySelector(`#option-${i}`);
    container.querySelector('h2').textContent = option.title;

    const items = sdk.selectableItems[i] ?? [];
    items.forEach(item => {
      const card = document.createElement('div');
      card.className = 'product-card';
      if (!item.available) card.classList.add('unavailable');
      card.innerHTML = `
        <img src="${item.imageUrl}" alt="${item.label}" />
        <p>${item.label}</p>
        <p>${item.priceFormatted}</p>
      `;
      card.addEventListener('click', () => {
        if (!item.available) return;
        sdk.selectItem(i, item.key);
      });
      container.appendChild(card);
    });
  });

  // Price + add-to-cart
  document.querySelector('#add-btn').addEventListener('click', () => {
    sdk.addToCart();
  });
});

document.addEventListener('elite:mob:selection-change', (e) => {
  const { allSelected, totalPriceFormatted, discountedPriceFormatted } = e.detail;
  const addBtn = document.querySelector('#add-btn');
  addBtn.disabled = !allSelected;

  if (discountedPriceFormatted) {
    document.querySelector('#price').innerHTML =
      `<s>${totalPriceFormatted}</s> ${discountedPriceFormatted}`;
  } else {
    document.querySelector('#price').textContent = totalPriceFormatted;
  }

  // Highlight selected items
  document.querySelectorAll('.product-card').forEach(card => {
    card.classList.toggle('selected', card.dataset.key === e.detail.selectedItemKeys[card.dataset.optionIndex]);
  });
});