/* version 1.26 */ ;(async () => { async function fetchCategoryById() { const query = `query categoryById($categoryId: Int!) { site { category(entityId: $categoryId) { metafields( namespace: "algolia_bigcommerce" keys: ["instantsearch_category_facets"] ) { edges { node { key value } } } } } }` try { const bodyRequest = JSON.stringify({ query: query, variables: { categoryId: parseInt(category_id) }, }) const response = await fetch('/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${storefront_token}`, }, body: bodyRequest, }) const jsonResponse = await response.json() const edgeValue = jsonResponse.data.site.category.metafields.edges[0]?.node.value return edgeValue } catch (error) { console.error('Unable to fetch category metafields for InstantSearch facets', error) } } async function fetchParentCategoryBreadcrumbs() { if (typeof category_id === 'undefined' || category_id === '') { return [] } const query = `query { site { category(entityId: ${category_id}) { id name breadcrumbs(depth: 8) { edges { node { ... on Breadcrumb { name path } } } } } } }` try { const response = await fetch('/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${storefront_token}`, }, body: JSON.stringify({ query: query, }), }) if (response.status !== 200) { return [] } const jsonResponse = await response.json() return jsonResponse.data.site.category.breadcrumbs.edges ?? [] } catch (error) { console.error('Unable to fetch category metafields for InstantSearch facets', error) return [] } } function getIsLocale(currencyCode) { let locale switch (currencyCode.toLowerCase()) { case 'eur': locale = 'de-DE' break case 'gbp': locale = 'en-GB' break case 'afn': locale = 'af-AF' break case 'usd': default: locale = 'en-US' break } return locale } function formatIsPrice(priceList, currencyCode) { let price if (currencyCode in priceList) { price = priceList[currencyCode] } else { price = Object.values(priceList)[0] } return new Intl.NumberFormat(getIsLocale(currencyCode), { style: 'currency', currency: currencyCode, }).format(price) } function formatIsPriceRangePrice(value, compare, locale, currencyCode) { let price if (value === 0 && compare === 0) { return null } else if (value === 0 && compare > 0) { price = compare } else { price = value } return new Intl.NumberFormat(locale, { style: 'currency', currency: currencyCode, }).format(price) } function formatIsPriceRange(products, currencyCode, priceIndexField) { let min = 0 let max = 0 for (const key in products) { const currencyValue = (products[key][priceIndexField] && products[key][priceIndexField][currencyCode]) || 0 if (min === 0 || currencyValue < min) { min = currencyValue } if (max === 0 || currencyValue > max) { max = currencyValue } } const locale = getIsLocale(currencyCode) return { min: formatIsPriceRangePrice(min, max, locale, currencyCode), max: formatIsPriceRangePrice(max, min, locale, currencyCode), } } let categoryFacetsGlobal = [] const isCategoryPage = typeof page_type !== 'undefined' && page_type == 'category' && category_id !== '' && !algoliaCategoryConfig.category_ids.includes(category_id) const parentBreadCrumbs = await fetchParentCategoryBreadcrumbs() const { liteClient } = window['algoliasearch/lite'] const instantsearchClient = liteClient( algoliaInstantsearchConfig.appId, algoliaInstantsearchConfig.publicApiKey ) instantsearchClient.addAlgoliaAgent('BigCommerce Integration') const initInstantsearch = { indexName: algoliaInstantsearchConfig.indexName, searchClient: instantsearchClient, queryParameter: 'search_query', routing: true, searchFunction: function (helper) { const params = new URLSearchParams(window.location.search) const searchBoxValue = document.querySelector( '.ais-right-panel .ais-SearchBox .ais-SearchBox-input' ).value const queryParamValue = params.get('search_query') const page = helper.getPage() if (searchBoxValue && queryParamValue !== searchBoxValue) { helper.setQuery(searchBoxValue).setPage(page).search() } else if (queryParamValue && queryParamValue !== searchBoxValue) { helper.setQuery(queryParamValue).setPage(page).search() } else { helper.setQuery(searchBoxValue).setPage(page).search() } }, insights: algoliaInstantsearchConfig.isInsightsEnabled ? true : false, initialUiState: {}, } const doesCategoryFacetExist = function () { if (!isCategoryPage) { return false } const facets = categoryFacetsGlobal.length !== 0 ? categoryFacetsGlobal : algoliaInstantsearchConfig.facets for (const facet of facets) { if (facet.type === 'hierarchical_menu') { return true } } return false } const shouldWeUpdateUiState = async function () { if (!doesCategoryFacetExist()) { return } let crumbs = [] for (const breadcrumb of parentBreadCrumbs) { crumbs.push(breadcrumb.node.name) } initInstantsearch.initialUiState = { [algoliaInstantsearchConfig.indexName]: { hierarchicalMenu: { 'categories.lvl0': crumbs, }, }, } } const findObjectByLabel = (data, labelToFind) => { for (const item of data) { if (item.label === labelToFind) { return item } if (item.data && Array.isArray(item.data)) { const result = findObjectByLabel(item.data, labelToFind) if (result) { return result } } } return null } let search const { refinementList, rangeSlider, rangeInput, hierarchicalMenu, panel, clearRefinements } = instantsearch.widgets const { connectDynamicWidgets, connectCurrentRefinements } = instantsearch.connectors const hasFacetValues = function (resultState, facetName) { const isFacetValueAvailable = resultState.facets.some(function (facet) { return facet.name === facetName }) const isDisjunctiveFacetValueAvailable = resultState.disjunctiveFacets.some(function ( facet ) { return facet.name === facetName }) const isHierarchicalFacetValueAvailable = resultState.hierarchicalFacets.some(function ( facet ) { return facet.name === facetName }) return ( isFacetValueAvailable || isDisjunctiveFacetValueAvailable || isHierarchicalFacetValueAvailable ) } const widgets = [] const secondaryWidgets = [] const catStampers = [] const stampCategoryFacets = () => catStampers.forEach((fn) => fn()) async function createWidgetForFacet(facet) { const crumbs = [] let parentCrumbs = [] if (isCategoryPage) { parentCrumbs = parentBreadCrumbs } for (const crumb of parentCrumbs) { crumbs.push(crumb.node.name) } switch (facet.type) { case 'slider': const sliderPanel = panel({ hidden(options) { return !hasFacetValues(options.results, facet.attribute) }, templates: { header(options, { html }) { if (options.results) { return html`` } }, }, container: document.createElement('div'), })(rangeSlider) widgets[facet.attribute] = { widget: (container) => sliderPanel({ attribute: facet.attribute, container }), container: document.createElement('div'), } break case 'input': const inputPanel = panel({ hidden(options) { return !hasFacetValues(options.results, facet.attribute) }, templates: { header(options, { html }) { if (options.results) { return html`` } }, }, container: document.createElement('div'), })(rangeInput) widgets[facet.attribute] = { widget: (container) => inputPanel({ attribute: facet.attribute, container, }), container: document.createElement('div'), } break case 'slider_range_combo': const sliderComboPanel = panel({ hidden(options) { return !hasFacetValues(options.results, facet.attribute) }, templates: { header(options, { html }) { if (options.results) { return html`` } }, }, container: document.createElement('div'), })(rangeSlider) widgets[facet.attribute] = { widget: (container) => sliderComboPanel({ attribute: facet.attribute, container }), container: document.createElement('div'), } secondaryWidgets[facet.attribute] = { widget: (container) => rangeInput({ attribute: facet.attribute, container, }), container: document.createElement('div'), } break case 'disjunctive': case 'conjunctive': const listPanel = panel({ hidden(options) { return !hasFacetValues(options.results, facet.attribute) }, templates: { header(options, { html }) { if (options.results) { return html`` } }, }, container: document.createElement('div'), })(refinementList) widgets[facet.attribute] = { widget: (container) => listPanel({ attribute: facet.attribute, container: container, operator: facet.type === 'disjunctive' ? 'or' : 'and', searchable: facet.searchable ?? false, limit: algoliaInstantsearchConfig.facetOptionLimit, }), container: document.createElement('div'), } break case 'hierarchical_menu': { const catContainer = document.createElement('div') let catFlat = [] catStampers.push(() => { const n = catContainer.querySelectorAll('.ais-HierarchicalMenu-item') if (n.length !== catFlat.length) return console.warn('[cat facet] mismatch') n.forEach((li, i) => { const it = catFlat[i] li.dataset.catpath = it.value li.dataset.catlabel = it.label li.dataset.catlevel = it.level li.dataset.catcount = it.count li.dataset.catrefined = it.isRefined ? '1' : '0' }) }) const hierarchicalMenuPanel = panel({ templates: { header(options) { if (options.results) { return `` } }, }, hidden({ items }) { return items.length === 0 }, container: document.createElement('div'), })(hierarchicalMenu) widgets[facet.attribute] = { widget: (container) => hierarchicalMenuPanel({ container, attributes: [ 'categories.lvl0', 'categories.lvl1', 'categories.lvl2', 'categories.lvl3', 'categories.lvl4', 'categories.lvl5', 'categories.lvl6', 'categories.lvl7', ], separator: ' > ', rootPath: crumbs.join(' > '), transformItems(items) { catFlat = [] const flatten = (list, level = 0) => list.forEach((i) => { catFlat.push({ value: i.value, label: i.label, count: i.count, level, isRefined: i.isRefined, }) if (i.data) flatten(i.data, level + 1) }) flatten(items) return items }, }), container: catContainer, } break } } } async function loadDefaultFacets() { for (const facet of algoliaInstantsearchConfig.facets) { await createWidgetForFacet(facet) } } async function loadCategoryFacets() { const categoryFacets = await fetchCategoryById() if (categoryFacets) { categoryFacetsGlobal = JSON.parse(categoryFacets) } if (categoryFacetsGlobal.length === 0) { await loadDefaultFacets() return } for (const facet of categoryFacetsGlobal) { await createWidgetForFacet(facet) } } async function shouldWeLoadFacets() { if (isCategoryPage) { await loadCategoryFacets() } else { await loadDefaultFacets() } } const renderDynamicWidgets = (renderOptions, isFirstRender) => { let { attributesToRender, widgetParams } = renderOptions if (isFirstRender) { const ul = document.createElement('ul') ul.classList.add('ais-FacetList') widgetParams.container.appendChild(ul) } const ul = widgetParams.container.querySelector('ul') ul.innerHTML = '' if (isCategoryPage && categoryFacetsGlobal.length !== 0) { attributesToRender = categoryFacetsGlobal.map((facet) => facet.attribute) } attributesToRender.forEach((attribute) => { if (!widgets[attribute]) { return } const facetContainer = widgets[attribute].container ul.appendChild(facetContainer) }) } const customDynamicWidgets = connectDynamicWidgets(renderDynamicWidgets) const renderSecondaryWidgets = (renderOptions) => { const { attributesToRender } = renderOptions attributesToRender.forEach((attribute) => { if (!secondaryWidgets[attribute]) { return } const container = widgets[attribute].container.querySelector( '.ais-Panel .ais-Panel-body' ) if (!container) { return } const facetContainer = secondaryWidgets[attribute].container container.appendChild(facetContainer) }) } const customSecondaryWidgets = connectDynamicWidgets(renderSecondaryWidgets) const createDataAttribtues = (refinement) => Object.keys(refinement) .map((key) => `data-${key}="${refinement[key]}"`) .join(' ') const getFacetName = (label) => { let facet if (isCategoryPage && categoryFacetsGlobal.length !== 0) { facet = categoryFacetsGlobal.find((categoryFacet) => { return label.includes(categoryFacet.attribute) }) } else { facet = algoliaInstantsearchConfig.facets.find((configFacet) => { if ( configFacet.attribute === 'categories' && label.split('.')[0] === 'categories' ) { return true } if (configFacet.attribute === label) { return true } return false }) } return facet ? facet.title : '' } const renderListItem = (item) => ` ${item.refinements .map( (refinement) => `

${getFacetName( item.label )}: ${ refinement.label }

` ) .join('')} ` const renderCurrentRefinements = (renderOptions) => { const { items, refine, widgetParams } = renderOptions widgetParams.container.innerHTML = `

${items.map(renderListItem).join('')} ` ;[...widgetParams.container.querySelectorAll('button')].forEach((element) => { element.addEventListener('click', (event) => { const item = Object.keys(event.currentTarget.dataset).reduce( (acc, key) => ({ ...acc, [key]: event.currentTarget.dataset[key], }), {} ) refine(item) }) }) } const customCurrentRefinements = connectCurrentRefinements(renderCurrentRefinements) let instantsearchFilters = [`is_visible=1`] if (!algoliaInstantsearchConfig.showOutOfStockItems) { instantsearchFilters.push('in_stock>0') } if (typeof page_type !== 'undefined' && page_type === 'category') { instantsearchFilters.push( `category_ids:"${category_id}"` ) } /*instantsearchFilters = algoliaInstantsearchConfig.hooks.triggerHooks( 'instantSearchFiltersArray', instantsearchFilters );*/ function createIsHitTemplateHtml(hit, html, sendEvent) { let addToCartParam let price let salesPrice if (algoliaInstantsearchConfig.recordType === 'variant') { addToCartParam = `sku=${hit.sku}` price = formatIsPrice( hit.prices, algoliaInstantsearchConfig.currentCurrencyCode ) salesPrice = formatIsPrice( hit.sales_prices, algoliaAutocompleteConfig.currentCurrencyCode ) } else if (algoliaInstantsearchConfig.recordType === 'product') { addToCartParam = `product_id=${hit.objectID}` const priceRange = formatIsPriceRange( hit.variants, algoliaInstantsearchConfig.currentCurrencyCode, 'prices' ) const salesRange = formatIsPriceRange( hit.variants, algoliaInstantsearchConfig.currentCurrencyCode, 'sales_prices' ) if (priceRange.min === null && priceRange.max === null) { price = `View For Pricing` } else if (priceRange.min !== priceRange.max) { price = `${priceRange.min} - ${priceRange.max}` } else { price = priceRange.min } if (salesRange.min !== salesRange.max) { salesPrice = `${salesRange.min} - ${salesRange.max}` } else { salesPrice = salesRange.min } } let pricingHtml = html`

${price}

` if (salesPrice && salesPrice > 0) { pricingHtml = html`

${price} ${salesPrice}

` } //FORIX CUSTOM GA4 const hitCategories = hit.categories || {}; const allCats = []; [hitCategories.lvl0, hitCategories.lvl1, hitCategories.lvl2, hitCategories.lvl3, hitCategories.lvl4] .forEach(lvl => { const arr = Array.isArray(lvl) ? lvl : (lvl ? [lvl] : []); arr.forEach(c => { const leaf = c.split(' > ').pop().trim(); if (leaf && !allCats.includes(leaf)) { allCats.push(leaf); } }); }); const filteredCats = allCats.filter(cat => !allCats.some(other => other !== cat && other.length > cat.length && other.includes(cat)) ); const hitCategoryStr = filteredCats.slice(0, 5).join('|'); const imageLoading = hit.shouldLazyLoad ? 'lazy' : 'eager' const fetchPriority = hit.shouldLazyLoad ? 'auto' : 'high' const thumbnailImage = hit.product_images?.find(image => image.is_thumbnail)?.url_thumbnail const imageUrl = thumbnailImage || hit.image_url return html`

${hit.name}

${pricingHtml} Add to cart ` } function addInstantsearchWidgets() { search.addWidgets([ instantsearch.widgets.searchBox({ container: '#searchbox', placeholder: 'Search...', searchAsYouType: true, }), instantsearch.widgets.infiniteHits({ container: '#infinite-hits', transformItems(items, { results }) { return items.map((item, index) => ({ ...item, queryID: results.queryID, shouldLazyLoad: index > 3, })); }, templates: { item(hit, { html, sendEvent }) { return createIsHitTemplateHtml(hit, html, sendEvent) }, }, }), hierarchicalMenu({ container: '#dynamic-widgets', attributes: [ 'categories.lvl0', 'categories.lvl1', 'categories.lvl2', 'categories.lvl3', 'categories.lvl4', 'categories.lvl5', 'categories.lvl6', 'categories.lvl7' ], }), customDynamicWidgets({ container: document.querySelector('#dynamic-widgets'), widgets: Object.values(widgets).map(({ widget, container }) => { return widget(container) }), }), instantsearch.widgets.stats({ container: '#stats', templates: { text: function (data) { if (data.nbHits > 0) { return ( data.nbHits + ' results found in ' + data.processingTimeMS + ' ms' ) } }, }, }), customDynamicWidgets({ container: document.querySelector('#dynamic-widgets'), widgets: Object.values(widgets).map(({ widget, container }) => widget(container)), }), customCurrentRefinements({ container: document.querySelector('#current-refinements'), }), clearRefinements({ container: '#clear-refinements', templates: { resetLabel: 'Clear All', }, }), customSecondaryWidgets({ container: document.createElement('div'), widgets: Object.values(secondaryWidgets).map(({ widget, container }) => widget(container) ), }), instantsearch.widgets.configure({ hitsPerPage: algoliaInstantsearchConfig.hitsPerPage, distinct: true, filters: instantsearchFilters.join(' AND '), facetingAfterDistinct: true, }), ]) if (algoliaInstantsearchConfig.sortOrders.length > 1) { search.addWidgets([ instantsearch.widgets.sortBy({ container: '.ais-sort-orders-container', items: algoliaInstantsearchConfig.sortOrders, }), ]) } } function attachInstantSearchDOMEvents() { document.querySelector('.ais-SearchBox-reset').addEventListener('click', () => { document.querySelector('.ais-right-panel .ais-SearchBox .ais-SearchBox-input').value = '' }) } await shouldWeLoadFacets() await shouldWeUpdateUiState() const instantSearchInitOptions = algoliaInstantsearchConfig.hooks.triggerHooks( 'instantSearchInitOptions', initInstantsearch ); search = instantsearch(instantSearchInitOptions) addInstantsearchWidgets() const instantSearchResultsPage = document.querySelector( '.page--search-results' ) console.log('instantSearchResultsPage', instantSearchResultsPage); let isRedirectingFromRule = false let redirectRevealTimeout if (instantSearchResultsPage) { instantSearchResultsPage.classList.add('algolia-redirect-pending') const redirectPendingStyle = document.createElement('style') redirectPendingStyle.textContent = '.page--search-results.algolia-redirect-pending { visibility: hidden; }' document.head.appendChild(redirectPendingStyle) redirectRevealTimeout = window.setTimeout(() => { revealInstantSearchResults() }, 3000) } function revealInstantSearchResults() { if (isRedirectingFromRule) { return } window.clearTimeout(redirectRevealTimeout) instantSearchResultsPage?.classList.remove('algolia-redirect-pending') } function getRuleRedirectUrl(redirect) { const rawUrl = typeof redirect === 'string' ? redirect : redirect?.url if (!rawUrl || isRedirectingFromRule) { return null } try { const targetUrl = new URL(rawUrl, window.location.origin) if ( targetUrl.origin !== window.location.origin || targetUrl.pathname === window.location.pathname ) { return null } return targetUrl.href } catch (error) { console.warn('Ignoring invalid Algolia redirect URL', rawUrl) return null } } function redirectFromRule(redirect) { const targetUrl = getRuleRedirectUrl(redirect) if (!targetUrl) { return false } isRedirectingFromRule = true window.clearTimeout(redirectRevealTimeout) window.location.assign(targetUrl) return true } const queryRuleCustomDataContainer = document.createElement('div') queryRuleCustomDataContainer.id = 'algolia-query-rule-custom-data' queryRuleCustomDataContainer.hidden = true document.body.appendChild(queryRuleCustomDataContainer) search.addWidgets([ instantsearch.widgets.queryRuleCustomData({ container: '#algolia-query-rule-custom-data', templates: { default: '', }, transformItems(items) { const redirectData = items.find(item => Boolean(item.redirect)) if (redirectData) { redirectFromRule(redirectData.redirect) } return [] }, }), { render({ results }) { const redirected = redirectFromRule( results?.renderingContent?.redirect ) if (!redirected) { revealInstantSearchResults() } }, }, ]) // FORIX CUSTOM MOBILE FILTER - START function initMobileFilterSidebar() { const breakpoint = 749 const leftPanel = document.querySelector('.ais-left-panel') const searchBox = document.querySelector('#searchbox') const searchResultsPage = document.querySelector( '.page--search-results' ) if (!leftPanel || !searchBox || !searchResultsPage) { return } if ( document.querySelector( 'page-sidebar-opener[data-sidebar="#search-filters-container"]' ) ) { return } const originalParent = leftPanel.parentNode const originalNextSibling = leftPanel.nextSibling const triggerWrapper = document.createElement('div') triggerWrapper.innerHTML = ` ` const trigger = triggerWrapper.firstElementChild searchBox.parentNode.insertBefore(trigger, searchBox) const sidebarWrapper = document.createElement('div') sidebarWrapper.innerHTML = ` ` const sidebar = sidebarWrapper.firstElementChild searchResultsPage.appendChild(sidebar) const sidebarBody = sidebar.querySelector( '[data-search-filter]' ) const triggerButton = trigger.querySelector( '.page-sidebar-opener__button' ) const closeButton = sidebar.querySelector( '.page-sidebar-close__button' ) function openSidebar() { sidebar.classList.add('is-open') document.body.classList.add('open-sidebar') triggerButton.setAttribute('aria-expanded', 'true') } function closeSidebar() { sidebar.classList.remove('is-open') document.body.classList.remove('open-sidebar') triggerButton.setAttribute('aria-expanded', 'false') } triggerButton.addEventListener('click', openSidebar) closeButton.addEventListener('click', closeSidebar) function updateFilterPosition() { if (window.innerWidth <= breakpoint) { if (leftPanel.parentNode !== sidebarBody) { sidebarBody.appendChild(leftPanel) } return } closeSidebar() if (leftPanel.parentNode === sidebarBody) { if ( originalNextSibling && originalNextSibling.parentNode === originalParent ) { originalParent.insertBefore( leftPanel, originalNextSibling ) } else { originalParent.appendChild(leftPanel) } } } updateFilterPosition() window.addEventListener('resize', updateFilterPosition) } // FORIX CUSTOM MOBILE FILTER - END search.start() initMobileFilterSidebar() search.on('render', stampCategoryFacets) stampCategoryFacets() let rendered = false search.on('render', function () { if (!rendered) { const sortByContent = document.querySelector('.ais-sort-orders-container') if ( sortByContent.innerHTML.includes('class="ais-SortBy"') && !sortByContent.innerHTML.includes('Sort By') ) { sortByContent.innerHTML = '' sortByContent.innerHTML = 'Sort By' + sortByContent.innerHTML rendered = true } } }) attachInstantSearchDOMEvents() const customPriceRangeCache = new Map() const customVariantCountCache = new Map() let customPriceRangeRequestInFlight = false let customPriceRangeQueued = false function customFormatPriceRangeValue(value, currencyCode) { return new Intl.NumberFormat(getIsLocale(currencyCode), { style: 'currency', currency: currencyCode, }).format(value) } function customGetProductIdFromHit(hit) { const productTag = hit._tags?.find(tag => tag.startsWith('product:') ) return productTag ? productTag.replace('product:', '') : null } async function customLoadProductData( productIds, currencyCode ) { const uniqueProductIds = [ ...new Set(productIds), ] const uncachedProductIds = uniqueProductIds.filter(productId => { const priceCacheKey = productId + ':' + currencyCode return ( !customPriceRangeCache.has( priceCacheKey ) || !customVariantCountCache.has( productId ) ) }) if (!uncachedProductIds.length) { return } const productFilters = uncachedProductIds .map( productId => `_tags:"product:${productId}"` ) .join(' OR ') try { const { results } = await instantsearchClient.search([ { indexName: algoliaInstantsearchConfig.indexName, params: { query: '', // Do not use in_stock here. // We need all variants to know // whether the product has options. filters: `(${productFilters}) ` + `AND is_visible=1`, hitsPerPage: 1000, attributesToRetrieve: [ '_tags', 'sku', 'in_stock', 'calculated_prices', 'prices', ], analytics: false, clickAnalytics: false, }, }, ]) const groupedPrices = new Map() const groupedVariantCounts = new Map() ;(results[0]?.hits || []).forEach(hit => { const productId = customGetProductIdFromHit(hit) if (!productId) { return } // Count all variants groupedVariantCounts.set( productId, ( groupedVariantCounts.get( productId ) || 0 ) + 1 ) // Price range still only uses // available variants. const isInStock = typeof hit.in_stock === 'number' ? hit.in_stock > 0 : typeof hit.in_stock === 'boolean' ? hit.in_stock : true if (!isInStock) { return } const value = hit.calculated_prices?.[ currencyCode ] ?? hit.prices?.[ currencyCode ] if ( typeof value !== 'number' || !Number.isFinite(value) ) { return } if ( !groupedPrices.has(productId) ) { groupedPrices.set( productId, [] ) } groupedPrices .get(productId) .push(value) }) uncachedProductIds.forEach( productId => { const variantCount = groupedVariantCounts.get( productId ) || 0 customVariantCountCache.set( productId, variantCount ) const values = groupedPrices.get( productId ) || [] const cacheKey = productId + ':' + currencyCode if (!values.length) { customPriceRangeCache.set( cacheKey, null ) return } const min = Math.min( ...values ) const max = Math.max( ...values ) const priceRange = min === max ? customFormatPriceRangeValue( min, currencyCode ) : ( customFormatPriceRangeValue( min, currencyCode ) + ' - ' + customFormatPriceRangeValue( max, currencyCode ) ) customPriceRangeCache.set( cacheKey, priceRange ) } ) } catch (error) { console.error( 'Unable to load product variant/price data', error ) } } function customApplyCachedPriceRange( card, currencyCode ) { const priceElement = card.querySelector( '.aa-ItemContentPrice' ) const cartElement = card.querySelector( '.aa-ItemActionButton[data-parent-product-id]' ) if (!priceElement || !cartElement) { return true } const productId = cartElement.dataset.parentProductId if (!productId) { return true } const cacheKey = productId + ':' + currencyCode if ( !customPriceRangeCache.has( cacheKey ) ) { return false } const priceRange = customPriceRangeCache.get( cacheKey ) if (priceRange) { priceElement.dataset.productPriceRange = priceRange if ( priceElement.textContent !== priceRange ) { priceElement.textContent = priceRange } } priceElement.dataset.priceRangeState = 'loaded' return true } function customUpdateProductButton(card) { const button = card.querySelector( '.aa-ItemActionButton[data-parent-product-id]' ) if (!button) { return } const productId = button.dataset.parentProductId if (!productId) { return } if ( !customVariantCountCache.has( productId ) ) { return } const variantCount = customVariantCountCache.get( productId ) if (variantCount > 1) { button.textContent = 'Choose Options' button.dataset.chooseOptions = 'true' const productUrl = button.dataset.productUrl if (productUrl) { button.setAttribute( 'href', productUrl ) } return } button.textContent = 'Add to cart' button.dataset.chooseOptions = 'false' } async function customUpdateProductPriceRanges() { if ( customPriceRangeRequestInFlight ) { customPriceRangeQueued = true return } const currencyCode = algoliaInstantsearchConfig .currentCurrencyCode const cards = [ ...document.querySelectorAll( '.ais-InfiniteHits-item' ), ] if (!cards.length) { return } const productIdsToLoad = [] cards.forEach(card => { const cartElement = card.querySelector( '.aa-ItemActionButton[data-parent-product-id]' ) if (!cartElement) { return } const productId = cartElement.dataset .parentProductId if (!productId) { return } customApplyCachedPriceRange( card, currencyCode ) customUpdateProductButton( card ) const priceCacheKey = productId + ':' + currencyCode if ( !customPriceRangeCache.has( priceCacheKey ) || !customVariantCountCache.has( productId ) ) { const priceElement = card.querySelector( '.aa-ItemContentPrice' ) if (priceElement) { priceElement.dataset .priceRangeState = 'loading' } productIdsToLoad.push( productId ) } }) if (!productIdsToLoad.length) { return } customPriceRangeRequestInFlight = true try { await customLoadProductData( productIdsToLoad, currencyCode ) cards.forEach(card => { customApplyCachedPriceRange( card, currencyCode ) customUpdateProductButton( card ) }) } finally { customPriceRangeRequestInFlight = false if (customPriceRangeQueued) { customPriceRangeQueued = false customUpdateProductPriceRanges() } } } search.on( 'render', customUpdateProductPriceRanges ) customUpdateProductPriceRanges() })()

Sight Installation Tools

Filter & Sort

You can compare up to 4 items at a time.

Not Sure Which Sight Is Right For You?

Need help with Installation?

Fast Shipping

American Made

Safe Payments

Amazing Selection