Wishlist Page — B2B Extensions

Prerequisite: Complete the Wishlist Page guide first. This guide only covers what changes for B2B — do not repeat the base setup.

B2B buyers need to specify quantities, attach notes, and bulk-convert their list to an order. This guide adds three things to the base implementation:

Quantity controls (+ / − buttons) on each product card
Item notes (a textarea per card) for buyer instructions, sizing notes, or special requests
Add All to Cart button that adds every in-stock item at its current quantity in a single cart request

Quantity and note changes are persisted back to the Swym list via swat.updateListItem().

What Changes

	Base guide	B2B extension
Liquid	Standard header row	Add `#swym-add-all-btn` button next to the wishlist count
`renderProducts`	Renders product title, price, add-to-cart, remove	Also sets `data-epi` on each card; renders quantity controls and a note textarea
(new) `scheduleItemUpdate`	—	Debounced call to `swat.updateListItem()` to persist qty + note changes
(new) `setupAddAllButton`	—	Shows/hides the Add All to Cart button based on whether any in-stock items exist
(new) `addAllToCart`	—	Reads `data-epi` + `.swym-wishlist-qty-value` from every card and POSTs all in-stock items to `/cart/add.js` in one request

Nothing else in the base guide changes. initWishlistPage, setupShareButton, the share modal, save nudge, and login nudge are all unchanged.

Wiring `setupAddAllButton` into `initWishlistPage`

Call setupAddAllButton immediately after renderProducts in each place renderProducts is called — the initial fetchLists callback and the sw:removedfromwishlist listener:

// In the fetchLists callbackFn, after renderProducts:
renderProducts(swat, lid, products, grid, countEl, empty);
setupShareButton(swat, lid, freshCount);
setupAddAllButton(products);   // ← add this line

// In the sw:removedfromwishlist handler, after renderProducts:
renderProducts(swat, lid, updated, grid, countEl, empty);
setupShareButton(swat, lid, count);
setupAddAllButton(updated);    // ← add this line

Modified `renderProducts`

Replace the renderProducts function in assets/swym-wishlist-page.js with the version below. The only additions are the quantity block and the note block appended to each card's actions container.

// Replaces renderProducts in the base wishlist-page.js

