Use this script to add narrow by a filter. the example below uses the color filter
<script>
const COLOR_NARROW = "Color";
var __isp_options = {
isp_serp_with_product_attributes: 1,
isp_serp_callback: function (e) {
__isp_options.AVOID_POP_PRODUCTS_PRELOAD = false;
if ( e && e.facets_completed && window.location.href.indexOf("collection") > -1 ) {
if (
e.facets &&
e.facets.filter((f) => f[0] === "Isp-color-family").length > 0 &&
e.facets.filter((f) => f[0] === "Isp-color-family")[0] &&
e.facets.filter((f) => f[0] === "Isp-color-family")[0][1]
) {
var myCollectionColor = "";
var filterColor = e.facets
.filter((f) => f[0] === "Isp-color-family")[0][1]
.map((ColoeFamilys) => ColoeFamilys[0]);
if (filterColor && filterColor.length > 0) {
myCollectionColor =
e.ancestor_categories &&
e.ancestor_categories[0] &&
e.ancestor_categories[0][1] &&
(myCollectionColor = e.ancestor_categories[0][1].replace(/Dresses/gi, "").replace(/(\s)*$/gi, ""));
if ( myCollectionColor != "" && filterColor.includes(myCollectionColor)) {
setColorNarrowQuery(myCollectionColor);
}
}
}
}
},
};
function setColorNarrowQuery(colorToNarrowBy) {
var colorNarrow = [];
var narrowSearchToAdd = "";
var narrowLink = "";
var searchQuery = window.location.search;
colorNarrow.push([COLOR_NARROW, colorToNarrowBy]);
var encodedNarrowColor =
"%5B%22Color%22%2C%22" +
encodeURIComponent(JSON.stringify(colorToNarrowBy)) +
"%22%5D";
if (searchQuery.toLowerCase().indexOf(encodedNarrowColor) < 0) {
if ( window.location.search.toLowerCase().indexOf( encodeURIComponent(JSON.stringify(colorToNarrowBy)).toLowerCase() ) < 0 ) {
setCollectionNarrow(colorToNarrowBy);
}
}
}
function setCollectionNarrow(narrowColor) {
narrow = [["Color", [narrowColor]]];
ispDoFullTextSearch(
get_last_search_term(),
ISP_LAST_SEARCH["page_number"],
narrow,
ISP_LAST_SEARCH["sort_by"],
true,
ISP_LAST_SEARCH["category"],
true,
false,
false,
ISP_LAST_SEARCH["landing_page_slug"]
);
if (!__isp_options.isp_serp_ajax_header_narrow_facets) {
__isp_options.isp_serp_ajax_header_narrow_facets = JSON.stringify([
"Color",
narrowColor,
]);
}
}
</script>