Name: Build Your Own Shoes Bundle - Volume Discount
Brand: Bundle Factory
Availability: InStock

Build Your Own Shoes Bundle - Volume Discount

0,00 zl

Build Your Own Shoes Bundle - Volume Discount

0,00 zl

Your Selection

Choose Your Shoes

(function () {
  var config = window.BundleFactoryConfig;
  var product = config.product;
  if (!product) return;

/* ── State ── */
  var allProducts = [];
  var selectedSlots = [];
  for (var si = 0; si < maxSlots; si++) selectedSlots.push(null);

/* ── DOM refs ── */
  var root = document.getElementById('bundle-volume-root');
  var slotsEl = document.getElementById('bv-slots');
  var discountBarEl = document.getElementById('bv-discount-bar');
  var productsEl = document.getElementById('bv-products');
  var collectionHeadingEl = document.getElementById('bv-collection-heading');
  var totalEl = document.getElementById('bv-total');
  var errorEl = document.getElementById('bv-error');
  var atcBtn = document.getElementById('bv-atc');

if (!root || !slotsEl || !productsEl || !atcBtn) return;
  if (collectionHeadingEl) collectionHeadingEl.textContent = bundleTitle;

/* ── Helpers ── */
  function getDiscountPercent(count) {
    var pct = 0;
    for (var i = 0; i < discountTiers.length; i++) {
      if (count >= discountTiers[i].min_items) pct = discountTiers[i].percent_off;
    }
    return pct;
  }

function getSelectedCount() {
    return selectedSlots.filter(function (s) { return s !== null; }).length;
  }

function getNextEmptySlotIndex() {
    for (var i = 0; i < selectedSlots.length; i++) {
      if (selectedSlots[i] === null) return i;
    }
    return -1;
  }

function escAttr(str) {
    return String(str || '').replace(/"/g, '&quot;');
  }

/* ── Render: Slots ── */
  function renderSlots() {
    slotsEl.innerHTML = '';
    for (var i = 0; i < maxSlots; i++) {
      var slot = selectedSlots[i];
      var el = document.createElement('div');
      el.className = 'bv-slot ' + (slot ? 'bv-slot--filled' : 'bv-slot--empty');

if (slot) {
        var imgHtml = slot.image
          ? '<img class="bv-slot__img" src="' + escAttr(slot.image) + '" alt="' + escAttr(slot.title) + '">'
          : '<div class="bv-slot__img bv-slot__img--placeholder"></div>';
        var variantHtml =
          slot.variantTitle && slot.variantTitle !== 'Default Title'
            ? '<p class="bv-slot__variant">' + slot.variantTitle + '</p>'
            : '';
        el.innerHTML =
          '<button class="bv-slot__remove" data-index="' + i + '" aria-label="Remove">&times;</button>' +
          imgHtml +
          '<div class="bv-slot__info">' +
            '<p class="bv-slot__title">' + slot.title + '</p>' +
            variantHtml +
            '<p class="bv-slot__price">' + config.formatMoney(parseFloat(slot.price) * 100) + '</p>' +
          '</div>';
      } else {
        el.innerHTML =
          '<div class="bv-slot__empty">' +
            '<div class="bv-slot__number">' + (i + 1) + '</div>' +
            '<p class="bv-slot__empty-label">Add a shoe</p>' +
          '</div>';
      }
      slotsEl.appendChild(el);
    }

slotsEl.querySelectorAll('.bv-slot__remove').forEach(function (btn) {
      btn.addEventListener('click', function (e) {
        var idx = parseInt(e.currentTarget.getAttribute('data-index'));
        selectedSlots[idx] = null;
        updateUI();
      });
    });
  }

/* ── Render: Discount Bar ── */
  function renderDiscountBar() {
    var count = getSelectedCount();
    var currentIdx = -1;
    for (var i = 0; i < discountTiers.length; i++) {
      if (count >= discountTiers[i].min_items) currentIdx = i;
    }
    discountBarEl.innerHTML = discountTiers
      .map(function (tier, idx) {
        var reached = count >= tier.min_items;
        var isCurrent = idx === currentIdx && count > 0;
        var cls = 'bv-tier';
        if (isCurrent) cls += ' bv-tier--current';
        else if (reached) cls += ' bv-tier--reached';
        var discText = tier.percent_off > 0 ? tier.percent_off + '% off' : 'Full price';
        return (
          '<div class="' + cls + '">' +
            '<span class="bv-tier__qty">' + tier.min_items + ' item' + (tier.min_items > 1 ? 's' : '') + '</span>' +
            '<span class="bv-tier__discount">' + discText + '</span>' +
          '</div>'
        );
      })
      .join('');
  }

/* ── Render: Products ── */
  function renderProducts() {
    productsEl.innerHTML = '';
    if (!allProducts.length) {
      productsEl.innerHTML = '<p class="bv-empty">No products found in this collection.</p>';
      return;
    }

var allSlotsFull = getNextEmptySlotIndex() === -1;

allProducts.forEach(function (prod) {
      var variants = prod.variants && prod.variants.nodes ? prod.variants.nodes : [];
      var availableVariants = variants.filter(function (v) { return v.availableForSale; });
      var productAvailable = prod.availableForSale && availableVariants.length > 0;

var card = document.createElement('div');
      card.className = 'bv-card' + (productAvailable ? '' : ' bv-card--soldout');

var imgHtml = prod.featuredImage
        ? '<img class="bv-card__img" src="' + prod.featuredImage.url + '" alt="' + escAttr(prod.featuredImage.altText || prod.title) + '" loading="lazy">'
        : '<div class="bv-card__img-placeholder"></div>';
      var soldoutBadge = !productAvailable
        ? '<div class="bv-card__badge bv-card__badge--soldout">Sold Out</div>'
        : '';

/* Variant selector */
      var variantSelectHtml = '';
      if (variants.length > 1) {
        variantSelectHtml = '<select class="bv-card__variant-select" aria-label="Select option">';
        variants.forEach(function (v) {
          var dis = !v.availableForSale ? ' disabled' : '';
          var label = v.title + (!v.availableForSale ? ' \u2013 Sold Out' : '');
          variantSelectHtml +=
            '<option value="' + v.id + '"' +
            ' data-price="' + v.price.amount + '"' +
            ' data-available="' + v.availableForSale + '"' + dis + '>' +
            label + '</option>';
        });
        variantSelectHtml += '</select>';
      }

var firstVariant = variants[0] || { id: '', title: 'Default Title', price: { amount: '0' }, availableForSale: false };
      var btnDisabled = (!productAvailable || allSlotsFull) ? ' disabled' : '';
      var btnText = !productAvailable ? 'Sold Out' : (allSlotsFull ? 'Slots Full' : 'Add');

card.innerHTML =
        '<div class="bv-card__img-wrap">' + imgHtml + soldoutBadge + '</div>' +
        '<div class="bv-card__body">' +
          '<p class="bv-card__title">' + prod.title + '</p>' +
          variantSelectHtml +
          '<p class="bv-card__price">' +
            config.formatMoney(parseFloat(firstVariant.price.amount) * 100) +
          '</p>' +
        '</div>' +
        '<button class="bv-card__add button"' + btnDisabled +
          ' data-product-title="' + escAttr(prod.title) + '"' +
          ' data-variant-title="' + escAttr(firstVariant.title) + '"' +
          ' data-variant-id="' + firstVariant.id + '"' +
          ' data-price="' + firstVariant.price.amount + '"' +
          ' data-image="' + escAttr(prod.featuredImage ? prod.featuredImage.url : '') + '"' +
        '>' + btnText + '</button>';

/* Variant select → update button data */
      if (variants.length > 1) {
        var selectEl = card.querySelector('.bv-card__variant-select');
        var priceEl = card.querySelector('.bv-card__price');
        var addBtnEl = card.querySelector('.bv-card__add');
        if (selectEl && addBtnEl) {
          selectEl.addEventListener('change', function () {
            var opt = selectEl.options[selectEl.selectedIndex];
            var vId = opt.value;
            var vTitle = opt.textContent.replace(' \u2013 Sold Out', '');
            var vPrice = opt.getAttribute('data-price');
            var vAvail = opt.getAttribute('data-available') === 'true';
            addBtnEl.setAttribute('data-variant-id', vId);
            addBtnEl.setAttribute('data-variant-title', vTitle);
            addBtnEl.setAttribute('data-price', vPrice);
            if (priceEl) priceEl.textContent = config.formatMoney(parseFloat(vPrice) * 100);
            if (!vAvail || getNextEmptySlotIndex() === -1) {
              addBtnEl.disabled = true;
              addBtnEl.textContent = !vAvail ? 'Sold Out' : 'Slots Full';
            } else {
              addBtnEl.disabled = false;
              addBtnEl.textContent = 'Add';
            }
          });
        }
      }

/* Add button → fill next empty slot */
      var addBtn = card.querySelector('.bv-card__add');
      if (addBtn && !addBtn.disabled) {
        addBtn.addEventListener('click', function (e) {
          var btn = e.currentTarget;
          var emptyIdx = getNextEmptySlotIndex();
          if (emptyIdx === -1) return;
          selectedSlots[emptyIdx] = {
            variantId: btn.getAttribute('data-variant-id'),
            title: btn.getAttribute('data-product-title'),
            variantTitle: btn.getAttribute('data-variant-title'),
            price: btn.getAttribute('data-price'),
            image: btn.getAttribute('data-image'),
          };
          updateUI();
        });
      }

productsEl.appendChild(card);
    });
  }

/* ── Update Total & ATC ── */
  function updateTotal() {
    var selected = selectedSlots.filter(function (s) { return s !== null; });
    var count = selected.length;

if (count === 0) {
      totalEl.innerHTML = '';
      atcBtn.disabled = true;
      atcBtn.textContent = 'Select items to continue';
      return;
    }

var discount = getDiscountPercent(count);
    var total = selected.reduce(function (sum, item) {
      return sum + parseFloat(item.price) * (1 - discount / 100);
    }, 0);

var discBadge =
      discount > 0
        ? '<span class="bv-total__badge">' + discount + '% off</span>'
        : '';

totalEl.innerHTML =
      '<span class="bv-total__label">Total (' + count + ' item' + (count > 1 ? 's' : '') + '):</span>' +
      discBadge +
      '<span class="bv-total__amount">' + config.formatMoney(total * 100) + '</span>';

atcBtn.disabled = false;
    atcBtn.textContent = 'Add to Cart';
  }

/* ── Error helpers ── */
  function showError(msg) {
    errorEl.textContent = msg;
    errorEl.style.display = 'block';
  }
  function hideError() {
    errorEl.style.display = 'none';
    errorEl.textContent = '';
  }

/* ── Full UI refresh ── */
  function updateUI() {
    hideError();
    renderSlots();
    renderDiscountBar();
    renderProducts();
    updateTotal();
  }

/* ── Add to Cart ── */
  atcBtn.addEventListener('click', async function () {
    var selected = selectedSlots.filter(function (s) { return s !== null; });
    if (!selected.length) return;

hideError();
    atcBtn.disabled = true;
    atcBtn.textContent = 'Adding\u2026';

/* Availability check */
    for (var i = 0; i < selected.length; i++) {
      var item = selected[i];
      var prodNode = allProducts.find(function (p) {
        return p.variants && p.variants.nodes &&
          p.variants.nodes.some(function (v) { return v.id === item.variantId; });
      });
      if (prodNode) {
        var variantNode = prodNode.variants.nodes.find(function (v) { return v.id === item.variantId; });
        if (variantNode && !variantNode.availableForSale) {
          showError('"' + item.title + '" is no longer available. Please remove it and try again.');
          atcBtn.disabled = false;
          atcBtn.textContent = 'Add to Cart';
          return;
        }
      }
    }

var count = selected.length;
    var discountPct = getDiscountPercent(count);

var components = selected.map(function (item) {
      return {
        merchandiseId: item.variantId,
        quantity: 1,
        pricePerUnit: (parseFloat(item.price) * (1 - discountPct / 100)).toFixed(2),
      };
    });

var payload = {
      id: product.variants[0].id,
      quantity: 1,
      properties: properties,
    };

try {
      var response = await fetch('/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

if (!response.ok) {
        var errData = await response.json().catch(function () { return null; });
        var errMsg =
          (errData && (errData.description || errData.message)) ||
          'Unable to add to cart. Please try again.';
        showError(errMsg);
        atcBtn.disabled = false;
        atcBtn.textContent = 'Add to Cart';
        return;
      }

await config.cartRefresh();

/* Reset selection */
      for (var si = 0; si < maxSlots; si++) selectedSlots[si] = null;
      updateUI();
    } catch (err) {
      showError('Unable to add to cart. Please try again.');
      atcBtn.disabled = false;
      atcBtn.textContent = 'Add to Cart';
    }
  });

/* ── Fetch from Storefront API ── */
  async function fetchProducts() {
    var endpoint = 'https://' + config.shop + '/api/2026-01/graphql.json';
    var query = [
      'query CollectionProducts($handle: String!, $first: Int!) {',
      '  collection(handle: $handle) {',
      '    products(first: $first) {',
      '      nodes {',
      '        id title availableForSale',
      '        featuredImage { url altText }',
      '        variants(first: 10) {',
      '          nodes {',
      '            id title availableForSale',
      '            price { amount currencyCode }',
      '          }',
      '        }',
      '      }',
      '    }',
      '  }',
      '}',
    ].join('\n');

var res = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': config.storefrontAccessToken,
      },
      body: JSON.stringify({
        query: query,
        variables: { handle: collectionHandle, first: 50 },
      }),
    });

var json = await res.json();
    return (
      json.data &&
      json.data.collection &&
      json.data.collection.products &&
      json.data.collection.products.nodes
    ) || [];
  }

/* ── Init ── */
  async function init() {
    productsEl.innerHTML = '<div class="bv-loading">Loading products\u2026</div>';
    renderSlots();
    renderDiscountBar();
    updateTotal();
    try {
      allProducts = await fetchProducts();
      renderProducts();
    } catch (e) {
      productsEl.innerHTML = '<p class="bv-error-text">Failed to load products. Please refresh the page.</p>';
    }
  }

init();
})();