function renderProducts(swat, lid, products, container, countEl, emptyEl) {
  container.setAttribute('aria-busy', 'true');
  container.innerHTML = '';

  if (!products || products.length === 0) {
    if (emptyEl) emptyEl.style.display = 'block';
    container.setAttribute('aria-busy', 'false');
    return;
  }

  if (emptyEl) emptyEl.style.display = 'none';

  products.forEach(function(product) {
    var card = document.createElement('div');
    card.className = 'swym-wishlist-card';
    card.dataset.epi = product.epi; // needed by addAllToCart to read variant IDs from the DOM

    // --- image, title, price (unchanged from base guide) ---
    var imgLink = document.createElement('a');
    imgLink.href = product.du || '#';
    var img = document.createElement('img');
    img.src = product.iu || '';
    img.alt = product.dt || 'Product';
    img.loading = 'lazy';
    imgLink.appendChild(img);
    card.appendChild(imgLink);

    var titleLink = document.createElement('a');
    titleLink.href = product.du || '#';
    titleLink.textContent = product.dt || 'Product';
    card.appendChild(titleLink);

    if (product.pr) {
      var priceEl = document.createElement('span');
      priceEl.textContent = formatPrice(product.pr);
      card.appendChild(priceEl);
    }

    var actions = document.createElement('div');
    actions.className = 'swym-wishlist-card-actions';

    // --- quantity controls (B2B addition) ---
    var currentQty = product.qty || 1;
    var qtyWrapper = document.createElement('div');
    qtyWrapper.className = 'swym-wishlist-qty';

    var decrementBtn = document.createElement('button');
    decrementBtn.type = 'button';
    decrementBtn.textContent = '\u2212'; // −
    decrementBtn.setAttribute('aria-label', 'Decrease quantity of ' + (product.dt || 'product'));

    var qtyDisplay = document.createElement('span');
    qtyDisplay.className = 'swym-wishlist-qty-value';
    qtyDisplay.setAttribute('aria-live', 'polite');
    qtyDisplay.textContent = currentQty;

    var incrementBtn = document.createElement('button');
    incrementBtn.type = 'button';
    incrementBtn.textContent = '\u002b'; // +
    incrementBtn.setAttribute('aria-label', 'Increase quantity of ' + (product.dt || 'product'));

    decrementBtn.addEventListener('click', function() {
      var qty = parseInt(qtyDisplay.textContent, 10);
      if (qty <= 1) return;
      qty -= 1;
      qtyDisplay.textContent = qty;
      decrementBtn.setAttribute('aria-label', 'Decrease quantity of ' + (product.dt || 'product'));
      scheduleItemUpdate(swat, lid, product, qty, noteInput.value.trim());
    });

    incrementBtn.addEventListener('click', function() {
      var qty = parseInt(qtyDisplay.textContent, 10) + 1;
      qtyDisplay.textContent = qty;
      scheduleItemUpdate(swat, lid, product, qty, noteInput.value.trim());
    });

    qtyWrapper.appendChild(decrementBtn);
    qtyWrapper.appendChild(qtyDisplay);
    qtyWrapper.appendChild(incrementBtn);
    actions.appendChild(qtyWrapper);

    // --- note textarea (B2B addition) ---
    var noteLabel = document.createElement('label');
    var noteId = 'swym-note-' + product.epi;
    noteLabel.setAttribute('for', noteId);
    noteLabel.textContent = 'Note';
    noteLabel.className = 'swym-wishlist-note-label';

    var noteInput = document.createElement('textarea');
    noteInput.id = noteId;
    noteInput.className = 'swym-wishlist-note';
    noteInput.placeholder = 'Add a note (size, colour, special instructions…)';
    noteInput.setAttribute('aria-label', 'Note for ' + (product.dt || 'product'));
    noteInput.value = product.note || '';
    noteInput.rows = 2;

    noteInput.addEventListener('input', function() {
      var qty = parseInt(qtyDisplay.textContent, 10);
      scheduleItemUpdate(swat, lid, product, qty, noteInput.value.trim());
    });

    actions.appendChild(noteLabel);
    actions.appendChild(noteInput);

    // --- add to cart (unchanged from base guide) ---
    var inStock = product.stk !== 0;
    var cartBtn = document.createElement('button');
    cartBtn.type = 'button';
    cartBtn.textContent = inStock ? 'Add to Cart' : 'Out of Stock';
    cartBtn.setAttribute('aria-label', inStock ? 'Add ' + (product.dt || 'product') + ' to cart' : (product.dt || 'Product') + ' is out of stock');
    cartBtn.disabled = !inStock;
    if (inStock) {
      cartBtn.addEventListener('click', function() {
        var qty = parseInt(qtyDisplay.textContent, 10);
        cartBtn.textContent = 'Adding...';
        cartBtn.setAttribute('aria-label', 'Adding ' + (product.dt || 'product') + ' to cart');
        cartBtn.disabled = true;
        fetch('/cart/add.js', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ items: [{ id: Number(product.epi), quantity: qty }] })
        })
        .then(function(response) {
          if (response.ok) {
            cartBtn.textContent = 'Added!';
            cartBtn.setAttribute('aria-label', (product.dt || 'Product') + ' added to cart');
            setTimeout(function() {
              cartBtn.textContent = 'Add to Cart';
              cartBtn.setAttribute('aria-label', 'Add ' + (product.dt || 'product') + ' to cart');
              cartBtn.disabled = false;
            }, 2000);
          } else {
            cartBtn.textContent = 'Error';
            cartBtn.setAttribute('aria-label', 'Failed to add ' + (product.dt || 'product') + ' to cart');
            cartBtn.disabled = false;
          }
        })
        .catch(function() {
          cartBtn.textContent = 'Error';
          cartBtn.setAttribute('aria-label', 'Failed to add ' + (product.dt || 'product') + ' to cart');
          cartBtn.disabled = false;
        });
      });
    }
    actions.appendChild(cartBtn);

    // --- remove (unchanged from base guide) ---
    var removeBtn = document.createElement('button');
    removeBtn.type = 'button';
    removeBtn.textContent = '\u00d7';
    removeBtn.setAttribute('aria-label', 'Remove ' + (product.dt || 'product') + ' from wishlist');
    removeBtn.addEventListener('click', function() {
      swat.removeFromWishList(
        { epi: product.epi, empi: product.empi, du: product.du },
        function() {
          card.remove();
          var remaining = container.querySelectorAll('.swym-wishlist-card');
          if (countEl) countEl.textContent = '(' + remaining.length + ' items)';
          if (remaining.length === 0 && emptyEl) emptyEl.style.display = 'block';
        }
      );
    });
    actions.appendChild(removeBtn);

    card.appendChild(actions);
    container.appendChild(card);
  });

  container.setAttribute('aria-busy', 'false');
}

Note on Add to Cart quantity: the cart add call uses the current value from qtyDisplay rather than a hardcoded 1, so the quantity the buyer set on the wishlist carries through to the cart.

New `scheduleItemUpdate`

Add this function anywhere in the IIFE, alongside the existing helpers. It debounces writes so rapid +/− taps or keystroke-by-keystroke note edits don't fire one API call per interaction.

// Add to assets/swym-wishlist-page.js alongside the existing helpers

var _updateTimers = {};

