Product Filter & Search by Boost Commerce

Step 1:
Go to Online Store > Themes > Edit Code

Step 2:
Go to the page having the HTML for product card, example: `bc-sf-filter-html.liquid` and in that page. Add the following class to `grid__item`

<span data-product-json="[[itemJson]]" class="wishlisthero-custom-boostcommerce-product"></span>

step 3:

Add the following functon in the `Assets/bc-sf-filter.js` file

// Build Wishlist Hero Button
function buildWishlistHeroButton(data) {
try {
//console.log(prodJsonString)
let product = data;
var image = product.images &amp;&amp; product.images.length &gt; 0 ? product.images[0].src : "";
var name = product.title;
var url = "https://" + window.Shopify.shop + product.url;
var price = product.price / 100;
var selected_var_id = product.variants[0].id;
var selected_var = product.variants[0];


product.variants.forEach(function (possible_var) {
//for (var index, in product.variants) {
if (possible_var.id == selected_var_id) {
selected_var = possible_var;
if (selected_var.featured_image &amp;&amp; selected_var.featured_image.src) {
image = selected_var.featured_image.src;
}
if (selected_var.url) {
url = selected_var.url;
}
if (selected_var.name) {
name = selected_var.name;
}
price = selected_var.price / 100;
}
});


let wishlistButton = document.createElement("div");
wishlistButton.classList.add("wishlist-hero-bc-button");
wishlistButton.classList.add("wishlisthero-bc-inline");
// wishlistButton.setAttribute(
// "data-wlh-variants",
// JSON.stringify(product.variants)
// );
// wishlistButton.classList.add("wishlist-hero-custom-button");
wishlistButton.setAttribute("data-wlh-id", product.id);
wishlistButton.setAttribute("data-wlh-link", url);
wishlistButton.setAttribute("data-wlh-variantId", selected_var.id);
wishlistButton.setAttribute("data-wlh-price", price);
wishlistButton.setAttribute("data-wlh-name", name);
wishlistButton.setAttribute("data-wlh-image", image);
wishlistButton.setAttribute("data-wlh-mode", "icon_only");
//console.log(wishlistButton);
return wishlistButton.outerHTML;
} catch (ex) {
console.log(ex);
}
,}

step 4:

in the same file above, replace the use of `buildWishlist()` with `buildWishlistHero()`

step 5:

Now add the below code in App embeds => Additional integration code => Additional HTML

<!-- Wishlist Hero BoostCommerce listener -->
<script src="https://cdn.jsdelivr.net/npm/arrive@2.4.1/src/arrive.min.js"></script>
<style type="text/css">
.wishlisthero-bc-inline {
  position:absolute;
{% assign wishlistHero = shop.metafields.wishlistHero %} {% assign key = 'WishListHero_setting' %} {% if wishlistHero.WishListHero_setting.CollectionViewIconPlacment == 'Right' %}right : 5px; left:auto;{% else %}left: 5px !important; right: auto;{% endif %}
top: 5px;
float: right;
text-align: right;
margin-top: 0%;
margin-right: 5px;
border-radius: 100%;
z-index: 23;
width: 40px !important;
}
.wishlisthero-bc-inline:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.wishlisthero-bc-inline button {
font-size: 20px !important;
width: 40px !important;
padding: 0 !important;
padding-top: 0.125em !important;
}
</style>
<script type="text/javascript">
//if(document.querySelector("#bc-sf-filter-wrapper")){
//console.log("BoosCommerce search detected ...");
document.arrive(".wishlist-hero-bc-button", function (wishlistButton) {
var ev = new CustomEvent("wishlist-hero-add-to-custom-element", {
detail: wishlistButton,
});
document.dispatchEvent(ev);
});
window.setTimeout(function () {
// console.log("Delayed...");
document
.querySelectorAll(".wishlist-hero-bc-button")
.forEach(function (wishlistButton) {
var ev = new CustomEvent("wishlist-hero-add-to-custom-element", {
detail: wishlistButton,
});
document.dispatchEvent(ev);
});
}, 3000);
</script>
<!-- End Wishlist Hero BoostCommerce listener -->