{"product_id":"bubble-week-mini-make","title":"Bubble Week Mini Make","description":"\u003cp\u003e✔ Pick a project \u0026amp; settle in\u003cbr\u003e✔ Easy, small demo, printed instructions at your table\u003cbr\u003e✔ Instructors nearby to answer questions\u003cbr\u003e✔ Good for friend hangs, dates \u0026amp; family outings\u003c\/p\u003e\n\u003ch3 data-start=\"156\" data-end=\"243\"\u003e\n\u003cstrong\u003eThis week is Bubble Week 🧋🫧\u003c\/strong\u003e\u003cstrong\u003e🧋🫧\u003c\/strong\u003e\n\u003c\/h3\u003e\n\u003cp data-start=\"156\" data-end=\"243\"\u003eChoose between Bubble Letter Polymer Clay (up to 2 letters; $5 per additional letter) or Bubble Tea Polymer Clay (make up to 2).\u003c\/p\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003cdiv id=\"mm-root\"\u003e\u003c\/div\u003e\n\n\u003cscript\u003e\n  \/\/ ┌─────────────────────────────────────────────────┐\n  \/\/ │  EDIT THESE TWO LINES FOR EACH WEEK'S PAGE      │\n  const DATE_FROM = '2026-08-24'  \/\/ First day of the week\n  const DATE_TO   = '2026-08-30'  \/\/ Last day of the week\n  \/\/ └─────────────────────────────────────────────────┘\n\u003c\/script\u003e\n\n\u003cstyle\u003e\n  #mm-root {\n    font-family: 'Work Sans', sans-serif;\n    max-width: 720px;\n    margin: 0 auto;\n    padding: 8px 0 40px;\n    color: #1a1a1a;\n  }\n  .mm-step-label {\n    font-family: 'Work Sans', sans-serif;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    color: #999;\n    margin-bottom: 10px;\n  }\n  .mm-provinces {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    margin-bottom: 28px;\n  }\n  .mm-prov-chip {\n    font-family: 'Work Sans', sans-serif;\n    font-size: 13px;\n    padding: 8px 20px;\n    border: 1.5px solid #ddd;\n    border-radius: 100px;\n    cursor: pointer;\n    background: #fff;\n    color: #444;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n  }\n  .mm-prov-chip:hover {\n    border-color: #1a1a1a !important;\n    color: #1a1a1a !important;\n  }\n  .mm-prov-chip.selected {\n    background: #1a1a1a !important;\n    border-color: #1a1a1a !important;\n    color: #fff !important;\n    font-weight: 600 !important;\n  }\n  .mm-studio-wrap { margin-bottom: 28px; }\n  .mm-studio-select {\n    font-family: 'Work Sans', sans-serif;\n    font-size: 14px;\n    width: 100%;\n    max-width: 400px;\n    padding: 10px 14px;\n    border: 1.5px solid #ddd;\n    border-radius: 8px;\n    background: #fff;\n    color: #1a1a1a;\n    appearance: none;\n    -webkit-appearance: none;\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'\/%3E%3C\/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 14px center;\n    cursor: pointer;\n    transition: border-color 0.15s;\n  }\n  .mm-studio-select:focus {\n    outline: none;\n    border-color: #1a1a1a;\n  }\n  .mm-dates {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    margin-bottom: 28px;\n  }\n  .mm-date-chip {\n    font-family: 'Work Sans', sans-serif;\n    font-size: 13px;\n    padding: 8px 16px;\n    border: 1.5px solid #ddd;\n    border-radius: 100px;\n    cursor: pointer;\n    background: #fff;\n    color: #444;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n  }\n  .mm-date-chip:hover {\n    border-color: #1a1a1a !important;\n    color: #1a1a1a !important;\n  }\n  .mm-date-chip.selected {\n    background: #1a1a1a !important;\n    border-color: #1a1a1a !important;\n    color: #fff !important;\n    font-weight: 600 !important;\n  }\n  .mm-slots {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n    gap: 12px;\n    margin-bottom: 12px;\n  }\n  .mm-slot {\n    font-family: 'Work Sans', sans-serif;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 16px 10px 14px;\n    border: 1.5px solid #e0e0e0;\n    border-radius: 10px;\n    background: #fff;\n    gap: 10px;\n  }\n  .mm-slot.sold-out { opacity: 0.5; }\n  .mm-slot-time {\n    font-size: 18px;\n    font-weight: 700;\n    color: #1a1a1a;\n  }\n  .mm-slot.sold-out .mm-slot-time { color: #bbb; }\n  .mm-slot-sold-label {\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    padding: 3px 10px;\n    border-radius: 100px;\n    background: #f0f0f0;\n    color: #aaa;\n  }\n  .mm-qty {\n    display: flex;\n    align-items: center;\n    border: 1.5px solid #ddd;\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  .mm-qty-btn {\n    width: 34px;\n    height: 34px;\n    background: #f7f7f7;\n    border: none;\n    font-size: 18px;\n    cursor: pointer;\n    color: #444;\n    transition: background 0.1s;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .mm-qty-btn:hover { background: #eee; }\n  .mm-qty-btn:disabled { color: #ccc; cursor: default; }\n  .mm-qty-val {\n    width: 34px;\n    text-align: center;\n    font-size: 14px;\n    font-weight: 700;\n    color: #1a1a1a;\n    border-left: 1px solid #ddd;\n    border-right: 1px solid #ddd;\n    line-height: 34px;\n    flex-shrink: 0;\n  }\n  #mm-root .mm-register-btn {\n    font-family: 'Work Sans', sans-serif !important;\n    font-size: 12px !important;\n    font-weight: 700 !important;\n    letter-spacing: 0.08em !important;\n    text-transform: uppercase !important;\n    padding: 8px 18px !important;\n    background: #1a1a1a !important;\n    color: #fff !important;\n    border: none !important;\n    border-radius: 6px !important;\n    cursor: pointer !important;\n    text-decoration: none !important;\n    transition: background 0.15s !important;\n    display: inline-block !important;\n    width: 100% !important;\n    text-align: center !important;\n    box-sizing: border-box !important;\n  }\n  #mm-root .mm-register-btn:hover { background: #333 !important; }\n  .mm-loading, .mm-empty, .mm-prompt {\n    font-family: 'Work Sans', sans-serif;\n    font-size: 14px;\n    color: #999;\n    padding: 20px 0;\n    text-align: center;\n  }\n  .mm-spinner {\n    display: inline-block;\n    width: 18px;\n    height: 18px;\n    border: 2px solid #eee;\n    border-top-color: #555;\n    border-radius: 50%;\n    animation: mm-spin 0.7s linear infinite;\n    vertical-align: middle;\n    margin-right: 8px;\n  }\n  @keyframes mm-spin { to { transform: rotate(360deg); } }\n  .mm-section { margin-bottom: 28px; }\n  .mm-divider {\n    border: none;\n    border-top: 1px solid #f0f0f0;\n    margin: 0 0 28px;\n  }\n  .mm-spaces-left {\n    font-family: 'Work Sans', sans-serif;\n    font-size: 11px;\n    font-weight: 600;\n    color: #c0392b;\n    letter-spacing: 0.04em;\n  }\n  .mm-slot.mm-preselected {\n    border-color: #c3090c !important;\n    box-shadow: 0 0 0 2px rgba(195,9,12,0.15) !important;\n  }\n\u003c\/style\u003e\n\n\u003cscript\u003e\n(function () {\n  const EDGE_URL = 'https:\/\/snxibhbhhchjthfmjtaj.supabase.co\/functions\/v1\/public-minimake'\n\n  const PROVINCES = [\n    { label: 'British Columbia', prefix: 'BC' },\n    { label: 'Alberta',          prefix: 'AB' },\n    { label: 'Ontario',          prefix: 'ON' },\n  ]\n\n  const root = document.getElementById('mm-root')\n\n  let allDates = []\n  let studioList = []\n  let selectedProvince = null\n  let selectedStudio = null\n  let selectedDate = null\n  let preselectTime = null\n  let scrolledToPreselect = false\n  const slotQty = {}\n\n  function formatTimeFromHHMM(t) {\n    var parts = t.split(':')\n    var h = parseInt(parts[0], 10), m = parseInt(parts[1], 10)\n    var ampm = h \u003e= 12 ? 'pm' : 'am'\n    var h12 = h % 12 || 12\n    return h12 + (m \u003e 0 ? ':' + (m \u003c 10 ? '0' + m : m) : '') + ampm\n  }\n\n  function applyUrlParams() {\n    try {\n      var search = window.parent.location.search || window.location.search\n      var params = new URLSearchParams(search)\n      var t = params.get('time')\n      if (t) preselectTime = t\n      var sid = params.get('studio')\n      var dt = params.get('date')\n      if (!sid) return\n      sid = sid.toUpperCase()\n      var match = studioList.some(function(s) { return s.studio_id === sid })\n      if (!match) return\n      selectedProvince = sid.indexOf('BC') === 0 ? 'BC' : sid.indexOf('AB') === 0 ? 'AB' : sid.indexOf('ON') === 0 ? 'ON' : null\n      selectedStudio = sid\n      if (dt) {\n        var avail = datesForStudio(sid)\n        if (avail.some(function(d) { return d.date === dt })) selectedDate = dt\n      }\n    } catch (e) {}\n  }\n\n  const fetchUrl = EDGE_URL + '?date_from=' + DATE_FROM + '\u0026date_to=' + DATE_TO\n\n  root.innerHTML = '\u003cdiv class=\"mm-loading\"\u003e\u003cspan class=\"mm-spinner\"\u003e\u003c\/span\u003eLoading available sessions\\u2026\u003c\/div\u003e'\n\n  fetch(fetchUrl)\n    .then(function(r) { return r.json() })\n    .then(function(data) {\n      allDates = data.dates || []\n      \/\/ Filter out past dates client-side\n      var todayStr = new Date().toLocaleDateString('en-CA', { timeZone: 'America\/Toronto' })\n      allDates = allDates.filter(function(d) { return d.date \u003e= todayStr })\n      if (!allDates.length) {\n        root.innerHTML = '\u003cdiv class=\"mm-empty\"\u003eNo Mini Make sessions are scheduled for this week. Check back soon!\u003c\/div\u003e'\n        return\n      }\n      var studioMap = {}\n      for (var i = 0; i \u003c allDates.length; i++) {\n        for (var j = 0; j \u003c allDates[i].studios.length; j++) {\n          var s = allDates[i].studios[j]\n          if (!studioMap[s.studio_id]) studioMap[s.studio_id] = s.studio_name\n        }\n      }\n      studioList = Object.keys(studioMap).map(function(id) {\n        return { studio_id: id, studio_name: studioMap[id] }\n      }).sort(function(a, b) { return a.studio_name.localeCompare(b.studio_name) })\n\n      var activeProvs = PROVINCES.filter(function(p) {\n        return studioList.some(function(s) { return s.studio_id.indexOf(p.prefix) === 0 })\n      })\n      if (activeProvs.length === 1) selectedProvince = activeProvs[0].prefix\n\n      applyUrlParams()\n\n      render()\n    })\n    .catch(function() {\n      root.innerHTML = '\u003cdiv class=\"mm-empty\"\u003eCouldn\\'t load sessions right now \\u2014 please refresh the page.\u003c\/div\u003e'\n    })\n\n  function render() {\n    root.innerHTML = ''\n    renderProvincePicker()\n\n    \/\/ Auto-select studio if only one exists for the selected province\n    if (selectedProvince \u0026\u0026 !selectedStudio) {\n      var provinceStudios = studioList.filter(function(s) {\n        return s.studio_id.indexOf(selectedProvince) === 0\n      })\n      if (provinceStudios.length === 1) {\n        selectedStudio = provinceStudios[0].studio_id\n      }\n    }\n\n    renderStudioPicker()\n\n    if (selectedStudio \u0026\u0026 datesForStudio(selectedStudio).length === 0) {\n      var noneMsg = document.createElement('div')\n      noneMsg.className = 'mm-empty'\n      noneMsg.textContent = 'No available Mini Make sessions for this studio right now \\u2014 please check another studio.'\n      root.appendChild(noneMsg)\n      return\n    }\n\n    \/\/ Auto-select date if only one is available for the selected studio\n    if (selectedStudio \u0026\u0026 !selectedDate) {\n      var availableDates = datesForStudio(selectedStudio)\n      if (availableDates.length === 1) {\n        selectedDate = availableDates[0].date\n      }\n    }\n\n    renderDatePicker()\n    renderSlots()\n  }\n\n  function activeProvinceCount() {\n    return PROVINCES.filter(function(p) {\n      return studioList.some(function(s) { return s.studio_id.indexOf(p.prefix) === 0 })\n    }).length\n  }\n\n  function hasAvailableSlot(studioObj) {\n    return studioObj.slots.some(function(slot) {\n      return !(slot.spaces_left !== null \u0026\u0026 slot.spaces_left === 0)\n    })\n  }\n\n  function datesForStudio(studioId) {\n    return allDates.filter(function(d) {\n      return d.studios.some(function(s) {\n        return s.studio_id === studioId \u0026\u0026 hasAvailableSlot(s)\n      })\n    }).map(function(d) { return { date: d.date, label: d.label } })\n  }\n\n  function makeHr() {\n    var hr = document.createElement('hr')\n    hr.className = 'mm-divider'\n    return hr\n  }\n\n  function renderProvincePicker() {\n    var activeProvs = PROVINCES.filter(function(p) {\n      return studioList.some(function(s) { return s.studio_id.indexOf(p.prefix) === 0 })\n    })\n    if (activeProvs.length \u003c= 1) return\n\n    var wrap = document.createElement('div')\n    wrap.className = 'mm-section'\n    var label = document.createElement('div')\n    label.className = 'mm-step-label'\n    label.textContent = 'Step 1 \\u2014 Choose your province'\n    wrap.appendChild(label)\n\n    var chips = document.createElement('div')\n    chips.className = 'mm-provinces'\n\n    activeProvs.forEach(function(p) {\n      var chip = document.createElement('button')\n      chip.className = 'mm-prov-chip' + (selectedProvince === p.prefix ? ' selected' : '')\n      chip.textContent = p.label\n      chip.addEventListener('click', function() {\n        selectedProvince = p.prefix\n        selectedStudio = null\n        selectedDate = null\n        render()\n      })\n      chips.appendChild(chip)\n    })\n\n    wrap.appendChild(chips)\n    root.appendChild(wrap)\n    root.appendChild(makeHr())\n  }\n\n  function renderStudioPicker() {\n    if (!selectedProvince) return\n    var provinceStudios = studioList.filter(function(s) {\n      return s.studio_id.indexOf(selectedProvince) === 0\n    })\n    if (!provinceStudios.length) return\n\n    var stepNum = activeProvinceCount() \u003e 1 ? 2 : 1\n    var wrap = document.createElement('div')\n    wrap.className = 'mm-section mm-studio-wrap'\n    var label = document.createElement('div')\n    label.className = 'mm-step-label'\n    label.textContent = 'Step ' + stepNum + ' \\u2014 Choose your studio'\n    wrap.appendChild(label)\n\n    var select = document.createElement('select')\n    select.className = 'mm-studio-select'\n\n    var placeholder = document.createElement('option')\n    placeholder.value = ''\n    placeholder.textContent = '\\u2014 Select a studio \\u2014'\n    placeholder.disabled = true\n    placeholder.selected = !selectedStudio\n    select.appendChild(placeholder)\n\n    provinceStudios.forEach(function(studio) {\n      var opt = document.createElement('option')\n      opt.value = studio.studio_id\n      opt.textContent = studio.studio_name\n      opt.selected = selectedStudio === studio.studio_id\n      select.appendChild(opt)\n    })\n\n    select.addEventListener('change', function() {\n      selectedStudio = select.value || null\n      selectedDate = null\n      var available = datesForStudio(selectedStudio)\n      if (available.length === 1) selectedDate = available[0].date\n      render()\n    })\n\n    wrap.appendChild(select)\n    root.appendChild(wrap)\n    root.appendChild(makeHr())\n  }\n\n  function renderDatePicker() {\n    if (!selectedStudio) return\n    var available = datesForStudio(selectedStudio)\n    if (!available.length || available.length === 1) return\n\n    var stepNum = activeProvinceCount() \u003e 1 ? 3 : 2\n    var wrap = document.createElement('div')\n    wrap.className = 'mm-section'\n    var label = document.createElement('div')\n    label.className = 'mm-step-label'\n    label.textContent = 'Step ' + stepNum + ' \\u2014 Choose a date'\n    wrap.appendChild(label)\n\n    var chips = document.createElement('div')\n    chips.className = 'mm-dates'\n\n    available.forEach(function(d) {\n      var chip = document.createElement('button')\n      chip.className = 'mm-date-chip' + (selectedDate === d.date ? ' selected' : '')\n      chip.textContent = d.label\n      chip.addEventListener('click', function() {\n        selectedDate = d.date\n        render()\n      })\n      chips.appendChild(chip)\n    })\n\n    wrap.appendChild(chips)\n    root.appendChild(wrap)\n    root.appendChild(makeHr())\n  }\n\n  function renderSlots() {\n    if (!selectedStudio || !selectedDate) {\n      if (selectedStudio \u0026\u0026 !selectedDate) {\n        var p = document.createElement('div')\n        p.className = 'mm-prompt'\n        p.textContent = 'Choose a date above to see available times.'\n        root.appendChild(p)\n      }\n      return\n    }\n\n    var dateObj = null\n    for (var i = 0; i \u003c allDates.length; i++) {\n      if (allDates[i].date === selectedDate) { dateObj = allDates[i]; break }\n    }\n    var studioObj = null\n    if (dateObj) {\n      for (var j = 0; j \u003c dateObj.studios.length; j++) {\n        if (dateObj.studios[j].studio_id === selectedStudio) { studioObj = dateObj.studios[j]; break }\n      }\n    }\n    if (!studioObj) return\n\n    var totalSteps = activeProvinceCount() \u003e 1 ? 4 : 3\n    var wrap = document.createElement('div')\n    wrap.className = 'mm-section'\n    var label = document.createElement('div')\n    label.className = 'mm-step-label'\n    label.textContent = 'Step ' + totalSteps + ' \\u2014 Pick a time'\n    wrap.appendChild(label)\n\n    var dateChip = document.createElement('div')\n    dateChip.className = 'mm-date-chip selected'\n    dateChip.style.display = 'inline-block'\n    dateChip.style.marginBottom = '16px'\n    dateChip.style.cursor = 'default'\n    dateChip.textContent = dateObj.label\n    wrap.appendChild(dateChip)\n\n    var grid = document.createElement('div')\n    grid.className = 'mm-slots'\n    var preselectedCard = null\n\n    studioObj.slots.forEach(function(slot) {\n      var isSoldOut = slot.spaces_left !== null \u0026\u0026 slot.spaces_left === 0\n      if (isSoldOut) return\n\n      var isPreselected = preselectTime \u0026\u0026 slot.time === formatTimeFromHHMM(preselectTime)\n      var card = document.createElement('div')\n      card.className = 'mm-slot' + (isPreselected ? ' mm-preselected' : '')\n      if (isPreselected) preselectedCard = card\n\n      var timeEl = document.createElement('span')\n      timeEl.className = 'mm-slot-time'\n      timeEl.textContent = slot.time\n      card.appendChild(timeEl)\n\n      var key = slot.register_url\n      if (!slotQty[key]) slotQty[key] = 1\n\n      var qty = document.createElement('div')\n      qty.className = 'mm-qty'\n\n      var minus = document.createElement('button')\n      minus.className = 'mm-qty-btn'\n      minus.textContent = '\\u2212'\n      minus.disabled = slotQty[key] \u003c= 1;\n      (function(k) {\n        minus.addEventListener('click', function() {\n          if (slotQty[k] \u003e 1) { slotQty[k]--; render() }\n        })\n      })(key)\n\n      var val = document.createElement('div')\n      val.className = 'mm-qty-val'\n      val.textContent = slotQty[key]\n\n      var plus = document.createElement('button')\n      plus.className = 'mm-qty-btn'\n      plus.textContent = '+'\n      plus.disabled = slot.spaces_left !== null \u0026\u0026 slotQty[key] \u003e= slot.spaces_left;\n      (function(k) {\n        plus.addEventListener('click', function() { slotQty[k]++; render() })\n      })(key)\n\n      qty.appendChild(minus)\n      qty.appendChild(val)\n      qty.appendChild(plus)\n      card.appendChild(qty)\n\n      if (slot.spaces_left !== null \u0026\u0026 slot.spaces_left \u003c= 5) {\n        var warning = document.createElement('div')\n        warning.className = 'mm-spaces-left'\n        warning.textContent = slot.spaces_left + (slot.spaces_left === 1 ? ' space left' : ' spaces left')\n        card.appendChild(warning)\n      }\n\n      var btn = document.createElement('a')\n      btn.className = 'mm-register-btn'\n      btn.href = slot.register_url.replace('QTY', slotQty[key])\n      btn.textContent = 'Register'\n      card.appendChild(btn)\n\n      grid.appendChild(card)\n    })\n\n    if (!grid.hasChildNodes()) {\n      var mmEmptyMsg = document.createElement('div')\n      mmEmptyMsg.className = 'mm-empty'\n      mmEmptyMsg.textContent = 'All sessions for this date are sold out \\u2014 please choose another date.'\n      wrap.appendChild(mmEmptyMsg)\n    } else {\n      wrap.appendChild(grid)\n    }\n    root.appendChild(wrap)\n\n    if (preselectedCard \u0026\u0026 !scrolledToPreselect) {\n      scrolledToPreselect = true\n      setTimeout(function () {\n        preselectedCard.scrollIntoView({ behavior: 'smooth', block: 'center' })\n      }, 150)\n    }\n  }\n\n})()\n\u003c\/script\u003e","brand":"4CATS","offers":[{"title":"Default Title","offer_id":43666526208090,"sku":null,"price":15.0,"currency_code":"CAD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1451\/3756\/files\/bubble_tea_01_1080x1080_4dacb37d-9ef1-4b8f-8c0b-669eeafe5420.jpg?v=1774650497","url":"https:\/\/4cats.com\/products\/bubble-week-mini-make","provider":"4Cats","version":"1.0","type":"link"}