Integration: Ultimate Search App

We do add the following code in place of the existing wishlist button wherever to want to change it (usually in both usf.js and usf-custom.js

searchResultsGridViewItem and you will see the template to display grid view items.

<!-- Wishlist Hero -->
<div :data-wlh-id="product.id"
:data-wlh-link="productUrl"
:data-wlh-variantid="selectedVariantForPrice.id"
:data-wlh-price="price"
:data-wlh-name="selectedVariantForPrice.name || product.title "
:data-wlh-image="selectedImageUrl" class="wishlist-hero-custom-button wishlisthero-floating" style="left: auto;" data-wlh-mode="icon_only" data-wlh-view="Collection"></div>
<!-- / Wishlist Hero -->


and add the Following code at the end of the snippet file ‘wishlisthero-styles.liquid’

<script src="https://cdn.jsdelivr.net/npm/arrive@2.4.1/src/arrive.min.js"></script>
<script type="text/javascript">
document.arrive(".wishlisthero-quick-view", function (wishlistButton) {
var ev = new CustomEvent("wishlist-hero-add-to-custom-element", {
detail: wishlistButton,
});
document.dispatchEvent(ev);
});
</script>