Integration: Smart Product Filter & Search by Globo

To add the collection view icon in the collection pages in a store using Globo Filter

1- Add the following code in a file called `snippets/globo-products.liquid`, in some themes the file might be called “snippets/globo-filter-products.liquid”

2- You can use this code to add the icon in place, the code to add just above the image for the product card is as follows:

<div class="wishlist-hero-custom-button wishlisthero-floating" 
style="left: auto;" data-wlh-id="{{product.id}}" 
data-wlh-link="https://{{shop.domain}}{{product.url}}" 
data-wlh-variantid="{{product.selected_or_first_available_variant.id}}" 
data-wlh-price="{{product.selected_or_first_available_variant.price | 
remove: '.' | remove: ',' | divided_by: 100.0 }}" 
data-wlh-name="{{product.title | strip_html }}" 
data-wlh-image="{{product.featured_image | img_url: '1024x'}}" 
data-wlh-mode="icon_only"></div>

Wishlist Hero Integration with Smart Search & Instant Search by Searchanise

1. Add and EDIT the following in `snippets/wishlisthero-styles.liquid`

“`html

<!-- wishlist hero Searnichse integration -->
<script>
$(document).on("Searchanise.ResultsUpdated", function (event, results) {
console.log("Results back ..");
document.querySelectorAll(" .snize-product").forEach(function (sp) {
if (sp.getAttribute("id")) {
var productId = sp.getAttribute("id").replace(/[^0-9\.]+/g, "");
var productUrl = sp
.querySelector("a.snize-view-link")
.getAttribute("href");
var productImage = sp
.querySelector("img.snize-item-image")
.getAttribute("src");
var productTitle = sp.querySelector(".snize-title").innerText;
var productPrice = 0;
try {
productPrice = sp.querySelector(".snize-price").innerText;
productPrice = parseFloat(productPrice.replace(/[^0-9\.]+/g, ""));
} catch (ex) {
console.log(ex);
}

var button = document.createElement("div");
button.setAttribute("data-wlh-id", productId);
button.setAttribute("data-wlh-variantid", productId);
button.setAttribute("data-wlh-price", productPrice);
button.setAttribute("data-wlh-link", productUrl);
button.setAttribute("data-wlh-name", productTitle);
button.setAttribute("data-wlh-image", productImage);
button.setAttribute("data-wlh-mode", "icon_only");
button.classList.add("wishlist-hero-custom-button");
button.classList.add("wishlisthero-floating");
sp.insertBefore(button, sp.querySelector(".snize-view-link"));
// now
var ev = new CustomEvent("wishlist-hero-add-to-custom-element", {
detail: button,
});
document.dispatchEvent(ev);
}
});
});
&lt;/script&gt;
<!-- end wishlist hero Searnise integration -->

“`