Quick View - qikify app
- Click on Customize the theme button
- Add the below code in App embeds => Additional integration code (Additional HTML)
<!-- Wishlist Hero Quick View listener -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js"></script>
<script type="text/javascript">
document.arrive(".qikify-quickview-app .qview-title a", function (link_container) {
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>