Why don’t my apps work in quick view?

Our quick view feature allows for lightning fast deep dives into your product information - a feature we're able to create by lazyloading elements with JavaScript. That means that any app or third-party customization that needs to run on that page will have to add some code to the theme to initialize it after the product quick view screen has loaded.

They can do this with the help of our JavaScript event listeners.

If the app wants to integrate with our product form it will have to wait until the form has loaded. That can be done by listening to our quickview:loaded event.

document.addEventListener('quickview:loaded', function(evt) {
  console.log(evt.detail.productId);
  var $form = $('#AddToCartForm-' + evt.detail.productId);
  var $addToCart = $('#ProductSection-' + evt.detail.productId).find('.add-to-cart');
});

If they want to run the code a bit earlier they can do so the instant the quick view screen opens by using our quickview:open event. This event is fired every time the modal is opened and has an initialized variable you can check to see if all elements have previously loaded (which is set when quickview:loaded runs). 

document.addEventListener('quickview:open', function(evt) {
  console.log(evt.detail.productId);

  if (evt.detail.initialized) {
    // quickview:open | already initialized
  } else {
    // First time being opened, some elements will not have loaded
  }
});