'
);
})
.join('');
};
var renderCurrentRefinements = function(renderOptions) {
var items = renderOptions.items;
var refine = renderOptions.refine;
var widgetParams = renderOptions.widgetParams;
widgetParams.container.innerHTML =
'
Selected filters
' +
'
' +
'
' +
items.map(renderListItem).join('') +
'
' +
'
';
Array.prototype.slice
.call(
widgetParams.container.querySelectorAll(
'.ais-current-refined-values--link'
)
)
.forEach(function(element) {
element.addEventListener('click', function(event) {
var item = Object.keys(event.currentTarget.dataset).reduce(function(
acc,
key
) {
var itemData = {};
itemData[key] = decodeURIComponent(event.currentTarget.dataset[key]);
return algolia.assign({}, acc, itemData);
},
{});
refine(item);
});
});
};
// Create the custom widget
var customCurrentRefinements = connectCurrentRefinements(
renderCurrentRefinements
);
var hasRefinements = function(helper, facetsList) {
return facetsList.some(function(f) {
var isConjunctiveFacetRefined =
helper.state.isConjunctiveFacet(f.name) &&
helper.state.isFacetRefined(f.name);
var isDisjunctiveFacetRefined =
helper.state.isDisjunctiveFacet(f.name) &&
helper.state.isDisjunctiveFacetRefined(f.name);
var isHierarchicalFacetRefined =
helper.state.isHierarchicalFacet(f.name) &&
helper.state.isHierarchicalFacetRefined(f.name);
var numericRefinements = helper.state.getNumericRefinements(f.name);
var isNumericFacetRefined = Object.keys(numericRefinements).some(function(
operator
) {
return numericRefinements[operator].length > 0;
});
return (
isNumericFacetRefined ||
isConjunctiveFacetRefined ||
isDisjunctiveFacetRefined ||
isHierarchicalFacetRefined
);
});
};
/**
* Decides whether the given `facetName` has any facet values available in
* the current result set by checking the available `facets`,
* `disjunctiveFacets` and `hierarchicalFacets`.
*/
var hasFacetValues = function(resultState, facetName) {
var isFacetValueAvailable = resultState.facets.some(function(facet) {
return facet.name === facetName;
});
var isDisjunctiveFacetValueAvailable = resultState.disjunctiveFacets.some(
function(facet) {
return facet.name === facetName;
}
);
var isHierarchicalFacetValueAvailable = resultState.hierarchicalFacets.some(
function(facet) {
return facet.name === facetName;
}
);
return (
isFacetValueAvailable ||
isDisjunctiveFacetValueAvailable ||
isHierarchicalFacetValueAvailable
);
};
var customCurrentRefinementsWithPanel = panel({
hidden: function(options) {
return !hasRefinements(options.helper, instant.facets.list);
},
})(customCurrentRefinements);
var clearRefinementsWithPanel = panel({
hidden: function(options) {
return !hasRefinements(options.helper, instant.facets.list);
},
})(clearRefinements);
instant.search.addWidgets([
clearRefinementsWithPanel({
container: document.querySelector('.ais-clear-refinements-container'),
templates: {
resetLabel: algolia.translations.clearAll,
},
}),
customCurrentRefinementsWithPanel({
container: document.querySelector(
'.ais-current-refined-values-container'
),
}),
]);
/**
* Setup the facets for search.
* We are using a `panel` with a custom `hidden` function which will allow
* us to hide the parent container of the facet if there are no facet values
* available for that particular facet.
*/
instant.facets.widgets.forEach(function(widget) {
var facetWithPanel = panel({
hidden: function(options) {
var hide = !hasFacetValues(options.results, widget.params.attribute);
var displayStyle = hide ? 'none' : '';
/**
* Replacing any "." and "%" in the class name with "\." and "\%" so that querySelector
* can work as expected. "." is supposed to be present for named tags
* and metafield based facet names and "%" is present when the facet name has a space
* in it because of the encoding.
*/
var parentContainerClassName = '.ais-facet-' + encodeURIComponent(
widget.params.attribute
).replace(/\./g, '\\.').replace(/\%/g, '\\%');
var parentContainer = document.querySelector(parentContainerClassName);
if (parentContainer) {
parentContainer.style.display = displayStyle;
}
return hide;
},
})(widget.widget);
instant.search.addWidgets([facetWithPanel(widget.params)]);
});
// Hits
instant.search.addWidgets([
hits({
container: '.ais-hits-container',
templates: {
item(hit, {html, components}) {
return algolia.instantSearchProductTemplate(hit, html, components);
},
empty(results, {html}) {
return algolia.instantSearchNoResultTemplate(html);
}
},
transformItems: function(items) {
return items.map( item => ({
...item,
_distinct: instant.distinct,
can_order:
item.inventory_management !== 'shopify' ||
item.inventory_policy === 'continue' ||
item.inventory_quantity > 0,
queryID: item.__queryID,
productPosition: item.__position,
index: instant.search.mainIndex.getIndexName()
}));
}
})
]);
// Redirect to product on click
instant.search.addWidgets([
{
init: function() {
var container = document.querySelector('.ais-hits-container');
container.addEventListener('click', function(e) {
var el = e.target;
var hit;
do {
if (el.matches('.ais-hit')) {
hit = el;
break;
}
el = el.parentNode;
} while (el && el !== container);
if (!hit) {
return;
}
var $this = hit;
var productHandle = $this.dataset.handle;
var variant_id = $this.dataset.variantId;
var distinct = $this.dataset.distinct;
// Construct the link we should redirect to
var link = '';
// If we're on a collection page and the handle is available
// then prefix the product link with the collection handle
if (collectionPageEnabled && collectionHandle) {
link = `${window.Shopify.routes.root}collections/${collectionHandle}`;
}
// Add the product handle to the link
link = link + `${window.Shopify.routes.root}products/${productHandle}`;
// Add the variant ID details to redirect to a specific
// variant ID if we are showing variants and not products
if (distinct !== 'true') {
link += '?variant=' + variant_id;
}
if (algolia.config.analytics_enabled) {
const clickData = {
index: hit.dataset.algoliaIndex,
eventName: 'Add To Cart',
queryID: hit.dataset.algoliaQueryid,
objectIDs: [hit.dataset.algoliaObjectid],
};
algolia.saveForConversionTracking(clickData);
}
window.location.href = link;
});
},
},
]);
// Add to cart
instant.search.addWidgets([
{
init: function() {
var container = document.querySelector('.ais-hits-container');
container.addEventListener('click', function(e) {
var el = e.target;
var cartButton;
do {
if (el.matches('.ais-hit--cart-button')) {
cartButton = el;
break;
}
el = el.parentNode;
} while (el && el !== container);
if (!cartButton) {
return;
}
e.stopPropagation();
var $this = cartButton;
var formId = $this.dataset.formId;
if (formId) {
document.getElementById(formId).submit();
}
});
},
},
]);
// No result actions
instant.search.addWidgets([
{
init: function(opts) {
var container = document.querySelector('.ais-hits-container');
container.addEventListener('click', function(e) {
var el = e.target;
var clearFilters;
do {
if (el.matches('.ais-hit-empty--clear-filters')) {
clearFilters = el;
break;
}
el = el.parentNode;
} while (el && el !== container);
if (!clearFilters) {
return;
}
var helper = opts.helper;
helper.clearTags();
instant.facets.list.forEach(function(facet) {
helper.clearRefinements(facet.name);
});
helper.search();
});
container.addEventListener('click', function(e) {
var el = e.target;
var clearInput;
do {
if (el.matches('.ais-hit-empty--clear-input')) {
clearInput = el;
break;
}
el = el.parentNode;
} while (el && el !== container);
if (!clearInput) {
return;
}
opts.helper.setQuery('').search();
var input = document.querySelector('.ais-search-box--input');
input.value = '';
input.focus();
});
},
},
]);
// Pagination
instant.search.addWidgets([
pagination({
container: '.ais-pagination-container',
padding: 2,
maxPages: 20,
}),
]);
instant.search.start();
algolia.contentHide.parentNode.removeChild(algolia.contentHide);
})(window.algoliaShopify);