For all themes except Impulse
1. Add and EDIT the following in `snippets/wishlisthero-styles.liquid`, Editing `.vellir-peek-mode-modal-content` to be the selector of product modal, and the `whqv_…` variables
“`html
[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(".vellir-peek-mode-modal-content", function (modal) {
var link = modal.querySelector(".sv-view-details-link a").href;
// Prepare and add div prams
var whqv_addAfterElement = modal.querySelector(".sv-add-to-cart-button");
var whqv_productLink = link;
var whqv_variantId = null;
// ** Perpare and add div
var 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]
“`
For Impulse theme
1. Go to `snippets\product-template.liquid` , search for `id=”ProductFormHolder-{` and add our call to collection view after the div, the call below
“`html
[code lang=”js”]
{% render ‘wishlisthero-collection-product’ with product: product , buttonMode:
‘default’, buttonClass:’wishlisthero-quick-view’ %}
[/code]
“`
2. Go to `Assets\theme.js.liquid` , this has a handler that ignore all clicks on modal, so go to line 935 and add our code s exception explained in snipper below
“`javascript
[code lang=”js”]
// Exception to above: clicking anywhere on the modal content will NOT close it
this.nodes.$modalContent.on("click.modal", function (evt) {
//evt.stopImmediatePropagation();
// Wishlisthero : fix
if (
!window
.jQuery(evt.target)
.parent()
.parent()
.hasClass("wishlist-hero-custom-button") &&
!window.jQuery(evt.target).parent().hasClass("wishlist-hero-custom-button")
) {
evt.stopImmediatePropagation();
} else {
evt.preventDefault();
}
});
[/code]
“`