Customization

CSS

The app components are wrapped inside a div with the data-app attribute set to eastsideco_wishlist. To avoid any conflicts, it is recommended you reference this div in your CSS declarations to avoid any conflicts. For example:

[data-app="eastsideco_wishlist"] .esc-btn {
    color: red;
}

CSS Declarations

.esc-btn - Button (used only if the Custom Style button option is selected in the Customization section)

.esc-btn-icon - Button for icons (like the heart icon for "Add to Wishlist" button)

.esc-wishlist-add - Add a Wishlist button wrapper

.esc-wishlist-share - The share buttons wrapper

.share-facebook - Facebook share button

.share-twitter - Twitter share button

.share-google - Google share button

.esc-wishlist-products - Added to wishlist products wrapper

.esc-wishlist-product-item - Added to wishlist product

.esc-wishlist-product-item-title - Added to wishlist product title

.esc-wishlist-product-item-price - Added to wishlist product price

.esc-wishlist-product-item-actions - Added to wishlist product actions wrapper

.esc-wishlist-no-products - No products in the wishlist wrapper

.esc-wishlist-item - Wishlist item wrapper (in listing all wishlists)

.esc-wishlist-item-image - Wishlist item image wrapper

.esc-wishlist-item-name - Wishlist item name

.esc-wishlist-item-actions - Wishlist item actions wrapper

.esc-wishlist-item-edit - Wishlist item edit mode wrapper

JavaScript

We provide a JavaScript API wrapped inside the window.esc_wishlist array. To use the api, you can push to window.esc_wishlist array functions that take the Api object. For example:

window.esc_wishlist = window.esc_wishlist || [];
esc_wishlist.push(function(Api) {
  Api.on('addToWishlist', function (data) {
    console.log('Product added to wishlist.', { data });
  });
});

The Api object is essentially an event bus. You can use the following methods:

on: add an event listener. Example:

Api.on('addToWishlist', function (data) {
  console.log('Added a wishlist', { data });
});

once: add an event listener that executes only once. Example:

Api.once('deleteWishlist', function (data) {
  console.log('Deleted a wishlist', { data });
});

emit: fire an event. Example:

var variantId = 41098318092;
Api.emit('overwriteVariantId', variantId);

drop: drop an event listener. Example:

var e = Api.on('addWishlist', function (data) { ... });
Api.drop(e);

The following events can be listened on:

• addWishlist - Fired when a wishlist is created.
• deleteWishlist - Fired when a wishlist is deleted.
• addToWishlist - Fired when a product is added to wishlist.
• removeFromWishlist - Fired when a product is removed from the wishlist.
• changeLineItemNote - Fired when a line item note inside a wishlist is changed.
• addedToCart - Fired when an item has been successfully added to the cart from wishlist

The following events can be fired:

• overwriteVariantId - Overwrites the current variant id for the "Add to Wishlist" button. By default, the variant id is obtained from the variant URL parameter. In case the theme doesn't provide that URL parameter or if you need to dynamically change the variant id, you can fire this event to do so.
• turnOffCartProperty - Prevents ‘_from_wishlist’ property from being added to the cart items. This event can only be called after the wishlist widget has loaded, so it is recommended to call it after a delay. See example below:

setTimeout(function() { 
	 window.esc_wishlist = window.esc_wishlist || [];
	esc_wishlist.push(function(Api) {
	     Api.emit('turnOffCartProperty');
	});
 }, 5000);

You can also continue using our old API if you've used it before. It is, however, deprecated:

window.ESCWishlist.setCurrentVariantId(variantId) - Sets the current variant id for the "Add to Wishlist" button. By default, the variant id is obtained from the variant URL parameter. In case the theme doesn't provide that URL parameter or if you need to dynamically change the variant id, you can use this method to do so.