JavaScript events

XB Wishlist listens for, and sends, a few events on document. Use them from your theme's JavaScript or from Custom JavaScript.

#Save a product

document.dispatchEvent(
  new CustomEvent('xb-wishlist:add', {
    detail: {
      productId: '8123456789012',
      variantId: '44012345678901',
      productTitle: 'Wool overshirt',
      productHandle: 'wool-overshirt',
    },
  }),
);

This goes through the same steps as a tap on the heart: the notification popup, the guest wishlist rules, the hidden products rule and the header count all behave the same way.

variantId matters when Add by variant is on. Otherwise the product is saved as a whole.

#Remove a product

document.dispatchEvent(
  new CustomEvent('xb-wishlist:remove', {
    detail: { productId: '8123456789012', variantId: '44012345678901' },
  }),
);

#When XB Wishlist changes the cart

When a shopper moves an item from the cart to the wishlist with Save for later, XB Wishlist updates the cart and fires two events:

• cart:refresh: the event Dawn 15+ and Horizon listen to, to redraw the cart drawer and the cart count.
• xb-wishlist:cart-updated: with the new cart in event.detail.cart, in the format of Shopify's /cart/change.js.

If your theme's cart drawer doesn't update after Save for later, refresh it from the second event:

document.addEventListener('xb-wishlist:cart-updated', event => {
  const { item_count } = event.detail.cart;
  document.querySelectorAll('.cart-count-bubble span').forEach(el => (el.textContent = item_count));
});

The selector above is an example. Use the one for your theme's cart count.

#Store settings

window.xb_wishlist holds what the app embed knows about the page: the shop, the customer ID when signed in, the current product and variant, the language and the currency. Read it rather than parsing the page. Don't write to it.