Javascript API
This article documents the Javascript API for WooCommerce Quick View Pro. This article is aimed at developers.
window.WCQuickViewPro
The window.WCQuickViewPro object provides the following functions:
initialize
Binds the events for the Quick View on the current page.
openQuickView
Opens a Quick View modal for a given product.
Arguments
int productId – The product ID (required)
Element trigger – The DOM element that triggered the quick view action (optional)
handleQuickViewClick
An event handler which can be used to open a Quick View modal (e.g. when an element is clicked). The element that triggers the event should have a product_id data attribute defined. E.g.
<a href="#" data-product_id="234">Open Quick View</a>
Events
-
quick_view_pro:open
- This is triggered each time a quick view is opened for a product. Event data:
modal- the modal object (see below)
-
quick_view_pro:load
- This is triggered the first time the quick view is loaded for a product. Subsequent calls to the same product will only trigger the
quick_view_pro:openevent as the product data is only loaded once. Event data:modal- the modal object (see below)
-
quick_view_pro:close
- This is triggered each time the quick view is closed. Event data:
modal- the modal object (see below)
-
quick_view_pro:added_to_cart
- This is triggered each time a product is added to the cart from the quick view. Event data:
response- the cart response object. This contains the following properties:cart_message- The cart success message. This will only be present if the product was added successfully.error- The error message if adding to the cart has failed.fragments- The cart "fragments" used by WooCommerce. Usually just contains the mini-cart widget.cart_hash- An encoded hash of the cart. This is used by WooCommerce when triggering cart events.
modal- the modal object (see below)
The modal object
The modal object passed to each of the Javascript events is the modal object from the jQuery Modal library which is used in Quick View Pro. It contains one main property - $elm - which is a jQuery object for the modal <div> element.