function scheduleItemUpdate(swat, lid, product, qty, note) {
  var key = String(product.epi);
  clearTimeout(_updateTimers[key]);
  _updateTimers[key] = setTimeout(function() {
    swat.updateListItem(
      lid,                    // listId — the lid captured from fetchLists
      {
        epi: product.epi,
        empi: product.empi,
        du: product.du,
        qty: qty,
        note: note
      },
      function() {},          // success — UI is already updated optimistically
      function() {}           // error — optionally surface a retry message
    );
  }, 600);
}

Debounce interval: 600 ms works well for both quantity buttons and textarea input. Lower values increase API call volume; higher values make saves feel sluggish.

Liquid addition

Add #swym-add-all-btn to the header row in sections/swym-wishlist-page.liquid, alongside the existing Share button:

<div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;">
  <h1>My Wishlist <span id="swym-wishlist-count"></span></h1>
  <div style="display:flex; gap:8px; flex-wrap:wrap;">
    <button id="swym-add-all-btn" style="display:none;" aria-label="Add all wishlist items to cart">Add All to Cart</button>
    <button id="swym-share-btn" style="display:none;" aria-label="Share wishlist">Share Wishlist</button>
  </div>
</div>

New `setupAddAllButton` and `addAllToCart`

Add both functions to assets/swym-wishlist-page.js alongside the existing helpers.

// Add to assets/swym-wishlist-page.js alongside the existing helpers

function setupAddAllButton(products) {
  var btn = document.getElementById('swym-add-all-btn');
  if (!btn) return;

  var hasInStock = products && products.some(function(p) { return p.stk !== 0; });
  if (!hasInStock) {
    btn.style.display = 'none';
    return;
  }
  btn.style.display = '';

  // Replace node to clear any listener from a previous render pass
  var fresh = btn.cloneNode(true);
  btn.parentNode.replaceChild(fresh, btn);
  fresh.addEventListener('click', function() { addAllToCart(fresh); });
}

function addAllToCart(btn) {
  // Read each card's variant ID and current displayed quantity from the DOM.
  // Using the DOM (rather than the original products array) ensures any
  // quantity changes the buyer made since the page loaded are respected.
  var cards = document.querySelectorAll('#swym-wishlist-grid .swym-wishlist-card[data-epi]');
  var items = [];
  cards.forEach(function(card) {
    var epi = card.dataset.epi;
    var qtyEl = card.querySelector('.swym-wishlist-qty-value');
    var qty = qtyEl ? parseInt(qtyEl.textContent, 10) : 1;
    // Only add in-stock items — out-of-stock cart buttons are disabled,
    // but the card is still present. Check the disabled state to be safe.
    var cartBtn = card.querySelector('button[aria-label^="Add"]');
    if (epi && qty > 0 && cartBtn && !cartBtn.disabled) {
      items.push({ id: Number(epi), quantity: qty });
    }
  });

  if (!items.length) return;

  btn.disabled = true;
  btn.textContent = 'Adding...';
  btn.setAttribute('aria-label', 'Adding all items to cart');

  fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items: items })
  })
  .then(function(response) {
    if (response.ok) {
      btn.textContent = 'Added!';
      btn.setAttribute('aria-label', 'All items added to cart');
      setTimeout(function() {
        btn.textContent = 'Add All to Cart';
        btn.setAttribute('aria-label', 'Add all wishlist items to cart');
        btn.disabled = false;
      }, 2000);
    } else {
      btn.textContent = 'Error';
      btn.setAttribute('aria-label', 'Failed to add items to cart');
      btn.disabled = false;
    }
  })
  .catch(function() {
    btn.textContent = 'Error';
    btn.setAttribute('aria-label', 'Failed to add items to cart');
    btn.disabled = false;
  });
}

Out-of-stock items are skipped. addAllToCart checks whether the per-card "Add to Cart" button is disabled before including an item — so a wishlist with a mix of in-stock and out-of-stock products will only add the in-stock ones, without erroring on the rest.

Styling additions

Add these selectors to assets/swym-wishlist-page.css alongside the existing card styles.

Element	Purpose
`#swym-add-all-btn`	Add All to Cart button — hidden until 1+ in-stock items exist; sits alongside `#swym-share-btn` in the header row; style to match theme primary button
`.swym-wishlist-qty`	Wrapper for `−`, count, `+` — use `display:flex; align-items:center; gap:8px`
`.swym-wishlist-qty-value`	Quantity display — set a fixed `min-width` so the layout doesn't shift between 1 and 10
`.swym-wishlist-note-label`	"Note" label — small, muted; use theme body font
`.swym-wishlist-note`	Textarea — full card width, `resize:vertical`, inherits theme font and border style

As with all card styles, pull border colour, border radius, and font values from your theme's CSS variables rather than hardcoding them.

Product Fields Used (additions)

These fields are added on top of the ones documented in the base guide.

Field	Usage
`qty`	Quantity stored on the wishlist item (defaults to `1` if not set). Read on render, written back via `updateListItem`
`note`	Free-text note stored on the wishlist item. Read on render, written back via `updateListItem`