{ "version": 3, "sources": ["/cdn/shop/t/196/assets/jsc-script-watch-finder-drawer.js?cb=1783702931318"], "sourcesContent": ["var jsonDataUrl = $('.jsc-watch-finder').attr('sheety-api'); \n\n// Delugs: fire-and-forget logging of finder selections to sf.delugs.com.\n// Never blocks or breaks the finder. v2: persistent device id (localStorage,\n// so anonymous history can be stitched to a customer when they log in) +\n// anonymous watch selections mirrored to Klaviyo onsite (merges into the\n// profile retroactively if the visitor ever identifies).\nfunction sfLogSelection(eventType, brand, collection, reference, extra){\n try {\n if (brand == null) brand = localStorage.getItem('brand') || '';\n if (collection == null) collection = localStorage.getItem('model') || '';\n if (eventType === 'reference_selected') {\n if (sfLogSelection._last === reference) return; // skip consecutive dupes\n sfLogSelection._last = reference;\n }\n var sid = '';\n try { sid = localStorage.getItem('sf_sid') || sessionStorage.getItem('sf_sid') || ''; } catch (e0) {}\n if (!sid) { sid = 's' + Math.random().toString(36).slice(2) + Date.now().toString(36); }\n try { localStorage.setItem('sf_sid', sid); } catch (e1) {}\n var cid = $('jsc-watch-finder').attr('customer-id') || '';\n var payloadObj = {\n eventType: eventType, brand: brand || '', collection: collection || '', reference: reference || '',\n customerId: cid,\n sessionId: sid,\n pageType: $('jsc-watch-finder--drop-down').attr('sfPageType') || '',\n referrer: window.location.pathname\n };\n if (extra) { for (var xk in extra) { payloadObj[xk] = extra[xk]; } }\n var payload = JSON.stringify(payloadObj);\n var sfSelUrl = 'https://sf.delugs.com/api/selections';\n if (navigator.sendBeacon) { navigator.sendBeacon(sfSelUrl, new Blob([payload], { type: 'text/plain;charset=UTF-8' })); }\n else if (window.fetch) { fetch(sfSelUrl, { method: 'POST', headers: { 'Content-Type': 'text/plain;charset=UTF-8' }, body: payload, keepalive: true }).catch(function(){}); }\n // Logged-in events are mirrored to Klaviyo server-side; anonymous ones go\n // via the onsite object so Klaviyo can merge them on later identify.\n if (eventType === 'reference_selected' && !cid && window.klaviyo) {\n try { window.klaviyo.push(['track', 'Strap Finder Watch Selected', { Brand: brand || '', Collection: collection || '', Reference: reference || '', Source: 'strap-finder-anonymous' }]); } catch (e2) {}\n }\n } catch (err) {}\n}\n\nvar blankLi = `
  • `;\nlet cachedWatchDb = null;\n\n// Helper function to safely parse JSON from HTML attribute, handling special characters\nconst safeParseJSON = (jsonString, defaultValue = []) => {\n if (!jsonString) {\n return defaultValue;\n }\n try {\n // Decode HTML entities (like " back to \")\n let decodedData = $('
    ').html(jsonString).text();\n \n // Trim whitespace\n decodedData = decodedData.trim();\n \n // Parse the JSON\n const parsed = JSON.parse(decodedData);\n return Array.isArray(parsed) ? parsed : (parsed ? [parsed] : defaultValue);\n } catch (e) {\n console.error('\u274C Error parsing JSON:', e.message);\n console.error('Raw data length:', jsonString ? jsonString.length : 0);\n // Return empty array on error to prevent breaking the page\n return defaultValue;\n }\n};\n\n// \u2500\u2500 Delugs split-API data layer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// The drawer no longer downloads the full catalog. On load it fetches a tiny\n// index (brands + per-brand version stamps); a brand's watches load on demand\n// and merge into cachedWatchDb, so every existing filter-by-brand function\n// keeps working unchanged. Brand payload URLs carry ?v= so the CDN can cache\n// them hard while edits still propagate within the index's 60s window.\nlet sfIndex = null;\nlet sfBrandCache = {};\nvar sfApiBase = (function(){\n try { var m = String(jsonDataUrl||'').match(/^(https?:\\/\\/[^\\/]+)/); if (m) return m[1]; } catch(e) {}\n return 'https://sf.delugs.com';\n})();\nfunction sfRebuildDb(){\n var all = [];\n for (var k in sfBrandCache) { if (sfBrandCache.hasOwnProperty(k)) all = all.concat(sfBrandCache[k]); }\n cachedWatchDb = all;\n}\nfunction sfBrandMeta(name){\n if (!sfIndex || !sfIndex.brands) return null;\n var n = String(name||'').toLowerCase();\n var ns = n.replace(/\\s+/g,'');\n for (var i = 0; i < sfIndex.brands.length; i++) {\n var b = sfIndex.brands[i];\n var bn = b.name.toLowerCase();\n if (bn === n || bn.replace(/\\s+/g,'') === ns) return b;\n }\n return null;\n}\nfunction sfBrandLoaded(name){\n var meta = sfBrandMeta(name);\n return !!(meta && sfBrandCache[meta.name]);\n}\nfunction sfLoadBrand(brand){\n var meta = sfBrandMeta(brand);\n var name = meta ? meta.name : String(brand||'');\n if (!name) return $.Deferred().resolve([]).promise();\n if (sfBrandCache[name]) return $.Deferred().resolve(sfBrandCache[name]).promise();\n if (sfLoadBrand._inflight && sfLoadBrand._inflight[name]) return sfLoadBrand._inflight[name];\n var v = meta ? meta.v : 'x';\n var p = $.getJSON(sfApiBase + '/api/strap-finder/brand/' + encodeURIComponent(name) + '?v=' + encodeURIComponent(v))\n .then(function(d){\n sfBrandCache[name] = (d && d.sheet1) || [];\n sfRebuildDb();\n return sfBrandCache[name];\n });\n sfLoadBrand._inflight = sfLoadBrand._inflight || {};\n sfLoadBrand._inflight[name] = p;\n p.always(function(){ delete sfLoadBrand._inflight[name]; });\n return p;\n}\nconst fetchWatchDb = () => {\n return $.getJSON(sfApiBase + '/api/strap-finder/index').then((idx) => {\n sfIndex = idx;\n cachedWatchDb = [];\n return cachedWatchDb;\n });\n};\n\n\n// ====== Recently Viewed Watches ======\nfunction saveRecentWatch(brand, collection, reference, watchImage, url) {\n if (!reference) return;\n try {\n var recent = JSON.parse(localStorage.getItem('sf_recent_watches') || '[]');\n // Remove if already exists\n recent = recent.filter(function(w) { return w.reference !== reference; });\n // Add to front\n recent.unshift({ brand: brand, collection: collection, reference: reference, image: watchImage, url: url || '', ts: Date.now() });\n // Keep max 5\n recent = recent.slice(0, 5);\n localStorage.setItem('sf_recent_watches', JSON.stringify(recent));\n } catch(e) {}\n}\n\nfunction renderRecentWatches() {\n try {\n var recent = JSON.parse(localStorage.getItem('sf_recent_watches') || '[]');\n if (!recent.length || !cachedWatchDb) return;\n var $container = $('jsc-watch-finder-content');\n var existing = $('#sf-recent-watches');\n if (existing.length) existing.remove();\n\n var html = '

    Recently Viewed

    ';\n recent.slice(0, 3).forEach(function(w, i) {\n html += '
    ';\n if (w.image) html += '';\n html += '
    ' + w.brand + ' ' + w.collection + '
    ' + w.reference + '
    ';\n });\n html += '
    ';\n $container.prepend(html);\n } catch(e) {}\n}\n\nfunction quickSelectWatch(index) {\n try {\n var recent = JSON.parse(localStorage.getItem('sf_recent_watches') || '[]');\n var w = recent[index];\n if (!w) return;\n setLocalStorage('brand', w.brand);\n setLocalStorage('model', w.collection);\n setLocalStorage('reference', w.reference);\n var dest = w.url || resolveRecentWatchUrl(w);\n if (dest) { window.location.href = dest; } else { location.reload(); }\n } catch(e) { location.reload(); }\n}\n\n// Fallback for legacy recent-watch entries saved before the destination URL\n// was stored: look up the watch's dedicated landing page from the loaded DB.\nfunction resolveRecentWatchUrl(w) {\n try {\n if (!w || !cachedWatchDb || !Array.isArray(cachedWatchDb)) return '';\n var wref = String(w.reference || '').replace(/\\s+/g, '');\n var matches = cachedWatchDb.filter(function(item) {\n return item.status === 1 &&\n String(item.brand).trim() === String(w.brand).trim() &&\n String(item.collection).trim() === String(w.collection).trim();\n });\n var chosen = matches.filter(function(item) {\n return String(item.reference || '').replace(/\\s+/g, '') === wref;\n })[0] || matches[0];\n if (chosen && chosen.modelLandingPage && (chosen.modelLandingPage.indexOf('/pages') !== -1 || chosen.modelLandingPage.indexOf('/products') !== -1)) {\n return chosen.modelLandingPage;\n }\n } catch(e) {}\n return '';\n}\n\nfunction clearRecentWatches() {\n localStorage.removeItem('sf_recent_watches');\n $('#sf-recent-watches').remove();\n}\n\n$(function () {\n fetchWatchDb().then(() => {\n onLoadFunctionInit();\n initSmartSearch();\n renderRecentWatches();\n }); \n // onLoadOpenDrawer();\n \n // Check if user just logged in and migrate session storage\n const customerId = $('jsc-watch-finder').attr('customer-id');\n\n if (customerId) {\n // Check if this is a fresh login (session storage exists but metafields might not be ready)\n const hasSessionWatches = sessionStorage.getItem('sf_session_watches');\n console.log('\uD83D\uDD0D Session watches check:', hasSessionWatches);\n if (hasSessionWatches) {\n // Add a delay before migration to allow Shopify to update metafields\n console.log('\uD83D\uDD0D Fresh login detected, delaying migration by 3 seconds...');\n setTimeout(() => {\n console.log('\uD83D\uDD0D Starting migration after delay...');\n migrateSessionStorageToMetafields();\n }, 3000); // 3 second delay\n } else {\n console.log('\uD83D\uDD0D No session watches, running migration immediately...');\n migrateSessionStorageToMetafields();\n \n // Also update watch collection for normal login\n updateLoggedInWatchCollection();\n }\n } else {\n console.log('\uD83D\uDD0D No customer ID, initializing session storage display...');\n // For non-logged-in users, initialize session storage display\n updateSessionStorageWatchCollection();\n \n // Update icons in Strap Finder tab\n updateStrapFinderTabIcons();\n }\n});\n\nsfDrawerChangeTab= (type) => {\n $('#Watch-Finder--Drawer').find('.sf-drawer-tab').removeClass('active');\n $('#Watch-Finder--Drawer').find('.side-panel-content').removeClass('active');\n\n if (type === 'sf') {\n $('#Watch-Finder--Drawer').find('.sf-drawer-tab[data-type=\"' + type + '\"]').addClass('active'); \n $('#Watch-Finder--Drawer').find('.side-panel-content.sf-panel-content-strap-finder').addClass('active');\n }else{\n $('#Watch-Finder--Drawer').find('.sf-drawer-tab[data-type=\"' + type + '\"]').addClass('active'); \n $('#Watch-Finder--Drawer').find('.side-panel-content.sf-panel-content-saved-watch').addClass('active');\n }\n}\n// onLoadOpenDrawer = () => {\n// const hash = window.location.hash;\n// if (hash.startsWith('#product-card-')) {\n\n// // Scroll to the element with that ID after drawer opens\n// setTimeout(function () {\n// openWfDrawer();\n// const targetId = hash.substring(1); // remove '#'\n// const $targetElement = $('#' + targetId); // jQuery selector\n \n// if ($targetElement.length) {\n// // Scroll to product card\n// const drawerContent = document.querySelector('#Watch-Finder--Drawer'); // Update selector if needed\n// const targetOffsetTop = $targetElement.offset().top;\n \n// // Scroll the drawer content manually with offset (e.g., -23px)\n// $(drawerContent).animate({\n// scrollTop: targetOffsetTop - 55 // adjust for padding/header\n// }, 500); // duration in ms\n// // save watch if not already saved\n// const $saveBtn = $targetElement.find('.jsc-sf-product-card-save-watch');\n// if (!$saveBtn.hasClass('sf-filled')) {\n// $saveBtn.find('.sf-save-watch-button').click();\n// }\n// }\n// }, 1500);\n \n \n// }\n// }\n\nopenWfDrawer = (sfPageType) =>{\n $('#Watch-Finder--Drawer').addClass('active');\n $('body').addClass('open-cc');\n\n onLoadSetLocalStorage();\n var getBrandLocalStorage = localStorage.getItem('brand'); \n var getModelLocalStorage = localStorage.getItem('model');\n\n if (sfPageType == 'brand' || sfPageType == 'model'){\n $('jsc-watch-finder--drop-down').attr('sfPageType',sfPageType);\n $('#jsc-brand button input').attr('disabled',true);\n $('#jsc-brand button span').removeAttr('onclick');\n $('.jsc-watch-finder--clear').hide();\n }else{\n $('jsc-watch-finder--drop-down').attr('sfPageType',sfPageType);\n $('#jsc-brand button input').attr('disabled',false);\n $('#jsc-brand button span').attr('onclick','toggleBrandDropdown()');\n $('.jsc-watch-finder--clear').show();\n }\n\n setTimeout(function () {\n loadBrandOption(getBrandLocalStorage);\n }, 1000);\n var brandValue = getBrandLocalStorage ? \"Brand: \" + getBrandLocalStorage : \"-- Select Brand --\";\n $('#jsc-brand .custom-select--button .jsc-brand-search').attr('placeholder',brandValue);\n $('#jsc-brand .custom-select--button .jsc-brand-search').val(brandValue);\n $('#jsc-brand .custom-select--button .jsc-brand-search').addClass('jsc-placeholder-black-color');\n \n loadModelOption (getBrandLocalStorage, sfPageType) ;\n var modelValue = getModelLocalStorage ? \"Collection: \" + getModelLocalStorage : \"-- Select Collection --\";\n $('#jsc-model .custom-select--button .jsc-model-search').attr('placeholder',modelValue);\n $('#jsc-model .custom-select--button .jsc-model-search').val(modelValue);\n $('#jsc-model .custom-select--button .jsc-model-search').addClass('jsc-placeholder-black-color');\n loadEngineOption(getModelLocalStorage,sfPageType,getBrandLocalStorage);\n\n // pre open model dropdown for brand and model page \n if (sfPageType === 'brand' || sfPageType === 'model') {\n setTimeout(function () {\n const modelContainer = $('#jsc-model');\n const modelItems = modelContainer.find('ul li');\n \n if (modelItems.length > 1) {\n modelContainer.addClass('custom-select--active');\n } else {\n // Disable the input inside #jsc-model\n modelContainer.find('input').prop('disabled', true);\n modelContainer.find('button span').removeAttr('onclick');\n\n }\n }, 100);\n }\n}\n\nif ($('jsc-watch-finder--drop-down').length > 0) { // only for watch finder template\n $(document).on('click', function(event) {\n var $dropdown = $('jsc-custom-select button');\n var getBrandLocalStorage = localStorage.getItem('brand');\n var getModelLocalStorage = localStorage.getItem('model');\n \n if (!$dropdown.is(event.target) && $('.jsc-custom-select').has(event.target).length === 0) {\n // Close the dropdown if it is open\n if ($('.jsc-custom-select').hasClass('custom-select--active')) {\n $('.jsc-custom-select').removeClass('custom-select--active');\n if (getBrandLocalStorage) {\n $('#jsc-brand .custom-select--button .jsc-brand-search').addClass('jsc-placeholder-black-color');\n }else{\n $('#jsc-brand .custom-select--button .jsc-brand-search').removeClass('jsc-placeholder-black-color');\n }\n if (getModelLocalStorage) {\n $('#jsc-model .custom-select--button .jsc-model-search').addClass('jsc-placeholder-black-color');\n }else{\n $('#jsc-model .custom-select--button .jsc-model-search').removeClass('jsc-placeholder-black-color');\n }\n }\n }\n });\n}\n\nonLoadSetLocalStorage = () => {\n // Check if the URL has brand in query string (both standalone and collection URLs)\n const hasBrandParam = window.location.search.includes('?brand=') || window.location.search.includes('&brand=');\n \n if (hasBrandParam) {\n // Parse and clean URL parameters\n const queryString = window.location.search.substring(1);\n // console.log('\uD83D\uDD0D Original Query String:', queryString);\n \n // Handle malformed URLs by fixing common issues\n let fixedQueryString = queryString;\n \n // Fix the specific case where brand value is concatenated with collection\n // brand=Cartiercollection=Tortue -> brand=Cartier&collection=Tortue\n if (fixedQueryString.includes('brand=') && fixedQueryString.includes('collection=') && !fixedQueryString.includes('&collection=')) {\n fixedQueryString = fixedQueryString.replace(/brand=([^&]+)collection=/, 'brand=$1&collection=');\n // console.log('\uD83D\uDD27 Fixed brand-collection separator');\n }\n \n // Fix the specific case where collection value is concatenated with reference\n // collection=Tortuereference=2396B -> collection=Tortue&reference=2396B\n if (fixedQueryString.includes('collection=') && fixedQueryString.includes('reference=') && !fixedQueryString.includes('&reference=')) {\n fixedQueryString = fixedQueryString.replace(/collection=([^&]+)reference=/, 'collection=$1&reference=');\n // console.log('\uD83D\uDD27 Fixed collection-reference separator');\n }\n \n // Remove extra ? characters that might appear before filters\n fixedQueryString = fixedQueryString.replace(/\\?filter\\./g, '&filter.');\n \n // Fix the case where there's a ? in the middle of the URL (like filter.v.availability=1?brand)\n fixedQueryString = fixedQueryString.replace(/=([^&]+)\\?([^=]+)=/g, '=$1&$2=');\n \n // console.log('\uD83D\uDD27 Fixed Query String:', fixedQueryString);\n \n // Split by & to handle parameters properly\n const params = fixedQueryString.split('&');\n let rawBrand = '';\n let rawModel = '';\n let rawYear = '';\n \n // Parse each parameter manually to avoid issues with filter parameters\n params.forEach(param => {\n if (param && param.includes('=')) {\n const [key, value] = param.split('=');\n // console.log('\uD83D\uDD0D Parsing param:', key, '=', value);\n if (key === 'brand') {\n rawBrand = decodeURIComponent(value || '');\n } else if (key === 'collection') {\n rawModel = decodeURIComponent(value || '');\n } else if (key === 'reference') {\n rawYear = decodeURIComponent(value || '');\n }\n }\n });\n \n // Fallback: If we still don't have proper values, try a more aggressive approach\n if (!rawBrand || !rawModel || !rawYear) {\n // console.log('\u26A0\uFE0F Fallback parsing needed');\n \n // Try to extract from the original query string using regex\n const brandMatch = queryString.match(/brand=([^&?]+)/);\n const collectionMatch = queryString.match(/collection=([^&?]+)/);\n const referenceMatch = queryString.match(/reference=([^&?]+)/);\n \n if (brandMatch) rawBrand = decodeURIComponent(brandMatch[1]);\n if (collectionMatch) rawModel = decodeURIComponent(collectionMatch[1]);\n if (referenceMatch) rawYear = decodeURIComponent(referenceMatch[1]);\n \n // console.log('\uD83D\uDD0D Fallback extracted:', rawBrand, rawModel, rawYear);\n }\n\n const cleanBrand = encodeURIComponent(rawBrand.replace(/\\s+/g, ''));\n const cleanModel = encodeURIComponent(rawModel.replace(/\\s+/g, ''));\n const cleanYear = encodeURIComponent(rawYear.replace(/\\s+/g, ''));\n\n // console.log('\uD83D\uDD0D Raw URL Parameters:', rawBrand, rawModel, rawYear);\n // console.log('\uD83D\uDD0D Encoded URL Parameters:', cleanBrand, cleanModel, cleanYear);\n\n // Search in cached DB\n var watchDb = cachedWatchDb;\n\n var match = watchDb.find(item => {\n \n const encodedBrand = encodeURIComponent(String(item.brand || '').replace(/\\s+/g, ''));\n const encodedModel = encodeURIComponent(String(item.collection || '').replace(/\\s+/g, ''));\n const encodedReference = encodeURIComponent(String(item.reference || '').replace(/\\s+/g, ''));\n\n // Log comparison for debugging\n // console.log(`\uD83E\uDDEA Checking: ${encodedBrand}, ${encodedModel}, ${encodedReference}`);\n\n return (\n encodedBrand === cleanBrand &&\n encodedModel === cleanModel &&\n encodedReference === cleanYear\n );\n });\n\n if (match) {\n localStorage.setItem('brand', match.brand);\n localStorage.setItem('model', match.collection);\n localStorage.setItem('reference', match.reference);\n // console.log('\u2705 Match found & saved to localStorage:', match);\n } else {\n // console.log('\u274C No match found for brand/collection/year in watchDb.');\n }\n }\n}\n\nonLoadFunctionInit = () =>{\n // Preload whichever brand this page needs (URL param or saved selection)\n // BEFORE the restore logic runs \u2014 the URL matcher and the populate\n // functions read that brand's rows from cachedWatchDb.\n var sfRun = function(){\n onLoadSetLocalStorage();\n var getBrandLocalStorage = localStorage.getItem('brand');\n var getModelLocalStorage = localStorage.getItem('model');\n var getReferenceLocalStorage = localStorage.getItem('reference');\n loadBrandOption(getBrandLocalStorage);\n onloadPopulateWatchFilterFromLocalStorage(getBrandLocalStorage,getModelLocalStorage);\n if ($('jsc-watch-finder--drop-down').length > 0) { // only for watch finder template\n onloadWatchButton(getBrandLocalStorage,getModelLocalStorage);\n }else{\n onloadPopulateReferenceFilterFromLocalStorage(getBrandLocalStorage,getModelLocalStorage,getReferenceLocalStorage);\n }\n };\n var sfUrlBrand = '';\n try {\n var m = window.location.search.match(/brand=([^&?]+)/);\n if (m) sfUrlBrand = decodeURIComponent(m[1]);\n } catch (e) {}\n var sfNeed = sfUrlBrand || localStorage.getItem('brand');\n if (sfNeed) { sfLoadBrand(sfNeed).always(sfRun); } else { sfRun(); }\n}\n\nhandleizedString = (input) => {\n let string = String(input);\n return string.replace(/\\s+/g, '-').replace(/\\//g, '-').trim().toLowerCase().replace('(', '-').replace(')', '-').replace(/--/g, '-').replace('.', '-').replace(/\u221A\u2202/g, '-');\n}\n\npopulateModelHtml = (brand, localStorageModel, sfPageType) => {\n\n // Check if cachedWatchDb is available\n if (!cachedWatchDb || !Array.isArray(cachedWatchDb)) {\n console.warn('\u26A0\uFE0F cachedWatchDb is not available yet, skipping populateModelHtml');\n return;\n }\n if (brand && !sfBrandLoaded(brand)) { sfLoadBrand(brand).then(function(){ populateModelHtml(brand, localStorageModel, sfPageType); }); return; }\n\n // Filter the JSON data for the selected \"Brand\"\n var filteredData = cachedWatchDb.filter(function(item) {\n if (sfPageType === 'brand') {\n // For brand-specific pages, only show models that match the brand\n // and have a brand-specific collection\n return item.status === 1 &&\n item.brand === brand && \n item.brandSpecificCollection && \n item.brandSpecificCollection.includes('/collections');\n } \n else if (sfPageType === 'model'){\n // For model landing pages, only show models that match the brand\n // and have a model-landing page\n return item.status === 1 &&\n item.brand === brand && \n item.modelLandingPage && \n item.modelLandingPage.includes('/pages');\n }else {\n // For non-brand-specific pages, show all models for the brand\n return item.status === 1 && item.brand === brand;\n }\n });\n\n var modelUlElement = $('#jsc-model .custom-select__listbox');\n // Count watches per collection for popularity sort\n var collectionCounts = {};\n filteredData.forEach(function(item) {\n if (item.collection) collectionCounts[item.collection] = (collectionCounts[item.collection] || 0) + 1;\n });\n var modelOptions = [...new Set(filteredData.map(item => item.collection))].map(model => { // Delugs: Set preserves first-seen order = API demand order\n var handleizedModel = handleizedString(model);\n return `
  • \n ${model} (${collectionCounts[model] || 0})\n
    • `;\n });\n\n modelUlElement.html(modelOptions.join(''));\n}\n\npopulateReferenceHtml = (brand, model, localStorageReference) => {\n // Check if cachedWatchDb is available\n if (!cachedWatchDb || !Array.isArray(cachedWatchDb)) {\n console.warn('\u26A0\uFE0F cachedWatchDb is not available yet, skipping populateReferenceHtml');\n return;\n }\n if (brand && !sfBrandLoaded(brand)) { sfLoadBrand(brand).then(function(){ populateReferenceHtml(brand, model, localStorageReference); }); return; }\n\n // Filter the JSON data for the selected \"Brand\" and \"Model\"\n var filteredData = cachedWatchDb.filter(function(item) {\n return item.status === 1 && item.brand === brand && item.collection === model;\n });\n\n var modelUlElement = $('#jsc-reference .custom-select__listbox');\n // Build reference \u2192 image map for thumbnails\n var refImageMap = {};\n filteredData.forEach(function(item) {\n if (item.reference && item.watchImage && !refImageMap[item.reference]) {\n refImageMap[item.reference] = item.watchImage;\n }\n });\n var modelOptions = [...new Set(filteredData.map(item => item.reference))].sort().map(reference => {\n var handleizedReference = handleizedString(reference);\n var refThumb = refImageMap[reference] || ''; \n return `
  • \n ${refThumb ? '' : ''}${reference}\n
    • `;\n });\n\n modelUlElement.html(modelOptions.join(''));\n};\n\npopulateReferenceImageHtmlByBrand = (brand,isPageType) => {\n // Check if cachedWatchDb is available\n if (!cachedWatchDb || !Array.isArray(cachedWatchDb)) {\n console.warn('\u26A0\uFE0F cachedWatchDb is not available yet, skipping populateReferenceImageHtmlByBrand');\n return;\n }\n if (brand && !sfBrandLoaded(brand)) { sfLoadBrand(brand).then(function(){ populateReferenceImageHtmlByBrand(brand, isPageType); }); return; }\n\n let brandString = String(brand);\n // Filter the JSON data for the selected \"Brand\"\n var filteredData = cachedWatchDb.filter(function(item) {\n return item.status === 1 && \n String(item.brand).trim() === brandString;\n });\n \n var engineUlElement = $('jsc-year-reference-img');\n engineUlElement.empty();\n \n var tableHTMLArray = filteredData.map(item => {\n // Get unique yearnum values for the current engineImg\n var uniqueYearNums = [...new Set(filteredData.filter(data => data.watchImage === item.watchImage).map(data => data.reference))];\n // Join unique yearnum values into a comma-separated string\n var yearNumString = uniqueYearNums.join(', ');\n // Collect article handles (only if they exist)\n var articleHandles = [item.article1, item.article2, item.article3].filter(Boolean).join('>');\n // console.log(articleHandles, 'articleHandles'); \n // Store the data in the array\n return `${yearNumString}|~|${item.watchImage}|~|${item.caseDiameter}|~|${item.lugToLugDistance}|~|${item.lugWidth}|~|${item.watchHeadImage}|~|${articleHandles}|~|${item.recommendedCollection}|~|${item.brand}|~|${item.collection}|~|${item.brandSpecificPage}|~|${item.model}|~|${item.modelLandingPage}|~|${item.identifier}`;\n });\n// console.log('tableHTMLArray', tableHTMLArray, 'isPageType', isPageType);\n loadTableRow(tableHTMLArray,isPageType);\n}\n\npopulateReferenceImageHtml = (model,isPageType,brand) => {\n // Check if cachedWatchDb is available\n if (!cachedWatchDb || !Array.isArray(cachedWatchDb)) {\n console.warn('\u26A0\uFE0F cachedWatchDb is not available yet, skipping populateReferenceImageHtml');\n return;\n }\n if (brand && !sfBrandLoaded(brand)) { sfLoadBrand(brand).then(function(){ populateReferenceImageHtml(model, isPageType, brand); }); return; }\n\n let modelString = String(model); \n let brandString = String(brand);\n // Filter the JSON data for the selected \"Model\" and \"Brand\"\n var filteredData = cachedWatchDb.filter(function(item) {\n return item.status === 1 && \n String(item.collection).trim() === modelString &&\n String(item.brand).trim() === brandString;\n });\n\n \n var engineUlElement = $('jsc-year-reference-img');\n engineUlElement.empty(); // Remove existing children\n \n var tableHTMLArray = filteredData.map(item => {\n // Get unique yearnum values for the current engineImg\n var uniqueYearNums = [...new Set(filteredData.filter(data => data.watchImage === item.watchImage).map(data => data.reference))];\n // Join unique yearnum values into a comma-separated string\n var yearNumString = uniqueYearNums.join(', ');\n // Collect article handles (only if they exist)\n var articleHandles = [item.article1, item.article2, item.article3].filter(Boolean).join('>');\n // console.log(articleHandles, 'articleHandles'); \n // Store the data in the array\n return `${yearNumString}|~|${item.watchImage}|~|${item.caseDiameter}|~|${item.lugToLugDistance}|~|${item.lugWidth}|~|${item.watchHeadImage}|~|${articleHandles}|~|${item.recommendedCollection}|~|${item.brand}|~|${item.collection}|~|${item.brandSpecificPage}|~|${item.model}|~|${item.modelLandingPage}|~|${item.identifier}`;\n });\n\n loadTableRow(tableHTMLArray,isPageType);\n}\n\nloadTableRow = (htmlArray, isPageType) => {\n var engineUlElement = $('jsc-year-reference-img');\n engineUlElement.children().remove();\n const row = $('
    ').addClass('jsc-year-img-items-wrapper');\n var getReferenceLocalStorage = localStorage.getItem('reference');\n \n let appendedCount = 0; // Track how many items get appended\n const cardList = []; // Store product cards temporarily\n\n let customerId = $('jsc-watch-finder').attr('customer-id');\n let customerMetafieldData = $('jsc-watch-finder').attr('customer-save-watch-list');\n let watchList = safeParseJSON(customerMetafieldData, []);\n\n // Update counters based on user login status\n if (customerId) {\n // Logged-in user - use metafield data\n if (watchList && watchList.length >= 50) {\n $('.sf-saved-watch-error-limit-message').show();\n $('.sf-saved-watch-count-message').hide();\n } else if (watchList && watchList.length > 0) {\n $('.sf-saved-watch-error-limit-message').hide();\n $('.sf-saved-watch-count-message').show();\n $('.sf-saved-watch-count-message .sf-saved-watch-count').text(watchList.length);\n } else {\n $('.sf-saved-watch-error-limit-message').hide();\n $('.sf-saved-watch-count-message').hide();\n }\n } else {\n // Non-logged-in user - use session storage\n updateSessionStorageCounters();\n }\n for (let index = 0; index < htmlArray.length; index++) {\n const parts = htmlArray[index].split('|~|');\n\n let heartFill = 'none'; // default\n\n if (customerId && Array.isArray(watchList)) {\n // Logged-in user - check metafield data\n const isWatchListed = watchList.some(item => {\n return item.brand === parts[8] && item.collection === parts[9] && item.reference === parts[0];\n });\n heartFill = isWatchListed ? '#000000' : 'none';\n } else {\n // Non-logged-in user - check session storage\n let sessionWatches = [];\n try {\n const stored = sessionStorage.getItem('sf_session_watches');\n if (stored) {\n sessionWatches = JSON.parse(stored);\n }\n } catch (e) {\n sessionWatches = [];\n }\n \n const isWatchListed = sessionWatches.some(item => {\n return item.brand === parts[8] && item.collection === parts[9] && item.reference === parts[0];\n });\n heartFill = isWatchListed ? '#000000' : 'none';\n }\n \n let isLimitReached = Array.isArray(watchList) && watchList.length >= 50;\n \n // Check if the current card should be shown\n const passesFilter = (() => {\n if (isPageType === 'brand') {\n return parts[10];\n } else if (isPageType === 'model') {\n return parts[12];\n } else {\n return true;\n } \n })();\n \n if (!passesFilter) continue;\n \n // Build product card\n const productInput = $('')\n .addClass('jsc-year-img-data')\n .addClass(isLimitReached === true ? 'sf-save-watch-reached' : '')\n .attr('type', 'hidden')\n .attr('year-ref', parts[0])\n .attr('year-src', parts[1])\n .attr('case-diameter', parts[2])\n .attr('lug-to-lug-distance', parts[3])\n .attr('lug-width', parts[4])\n .attr('watch-face', parts[5])\n .attr('article-urls', parts[6])\n .attr('recommend-collection', parts[7])\n .attr('brand', parts[8])\n .attr('watch', parts[9])\n .attr('brand-specific-page', parts[10])\n .attr('model', parts[11])\n .attr('model-landing-page', parts[12])\n .attr('identifier', parts[13]);\n \n const productCard = $('
    ')\n .addClass(`jsc-year-img-item cursor columns carousel__slide`) // size class added later\n .attr('data-identifier',`${parts[13]}`)\n .attr(\n 'onclick',\n `setLocalStorage('reference','${parts[0].trim()}');sfLogSelection('reference_selected',null,null,'${parts[0].trim()}');constructParamUrl('${index}',this,'${isPageType}');showWatchInfo();`\n );\n \n const productCardContent = $('
    ')\n .attr('id', `product-card-${index}`) \n .addClass(`product-card-${index} product-card text-left product-card--content-spacing-true product-card--border-false`);\n\n const saveWatch = $('
    ')\n .addClass('jsc-sf-product-card-save-watch') \n .addClass(heartFill === '#000000' ? 'sf-filled' : '')\n .addClass(isLimitReached && heartFill === 'none' ? 'sf-disabled' : '')\n .append(\n $('
    ')\n .addClass('sf-save-watch-button')\n .append(\n $('')\n .addClass('sf-save-watch-icon')\n .html(heartFill === '#000000' ? \n '\"Saved\"' :\n '\"Add\"'\n )\n )\n .on('click', function (e) {\n e.stopPropagation(); // Prevent card click\n e.preventDefault(); // \uFFFD\uFFFD\uFFFD Prevent anchor href navigation if inside \n\n // if ($(this).hasClass('disabled')) return; // \u26D4 Block if disabled\n\n const currentImgSrc = $(this).find('img').attr('src');\n const isTickIcon = currentImgSrc && currentImgSrc.includes('tick-circle.svg');\n const saveWatchParent = $(this).closest('.jsc-sf-product-card-save-watch');\n\n // \u26D4 If limit reached and not already saved, don't allow adding\n customerMetafieldData = $('jsc-watch-finder').attr('customer-save-watch-list');\n watchList = safeParseJSON(customerMetafieldData, []);\n isLimitReached = Array.isArray(watchList) && watchList.length >= 50;\n if (isLimitReached && !isTickIcon) {\n \n return;\n }\n \n // construct url params\n var $cu_brand = parts[8].replace(/\\s+/g, '');\n var $cu_collection = parts[9].replace(/\\s+/g, '');\n var $cu_reference = parts[0].replace(/\\s+/g, '');\n // Construct URL properly\n var sf_page_handle = $('.jsc-watch-finder').attr('sf-page');\n var $cu_modelLandingPage = parts[12] ? parts[12].trim() : '';\n var $cu_urlWithParams = $cu_modelLandingPage ? $cu_modelLandingPage : `/pages/${sf_page_handle}?brand=${$cu_brand}&collection=${$cu_collection}&reference=${$cu_reference}`;\n\n const watchData = {\n brand: parts[8],\n collection: parts[9],\n model: parts[11],\n reference: parts[0],\n watchImage: parts[1],\n identifier: parts[13],\n url: $cu_urlWithParams \n\n };\n \n\n if (customerId){\n if (isTickIcon) {\n // If tick icon clicked, remove from list\n removeFromWatchList(watchData);\n saveWatchParent.find('.sf-save-watch-icon').html('\"Add\"');\n saveWatchParent.removeClass('sf-filled');\n } else {\n // If plus icon clicked, add to list\n addToWatchList(watchData);\n saveWatchParent.find('.sf-save-watch-icon').html('\"Saved\"');\n saveWatchParent.addClass('sf-filled');\n }\n customerMetafieldData = $('jsc-watch-finder').attr('customer-save-watch-list');\n watchList = safeParseJSON(customerMetafieldData, []);\n isLimitReached = Array.isArray(watchList) && watchList.length >= 50;\n \n if (watchList && watchList.length >= 50) {\n $('.jsc-sf-product-card-save-watch:not(.sf-filled)').addClass('sf-disabled');\n $('.sf-saved-watch-error-limit-message').show();\n $('.sf-saved-watch-count-message').hide();\n } else if (watchList && watchList.length > 0) {\n $('.sf-saved-watch-error-limit-message').hide();\n $('.sf-saved-watch-count-message').show();\n $('.sf-saved-watch-count-message .sf-saved-watch-count').text(watchList.length);\n } else {\n $('.sf-saved-watch-error-limit-message').hide();\n $('.sf-saved-watch-count-message').hide();\n }\n } else {\n // For non-logged-in users, use session storage\n if (isTickIcon) {\n // If tick icon clicked, remove from session storage\n removeFromSessionStorage(watchData);\n saveWatchParent.find('.sf-save-watch-icon').html('\"Add\"');\n saveWatchParent.removeClass('sf-filled');\n updateSessionStorageCounters();\n } else {\n // If plus icon clicked, add to session storage\n addToSessionStorage(watchData);\n saveWatchParent.find('.sf-save-watch-icon').html('\"Saved\"');\n saveWatchParent.addClass('sf-filled');\n updateSessionStorageCounters();\n }\n }\n\n\n })\n );\n\n \n const productImage = $('
    ')\n .addClass('jsc-year-img')\n .append(\n $('')\n .addClass('no-blur product-secondary-image lazyautosizes ls-is-cached lazyloaded')\n .attr('src', parts[1])\n );\n \n const productInfo = $('
    ').addClass('product-card-info');\n const productReferenceLabel = $('
    ')\n .addClass('jsc-year-reference-label')\n .text('Reference ')\n .append($('').addClass('jsc-year-reference').text(parts[0]));\n const productModelLabel = $('
    ').addClass('jsc-model-label').append($('').text(parts[11]));\n \n if (parts[0] == getReferenceLocalStorage) {\n productCardContent.addClass('border-active');\n }\n \n productCard.prepend(productInput);\n productCardContent.append(productImage);\n if (isPageType !== 'brand' && isPageType !== 'model') {\n productCardContent.append(saveWatch);\n }\n productCardContent.append(productInfo);\n productInfo.append(productModelLabel);\n productInfo.append(productReferenceLabel);\n productCard.append(productCardContent);\n \n cardList.push(productCard);\n appendedCount++;\n }\n \n \n // After loop: determine size class\n const sizeClass = appendedCount === 1 ? 'small-6 medium-12 large-12' : 'small-6 medium-6 large-6';\n \n cardList.forEach(card => {\n card.addClass(sizeClass);\n row.append(card);\n });\n \n engineUlElement.append(row);\n removeLoader();\n}\n \n\nsfPopupClose = () =>{\n\n // Check if current URL has #recover\n if (window.location.hash === '#recover') {\n var returnUrl = window.location.pathname + window.location.search;\n window.location.href = returnUrl; \n }else{\n $('#sf_download_login_modal').hide();\n $('body').removeClass('open-cc');\n }\n}\n\nsfPopupRecoverPassword = () =>{\n var returnUrl = window.location.pathname + window.location.search + '#recover';\n window.location.href = returnUrl;\n}\n\nopenSfLoginPopup= (evt) =>{\n $('#Watch-Finder--Drawer').removeClass('active');\n $('#sf_download_login_modal').css('display','flex');\n $('body').addClass('open-cc');\n\n var $productCard = $(evt).closest('.product-card');\n\n if (window.location.pathname.includes('/account')) {\n $('body').removeClass('open-cc');\n }else{\n var returnUrl = window.location.href;\n if ($productCard.length) {\n var productCardId = $productCard.attr('id');\n // append return URL to login form\n returnUrl = returnUrl + '#' + productCardId;\n }else{\n returnUrl = returnUrl;\n }\n // Find all forms inside the modal container\n $('#sf_download_login_modal #customer_login').append(\n ''\n );\n $('#sf_download_login_modal #create_customer').append(\n ''\n );\n\n $('#sf_download_login_modal #recover').append(\n ''\n );\n }\n}\n\nshowPopupRegisterForm = () =>{\n $('#sf_download_login_modal .jsc-modal-content .shopify-section:first').show();\n $('#sf_download_login_modal .jsc-modal-content .shopify-section:first .row').show();\n $('#sf_download_login_modal .jsc-modal-content .shopify-section:last').hide();\n\n}\n\nshowPopupLoginForm = () =>{\n $('#sf_download_login_modal .jsc-modal-content .shopify-section:first').hide();\n $('#sf_download_login_modal .jsc-modal-content .shopify-section:last').show();\n // Check if current URL has #recover\n if (window.location.hash === '#recover') {\n var returnUrl = window.location.pathname + window.location.search;\n window.location.href = returnUrl; \n }\n}\n\ngetSingaporeTimestamp = () => {\n try {\n const timestamp = new Date().toLocaleString('sv-SE', {\n timeZone: 'Asia/Singapore',\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit'\n });\n if (!timestamp || timestamp === 'Invalid Date') {\n return new Date().toISOString();\n }\n return `${timestamp.replace(' ', 'T')}+08:00`;\n } catch (error) {\n return new Date().toISOString();\n }\n};\n\nremoveFromWatchList = (watchData, e) => {\n const $watchFinder = $('jsc-watch-finder');\n const customerID = $watchFinder.attr('customer-id');\n const rawWatchList = $watchFinder.attr('customer-save-watch-list');\n const rawTags = $watchFinder.attr('customer-current-tags') || '';\n let existingTags = rawTags.split(',').map(tag => tag.trim()).filter(Boolean);\n \n let current = safeParseJSON(rawWatchList, []);\n \n // Remove matching watch\n const updated = current.filter(item =>\n !(item.brand === watchData.brand &&\n item.model === watchData.model &&\n item.collection === watchData.collection &&\n item.identifier === watchData.identifier &&\n item.reference === watchData.reference)\n );\n \n // Update saved watch list attribute\n $watchFinder.attr('customer-save-watch-list', JSON.stringify(updated));\n \n // Build a tag set from updated list\n const currentTagSet = new Set();\n const activeBrands = new Set();\n const activeModels = new Set();\n const activeCollections = new Set();\n const activeIdentifiers = new Set();\n const activeRefs = new Set();\n \n updated.forEach(watch => {\n if (watch.brand) {\n const brandTag = `sf_brand_${watch.brand.toLowerCase()}`;\n currentTagSet.add(brandTag);\n activeBrands.add(brandTag);\n }\n if (watch.model) {\n const modelTag = `sf_model_${watch.model.toLowerCase()}`;\n currentTagSet.add(modelTag);\n activeModels.add(modelTag);\n }\n if (watch.collection) {\n const collectionTag = `sf_collection_${watch.collection.toLowerCase()}`;\n currentTagSet.add(collectionTag);\n activeCollections.add(collectionTag);\n }\n if (watch.identifier) {\n const identifierTag = `sf_id_${watch.identifier.toLowerCase()}`;\n currentTagSet.add(identifierTag);\n activeIdentifiers.add(identifierTag);\n }\n if (watch.reference) {\n const refTag = `sf_ref_${watch.reference.toLowerCase()}`;\n currentTagSet.add(refTag);\n activeRefs.add(refTag);\n }\n });\n \n // Calculate number of ref tags\n const refCount = updated.length;\n \n // Clean up old _watches tags\n for (let i = 1; i <= 50; i += 5) {\n const upper = Math.min(i + 4, 50);\n currentTagSet.delete(`sf_${i}-${upper}_watches`);\n }\n \n // Add correct _watches tag\n if (refCount > 0) {\n const lowerBound = Math.floor((refCount - 1) / 5) * 5 + 1;\n const upperBound = Math.min(lowerBound + 4, 50);\n currentTagSet.add(`sf_${lowerBound}-${upperBound}_watches`);\n }\n \n // Determine new and removable tags\n const newTags = Array.from(currentTagSet).filter(tag => !existingTags.includes(tag));\n const isRemovableTag = tag =>\n tag !== 'sf_saved_watch_strap_pairing' && // Protect this tag from removal\n (tag.startsWith('sf_brand_') ||\n tag.startsWith('sf_model_') ||\n tag.startsWith('sf_collection_') ||\n tag.startsWith('sf_id_') ||\n tag.startsWith('sf_ref_') ||\n (tag.startsWith('sf_') && tag.endsWith('_watches')));\n \n const removeTags = existingTags.filter(tag => {\n if (!isRemovableTag(tag)) return false;\n if (tag.startsWith('sf_brand_')) return !activeBrands.has(tag);\n if (tag.startsWith('sf_model_')) return !activeModels.has(tag);\n if (tag.startsWith('sf_collection_')) return !activeCollections.has(tag);\n if (tag.startsWith('sf_id_')) return !activeIdentifiers.has(tag);\n if (tag.startsWith('sf_ref_')) return !activeRefs.has(tag);\n return !currentTagSet.has(tag); // e.g., _watches tags\n });\n \n // Final updated tag set\n const updatedTagSet = new Set([...existingTags, ...newTags]);\n removeTags.forEach(tag => updatedTagSet.delete(tag));\n \n // Update DOM attribute\n $watchFinder.attr('customer-current-tags', Array.from(updatedTagSet).join(','));\n \n // Debug logs\n // console.log(\"\uD83E\uDDF9 Removed Watch:\", watchData);\n // console.log(\"\uD83E\uDDE9 New Tags to Add:\", newTags);\n // console.log(\"\u274C Tags to Remove:\", removeTags);\n // console.log(\"\uD83E\uDDE9 Final Tags:\", Array.from(updatedTagSet));\n \n const triggeredAt = getSingaporeTimestamp();\n // POST updated info\n $.ajax({\n url: \"https://webhooks.mechanic.dev/411d70c6-afc5-463b-9db8-583a633f213a\",\n method: \"POST\",\n contentType: \"application/json\",\n data: JSON.stringify({\n customer_id: customerID,\n triggered_at: triggeredAt,\n watches: updated,\n tags: Array.from(updatedTagSet)\n }),\n }).fail(error => {\n // console.error(\"\u274C Error updating Mechanic:\", error);\n });\n \n // UI cleanup on account page\n if ($('#_jscSavedWatchesList_display').length > 0) {\n $(e).closest('.columns').remove();\n \n let columns = $('#_jscSavedWatchesList_display').find('.columns');\n columns.each(function () {\n const $col = $(this);\n const brand = $col.attr('data-brand') || '';\n const model = $col.attr('data-model') || '';\n const collection = $col.attr('data-collection') || '';\n const ref = $col.attr('data-reference') || '';\n \n const isMatch = (\n brand.toLowerCase().includes(watchData.brand?.toLowerCase() || '') ||\n model.toLowerCase().includes(watchData.model?.toLowerCase() || '') ||\n collection.toLowerCase().includes(watchData.collection?.toLowerCase() || '')\n ) && ref === watchData.reference;\n \n if (isMatch) {\n $col.remove();\n }\n });\n \n columns = $('#_jscSavedWatchesList_display').find('.columns');\n if (columns.length === 0) {\n $('#_jscSavedWatchesList_display').hide();\n $('#_jscSavedWatchesList_na').show();\n }\n }\n\n const customerMetafieldData = $('jsc-watch-finder').attr('customer-save-watch-list');\n const watchList = safeParseJSON(customerMetafieldData, []);\n\n if (watchList && watchList.length >= 50) {\n $('.sf-saved-watch-error-limit-message').show();\n $('.sf-saved-watch-count-message').hide();\n } else if (watchList && watchList.length > 0) {\n $('.sf-saved-watch-error-limit-message').hide();\n $('.sf-saved-watch-count-message').show();\n $('.sf-saved-watch-count-message .sf-saved-watch-count').text(watchList.length);\n } else {\n $('.sf-saved-watch-error-limit-message').hide();\n $('.sf-saved-watch-count-message').hide();\n }\n // Update icons in Strap Finder tab for logged-in users\n updateStrapFinderTabIcons();\n };\n \n \n addToWatchList = (watchData) => {\n const $watchFinder = $('jsc-watch-finder');\n const customerID = $watchFinder.attr('customer-id');\n const rawWatchList = $watchFinder.attr('customer-save-watch-list');\n const rawTags = $watchFinder.attr('customer-current-tags') || '';\n let existingTags = rawTags.split(',').map(tag => tag.trim()).filter(Boolean);\n // console.log(\"\uD83E\uDDE9 Existing Tags:\", existingTags);\n \n let current = safeParseJSON(rawWatchList, []);\n // \u2705 Filter out any invalid data like strings (e.g., \"[]\")\n current = current.filter(item => typeof item === 'object' && item !== null && !Array.isArray(item));\n \n const alreadyExists = current.some(watch =>\n watch.brand === watchData.brand &&\n watch.model === watchData.model &&\n watch.collection === watchData.collection &&\n watch.identifier === watchData.identifier &&\n watch.reference === watchData.reference\n );\n \n if (alreadyExists) return;\n \n current.unshift(watchData);\n if (current.length > 50) {\n const removed = current.slice(50);\n // console.log(\"\uD83D\uDDD1\uFE0F Removing old watches:\", removed);\n current = current.slice(0, 50);\n }\n \n // \u2705 Ensure only valid objects saved\n current = current.filter(item => typeof item === 'object' && item !== null && !Array.isArray(item));\n $watchFinder.attr('customer-save-watch-list', JSON.stringify(current));\n \n const currentTagSet = new Set();\n current.forEach(watch => {\n if (watch.brand) currentTagSet.add(`sf_brand_${watch.brand.toLowerCase()}`);\n if (watch.model) currentTagSet.add(`sf_model_${watch.model.toLowerCase()}`);\n if (watch.collection) currentTagSet.add(`sf_collection_${watch.collection.toLowerCase()}`);\n if (watch.identifier) currentTagSet.add(`sf_id_${watch.identifier.toLowerCase()}`);\n if (watch.reference) currentTagSet.add(`sf_ref_${watch.reference.toLowerCase()}`);\n });\n \n // Handle watch count range tags\n for (let i = 1; i <= 50; i += 5) {\n const upper = Math.min(i + 4, 50);\n currentTagSet.delete(`sf_${i}-${upper}_watches`);\n }\n \n if (current.length > 0) {\n const lowerBound = Math.floor((current.length - 1) / 5) * 5 + 1;\n const upperBound = Math.min(lowerBound + 4, 50);\n currentTagSet.add(`sf_${lowerBound}-${upperBound}_watches`);\n }\n \n const newTags = Array.from(currentTagSet).filter(tag => !existingTags.includes(tag));\n \n const isRemovableTag = tag =>\n tag !== 'sf_saved_watch_strap_pairing' && // Protect this tag from removal\n (tag.startsWith('sf_brand_') ||\n tag.startsWith('sf_model_') ||\n tag.startsWith('sf_collection_') ||\n tag.startsWith('sf_id_') ||\n tag.startsWith('sf_ref_') ||\n (tag.startsWith('sf_') && tag.endsWith('_watches')));\n \n const removeTags = existingTags.filter(\n tag => isRemovableTag(tag) && !currentTagSet.has(tag)\n );\n \n const updatedTagSet = new Set([...existingTags, ...newTags]);\n removeTags.forEach(tag => updatedTagSet.delete(tag));\n \n $watchFinder.attr('customer-current-tags', Array.from(updatedTagSet).join(','));\n \n // \u2705 Debug logs\n // console.log(\"\uD83E\uDDE9 New Tags to Add:\", newTags);\n // console.log(\"\u274C Tags to Remove:\", removeTags);\n // console.log(\"\uD83E\uDDD1\u200D\uD83D\uDCBC Customer ID:\", customerID);\n // console.log(\"\u231A Updated Watch List:\", current);\n // console.log(\"\uD83E\uDDE9 Final Tags:\", Array.from(updatedTagSet));\n \n const triggeredAt = getSingaporeTimestamp();\n // \u2705 Send to webhook\n $.ajax({\n url: \"https://webhooks.mechanic.dev/411d70c6-afc5-463b-9db8-583a633f213a\",\n method: \"POST\",\n contentType: \"application/json\",\n data: JSON.stringify({\n customer_id: customerID,\n triggered_at: triggeredAt,\n watches: current,\n tags: Array.from(updatedTagSet)\n }),\n }).fail((error) => {\n console.error(\"\u274C Error submitting watch data:\", error);\n });\n \n // \u2705 UI Card Update\n if ($('#_jscSavedWatchesList_display').length > 0) {\n\n const html = `\n
    \n
    \n \n
    \n \"${watchData.brand}\n
    \n     \n\n
    \n
    \n \n \"Saved\"\n \n
    \n
    \n\n
    \n \n
    ${watchData.model}
    \n
    Reference: ${watchData.reference}}
    \n     \n \n
    \n
    \n
    \n `;\n\n $('#_jscSavedWatchesList_display').find('jsc-sf-year-reference-img').find('.jsc-year-img-items-wrapper').prepend(html);\n $('#_jscSavedWatchesList_display').show();\n $('#_jscSavedWatchesList_na').hide();\n }\n\n // apped notification popup\n const $snackbar = $('#jsc-snackbar');\n $snackbar.addClass('show');\n\n setTimeout(function () {\n $snackbar.removeClass('show');\n }, 3000);\n \n // Update icons in Strap Finder tab for logged-in users\n updateStrapFinderTabIcons();\n };\n \n \n \n \n \n \n \n\n// Function to update pagination index\nupdatePaginationIndex = (totalPage, activePage, htmlArray) => {\n const paginationContainer = $('#jsc-pagination-container');\n const paginationPages = paginationContainer.find('.jsc-pagination-pages');\n paginationPages.children().remove();\n paginationPages.removeClass('add-border');\n // Check if htmlArray has more than 8 elements\n if (htmlArray.length > 8){\n // Loop through the total number of pages\n for (let index = 1; index <= totalPage; index++) {\n // If it's the active page, add a current page class\n if (index === activePage) {\n paginationPages.addClass('add-border');\n paginationPages.append(`${index}`);\n } else {\n // Add pagination index with onclick function to paginate\n paginationPages.addClass('add-border');\n paginationPages.append(`${index}`);\n }\n }\n }\n };\n\n\n // Function to paginate and load new li elements\npaginate = (htmlString, pageIndex) => {\n $('.jsc-reinit-year-list').children().remove();\n $('jsc-year-list').show();\n const galleryContainer = $('jsc-year-reference-img');\n const htmlArray = htmlString.split('---');\n const isFromPaginate = true;\n \n // Remove existing li elements and pagination\n galleryContainer.children().remove();\n $('.jsc-pagination-pages').children().remove();\n \n // Load new li elements with pagination\n loadTableRow(htmlArray, pageIndex, isFromPaginate);\n };\n\npopulateInfoHtml = (reference) => {\n // Check if cachedWatchDb is available\n if (!cachedWatchDb || !Array.isArray(cachedWatchDb)) {\n console.warn('\u26A0\uFE0F cachedWatchDb is not available yet, skipping populateInfoHtml');\n return;\n }\n var sfInfoBrand = localStorage.getItem('brand');\n if (sfInfoBrand && !sfBrandLoaded(sfInfoBrand)) { sfLoadBrand(sfInfoBrand).then(function(){ populateInfoHtml(reference); }); return; }\n\n // Convert the model to a number if it's a string\n var referenceToMatch = isNaN(reference) ? reference : parseFloat(reference);\n\n // Filter data based on the 'brand'\n var filteredData = cachedWatchDb.filter(function(item) {\n return item.status === 1 && item.reference === referenceToMatch;\n });\n \n var infoUlElement1 = $('.placeholder-details .case-diameter');\n var infoUlElement2 = $('.placeholder-details .case-lug-distance');\n var infoUlElement4 = $('.placeholder-details .case-lug-width');\n var infoUlElement5 = $('jsc-year-placeholder').find('.year-img');\n\n var caseDiameter = filteredData.map(item => item.caseDiameter);\n var caseLugDistance = filteredData.map(item => item.lugToLugDistance);\n var caseLugWidth = filteredData.map(item => item.lugWidth);\n var caseImage = filteredData.map(item => item.image);\n\n $('.placeholder-info').css('visibility','visible');\n \n infoUlElement5.attr('src',caseImage);\n infoUlElement5.show();\n\n infoUlElement1.text(caseDiameter ? caseDiameter : 'NA');\n infoUlElement2.text(caseLugDistance ? caseLugDistance : 'NA');\n infoUlElement4.text(caseLugWidth ? caseLugWidth : 'NA');\n } \n \n loadBrandOption = (getBrandLocalStorage) => {\n // Brands come from the lightweight index, not the catalog\n if (!sfIndex || !sfIndex.brands) {\n console.warn('\u26A0\uFE0F index is not available yet, skipping loadBrandOption');\n return;\n }\n\n const brandPopulateMap = {};\n sfIndex.brands.forEach(function (b) {\n if (b.populate && b.populate > 0) brandPopulateMap[b.name] = b.populate;\n });\n\n const popularBrands = Object.keys(brandPopulateMap)\n .sort((a, b) => brandPopulateMap[a] - brandPopulateMap[b])\n .slice(0, 10);\n\n const allBrands = sfIndex.brands.map(function (b) { return b.name; });\n\n // Step 5: Build list with sections\n const brandUlElement = $('#jsc-brand .custom-select__listbox');\n\n const createOptionLi = (brand) => {\n const handleizedBrand = handleizedString(brand);\n const isSelected = brand === getBrandLocalStorage;\n return `
  • \n ${brand}\n
    • `;\n };\n\n const top10Header = `
  • Top Brands
    • `;\n const top10Options = popularBrands.map(createOptionLi);\n\n const allBrandsHeader = `
  • All Brands
    • `;\n const allOptions = allBrands.map(createOptionLi); \n\n const finalList = [top10Header, ...top10Options, allBrandsHeader, ...allOptions];\n\n brandUlElement.html(finalList.join(''));\n}\n\n\nloadModelOption = (brand, isPageType) => {\n // Call the function to populate the model HTML\n var getModelLocalStorage = localStorage.getItem('model');\n populateModelHtml(brand, getModelLocalStorage, isPageType);\n \n // Reset model and engine options\n resetModelOption();\n \n // Reset local storage\n setLocalStorage('model', '');\n setLocalStorage('reference', '');\n \n}\n\nloadReferenceOption= (brand,model) => {\n // Call the function to populate the model HTML\n populateReferenceHtml(brand,model);\n \n // Reset reference and engine options\n resetReferenceOption();\n\n setLocalStorage('reference', '');\n}\n\nloadEngineOption = (model,isPageType,brand) => {\n // Fetch JSON data from the URL\n if(brand && !model){\n populateReferenceImageHtmlByBrand(brand,isPageType);\n }else{\n populateReferenceImageHtml(model,isPageType,brand);\n }\n \n // reset local storage\n setLocalStorage('reference', '');\n}\n\nselectOption = (e, key) => {\n var _this = $(e);\n var value = _this.attr('data-value');\n // $('#Watch-Finder--Drawer').removeClass('active');\n $('.box.jsc-watch-finder--clear').show();\n $('.box.jsc-watch-finder--smart-search').show();\n $('jsc-reinit-year-list').hide();\n $('jsc-year-list').show();\n \n // Set Local storage\n setLocalStorage(key, value);\n\n // Delugs: selection logging\n if (value) {\n if (key == 'brand') sfLogSelection('brand_selected', value, '', '');\n else if (key == 'model') sfLogSelection('collection_selected', null, value, '');\n else if (key == 'reference') sfLogSelection('reference_selected', null, null, value);\n }\n\n var isPageType = $('jsc-watch-finder--drop-down').attr('sfPageType');\n\n // Enable model option\n if (key == 'brand') {\n setLocalStorage('model', '');\n // Replace selected value\n var brandValue = value ? \"Brand: \" + value : \"-- Select Brand --\";\n _this.closest('.jsc-custom-select').find('.custom-select--button input').attr('placeholder',brandValue);\n _this.closest('.jsc-custom-select').find('.custom-select--button input').val(brandValue);\n\n var getModelLocalStorage = localStorage.getItem('model');\n loadModelOption(value);\n loadReferenceOption(value);\n loadEngineOption(getModelLocalStorage,isPageType,value);\n $('jsc-year-right-wrapper').hide(); \n $('jsc-year-wrapper').hide();\n $('finder-paginate-facet').text();\n $('#jsc-brand').removeClass('custom-select--active');\n\n $('jsc-watch-finder-content').addClass('show-year');\n $('jsc-year-wrapper').show();\n $('jsc-year-right-wrapper').show();\n $('jsc-year-reference-img').show();\n \n // Clear smart search text and results\n clearSmartSearch();\n } \n \n // Display Result\n if (key == 'model') {\n // Replace selected value\n var brandValue = value ? \"Collection: \" + value : \"-- Select Collection --\";\n _this.closest('.jsc-custom-select').find('.custom-select--button input').attr('placeholder',brandValue);\n _this.closest('.jsc-custom-select').find('.custom-select--button input').val(brandValue);\n\n $('#jsc-model ul li').removeClass('active-model');\n _this.addClass('active-model');\n var getBrandLocalStorage = localStorage.getItem('brand');\n\n if ($('jsc-watch-finder--drop-down').length > 0) { // only for watch finder template\n initLoader();\n loadEngineOption(value,isPageType,getBrandLocalStorage);\n }else{\n loadReferenceOption(getBrandLocalStorage,value);\n }\n setPlaceholder();\n \n $('jsc-watch-finder-content').addClass('show-year');\n $('jsc-year-wrapper').show();\n $('jsc-year-right-wrapper').show();\n $('jsc-year-reference-img').show();\n $('#jsc-model').removeClass('custom-select--active');\n \n // Clear smart search text and results\n clearSmartSearch();\n }\n}\n\n\nsetPlaceholder = () => {\n var getBrandLocalStorage = localStorage.getItem('brand'); \n $('.placeholder-brand-name').text(getBrandLocalStorage);\n $('.placeholder-info').css('visibility','hidden'); \n}\n\n\nresetBrandOption = () => {\n $('#jsc-brand .custom-select--button .jsc-brand-search').attr('placeholder','-- Select Brand --');\n $('#jsc-brand .custom-select--button .jsc-brand-search').text('');\n $('#jsc-brand .custom-select--button .jsc-brand-search').val('');\n $('#jsc-brand input').removeClass('jsc-placeholder-black-color');\n}\n\nresetModelOption = () => {\n $('#jsc-model .custom-select--button .jsc-model-search').attr('placeholder','-- Select Model --');\n $('#jsc-model .custom-select--button .jsc-model-search').text('');\n $('#jsc-model .custom-select--button .jsc-model-search').val('');\n $('#jsc-model input').removeClass('jsc-placeholder-black-color');\n}\n\nresetReferenceOption = () => {\n $('#jsc-reference .custom-select--button .jsc-reference-search').attr('placeholder','-- Select Reference --');\n $('#jsc-reference .custom-select--button .jsc-reference-search').text('');\n $('#jsc-reference .custom-select--button .jsc-reference-search').val('');\n}\n\nsetLocalStorage = (key, value) => {\n localStorage.setItem(key, value);\n}\n\nonloadPopulateWatchFilterFromLocalStorage = (getBrandLocalStorage,getModelLocalStorage) => { \n if (getBrandLocalStorage) {\n // Load Model option if Brand is in local storage\n populateModelHtml(getBrandLocalStorage, getModelLocalStorage);\n var brandValue = getBrandLocalStorage ? \"Brand: \" + getBrandLocalStorage : \"-- Select Brand --\";\n $('#jsc-brand .custom-select--button .jsc-brand-search').attr('placeholder',brandValue);\n $('.box.jsc-watch-finder--clear').show();\n $('.box.jsc-watch-finder--smart-search').show();\n \n }\n \n if (getModelLocalStorage) {\n var brandValue = getModelLocalStorage ? \"Collection: \" + getModelLocalStorage : \"-- Select Collection --\";\n $('#jsc-model .custom-select--button .jsc-model-search').attr('placeholder',brandValue);\n $('.box.jsc-watch-finder--clear').show();\n $('.box.jsc-watch-finder--smart-search').show();\n }\n}\n\nonloadPopulateReferenceFilterFromLocalStorage = (getBrandLocalStorage,getModelLocalStorage,getReferenceLocalStorage) => { \n if (getBrandLocalStorage && getModelLocalStorage) {\n // Load reference option if Brand and Model is in local storage\n populateReferenceHtml(getBrandLocalStorage,getModelLocalStorage,getReferenceLocalStorage);\n var referenceValue = \"Reference: \" + getReferenceLocalStorage;\n if (getReferenceLocalStorage) {\n $('#jsc-reference .custom-select--button .jsc-reference-search').attr('placeholder',referenceValue);\n }\n }\n\n}\nonclickBrandDropdown = () => {\n $(\"#jsc-model\").removeClass('custom-select--active');\n}\n\nonclickModelDropdown = () => { \n $(\"#jsc-brand\").removeClass('custom-select--active');\n}\n\n\nonclickReferenceDropdown = () => { \n $(\"#jsc-brand\").removeClass('custom-select--active');\n $(\"#jsc-model\").removeClass('custom-select--active');\n}\n\nonclickBrandInput = () => {\n $(\"#jsc-model\").removeClass('custom-select--active');\n $(\"#jsc-reference\").removeClass('custom-select--active');\n\n var getModelLocalStorage = localStorage.getItem('model');\n if (getModelLocalStorage){\n $('#jsc-model input').addClass('jsc-placeholder-black-color');\n }\n\n $('#jsc-brand .custom-select--list ul li').each(function() {\n $(this).show();\n });\n $('#jsc-brand').addClass('custom-select--active');\n $('#jsc-brand input').removeClass('jsc-placeholder-black-color');\n $('#jsc-brand input').val('');\n}\n\nonclickModelInput = () => {\n // Hide brand dropdown\n $(\"#jsc-brand\").removeClass('custom-select--active');\n $(\"#jsc-reference\").removeClass('custom-select--active');\n $('#jsc-model .custom-select--list ul li').each(function() {\n $(this).show();\n });\n $('#jsc-model').addClass('custom-select--active');\n $('#jsc-model input').removeClass('jsc-placeholder-black-color');\n $('#jsc-model input').val('');\n}\n\nonclickReferenceInput = () => {\n // Hide reference dropdown\n $(\"#jsc-brand\").removeClass('custom-select--active');\n $(\"#jsc-model\").removeClass('custom-select--active');\n\n $('#jsc-reference .custom-select--list ul li').each(function() {\n $(this).show();\n });\n\n $('#jsc-reference').addClass('custom-select--active');\n $('#jsc-reference input').val('');\n}\n\nbrandFilterFunction = (e) => {\n // console.log('brandFilterFunction');\n var filter = $(e).val().toUpperCase();\n $('#jsc-brand').addClass('custom-select--active');\n\n var ulElement = $('#jsc-brand .custom-select--list ul');\n ulElement.show();\n\n $('#jsc-brand .custom-select--list ul li').each(function() {\n var txtValue = $(this).text().toUpperCase();\n if (txtValue.indexOf(filter) > -1) {\n $(this).show();\n } else {\n $(this).hide();\n }\n });\n\n // Check if there are any visible list items\n var checkLiEle = ulElement.find('li:visible');\n if (checkLiEle.length === 0) {\n ulElement.hide(); // Hide the