Product Filter & Search by Sparq

1. Ask Sparq support to add the following snippet in each search result, by sending an email to hello@sparq.ai, ccing the Customer email

Subject: Setting up wishlist hero icon in sparq search results for store: ….
to: hello@sparq.ai
cc: [ Customer email here ]

“`html

Hello,

Hope you are having a great day. Our common customer on this email CC did want to get the wishlist icons showing on the search results and in collection view.

We have worked with you before to get this working, , Can you please add the following code snippet for each item in the sparq listing / results replacing the placeholders with the data for each product.

This is needed so we can carry on with the setup the wishlist icon for collection view.

<div data-wlh-id="##PRODUCT_ID##"
data-wlh-link="##PRODUCT_LINK##"
data-wlh-variantId="##PRODUCT_VARIANT_ID##"
data-wlh-price="##PRODUCT_PRICE_DECIMAL_FORMAT##"
data-wlh-name="##PRODUCT_NAME##"
data-wlh-image="##PRODUCT_IMAGE##"
class="wishlist-hero-custom-button wishlisthero-floating"
data-wlh-mode="icon_only">
</div>

Explanation of each place holder:
PRODUCT_ID: Shopify product id
PRODUCT_LINK: Shopify public product link
PRODUCT_VARIANT_ID: Shopify prdocut variant id ( default or selected one )
PRODUCT_PRICE_DECIMAL_FORMAT: Shopify price for the select variant in decimal format ( e.g. 12.00 )
PRODUCT_NAME: Product display name
PRODUCT_IMAGE: Product image link, maximum resolution recommended to get the best image displayed in wishlist.

Thank you for your time and waiting for your response to proceed with the installation steps.

“`

2. Then add the following in the `theme.liquid` file

“`html

<!-- Wishlist Hero Sparq listener -->
<script src="https://cdn.jsdelivr.net/npm/arrive@2.4.1/src/arrive.min.js"></script>
<script type="text/javascript">
if (document.querySelector("#sparq-main-content")) {
console.log("Sparq search detected ...");
document
.querySelector("#sparq-main-content")
.arrive(".sq-page-item", function () {
//console.log("Sparq search item arrived ...");
this.querySelectorAll(".wishlist-hero-custom-button").forEach(function (
wishlistButton
) {
//console.log("Sparq search item wislist icon arrived ...");
var ev = new CustomEvent("wishlist-hero-add-to-custom-element", {
detail: wishlistButton,
});
document.dispatchEvent(ev);
});
});
}
</script>
<!-- end Wishlist Hero Sparq listener -->
```