Increasing product prices by 20% using JavaScript in Shopify platform

Other Questions Shopify
1 
Hey everyone! I'm kinda stuck with a JavaScript issue in my Shopify store. I've got this cool setup where I'm showing prices with a 20% markup using Liquid tags. It's working great on most pages, but I'm running into trouble on the product page.

There's this JavaScript that's messing things up. It's supposed to disable the 'Add to Cart' button when a size is out of stock and change the price display. But it's not applying my 20% markup!

Here's what I've got so far:

function updateProductInfo(variant, element) {
  if (variant && variant.in_stock) {
    element.find('.buy-now').removeClass('unavailable').prop('disabled', false).text('Purchase');
    if (!variant.compare_price) {
      element.find('.item-cost').text(formatCurrency(variant.price) + ' + Tax');
    } else {
      element.find('.item-cost').html('<span>' + formatCurrency(variant.price) + '</span> <s>' + formatCurrency(variant.compare_price) + ' + Tax</s>');
    }
  } else {
    element.find('.buy-now').addClass('unavailable').prop('disabled', true).text('Out of Stock');
    element.find('.item-cost').text(variant ? 'Out of Stock' : 'Not Available');
  }
}

I can easily add 20% to prices on other pages with Liquid like this:
{{ item.price | times:1.20 | money }}

But how do I get this JavaScript to show the 20% markup too? Any ideas? Thanks a bunch!
2

I’ve dealt with a similar issue in my Shopify store. The trick is to modify the JavaScript function to apply the markup. Here’s what worked for me:

In the updateProductInfo function, you can multiply the price by 1.2 before formatting it. Something like this:

function updateProductInfo(variant, element) {
  if (variant && variant.in_stock) {
    let markedUpPrice = variant.price * 1.2;
    let markedUpComparePrice = variant.compare_price ? variant.compare_price * 1.2 : null;
    
    element.find('.buy-now').removeClass('unavailable').prop('disabled', false).text('Purchase');
    if (!markedUpComparePrice) {
      element.find('.item-cost').text(formatCurrency(markedUpPrice) + ' + Tax');
    } else {
      element.find('.item-cost').html('<span>' + formatCurrency(markedUpPrice) + '</span> <s>' + formatCurrency(markedUpComparePrice) + ' + Tax</s>');
    }
  } else {
    // Rest of your code...
  }
}

This should apply the 20% markup consistently across your product pages. Make sure to test thoroughly, especially with variants and sale prices. Good luck!