Wishl jQuery events API

This document is included as a courtesy to aide developers in customizations related to Wishl. You should be familiar with HTML and liquid to implement the changes listed below.

There is a couple of custom jQuery events on the wishlist page you can hook into to customize behavior or alter DOM elements on page.

Event name	Arguments received	Triggering element	When it fires
`listload.wishl`	`event`	`#wishl-wrapper`	Whenever a list of wishlist items begins to load on page, including first loading a wishlist, switching to another wishlist, going to next/previous page of items. Fires even when the wishlist is empty.
`listcomplete.wishl`	`event`	`#wishl-wrapper`	All wishlist items to be displayed have completely loaded on page. This is the tail end of the listload event. However, it does not fire if the wishlist is empty (there are no items to load).
`itemadd.wishl`	`event`, `item`	`.add-to-wishl`	After an item has been added to a wishlist.

What follows is an example using jQuery to tap into the events to time the loading a page of wishlist items. It then adds an alert when an item's add to cart button is clicked.

$(function() { // Ensure jquery has loaded
  var timer;
  $("#wishl-wrapper").on("listload.wishl", function() {
    timer = new Date();
    console.log("Wishl listload event fired.");
  });
  $("#wishl-wrapper").on("listcomplete.wishl", function() {
    var now = new Date(), timed = (now.getTime() - timer.getTime());
    console.log("Wishl listcomplete event fired.");
    console.log("Wishl items loaded in " + timed + " milliseconds");
    $(this).find(".add-to-cart").on("click", function() {
      alert("Yes, you clicked add to cart button.");
      return true; // Proceeds with adding to cart
    });
  });
});