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`
“`html
<span class="wishlisthero-custom-boostcommerce-product" data-product-json="[[itemJson]]"></span>
“`
2. Add the following functon in the `Assets/bc-sf-filter.js` file
“`javascript
// Build Wishlist Hero Button
function buildWishlistHeroButton(data) {
try {
//console.log(prodJsonString)
let product = data;
var image = product.images && product.images.length > 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 && 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
“`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: inherit;
float: right;
text-align: right;
margin-top: -40%;
margin-right: 5px;
border-radius: 100%;
}
.wishlisthero-bc-inline:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.wishlisthero-bc-inline button {
font-size: 27px !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 -->
“`