Add a Quick View using product link

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