Shopify - Displaying prices with and without VAT on product page in different currencies
<p>I tried implementing this "<a href="https://stackoverflow.com/questions/12440288/adding-20-to-product-price-via-javascript-in-shopify/12440312#12440312">Adding 20% to product price via Javascript in Shopify</a>", which works fine as long as the default currency (Euros) is used. The standard output is "€65.00 (€52.00 EX. VAT)", which is produced by this code (all code has been copied to <a href="https://jsfiddle.net/3synLrad/" rel="nofollow noreferrer">https://jsfiddle.net/3synLrad/</a>):</p>

<pre><code>ProductView.prototype.switchCurrency = function(minimum, compare) {
         var attribute, _i, _len, _ref;
         _ref = this.minimumPriceArea[0].attributes;
         for (_i = 0, _len = _ref.length; _i &lt; _len; _i++) {
           attribute = _ref[_i];
           if (attribute.name.indexOf("data-") &gt; -1) {
             this.minimumPriceArea.attr(attribute.name, "");
           }
         }
         this.minimumPriceArea.attr("data-currency-" + Currency.currentCurrency, "").attr("data-currency-" + Theme.currency, Shopify.formatMoney(minimum * 1.25, Theme.moneyFormat) + ' (' + Shopify.formatMoney(minimum, Theme.moneyFormat) + ' EX. VAT)').attr("data-currency", Theme.currency);
         this.$(".product-price-compare").attr("data-currency-" + Theme.currency, Shopify.formatMoney(compare * 1.25, Theme.moneyFormat) + ' (' + Shopify.formatMoney(compare, Theme.moneyFormat) + ' EX. VAT)').attr("data-currency", Theme.currency);
         return $(".currency-switcher").trigger("reset-currency");
       };


       ProductView.prototype.selectCallback = function(variant, selector) {
         var addToCartButton;
         addToCartButton = this.$("#product-add input");
         if (variant) {
           if (variant.available) {
             addToCartButton.val("{{ 'product.add_to_cart.submit' | t }}").removeClass("disabled");
           } else {
             addToCartButton.val("{{ 'product.add_to_cart.sold_out' | t }}").addClass("disabled");
           }
           this.minimumPriceArea.html(Shopify.formatMoney(variant.price * 1.25, Theme.moneyFormat) + ' (' + Shopify.formatMoney(variant.price, Theme.moneyFormat) + ' EX. VAT)');
           this.$(".product-price-compare").remove();
           if (variant.compare_at_price &gt; variant.price) {
             this.minimumPriceArea.after("&lt;span class='product-price-compare accent-text money' /&gt;");
             this.$(".product-price-compare").html(Shopify.formatMoney(variant.compare_at_price * 1.25, Theme.moneyFormat) + ' (' + Shopify.formatMoney(variant.compare_at_price, Theme.moneyFormat) + ' EX. VAT)');
           }
           if (Theme.currencySwitcher) {
             this.switchCurrency(variant.price, variant.compare_at_price);
           }
           if (this.hasVariantImages) {
             if (variant.featured_image) {
               this.switchProductImage(null, variant.featured_image);
             } else {
               this.$(".product-main-image img").attr("src", this.product.featured_image);
             }
           }
         } else {
           addToCartButton.val("{{ 'product.add_to_cart.unavailable' | t }}").addClass("disabled");
         }
         return this.$(".product-message-wrapper").remove();
       };
</code></pre>

<p>However, if the user uses the Currency Switcher it displays a number that is off by 10.000 and all the text disappears. So what should be "£55.18 (£44.14 EX. VAT)" simply becomes "£551,794.83", "$73.09 ($58.47 EX. VAT)" becomes "$730,918.47" and "484,04 (387,22 EX. VAT)" (the price in DKK) becomes "4.840.487,61". But if the user switches back to Euros it is displayed correctly as "€65.00 (€52.00 EX. VAT)".</p>

<p>The theme uses <a href="https://github.com/carolineschnapp/currencies" rel="nofollow noreferrer">https://github.com/carolineschnapp/currencies</a> to calculate currencies. I suspect it's the convertAll function that needs to be altered. I'm unsure, whether I should edit that file or change the code below:</p>

<pre><code>CurrencyView.prototype.events = {
      "change [name=currencies]": "convertAll",
      "switch-currency": "switchCurrency",
      "reset-currency": "resetCurrency"
    };

    CurrencyView.prototype.initialize = function() {
      var cents, doubleMoney, money, _i, _j, _len, _len1, _ref, _ref1;
      Currency.format = Theme.currencySwitcherFormat;
      Currency.money_with_currency_format = {};
      Currency.money_with_currency_format[Theme.currency] = Theme.moneyFormatCurrency;
      Currency.money_format = {};
      Currency.money_format[Theme.currency] = Theme.moneyFormat;
      this.defaultCurrency = "{{ settings.currency-switcher-default-currency }}";
      this.cookieCurrency = Currency.cookie.read();
      if (this.cookieCurrency) {
        this.$("[name=currencies]").val(this.cookieCurrency);
      }
      _ref = $("span.money span.money");
      for (_i = 0, _len = _ref.length; _i &lt; _len; _i++) {
        doubleMoney = _ref[_i];
        $(doubleMoney).parents("span.money").removeClass("money");
      }
      _ref1 = $("span.money");
      for (_j = 0, _len1 = _ref1.length; _j &lt; _len1; _j++) {
        money = _ref1[_j];
        $(money).data("currency-" + Theme.currency, $(money).html());
        if (Currency.format === "money_with_currency_format") {
          cents = parseInt($(money).html().replace(/[^0-9]/g, ''), 10);
          $(money).html(Shopify.formatMoney(cents, Theme.moneyFormat));
        }
      }
      this.switchCurrency();
      return this.$(".selected-currency").text(Currency.currentCurrency);
    };

    CurrencyView.prototype.resetCurrency = function() {
        return Currency.convertAll(Theme.currency, this.$("[name=currencies]").val());
    };

    CurrencyView.prototype.switchCurrency = function() {
      if (this.cookieCurrency === null) {
        if (Theme.currency !== this.defaultCurrency) {
          return Currency.convertAll(Theme.currency, this.defaultCurrency);
        } else {
          return Currency.currentCurrency = this.defaultCurrency;
        }
      } else if (this.$("[name=currencies]").size() &amp;&amp; this.$("[name=currencies] option[value=" + this.cookieCurrency + "]").size() === 0) {
        Currency.currentCurrency = Theme.currency;
        return Currency.cookie.write(Theme.currency);
      } else if (this.cookieCurrency === Theme.currency) {
        return Currency.currentCurrency = Theme.currency;
      } else {
        return Currency.convertAll(Theme.currency, this.cookieCurrency);
      }
    };

    CurrencyView.prototype.convertAll = function(e, variant, selector) {
      var newCurrency;
      newCurrency = $(e.target).val();
      Currency.convertAll(Currency.currentCurrency, newCurrency);
      this.$(".selected-currency").text(Currency.currentCurrency);
      return this.cookieCurrency = newCurrency;
    };
</code></pre>

<p>When I've tried to edit the code above the currency selector (the dropdown) has been inactive so I've only managed to break the script.</p>

<p>So to sum up. How can I make the page list all the different currencies as "€65.00 (€52.00 EX. VAT)"?</p>

<p>Thanks in advance!</p>