Integration: Product Filter & Search by Boost Commerce

May 18, 2021 | Wishlist Hero

1. Go to the page having the HTML for product card, example: `bc-sf-filter-html.liquid` and in that page. Add the following class to `grid__item`

“`html

<span class="wishlisthero-custom-boostcommerce-product"
data-product-json="[[itemJson]]"></span>

“`

2. Add the following functon in the `Assets/bc-sf-filter.js` file

“`javascript

// Build Wishlist Hero Button
function buildWishlistHeroButton(data) {
try {
//console.log(prodJsonString)
let product = data;
var image = product.images && product.images.length > 0 ? product.images[0].src : "";
var name = product.title;
var url = "https://" + window.Shopify.shop + product.url;
var price = product.price / 100;
var selected_var_id = product.variants[0].id;
var selected_var = product.variants[0];


product.variants.forEach(function (possible_var) {
//for (var index, in product.variants) {
if (possible_var.id == selected_var_id) {
selected_var = possible_var;
if (selected_var.featured_image && selected_var.featured_image.src) {
image = selected_var.featured_image.src;
}
if (selected_var.url) {
url = selected_var.url;
}
if (selected_var.name) {
name = selected_var.name;
}
price = selected_var.price / 100;
}
});


let wishlistButton = document.createElement("div");
wishlistButton.classList.add("wishlist-hero-bc-button");
wishlistButton.classList.add("wishlisthero-bc-inline");
// wishlistButton.setAttribute(
// "data-wlh-variants",
// JSON.stringify(product.variants)
// );
// wishlistButton.classList.add("wishlist-hero-custom-button");
wishlistButton.setAttribute("data-wlh-id", product.id);
wishlistButton.setAttribute("data-wlh-link", url);
wishlistButton.setAttribute("data-wlh-variantId", selected_var.id);
wishlistButton.setAttribute("data-wlh-price", price);
wishlistButton.setAttribute("data-wlh-name", name);
wishlistButton.setAttribute("data-wlh-image", image);
wishlistButton.setAttribute("data-wlh-mode", "icon_only");
//console.log(wishlistButton);
return wishlistButton.outerHTML;
} catch (ex) {
console.log(ex);
}
}

3. in the same file above, replace the use of `buildWishlist()` with `buildWishlistHero()`
“`

4. Now in `wishlisthero-styles.liquid` add the following at the end

“`html

<!-- Wishlist Hero BoostCommerce listener -->
<script src="https://cdn.jsdelivr.net/npm/arrive@2.4.1/src/arrive.min.js"></script>
<style type="text/css">
.wishlisthero-bc-inline {
position: inherit;
float: right;
text-align: right;
margin-top: -40%;
margin-right: 5px;
border-radius: 100%;
}
.wishlisthero-bc-inline:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.wishlisthero-bc-inline button {
font-size: 27px !important;
width: 40px !important;
padding: 0 !important;
padding-top: 0.125em !important;
}
</style>
<script type="text/javascript">
//if(document.querySelector("#bc-sf-filter-wrapper")){
//console.log("BoosCommerce search detected ...");
document.arrive(".wishlist-hero-bc-button", function (wishlistButton) {
var ev = new CustomEvent("wishlist-hero-add-to-custom-element", {
detail: wishlistButton,
});
document.dispatchEvent(ev);
});
window.setTimeout(function () {
// console.log("Delayed...");
document
.querySelectorAll(".wishlist-hero-bc-button")
.forEach(function (wishlistButton) {
var ev = new CustomEvent("wishlist-hero-add-to-custom-element", {
detail: wishlistButton,
});
document.dispatchEvent(ev);
});
}, 3000);
</script>
<!-- End Wishlist Hero BoostCommerce listener -->

“`

Integration: Product Filter & Search by Sparq

May 18, 2021 | Wishlist Hero

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

Integration: Quick View & Color Swatch ++ by qikify

May 18, 2021 | Wishlist Hero

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

<!-- Wishlist Hero Quick View listener -->
<script src="https://cdn.jsdelivr.net/npm/arrive@2.4.1/src/arrive.min.js"></script>
<script type="text/javascript">
  document.arrive(".qikify-quickview-app .qview-title a", function (link_container) {
        debugger;

    debugger;
    var link = link_container.href



    var modal = link_container.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
    // Prepare and add div prams
    var whqv_addAfterElement = modal.querySelector(".qview-buttons");
    var whqv_productLink = link;
    var whqv_variantId = null;

    // **** Perpare and add div
    var jsonLink =  whqv_productLink;  //+ ".js";
    if(jsonLink.indexOf('?') > 0 )
    {
        var temp = jsonLink.split('?');

        jsonLink = temp[0] + '.js?'+temp[1];
    }
    else
    {
        jsonLink =  whqv_productLink + ".js";
    }
    let xhr = new XMLHttpRequest();
    xhr.open("GET", jsonLink, true);
    xhr.send();
    xhr.onload = function () {
      if (xhr.status != 200) {
        // analyze HTTP status of the response
        console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
      } else {
        // show the result
        try {
          var productInfo = JSON.parse(xhr.response);
          console.log(productInfo);

          var selectedVariant = null;
          if (!whqv_variantId) {
            selectedVariant = productInfo.variants[0];
          } else {
            productInfo.variants.forEach(function (v) {
              if (v.id == whqv_variantId) {
                selectedVariant = v;
              }
            });
          }
          if (!selectedVariant) {
            selectedVariant = productInfo.variants[0];
          }

          var image = productInfo.featured_image
            ? productInfo.featured_image
            : null;
          if (!image && productInfo.images.length > 0) {
            image = productInfo.images[0];
          }
          if (selectedVariant.featured_image) {
            image = selectedVariant.featured_image;
          }
          var buttonDiv = document.createElement("div");
          buttonDiv.classList.add("wishlisthero-quick-view");
          buttonDiv.setAttribute("data-wlh-id", productInfo.id);
          buttonDiv.setAttribute("data-wlh-link", whqv_productLink);
          buttonDiv.setAttribute("data-wlh-variantId", selectedVariant.id);
          buttonDiv.setAttribute(
            "data-wlh-price",
            (selectedVariant.price
              ? selectedVariant.price
              : productInfo.price) / 100
          );
          buttonDiv.setAttribute(
            "data-wlh-name",
            selectedVariant.name ? selectedVariant.name : productInfo.name
          );
          buttonDiv.setAttribute("data-wlh-image", image);
          buttonDiv.setAttribute("data-wlh-mode", "default");

          // add the div

          whqv_addAfterElement.parentNode.insertBefore(
            buttonDiv,
            whqv_addAfterElement.nextSibling
          );

          // init buttonf or wishlist
          var ev = new CustomEvent("wishlist-hero-add-to-custom-element", {
            detail: buttonDiv,
          });
          document.dispatchEvent(ev);
        } catch (e) {
          console.error(e);
        }
      }
    };
  });
</script>

Integration: Smart Product Filter & Search by Globo

May 18, 2021 | Wishlist Hero

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>