/* 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 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 isVatToggleInc() { const toggle = document.querySelector('.js-vat-toggle') return toggle ? toggle.checked : true } function calculateVatPrice(price) { const VAT_MULTIPLIER = 1.2 const numericPrice = Number(price) || 0 return isVatToggleInc() ? numericPrice * VAT_MULTIPLIER : numericPrice } function formatIsPriceWithVat(priceList, currencyCode) { if (!priceList || Object.keys(priceList).length === 0) { return null } 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(calculateVatPrice(price)) } function formatIsPriceRangeWithVat(products, currencyCode, priceIndexField) { let min = 0 let max = 0 for (const key in products) { const currencyValue = (products[key][priceIndexField] && products[key][priceIndexField][currencyCode]) || 0 const vatValue = calculateVatPrice(currencyValue) if (min === 0 || vatValue < min) { min = vatValue } if (max === 0 || vatValue > max) { max = vatValue } } const locale = getIsLocale(currencyCode) return { min: formatIsPriceRangePrice(min, max, locale, currencyCode), max: formatIsPriceRangePrice(max, min, locale, currencyCode), } } function getIsShortName(hit) { let value = hit.custom_fields && hit.custom_fields['Short Name (Web)'] if (Array.isArray(value)) { value = value[0] } const shortName = value === null || value === undefined ? '' : String(value).trim() return shortName && shortName !== hit.name ? shortName : '' } 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: 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(' > '), sortBy: ['isRefined', 'count:desc'], 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.ais-FacetList') 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 = formatIsPriceWithVat( hit.prices, algoliaInstantsearchConfig.currentCurrencyCode ) salesPrice = formatIsPriceWithVat( hit.sales_prices, algoliaInstantsearchConfig.currentCurrencyCode ) } else if (algoliaInstantsearchConfig.recordType === 'product') { addToCartParam = `product_id=${hit.objectID}` const priceRange = formatIsPriceRangeWithVat( hit.variants, algoliaInstantsearchConfig.currentCurrencyCode, 'prices' ) const salesRange = formatIsPriceRangeWithVat( 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 } } const hasPrice = price && price !== 'View For Pricing' const tradingUnit = hasPrice ? getIsTradingUnit(hit) : '' const unitLabel = tradingUnit ? html`${tradingUnit}` : null const vatLabel = hasPrice ? html`${isVatToggleInc() ? '(inc VAT)' : '(ex VAT)'}` : null let pricingHtml = html`

${price} ${unitLabel} ${vatLabel}

` if (salesPrice) { pricingHtml = html`

Was ${price} ${salesPrice} ${unitLabel} ${vatLabel}

` } const isOnSale = Boolean(salesPrice && salesPrice !== price) return html`

${isOnSale ? html`

Special Offer

` : null}

${hit.name} ${getIsShortName(hit) ? html`${getIsShortName(hit)}` : null}

${getIsDescriptionSnippet(hit) ? html`

${getIsDescriptionSnippet(hit)}

` : null} ${pricingHtml} Add to cart ` } function addInstantsearchWidgets() { search.addWidgets([ instantsearch.widgets.searchBox({ container: '#searchbox', placeholder: 'Search...', searchAsYouType: true, }), instantsearch.widgets.infiniteHits({ cache: instantsearch.createInfiniteHitsSessionStorageCache(), container: '#infinite-hits', transformItems(items, { results }) { return items.map(item => ({ ...item, queryID: results.queryID, })); }, templates: { item(hit, { html, sendEvent }) { return createIsHitTemplateHtml(hit, html, sendEvent) }, }, }), customDynamicWidgets({ container: document.querySelector('#dynamic-widgets'), widgets: Object.values(widgets).map(({ widget, container }) => { return widget(container) }), }), instantsearch.widgets.stats({ container: '#stats', templates: { text(data, { html }) { const count = data.nbHits.toLocaleString('en-GB') const label = data.nbHits === 1 ? 'result' : 'results' if (data.query) { return data.nbHits > 0 ? html`${count} ${label} found for "${data.query}"` : html`No results found for "${data.query}"` } return data.nbHits > 0 ? html`${count} ${label} found` : null }, }, }), 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 = '' }) } await shouldWeLoadFacets() await shouldWeUpdateUiState() const instantSearchInitOptions = algoliaInstantsearchConfig.hooks.triggerHooks( 'instantSearchInitOptions', initInstantsearch ); search = instantsearch(instantSearchInitOptions) addInstantsearchWidgets() search.start() window.htbsSearch = search document.addEventListener('change', function (event) { if (event.target && event.target.classList.contains('js-vat-toggle')) { search.refresh() } }) document.addEventListener('click', function (event) { if (event.target && event.target.closest('.vat-toggle__input, .js-vat-toggle')) { setTimeout(function () { search.refresh() }, 50) } }) let rendered = false search.on('render', function () { if (rendered) { return } const sortByContent = document.querySelector('.ais-sort-orders-container') if (sortByContent && sortByContent.querySelector('.ais-SortBy') && !sortByContent.querySelector('.sort-by')) { sortByContent.insertAdjacentHTML('afterbegin', 'Sort By') rendered = true } }) attachInstantSearchDOMEvents() })() const TRADING_UNIT_LABELS = { each: 'each', ea: 'each', piece: 'per piece', pc: 'per piece', fixedpiece: 'per piece', cutpiece: 'per cut piece', pair: 'per pair', set: 'per set', ten: 'per 10', hundred: 'per 100', thousand: 'per 1,000', metre: 'per metre', mt: 'per metre', metreeach: 'per metre', rollmetre: 'per metre', tenmetres: 'per 10m', hundredmetres: 'per 100m', foot: 'per foot', hundredfeet: 'per 100ft', boardfeet: 'per board foot', standardtimbermeasure: 'per standard', squaremetre: 'per m²', laidsquaremetre: 'per m² laid', '10squaremetres': 'per 10m²', squarefoot: 'per sq ft', sq: 'per sq ft', cm: 'per m³', cubicmetre: 'per m³', cubicfoot: 'per cu ft', kilo: 'per kg', kilogram: 'per kg', kg: 'per kg', lb: 'per lb', pound: 'per lb', tonne: 'per tonne', t: 'per tonne', tonnebagreuseable: 'per tonne bag', l: 'per litre', litre: 'per litre', sheet: 'per sheet', sh: 'per sheet', sheeteach: 'per sheet', strip: 'per strip', coil: 'per coil', reelorroll: 'per roll', rl: 'per roll', bundle: 'per bundle', bag: 'per bag', bg: 'per bag', tub: 'per tub', tu: 'per tub', box: 'per box', bx: 'per box', carton: 'per carton', case: 'per case', crate: 'per crate', outer: 'per outer', packapprox: 'per pack', packactual: 'per pack', pk: 'per pack', pallet: 'per pallet', pt: 'per pallet', hour: 'per hour', day: 'per day', weekend: 'per weekend', week: 'per week', virtualunit: null, lumpsubjob: null, rebate: null, dummyuom: null, display: null, alteaforpricecalconly: null, } function getIsTradingUnit(hit) { let value = hit.custom_fields && hit.custom_fields['Trading Unit'] if (Array.isArray(value)) { value = value[0] } value = value === null || value === undefined ? '' : String(value).trim() if (!value) { return '' } const key = value.toLowerCase().replace(/[\s()\-%]/g, '') if (Object.prototype.hasOwnProperty.call(TRADING_UNIT_LABELS, key)) { return TRADING_UNIT_LABELS[key] || '' } const lower = value.toLowerCase() return /^(per|each)\b/.test(lower) ? lower : 'per ' + lower } function getIsReviewSkus(hit) { return [hit.sku, hit.objectID].filter(Boolean).join(';') } const isDescriptionCache = new Map() function getIsDescriptionSnippet(hit) { if (isDescriptionCache.has(hit.objectID)) { return isDescriptionCache.get(hit.objectID) } let text = '' if (hit.description) { text = new DOMParser() .parseFromString(String(hit.description), 'text/html') .body.textContent.replace(/\s+/g, ' ') .trim() if (text.length > 220) { const cut = text.slice(0, 217) const lastSpace = cut.lastIndexOf(' ') text = (lastSpace > 150 ? cut.slice(0, lastSpace) : cut).replace(/[\s,.;:]+$/, '') + '…' } } isDescriptionCache.set(hit.objectID, text) return text }

Sitemap

Pages