Integration: Ultimate Search App

step 1:

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

step 2:

and add the Following code in App embeds => Additional integration code => Additional HTML

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