(async function(algolia) { 'use strict'; if (!algolia.config.autocomplete_enabled) return; const autocomplete = algolia.externals.autocomplete; const index_suffix = await algolia.config.index_suffix; algolia.searchClient.addAlgoliaAgent('Shopify Integration'); if (algolia.config.dynamic_selector) { const search_url = algolia?.shopify?.routes?.search_url || `${window.Shopify.routes.root}/search`; const default_form_search = `form[action="${search_url}"]`; algolia.config.input_selector += `, ${default_form_search}`; } // Retrieve the container from Shopify's config const containers = Array.from(document.querySelectorAll(algolia.config.input_selector)); containers.forEach(container => { container.innerHTML = '' const containerClasses = container.classList; containerClasses.add('aa-MainContainer'); }); // Set plugins const { productsPlugin, collectionsPlugin, articlesPlugin, pagesPlugin, querySuggestionsPlugin } = algolia; const plugins = [ algolia.config.index_products && productsPlugin, algolia.config.index_collections && collectionsPlugin, algolia.config.index_articles && articlesPlugin, algolia.config.index_pages && pagesPlugin, algolia.config.autocomplete_query_suggestions && querySuggestionsPlugin ]; const cssFile = document.getElementById('template_algolia_autocomplete.css'); //Set CSS variables document.documentElement.style.setProperty(`--aa-text-color-rgb`, `${algolia.helpers.hexToRGB(algolia.config.colors.secondary)}`); document.documentElement.style.setProperty(`--aa-primary-color-rgb`, `${algolia.helpers.hexToRGB(algolia.config.colors.main)}`); document.documentElement.style.setProperty(`--aa-muted-color-rgb`, `${algolia.helpers.hexToRGB(algolia.config.colors.muted)}`); document.documentElement.style.setProperty(`--aa-highlight-color-rgb`, `${algolia.helpers.hexToRGB(algolia.config.colors.highlight)}`); //Link CSS algolia.appendStyle(cssFile.text); const autocompleteOptions = { openOnFocus: false, debug: algolia.config.autocomplete_debug, insights: algolia.config.analytics_enabled, plugins, render({ elements, render, html, state }, root) { const sourceIdsToExclude = ['products']; const hasLeftPanelResults = state.collections .filter( ({ source }) => sourceIdsToExclude.indexOf(source.sourceId) === -1 ) .reduce((prev, curr) => prev + curr.items.length, 0) > 0; const [querySuggestionsPluginResults] = state.collections.filter(({source}) => source.sourceId === 'querySuggestionsPlugin'); const displaySuggestions = algolia.config.autocomplete_query_suggestions && querySuggestionsPluginResults.items.length > 0; render( hasLeftPanelResults ? algolia.mainTemplate({ html, state }, elements, displaySuggestions) : algolia.mainProductsTemplate({ html, state }, elements), root ); }, renderNoResults({ render, html, state }, root) { render( algolia.noResultsTemplate({ html, state }), root ) }, onSubmit({ state }) { window.location.href = `${window.Shopify.routes.root}search?q=${encodeURIComponent(state.query)}`; } } containers.forEach(container => { autocomplete({ container, ...autocompleteOptions }); }); })(window.algoliaShopify);