// version 1.12 function getAcLocale(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 formatAcPrice(priceList, currencyCode) { let price if (currencyCode in priceList) { price = priceList[currencyCode] } else { price = Object.values(priceList)[0] } return new Intl.NumberFormat(getAcLocale(currencyCode), { style: 'currency', currency: currencyCode, }).format(price) } function formatAcPriceRangePrice(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 formatAcPriceRange(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 = getAcLocale(currencyCode) return { min: formatAcPriceRangePrice(min, max, locale, currencyCode), max: formatAcPriceRangePrice(max, min, locale, currencyCode), } } const autocompleteFilters = [`is_visible=1`] if (!algoliaAutocompleteConfig.showOutOfStockItems) { autocompleteFilters.push('in_stock>0') } async function getUserTokenAsync() { return new Promise((resolve, reject) => { aa('getUserToken', {}, (err, userToken) => { if (err) { reject(err) } else { resolve(userToken) } }) }) } function createAcHitTemplateHtml(item, html, insights) { let addToCartParam let price let salesPrice if (algoliaAutocompleteConfig.recordType === 'variant') { addToCartParam = `sku=${item.sku}` price = formatAcPrice( item.prices, algoliaAutocompleteConfig.currentCurrencyCode ) salesPrice = formatAcPrice( item.sales_prices, algoliaAutocompleteConfig.currentCurrencyCode ) } else if (algoliaAutocompleteConfig.recordType === 'product') { addToCartParam = `product_id=${item.objectID}` const priceRange = formatAcPriceRange( item.variants, algoliaAutocompleteConfig.currentCurrencyCode, 'prices' ) const salesRange = formatAcPriceRange( item.variants, algoliaAutocompleteConfig.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`

${item.name}

${pricingHtml}

` } const autocompleteOptions = { debug: algoliaAutocompleteConfig.debug_mode, insights: algoliaAutocompleteConfig.isInsightsEnabled, onSubmit({ state }) { const encodedQuery = encodeURIComponent(state.query) if (algoliaAutocompleteConfig.isInstantSearchEnabled) { window.location.href = `${algoliaAutocompleteConfig.instantSearchUrl}?search_query=${encodedQuery}` } else { window.location.href = `/search.php?search_query=${encodedQuery}` } }, getSources() { return [ { sourceId: 'querySuggestions', getItemInputValue: ({ item }) => item.query, async getItems({ query }) { let algoliaUserToken try { algoliaUserToken = await getUserTokenAsync() } catch (e) {} return getAlgoliaResults({ searchClient: autocompleteClient, queries: [ { indexName: algoliaAutocompleteConfig.indexName, query, distinct: algoliaAutocompleteConfig.isDistinct, params: { hitsPerPage: algoliaAutocompleteConfig.hitsPerPage, filters: autocompleteFilters.join(' AND '), }, userToken: algoliaUserToken, }, ], }) }, templates: { header({ html }) { return html` Products

` }, item({ item, html, state }) { const insights = typeof state.context.algoliaInsightsPlugin !== "undefined" && typeof state.context.algoliaInsightsPlugin.insights !== "undefined" ? state.context.algoliaInsightsPlugin.insights : false; let templateHtml = createAcHitTemplateHtml(item, html, insights) templateHtml = algoliaAutocompleteConfig.hooks.triggerHooks( 'autocompleteResultTemplate', templateHtml, html, item, insights, ); return templateHtml }, footer({ state, html }) { if (algoliaAutocompleteConfig.isInstantSearchEnabled) { return html` Show all products ` } }, noResults({ html }) { return html`

No results found

` }, }, }, ] }, } const { autocomplete, getAlgoliaResults } = window['@algolia/autocomplete-js'] const { liteClient } = window['algoliasearch/lite'] const autocompleteClient = liteClient( algoliaAutocompleteConfig.appId, algoliaAutocompleteConfig.publicApiKey ) autocompleteClient.addAlgoliaAgent('BigCommerce Integration') let container if ( algoliaAutocompleteConfig.algolia_search_css_selector_mobile !== '' && algoliaAutocompleteConfig.mobile_screen_size > 0 && screen.width <= algoliaAutocompleteConfig.mobile_screen_size ) { // mobile container = document.querySelector(algoliaAutocompleteConfig.algolia_search_css_selector_mobile) } else { // desktop container = document.querySelector(algoliaAutocompleteConfig.algolia_search_css_selector) } container.innerHTML = '' const containerClasses = container.classList containerClasses.add('aa-MainContainer') const autocompleteInitOptions = algoliaAutocompleteConfig.hooks.triggerHooks( 'autocompleteInitOptions', autocompleteOptions ); autocomplete({ container, ...autocompleteInitOptions, }) // XCAL custom: autofocus the search input when quick search opens (desktop + mobile) (function () { var ids = ['quickSearch', 'quickSearchMobile']; var els = ids.map(function (id) { return document.getElementById(id); }).filter(Boolean); if (!els.length) return; function focusInputIfOpen(el) { if (!el.classList.contains('is-open')) return; var input = el.querySelector('.aa-Input'); if (input) { setTimeout(function () { input.focus(); }, 50); } } els.forEach(function (el) { new MutationObserver(function () { focusInputIfOpen(el); }).observe(el, { attributes: true, attributeFilter: ['class'] }); }); })(); // XCAL custom: prevent iOS/WebKit from taking over the search input's native chrome (function () { var ids = ['quickSearch', 'quickSearchMobile']; var els = ids.map(function (id) { return document.getElementById(id); }).filter(Boolean); if (!els.length) return; function hardenInput(input) { if (!input) return; if (input.getAttribute('type') !== 'text') { input.setAttribute('type', 'text'); } input.setAttribute('autocomplete', 'off'); input.setAttribute('autocorrect', 'off'); input.setAttribute('autocapitalize', 'off'); input.setAttribute('spellcheck', 'false'); input.removeAttribute('results'); } function watchInput(el) { var input = el.querySelector('.aa-Input'); if (!input) return; hardenInput(input); // Re-apply the instant Preact writes "search" back, e.g. on every keystroke re-render new MutationObserver(function () { hardenInput(input); }).observe(input, { attributes: true, attributeFilter: ['type'] }); } // Focus the Algolia input the instant the desktop search trigger is clicked var quickSearchTrigger = document.querySelector('[data-search="quickSearch"]'); if (quickSearchTrigger) { // Browsers focus a clicked at mousedown time, before the click // event even fires — preventing default here stops that early steal. quickSearchTrigger.addEventListener('mousedown', function (event) { event.preventDefault(); }); quickSearchTrigger.addEventListener('click', function (event) { event.preventDefault(); // Defer to a microtask so the theme's own click handler (which adds // "is-open" and makes the panel visible) has already run first — // focusing a still-hidden input is a silent no-op in every browser. Promise.resolve().then(function () { var input = document.querySelector('#quickSearch .aa-Input'); if (input) input.focus(); }); }); } els.forEach(function (el) { watchInput(el); // Input node itself can get replaced on re-render; re-attach the watcher if so new MutationObserver(function () { watchInput(el); }).observe(el, { childList: true, subtree: true }); }); })();

ODIN ACC-ARCA-FLEX-S-BLK SIDEWAYS ARCA RL SCREW

ODIN WORKS

Related Products

ODIN ACC-ARCA-FLEX-M-BLK SIDEWAYS ARCA RL MLOK

ODIN ACC-ML-ARCA-RAIL-4 M-LOK TO ARCA RAIL 4"

ODIN ACC-ML-ARCA-RAIL-9 M-LOK TO ARCA RAIL 9"