Integration: Quick View & Color Swatch ++ by qikify

May 18, 2021 | Wishlist Hero

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

[code lang=”js”]
<!– 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>
[/code]

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:

[css]
<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>
[/css]

Wishlist Hero Integration with Smart Search & Instant Search by Searchanise

May 17, 2021 | Wishlist Hero

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

“`html
[code lang=”js”]
<!– wishlist hero Searnichse integration –>
<script>
$(document).on("Searchanise.ResultsUpdated", function (event, results) {
console.log("Results back ..");
document.querySelectorAll(" .snize-product").forEach(function (sp) {
if (sp.getAttribute("id")) {
var productId = sp.getAttribute("id").replace(/[^0-9\.]+/g, "");
var productUrl = sp
.querySelector("a.snize-view-link")
.getAttribute("href");
var productImage = sp
.querySelector("img.snize-item-image")
.getAttribute("src");
var productTitle = sp.querySelector(".snize-title").innerText;
var productPrice = 0;
try {
productPrice = sp.querySelector(".snize-price").innerText;
productPrice = parseFloat(productPrice.replace(/[^0-9\.]+/g, ""));
} catch (ex) {
console.log(ex);
}

var button = document.createElement("div");
button.setAttribute("data-wlh-id", productId);
button.setAttribute("data-wlh-variantid", productId);
button.setAttribute("data-wlh-price", productPrice);
button.setAttribute("data-wlh-link", productUrl);
button.setAttribute("data-wlh-name", productTitle);
button.setAttribute("data-wlh-image", productImage);
button.setAttribute("data-wlh-mode", "icon_only");
button.classList.add("wishlist-hero-custom-button");
button.classList.add("wishlisthero-floating");
sp.insertBefore(button, sp.querySelector(".snize-view-link"));
// now
var ev = new CustomEvent("wishlist-hero-add-to-custom-element", {
detail: button,
});
document.dispatchEvent(ev);
}
});
});
&lt;/script&gt;
<!– end wishlist hero Searnise integration –>
[/code]
“`