Product Filter & Search by Boost Commerce

1. 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>

2. 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);
}
}

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

4. Now in `wishlisthero-styles.liquid` add the following at the end

<!-- Wishlist Hero BoostCommerce listener -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Farrive%402.4.1%2Fsrc%2Farrive.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A.wishlisthero-bc-inline%20%7B%0Aposition%3A%20inherit%3B%0Afloat%3A%20right%3B%0Atext-align%3A%20right%3B%0Amargin-top%3A%20-40%25%3B%0Amargin-right%3A%205px%3B%0Aborder-radius%3A%20100%25%3B%0A%7D%0A.wishlisthero-bc-inline%3Ahover%20%7B%0Abackground-color%3A%20rgba(0%2C%200%2C%200%2C%200.05)%3B%0A%7D%0A.wishlisthero-bc-inline%20button%20%7B%0Afont-size%3A%2027px%20!important%3B%0Awidth%3A%2040px%20!important%3B%0Apadding%3A%200%20!important%3B%0Apadding-top%3A%200.125em%20!important%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%2F%2Fif(document.querySelector(%22%23bc-sf-filter-wrapper%22))%7B%0A%2F%2Fconsole.log(%22BoosCommerce%20search%20detected%20...%22)%3B%0Adocument.arrive(%22.wishlist-hero-bc-button%22%2C%20function%20(wishlistButton)%20%7B%0Avar%20ev%20%3D%20new%20CustomEvent(%22wishlist-hero-add-to-custom-element%22%2C%20%7B%0Adetail%3A%20wishlistButton%2C%0A%7D)%3B%0Adocument.dispatchEvent(ev)%3B%0A%7D)%3B%0Awindow.setTimeout(function%20()%20%7B%0A%2F%2F%20console.log(%22Delayed...%22)%3B%0Adocument%0A.querySelectorAll(%22.wishlist-hero-bc-button%22)%0A.forEach(function%20(wishlistButton)%20%7B%0Avar%20ev%20%3D%20new%20CustomEvent(%22wishlist-hero-add-to-custom-element%22%2C%20%7B%0Adetail%3A%20wishlistButton%2C%0A%7D)%3B%0Adocument.dispatchEvent(ev)%3B%0A%7D)%3B%0A%7D%2C%203000)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<!-- End Wishlist Hero BoostCommerce listener -->