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.
[css]
<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>
[/css]
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
[code lang=”js”]
<!– 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 –>
“`
[/code]
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]
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]
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);
}
});
});
</script>
<!– end wishlist hero Searnise integration –>
[/code]
“`
