- document.addEventListener('alpine:init', () => { Alpine.data('predictiveSearch', () => ({ dropdown_open: false, query: '', loading_suggestions: false, preferred_suggestion_count: 10, suggestions: [], open() { if (this.dropdown_open || !this.query.length) return; this.dropdown_open = true; }, close(focusAfter) { if (!this.dropdown_open) return; this.dropdown_open = false; focusAfter && focusAfter.focus && focusAfter.focus() }, async getSuggestions(query) { const vm = this; // abort any previous requests still in progress if (vm.fetchController) { vm.fetchController.abort(); } if (!query.length) { vm.query = ''; vm.close(vm.$refs.searchInput); return; } const reqBody = { billable_account_id: '36124', search_limit: vm.preferred_suggestion_count, search_term: vm.query, } try { vm.fetchController = new AbortController(); const params = new URLSearchParams(reqBody).toString(); const url = `/api/internal/wf-appliance/predictive-search-terms-get?API_KEY=WSKYRINYDNCQUADFAKXHUQSABSPHABPYTICFKKYOVDTPWYNSAJJTJMHGBAGU&${params}`; const res = await fetch(url, { signal: vm.fetchController.signal } ); if (!res.ok) throw new Error('Predictive search endpoint not found'); const { success, suggested_terms } = await res.json(); if (!success) throw new Error('Error predicting search terms'); if (!suggested_terms.length) return vm.close(vm.$refs.searchInput); vm.suggestions = suggested_terms.map(term => term.toLowerCase()); if (!vm.dropdown_open) vm.open(); } catch (err) { if (err.name === 'AbortError') { return; } vm.suggestions = []; vm.close(vm.$refs.searchInput); } }, onSuggestionClick(suggestion) { this.close(); this.query = suggestion; this.$nextTick(() => this.$refs.searchForm.submit()) }, highlightNonMatchingSubstring(suggestion) { const query = this.query.toLowerCase(); const suggestionLowercase = suggestion.toLowerCase(); // check if the suggestion exactly matches the query if (suggestionLowercase === query) { return ` <span>${suggestion} >`; } // check if the suggestion starts with the query if (suggestionLowercase.indexOf(query) === 0) { const nonMatching = suggestion.substring(query.length); return ` <
- span>${query}Financing< strong>${nonMatching} > >`; } // highlight non-matching substrings const normalizedQuery = query.replaceAll('(', '').replaceAll(')', '').replaceAll('[', '').replaceAll(']', '').replaceAll('\\', ''); const regex = new RegExp(`(?!${normalizedQuery})\\b\\w+\\b`, 'gi'); const highlighted = suggestion.replace(regex, ' <strong>$&Shop by Brand>'); return ` <span>${highlighted}
-
Shopping Cart
0
-
.loading-spinner__circle-svg {
animation: loading-spinner-rotate 1.28973s linear infinite;
transform-origin: center center;
height: 100%;
width: 100%;
margin: auto;
}
.loading-spinner__circle-stroke {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
animation: loading-spinner-dash 2s ease-in-out infinite;
stroke-linecap: round;
stroke-width: 4px;
}
@keyframes loading-spinner-rotate {
100% { transform: rotate(360deg) }
}
@keyframes loading-spinner-dash {
0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0 }
50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px }
100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px }
}
-
There are no items in your shopping cart.
document.addEventListener('alpine:init', () => {
Alpine.data('predictiveSearch', () => ({
dropdown_open: false,
query: '',
loading_suggestions: false,
preferred_suggestion_count: 10,
suggestions: [],
open() {
if (this.dropdown_open || !this.query.length) return;
this.dropdown_open = true;
},
close(focusAfter) {
if (!this.dropdown_open) return;
this.dropdown_open = false;
focusAfter && focusAfter.focus && focusAfter.focus()
},
async getSuggestions(query) {
const vm = this;
// abort any previous requests still in progress
if (vm.fetchController) {
vm.fetchController.abort();
}
if (!query.length) {
vm.query = '';
vm.close(vm.$refs.searchInput);
return;
}
const reqBody = {
billable_account_id: '36124',
search_limit: vm.preferred_suggestion_count,
search_term: vm.query,
}
try {
vm.fetchController = new AbortController();
const params = new URLSearchParams(reqBody).toString();
const url = `/api/internal/wf-appliance/predictive-search-terms-get?API_KEY=WSKYRINYDNCQUADFAKXHUQSABSPHABPYTICFKKYOVDTPWYNSAJJTJMHGBAGU&${params}`;
const res = await fetch(url,
{ signal: vm.fetchController.signal }
);
if (!res.ok) throw new Error('Predictive search endpoint not found');
const { success, suggested_terms } = await res.json();
if (!success) throw new Error('Error predicting search terms');
if (!suggested_terms.length) return vm.close(vm.$refs.searchInput);
vm.suggestions = suggested_terms.map(term => term.toLowerCase());
if (!vm.dropdown_open) vm.open();
} catch (err) {
if (err.name === 'AbortError') {
return;
}
vm.suggestions = [];
vm.close(vm.$refs.searchInput);
}
},
onSuggestionClick(suggestion) {
this.close();
this.query = suggestion;
this.$nextTick(() => this.$refs.searchForm.submit())
},
highlightNonMatchingSubstring(suggestion) {
const query = this.query.toLowerCase();
const suggestionLowercase = suggestion.toLowerCase();
// check if the suggestion exactly matches the query
if (suggestionLowercase === query) {
return `<
span>${suggestion} -
- `;
}
// check if the suggestion starts with the query
if (suggestionLowercase.indexOf(query) === 0) {
const nonMatching = suggestion.substring(query.length);
return `< span>${query}
-
.loading-spinner__circle-svg {
animation: loading-spinner-rotate 1.28973s linear infinite;
transform-origin: center center;
height: 100%;
width: 100%;
margin: auto;
}
.loading-spinner__circle-stroke {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
animation: loading-spinner-dash 2s ease-in-out infinite;
stroke-linecap: round;
stroke-width: 4px;
}
@keyframes loading-spinner-rotate {
100% { transform: rotate(360deg) }
}
@keyframes loading-spinner-dash {
0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0 }
50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px }
100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px }
}
Search
Regular Price
Lettner Light Gray Collection