/* version 1.27 - added mobile filters toggle */ ;(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 = [] 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 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) { return items.map((item) => ({ ...item, label: item.label, })) }, }), container: document.createElement('div'), } 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}"` ) } 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}

` } return html`

${hit.name}

${pricingHtml} Add to cart ` } function addInstantsearchWidgets() { search.addWidgets([ instantsearch.widgets.searchBox({ container: '#searchbox', placeholder: 'Search...', searchAsYouType: true, }), /* CHANGED: infiniteHits -> hits (paginated results instead of Load More) */ instantsearch.widgets.hits({ container: '#infinite-hits', transformItems(items, { results }) { return items.map(item => ({ ...item, queryID: results.queryID, })); }, templates: { item(hit, { html, sendEvent }) { return createIsHitTemplateHtml(hit, html, sendEvent) }, }, /* Keep the existing class names so your theme CSS (built around ais-InfiniteHits*) doesn't need to change */ cssClasses: { root: 'ais-InfiniteHits', list: 'ais-InfiniteHits-list', item: 'ais-InfiniteHits-item', }, }), /* NEW: pagination widget - uses the existing #pagination container already in the theme HTML */ instantsearch.widgets.pagination({ container: '#pagination', scrollTo: '#infinite-hits', showFirst: true, showLast: true, padding: 2, }), 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: algoliaInstantsearchConfig.isDistinct, filters: instantsearchFilters.join(' AND '), facetingAfterDistinct: algoliaInstantsearchConfig.isDistinct ? true : false, }), ]) 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 = '' }) } /* NEW: sidebar filter accordion — click a .ais-Panel-header to toggle its .ais-Panel-body open/closed. Uses event delegation on the left panel so it keeps working even as facet panels are added/re-rendered dynamically. */ function attachAccordionEvents() { const sidebar = document.querySelector('.ais-left-panel') || document.body sidebar.addEventListener('click', (event) => { const header = event.target.closest('.ais-Panel-header') if (!header) { return } const panel = header.closest('.ais-Panel') if (!panel) { return } panel.classList.toggle('is-open') }) } /* NEW: mobile "Filters" toggle — collapses the whole sidebar behind one button, matching the reference site's mobile filter UX. */ function attachFiltersToggle() { if (document.querySelector('.xcal-filters-toggle')) { return } const sidebar = document.querySelector('.ais-left-panel') if (!sidebar) { return } const toggle = document.createElement('button') toggle.type = 'button' toggle.className = 'xcal-filters-toggle' toggle.setAttribute('aria-expanded', 'false') toggle.innerHTML = ` Filters ` toggle.addEventListener('click', () => { const isOpen = sidebar.classList.toggle('xcal-filters-open') toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false') }) sidebar.parentNode.insertBefore(toggle, sidebar) } await shouldWeLoadFacets() await shouldWeUpdateUiState() const instantSearchInitOptions = algoliaInstantsearchConfig.hooks.triggerHooks( 'instantSearchInitOptions', initInstantsearch ); search = instantsearch(instantSearchInitOptions) addInstantsearchWidgets() search.start() 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() attachAccordionEvents() attachFiltersToggle() })()

LEU 186746 CHEYENNE MATTE BLACK BLUE MIRROR

Leupold & Stevens

Related Products

LEU 186754 TRACER MATTE BLACK BLUE MIRROR

LEU 186741 SWITCHBACK MATTE BLACK BLUE MIRROR

LEU 186749 SKYLINE MATTE BLACK BLUE MIRROR

LEU 186745 CHEYENNE MATTE BLACK DAYLIGHT MAX

LEU 186743 SWITCHBACK MATTE BLACK BRZ MIRROR