/* version 1.23 - 09-10-26 - Full ecommerce event tracking */ ;(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 description 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 formatPrice(currencyCode, price) { const locale = getIsLocale(currencyCode) return new Intl.NumberFormat(locale, { style: 'currency', currency: currencyCode, }).format(price) } /** * @param {hit.variants} products * @param {config.currencyCode} currencyCode */ function formatProductPrices(product, currencyCode) { const priceValue = (product.prices && product.prices[currencyCode]) || 0 const saleValue = (product.sales_prices && product.sales_prices[currencyCode]) || 0 return { retailPrice: formatPrice(currencyCode, priceValue), salePrice: formatPrice(currencyCode, saleValue), isOnSale: Boolean(saleValue > 0) } } 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: { stateMapping: { stateToRoute(uiState) { const indexUiState = uiState[algoliaInstantsearchConfig.indexName]; return { search_query: indexUiState.query, page: indexUiState.page, }; }, routeToState(routeState) { return { [algoliaInstantsearchConfig.indexName]: { query: routeState.search_query, page: routeState.page, }, }; }, }, }, 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, transformItems(items) { if (facet.attribute === 'in_stock') { return items.map(item => { let label = item.label let highlighted = item.highlighted switch(item.value) { case 'true': label = 'In Stock' highlighted = 'In Stock' break; case 'false': label = 'Out of Stock' highlighted = 'Out of Stock' break; default: break; } return {...item, label, highlighted}; }) } else { return items; } } }), 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.reduce((allItems, item) => { const specialCategoryRegex = new RegExp(/special sales/i) const specialSalesCategoryIndex = item?.data?.findIndex((subCategory) => typeof subCategory !== 'undefined' && (specialCategoryRegex.test(subCategory.label) || specialCategoryRegex.test(subCategory.value))) if (specialSalesCategoryIndex >= 0) { item.data.splice(specialSalesCategoryIndex, 1) } allItems.push({ ...item, label: item.label, }) return allItems }, []) }, }), 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) const 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 addInstantsearchWidgets() { search.addWidgets([ instantsearch.widgets.searchBox({ container: '#searchbox', placeholder: 'Search...', searchAsYouType: true, }), instantsearch.widgets.infiniteHits({ container: '#infinite-hits', templates: { item(hit, { html, sendEvent }) { let price; let salePrice; let isOnSale; let rawPrice; if (algoliaInstantsearchConfig.recordType === 'variant') { const currencyCode = algoliaInstantsearchConfig.currentCurrencyCode; rawPrice = (hit.prices && hit.prices[currencyCode]) || 0; price = formatIsPrice(hit.prices, currencyCode); } else if (algoliaInstantsearchConfig.recordType === 'product') { const productPrices = formatProductPrices(hit, algoliaInstantsearchConfig.currentCurrencyCode); price = productPrices.retailPrice; salePrice = productPrices.salePrice; isOnSale = productPrices.isOnSale; const pValues = formatProductPrices(hit, algoliaInstantsearchConfig.currentCurrencyCode); rawPrice = pValues.isOnSale ? (hit.sales_prices[algoliaInstantsearchConfig.currentCurrencyCode]) : (hit.prices[algoliaInstantsearchConfig.currentCurrencyCode]); } let saleStar = ''; let priceDisplay = html`

${price}

`; if (isOnSale) { saleStar = html`

On Sale!

`; priceDisplay = html`

Was: ${price}

Now: ${salePrice}

`; } const queryID = hit.__queryID; const trackedUrl = queryID ? `${hit.url}${hit.url.includes('?') ? '&' : '?'}queryID=${queryID}` : hit.url; return html`

${saleStar}

${hit.name}

SKU: ${hit.sku}

${priceDisplay}

View Product

`; }, }, }), 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' ) } }, }, }), customCurrentRefinements({ container: document.querySelector('#current-refinements'), }), clearRefinements({ container: '#clear-refinements', templates: { resetLabel: 'Reset Filters', }, }), 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 '), clickAnalytics: true, facetingAfterDistinct: algoliaInstantsearchConfig.isDistinct ? true : false, enablePersonalization: true, personalizationImpact: 70, enableReRanking: true, allowReRankingOnPersonalization: true, getRankingInfo: 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() search = instantsearch(initInstantsearch) addInstantsearchWidgets() search.start() /* --------------------------- FORCE USER TOKEN AFTER START (Override InstantSearch anonymous) ⚠️ MUST BE FIRST - before other tracking ---------------------------- */ if ( algoliaInstantsearchConfig.isInsightsEnabled && window.AlgoliaAnalytics && window.AlgoliaAnalytics.default && window.customerEmail ) { const sanitizedToken = window.customerEmail.toLowerCase().replace(/[^a-z0-9]/g, '_'); window.AlgoliaAnalytics.default.setUserToken(sanitizedToken); } /* --------------------------- PRODUCT VIEW TRACKING (Detect PDP views from search) ---------------------------- */ if ( algoliaInstantsearchConfig.isInsightsEnabled && typeof page_type !== 'undefined' && page_type === 'product' ) { const urlParams = new URLSearchParams(window.location.search); const queryID = urlParams.get('queryID'); const productIdElement = document.querySelector('input[name="product_id"]'); if (queryID && productIdElement && window.aa) { const productId = productIdElement.value; // Fixed: Call window.aa instead of window.AlgoliaAnalytics.default(...) window.aa('viewedObjectIDsAfterSearch', { eventName: 'Product Viewed After Search', index: algoliaInstantsearchConfig.indexName, objectIDs: [productId.toString()], queryID: queryID, userToken: typeof window.aa.getUserToken === 'function' ? window.aa.getUserToken() : undefined }); } } /* --------------------------- PURCHASE CONVERSION TRACKING (Order confirmation page) ---------------------------- */ if ( algoliaInstantsearchConfig.isInsightsEnabled && typeof page_type !== 'undefined' && page_type === 'order_confirmation' ) { setTimeout(() => { const orderData = window.BCData?.order_data; if (orderData && window.aa) { const lineItems = orderData.line_items || []; const currentToken = typeof window.aa.getUserToken === 'function' ? window.aa.getUserToken() : undefined; lineItems.forEach(item => { const productId = item.product_id?.toString(); const price = parseFloat(item.sale_price) || parseFloat(item.price) || 0; const quantity = parseInt(item.quantity) || 1; const queryID = sessionStorage.getItem(`queryID_${productId}`) || localStorage.getItem(`queryID_${productId}`); if (productId) { const payload = { eventName: 'Product Purchased', index: algoliaInstantsearchConfig.indexName, objectIDs: [productId], eventType: 'conversion', eventSubtype: 'purchase', // Added for Purchase Conversion tracking objectData: [{ price: price, quantity: quantity, discount: item.discount_amount || 0 }], currency: algoliaInstantsearchConfig.currentCurrencyCode || 'USD', value: price * quantity }; if (currentToken) payload.userToken = currentToken; // Fixed: Call window.aa instead of window.AlgoliaAnalytics.default(...) if (queryID) { payload.eventName = 'Product Purchased After Search'; payload.queryID = queryID; window.aa('convertedObjectIDsAfterSearch', payload); sessionStorage.removeItem(`queryID_${productId}`); localStorage.removeItem(`queryID_${productId}`); } else { window.aa('convertedObjectIDs', payload); } } }); } }, 1000); } /* --------------------------- CUSTOM RENDER MODIFIER ---------------------------- */ let rendered = false; search.on('render', function () { if (!rendered) { const sortByContent = document.querySelector('.ais-sort-orders-container'); if ( sortByContent && sortByContent.innerHTML.includes('class="ais-SortBy"') && !sortByContent.innerHTML.includes('Sort By') ) { sortByContent.innerHTML = 'Sort By' + sortByContent.innerHTML; rendered = true; } } }); attachInstantSearchDOMEvents(); /* --------------------------- SCROLL TO TOP BUTTON ---------------------------- */ const scrollToTopButton = document.createElement('button') scrollToTopButton.innerHTML = 'Top' scrollToTopButton.classList.add('scroll-to-top') scrollToTopButton.onclick = () => { document.documentElement.scrollTop = 0 } scrollToTopButton.ariaLabel = 'Scroll to Top' document.body.appendChild(scrollToTopButton) })()

Edward van Speybrouck

Edward van Speybrouck

More books by author

Father Paul of Moll