Categories
< All Topics
Print

Add a generic 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

&lt;!-- Wishlist Hero Quick View listener --&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/arrive@2.4.1/src/arrive.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
  document.arrive(&quot;.vellir-peek-mode-modal-content&quot;, function (modal) {
    var link = modal.querySelector(&quot;.sv-view-details-link a&quot;).href;

    // Prepare and add div prams
    var whqv_addAfterElement = modal.querySelector(&quot;.sv-add-to-cart-button&quot;);
    var whqv_productLink = link;
    var whqv_variantId = null;

    // ** Perpare and add div
    var jsonLink = whqv_productLink + &quot;.js&quot;;
    let xhr = new XMLHttpRequest();
    xhr.open(&quot;GET&quot;, 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 &amp;&amp; productInfo.images.length &gt; 0) {
            image = productInfo.images[0];
          }
          if (selectedVariant.featured_image) {
            image = selectedVariant.featured_image;
          }
          var buttonDiv = document.createElement(&quot;div&quot;);
          buttonDiv.classList.add(&quot;wishlisthero-quick-view&quot;);
          buttonDiv.setAttribute(&quot;data-wlh-id&quot;, productInfo.id);
          buttonDiv.setAttribute(&quot;data-wlh-link&quot;, whqv_productLink);
          buttonDiv.setAttribute(&quot;data-wlh-variantId&quot;, selectedVariant.id);
          buttonDiv.setAttribute(
            &quot;data-wlh-price&quot;,
            (selectedVariant.price
              ? selectedVariant.price
              : productInfo.price) / 100
          );
          buttonDiv.setAttribute(
            &quot;data-wlh-name&quot;,
            selectedVariant.name ? selectedVariant.name : productInfo.name
          );
          buttonDiv.setAttribute(&quot;data-wlh-image&quot;, image);
          buttonDiv.setAttribute(&quot;data-wlh-mode&quot;, &quot;default&quot;);

          // add the div

          whqv_addAfterElement.parentNode.insertBefore(
            buttonDiv,
            whqv_addAfterElement.nextSibling
          );

          // init buttonf or wishlist
          var ev = new CustomEvent(&quot;wishlist-hero-add-to-custom-element&quot;, {
            detail: buttonDiv,
          });
          document.dispatchEvent(ev);
        } catch (e) {
          console.error(e);
        }
      }
    };
  });
&lt;/script&gt;

“`

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

{% render 'wishlisthero-collection-product' with product: product , buttonMode:
'default', buttonClass:'wishlisthero-quick-view' %}

“`

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

// Exception to above: clicking anywhere on the modal content will NOT close it
this.nodes.$modalContent.on(&quot;click.modal&quot;, function (evt) {
  //evt.stopImmediatePropagation();
  // Wishlisthero : fix

  if (
    !window
      .jQuery(evt.target)
      .parent()
      .parent()
      .hasClass(&quot;wishlist-hero-custom-button&quot;) &amp;&amp;
    !window.jQuery(evt.target).parent().hasClass(&quot;wishlist-hero-custom-button&quot;)
  ) {
    evt.stopImmediatePropagation();
  } else {
    evt.preventDefault();
  }
});

“`

Next Add Wishlist Button to Your Collections Page