Add a Quick View using product link

  • Click on Customize the theme button
  • Add the below code in App embeds => Additional integration code (Additional HTML) after replacing these 3 classes (.vellir-peek-mode-modal-content, .sv-view-details-link, .sv-add-to-cart-button ) with the classes in your theme

<!-- 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>
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us