Skip to content

Instantly share code, notes, and snippets.

@lulessa
Created September 1, 2016 00:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lulessa/3b5214b33e98f996afe1fb9bc45826b0 to your computer and use it in GitHub Desktop.
Save lulessa/3b5214b33e98f996afe1fb9bc45826b0 to your computer and use it in GitHub Desktop.
Wishl (app for Shopify) javascript to modify prices on wishlist page
// Execute the function after wish list has completed loading.
$('#wishl-wrapper').on('listcomplete.wishl', function() {
// Change transformPrice function return value to suit your needs.
// Return value will directly replace item price on page.
// In this example, we add 25% to the price (multiply by 1.25)
// and move reformat it using Shopify's formatMoney function,
// which reflects the money format preferences of the current shop.
// If there is no price, or it is 0, transformPrice is not called.
var transformPrice = function(priceInCents) {
// priceInCents 10025 equals $100.25 price, 2500 is $25, and so on.
return Shopify.formatMoney(priceInCents * 1.25);
};
$('.wishl-item-price').each(function(index, element) {
var $this = $(this), $del = $('del', this);
// Detach <del> tag (crossed-out price)
$del = $del.detach();
// Reformat price and <del> tag price
$this.add($del).html(function(index, oldHtml) {
// Strip any non-digit characters
var originalPriceInCents = +oldHtml.replace(/\D/g, '');
if (originalPriceInCents) {
return transformPrice(originalPriceInCents);
} else {
return oldHtml;
}
});
// Reattach <del> tag
$this.append(' ', $del);
});
}
@lulessa
Copy link
Author

lulessa commented Sep 1, 2016

Wishl loads the wishlist items dynamically, therefore you must use jQuery/javascript to change the price after the page loads.

  1. Put the wishlist on a custom page. See instructions: http://lucaslessa.com/wishl-docs/#custom-page
  2. Copy this javascript code and change the transformPrice function to suit your needs: https://gist.github.com/lulessa/3b5214b33e98f996afe1fb9bc45826b0
  3. Open your theme's templates/page.wishl-wishlist.liquid file.
  4. Paste the javascript at the end of the template.

When all wishlist items on the page are done loading, your prices will be transformed (almost) immediately.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment