/* version 1.24 */ ;(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 instantsearchClient = algoliasearch( algoliaInstantsearchConfig.appId, algoliaInstantsearchConfig.publicApiKey ) instantsearchClient.initIndex(algoliaInstantsearchConfig.indexName) instantsearchClient.addAlgoliaAgent('BigCommerce Integration') const initInstantsearch = { indexName: algoliaInstantsearchConfig.indexName, searchClient: instantsearchClient, queryParameter: 'search_query', // routing: { // router: instantsearch.routers.history(), // stateMapping: { // stateToRoute(uiState) { // return { // page: uiState.BigCommerce?.page || 1, // }; // }, // routeToState(routeState) { // return { // products: { // page: routeState.page || 1, // }, // }; // }, // }, // }, routing: { router: instantsearch.routers.history( { parseURL({ qsModule }) { const routeState = qsModule.parse(location.search.slice(1)); return { ...routeState, _collections: routeState._collections ? ensureArray(routeState._collections) : undefined, brand_name: routeState.brand_name ? ensureArray(routeState.brand_name) : undefined, query: routeState.search_query, }; }, createURL({ qsModule, location, routeState }) { const { origin, pathname, hash, search } = location; const queryParameters = qsModule.parse(search.slice(1)) || {}; Object.assign(queryParameters, routeState); let queryString = qsModule.stringify(queryParameters); if(queryString.length){ queryString = `?${queryString}`; } return `${origin}${pathname}${queryString}${hash}`; }, } ), stateMapping: { stateToRoute(uiState) { const indexUiState = uiState[algoliaInstantsearchConfig.indexName] || {}; return { page: indexUiState.page || undefined, ...indexUiState.refinementList, }; }, routeToState(routeState) { const refinementList = Object.assign({}, routeState); delete refinementList['query']; delete refinementList['search_query']; return { [algoliaInstantsearchConfig.indexName]: { page: routeState.page || undefined, query: routeState.query || '', refinementList: { ...routeState, }, hierarchicalMenu: initInstantsearch?.initialUiState[algoliaInstantsearchConfig.indexName]?.hierarchicalMenu }, }; }, }, }, // routing: true, // routing: { // router: instantsearch.routers.history({ // createURL({ qsModule, location, routeState }) { // const { origin, pathname, hash, search } = location; // const currentQuery = qsModule.parse(search.slice(1)) || {}; // const { // BigCommerce, // ...flatParams // } = routeState; // // Always keep existing rebate* params // Object.keys(currentQuery).forEach(key => { // if (key.startsWith('rebate')) { // flatParams[key] = currentQuery[key]; // } // }); // // If Algolia has state, include it // if (BigCommerce && Object.keys(BigCommerce).length) { // const queryString = qsModule.stringify( // { // ...flatParams, // BigCommerce, // }, // { encode: false } // ); // return `${origin}${pathname}?${queryString}${hash}`; // } // // No Algolia state → remove Algolia but keep flat params // const queryString = qsModule.stringify(flatParams); // return `${origin}${pathname}${queryString ? `?${queryString}` : ''}${hash}`; // }, // }), // stateMapping: { // stateToRoute(uiState) { // const indexUiState = uiState.BigCommerce || {}; // return { // // Existing extracted params (unchanged) // page: indexUiState.page || undefined, // rebate_tag: // indexUiState.refinementList?.['custom_fields.rebate_tag']?.[0] || // undefined, // brand_name: // indexUiState.refinementList?.['brand_name']?.[0] || undefined, // _collections: // indexUiState.refinementList?.['_collections']?.[0] || undefined, // // Full Algolia state for routing // BigCommerce: indexUiState, // }; // }, // routeToState(routeState) { // // Prefer Algolia state if present // if (routeState.BigCommerce) { // return { // BigCommerce: routeState.BigCommerce, // }; // } // // Fallback for legacy URLs // return { // BigCommerce: { // page: routeState.page || undefined, // refinementList: { // 'custom_fields.rebate_tag': routeState.rebate_tag // ? [routeState.rebate_tag] // : [], // brand_name: routeState.brand_name // ? [routeState.brand_name] // : [], // _collections: routeState._collections // ? [routeState._collections] // : [], // }, // }, // }; // }, // }, // }, /* 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() // const pageParamValue = params.get('page') ?? '0'; 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() } /*if (searchBoxValue !== queryParamValue) { helper.setQuery(searchBoxValue).search() } else { helper.setPage(pageParamValue).search() } },*/ insights: algoliaInstantsearchConfig.isInsightsEnabled ? true : false, initialUiState: {}, } function ensureArray(value) { if (Array.isArray(value)) { return value; } return value ? [value] : []; } 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 refinementListMira = (params) => refinementList({ ...params, templates: { item(item, {html}) { const {label, count, isRefined} = item; if(label === 'false') { return null; } return html`In-Stock Only ${count}`; } } }); 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`` } }, item(item, { html }) { // item: ({ label, count }) => `${label === 'true' ? 'Con stock' : 'Sin stock'} (${count})`, const { url, label, count, isRefined } = item; return html`${label === 'true' ? 'Con stock' : 'Sin stock'} (${count})` } }, container: document.createElement('div'), })(facet.title === 'In Stock' ? refinementListMira : 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) => `

${!Boolean(item.hideLabel) ? `${getFacetName(item.label)}:` : ''} ${refinement.label}

` ) .join('')} ` const renderCurrentRefinements = (renderOptions) => { const { items: originalItems, refine, widgetParams } = renderOptions; const items = originalItems.map((item) => { if(item.attribute !== 'in_stock') { return item; } return { ...item, hideLabel: true, refinements: [{ ...item.refinements[0], label: 'In-Stock Only', }] } }) 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}"` ); } if (categoryUrl?.includes('/events/')) { instantsearchFilters.push(`categories.lvl0:'Events'`); } else { instantsearchFilters.push(`NOT categories_without_path:'Events'`); } 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.brand_name}

${hit.name}

${pricingHtml} Add to cart ` } function addInstantsearchWidgets() { // const hitsPerPageContainer = getHitsPerPageContainer(); search.addWidgets([ instantsearch.widgets.searchBox({ container: '#searchbox', placeholder: 'Search...', searchAsYouType: true, }), // instantsearch.widgets.infiniteHits({ // container: '#infinite-hits', // transformItems(items, { results }) { // return items.map(item => ({ // ...item, // queryID: results.queryID, // })); // }, // templates: { // item(hit, { html, sendEvent }) { // let templateHtml = createIsHitTemplateHtml(hit, html, sendEvent); // // templateHtml = algoliaInstantsearchConfig.hooks.triggerHooks( // 'instantSearchResultTemplate', // templateHtml, // html, // hit, // sendEvent, // ); // // return templateHtml // }, // }, // }), 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) // createIsHitTemplateHtml(hit, html, sendEvent); // return html`

Item

`; let templateHtml = createIsHitTemplateHtml(hit, html, sendEvent); templateHtml = algoliaInstantsearchConfig.hooks.triggerHooks( 'instantSearchResultTemplate', templateHtml, html, hit, sendEvent, ); return templateHtml }, }, }), instantsearch.widgets.pagination({ container: '#pagination', padding: 1, scrollTo: '#infinite-hits', showFirst: true, showLast: true, }), /* instantsearch.widgets.hitsPerPage({ // container: '#hits-per-page', // container: '#pagination', // container: document.createElement('div'), container: hitsPerPageContainer, items: [ { label: '8 hits per page', value: 8 }, { label: '18 results per page', value: 18, default: true }, { label: '50 hits per page', value: 50 }, ], }), */ refinementList({ // container: '#dynamic-widgets', // container: document.querySelector('#dynamic-widgets'), container: document.createElement('div'), attribute: 'in_stock', templates: { item: ({ label, count }) => `${label === 'true' ? 'Con stock' : 'Sin stock'} (${count})`, }, }), 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, }), ]) } const categoryContainers = getAlgoliaCategoryContainers(); categoryContainers.forEach(container => { const selector = `#${getAlgoliaCategoryId(container)}`; const category = getAlgoliaCategory(container); const subcategory = getAlgoliaSubCategory(container); const subcategoryLevel2 = getAlgoliaSubCategoryLevel2(container); const hitsQuantity = getAlgoliaHitsQuantity(container); addAlgoliaCategoryWidget({category, hitsQuantity, selector, subcategory, subcategoryLevel2}); }) } function getAlgoliaCategoryContainers() { return document.querySelectorAll('[data-algolia-category]'); } function getAlgoliaCategoryId(container) { return container.id; } function getAlgoliaCategory(container) { return container.dataset.algoliaCategory; } function getAlgoliaSubCategory(container) { return container.dataset.algoliaSubcategory; } function getAlgoliaSubCategoryLevel2(container) { return container.dataset.algoliaSubcategoryLevel2; } function getAlgoliaHitsQuantity(container) { return container.dataset.algoliaHitsQuantity || 4; } function addAlgoliaCategoryWidget({category, hitsQuantity, selector, subcategory, subcategoryLevel2}) { const containerId = selector.replace('#', ''); window.productsByCategoryId = {}; let filters = `categories.lvl1:'${category} > ${subcategory}'`; if (subcategoryLevel2) { filters += ` AND categories.lvl2:'${category} > ${subcategory} > ${subcategoryLevel2}'`; } search.addWidgets([ instantsearch.widgets.index({indexName: algoliaInstantsearchConfig.indexName}).addWidgets([ instantsearch.widgets.configure({ hitsPerPage: hitsQuantity, filters, }), instantsearch.widgets.hits({ container: selector, transformItems(items) { if (!window.productsByCategoryId) { window.productsByCategoryId = {}; } window.productsByCategoryId[containerId] = items; return items; }, templates: { item(hit, {html, sendEvent}) { return html`

${hit.name}

${hit.default_price}

Add to cart `; }, }, }), ]) ]); } function getHitsPerPageContainer() { const hitsPerPageElement = document.querySelector('#hits-per-page'); if (hitsPerPageElement) { return hitsPerPageElement; } const hitsPerPageContainer = document.createElement('div'); hitsPerPageContainer.id = 'hits-per-page'; // document.querySelector('.ais-right-panel').appendChild(hitsPerPageContainer); document.querySelector('#search-info').appendChild(hitsPerPageContainer); //search-info return hitsPerPageContainer; } 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 { connectHitsPerPage } = instantsearch.connectors; // or directly use instantsearch.connectors.connectHitsPerPage() const hitsPerPageContainer = getHitsPerPageContainer(); // 1. Create a render function // const renderHitsPerPage = (renderOptions, isFirstRender) => { // // `canRefine` is only available from v4.45.0 // // Use `hasNoResults` in earlier minor versions. // const { items, canRefine, refine, widgetParams } = renderOptions; // if(!canRefine) { // // return; // } // if (isFirstRender) { // const select = document.createElement('div'); // select.id = 'hits-per-page-select'; // select.style.display = 'flex'; // // select.style.marginTop = '2rem'; // select.style.gap = '1rem'; // const title = document.createElement('span'); // title.textContent = 'Show:'; // select.appendChild(title); // for(const [index, item] of items.entries()) { // const option = document.createElement('a'); // option.textContent = item.label; // option.value = item.value; // option.addEventListener('click', (event) => { // event.preventDefault(); // refine(item.value); // // document.querySelector('#infinite-hits').scrollIntoView({ behavior:'smooth' }); // }); // select.appendChild(option); // if (index !== items.length - 1) { // const separator = document.createElement('span'); // separator.textContent = '|'; // select.appendChild(separator); // } // } // widgetParams.container.appendChild(select); // } // /* // const select = widgetParams.container.querySelector('select'); // select.disabled = !canRefine; // select.innerHTML = ` // ${items // .map( // item => ` // // ` // ) // .join('')} // `; // */ // }; //New code version of renderHitsPerPage: select input element const renderHitsPerPage = (renderOptions, isFirstRender) => { const { items, refine, widgetParams } = renderOptions; // if(!canRefine) { // return; // } if (isFirstRender) { const container = document.createElement('div'); container.id = 'hits-per-page-select'; container.className = 'ais-HitsPerPage'; const label = document.createElement('label'); label.setAttribute('for', 'hitsSelect'); label.textContent = 'Show:'; // container.appendChild(label); const select = document.createElement('select'); select.id = 'hitsSelect'; select.className = 'ais-HitsPerPage-select'; items.forEach(item => { const option = document.createElement('option'); option.value = item.value; option.textContent = item.label; if (item.isRefined) { option.selected = true; } select.appendChild(option); }); select.addEventListener('change', event => { refine(Number(event.target.value)); }); container.appendChild(select); widgetParams.container.appendChild(container); } }; //End new code version of renderHitsPerPage: select input element // 2. Create the custom widget const customHitsPerPage = connectHitsPerPage( renderHitsPerPage ); // 3. Instantiate search.addWidgets([ customHitsPerPage({ container: hitsPerPageContainer, items: [ { label: '6 results per page', value: 6 }, { label: '18 results per page', value: 18, default: true }, { label: '30 results per page', value: 30 }, ], }) ]); 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 } } for (let children of $('.crdv-price').children()) { children.remove(); } }) attachInstantSearchDOMEvents() })()

Break-Free

Sign in

Your Cart

Menu

Call for Price