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 ]

Below is the email content to send to Sparq support:

   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 of 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 placeholder: PRODUCT_ID: Shopify product id PRODUCT_LINK: Shopify public product link PRODUCT_VARIANT_ID: Shopify product variant id (default or selected one) PRODUCT_PRICE_DECIMAL_FORMAT: Shopify price for the selected 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:

<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 wishlist icon arrived ...");
                      var ev = new CustomEvent("wishlist-hero-add-to-custom-element", {
                        detail: wishlistButton,
                      });
                      document.dispatchEvent(ev);
                    });
                  });
              }
            </script>