import wixLocationFrontend from 'wix-location-frontend'; import wixData from 'wix-data'; let searchTimer; const get = (id) => { try { return $w(id); } catch (e) { return null; } }; const hide = (id) => { const el = get(id); if (!el) return; try { el.hide(); } catch (e) {} try { el.collapse(); } catch (e) {} }; const show = (id) => { const el = get(id); if (!el) return; try { el.expand(); } catch (e) {} try { el.show(); } catch (e) {} }; const go = (value) => { const q = String(value || '').trim(); if (q) wixLocationFrontend.to('/search?q=' + encodeURIComponent(q)); }; function closeAutocomplete() { ['#popularSearchTitle','#popularAnime','#popularOversized', '#popularStreetwear','#popularMinimal','#popularTypography', '#popularPolo','#loadingText','#noResults','#ratingsInput1'] .forEach(hide); hide('#searchDropdown'); } function phrase(id, label) { const el = get(id); if (!el) return; try { el.text = label; } catch (e) {} try { el.onClick(() => { setupVoiceControl(); setupUploadControl(); const input = get('#customSearchInput'); if (input) input.value = label; go(label); }); } catch (e) {} } async function autocomplete(value) { const q = String(value || '').trim(); if (q.length < 2) { closeAutocomplete(); return; } show('#searchDropdown'); hide('#ratingsInput1'); const phrases = [ ['#popularSearchTitle','Suggested searches'], ['#popularAnime','Round Neck T-Shirts'], ['#popularOversized','Oversized T-Shirts'], ['#popularStreetwear','Polo T-Shirts'], ['#popularMinimal','Dri-Fit Active T-Shirts'], ['#popularTypography','Joggers'], ['#popularPolo','Custom Gifts'] ]; phrases.forEach(([id,label]) => { if (id === '#popularSearchTitle' || label.toLowerCase().includes(q.toLowerCase())) show(id); else hide(id); }); const loading = get('#loadingText'); if (loading) { try { loading.text = 'Searching…'; } catch (e) {} show('#loadingText'); } hide('#noResults'); try { const result = await wixData.query('Stores/Products').contains('name',q).limit(3).find(); hide('#loadingText'); const repeater = get('#searchRepeater'); if (repeater && result.items.length) { repeater.onItemReady(($item,item) => { let name, price, image; try { name = $item('#productName'); } catch (e) {} try { price = $item('#productPrice'); } catch (e) {} try { image = $item('#productImage'); } catch (e) {} if (name) name.text = item.name || ''; if (price) price.text = item.formattedPrice || ''; if (image && item.mainMedia) image.src = item.mainMedia; const open = () => { if (item.slug) wixLocationFrontend.to('/product-page/' + item.slug); }; try { if (name) name.onClick(open); } catch (e) {} try { if (image) image.onClick(open); } catch (e) {} }); repeater.data = result.items; try { repeater.expand(); repeater.show(); } catch (e) {} hide('#noResults'); } else if (!result.items.length) { if (repeater) { try { repeater.data=[]; repeater.collapse(); } catch (e) {} } const empty = get('#noResults'); if (empty) { try { empty.text='No matching products'; } catch (e) {} show('#noResults'); } } } catch (e) { hide('#loadingText'); const empty = get('#noResults'); if (empty) { try { empty.text='No matching products'; } catch (err) {} show('#noResults'); } } } let voiceRecognition; function voiceMessage(message, autoHide = 0) { const status = get('#voiceListeningText'); if (!status) return; try { status.text = message; } catch (e) {} show('#voiceListeningText'); if (autoHide) setTimeout(() => hide('#voiceListeningText'), autoHide); } function setupVoiceControl() { const mic = get('#voiceMicIcon'); if (!mic) return; try { mic.accessibility.ariaLabel = 'Voice search'; } catch (e) {} try { mic.onClick(() => { if (voiceRecognition) { try { voiceRecognition.abort(); } catch (e) {} voiceRecognition = null; hide('#voiceListeningText'); return; } const scope = typeof self !== 'undefined' ? self : {}; const Recognition = scope.SpeechRecognition || scope.webkitSpeechRecognition; if (!Recognition) { voiceMessage('Voice search is not supported on this browser', 3500); return; } try { const recognition = new Recognition(); voiceRecognition = recognition; recognition.lang = 'en-IN'; recognition.interimResults = false; recognition.maxAlternatives = 1; recognition.onstart = () => voiceMessage('Listening… Speak your search'); recognition.onresult = (event) => { const spoken = event && event.results && event.results[0] && event.results[0][0] ? event.results[0][0].transcript.trim() : ''; const input = get('#customSearchInput'); if (spoken && input) { input.value = spoken; autocomplete(spoken); } }; recognition.onerror = (event) => { const code = event && event.error; const message = code === 'not-allowed' || code === 'service-not-allowed' ? 'Microphone permission was denied' : code === 'no-speech' ? 'No speech detected. Tap the microphone to try again' : code === 'aborted' ? 'Voice search cancelled' : 'Voice search could not start'; voiceMessage(message, 3500); }; recognition.onend = () => { voiceRecognition = null; setTimeout(() => hide('#voiceListeningText'), 1200); }; recognition.start(); } catch (e) { voiceRecognition = null; voiceMessage('Voice search is unavailable on this browser', 3500); } }); } catch (e) {} } function setupUploadControl() { const upload = get('#uploadButton1'); if (!upload) return; try { upload.accessibility.ariaLabel = 'Upload an image'; } catch (e) {} try { upload.onChange(async () => { if (!upload.value || !upload.value.length) return; if (upload.valid === false) { try { upload.buttonLabel = '📷 !'; } catch (e) {} return; } try { upload.buttonLabel = '…'; const files = await upload.uploadFiles(); if (!files || !files.length || !files[0].fileUrl) throw new Error('Upload failed'); upload.buttonLabel = '📷 ✓'; try { upload.tooltip = 'Image ready'; } catch (e) {} } catch (e) { try { upload.buttonLabel = '📷'; } catch (err) {} } }); } catch (e) {} } $w.onReady(() => { closeAutocomplete(); phrase('#popularSearchTitle','Suggested searches'); phrase('#popularAnime','Round Neck T-Shirts'); phrase('#popularOversized','Oversized T-Shirts'); phrase('#popularStreetwear','Polo T-Shirts'); phrase('#popularMinimal','Dri-Fit Active T-Shirts'); phrase('#popularTypography','Joggers'); phrase('#popularPolo','Custom Gifts'); const input = get('#customSearchInput'); if (!input) return; input.onInput(() => { clearTimeout(searchTimer); searchTimer=setTimeout(() => autocomplete(input.value),220); }); input.onKeyPress((event) => { if (event.key === 'Enter') go(input.value); if (event.key === 'Escape') closeAutocomplete(); }); input.onBlur(() => setTimeout(closeAutocomplete,180)); });