How to Remove ISO Code After Product Price (Shopify)

GavinVanRooyen
May 28, 2020
191 views
0 votes
2 Answers

I have recently built out my store (whitewolf.co.za) with Shopify and installed an app that automatically switches the currency from my native currency (ZAR) to basically any other currency I select (USD, EUR etc). I have the currency converter positioned on the bottom of my desktop (and mobile) and then in the slide in menu as well on mobile. It is live on the site.

Now the problem comes in with the three letters after the product price called the ISO code (USD, ZAR, EUR etc.) I need to remove these three letters and just display the sign in front of the price ($, € or R). Just to be clear: the price is currently displayed as R245.00 ZAR and I need it to be R245 only. (If you can remove the decimals too, that would be great).

Support doesn’t want to help and say you need an expert to fix this, although they built the app.

I added 4 pieces of JS which I can see in Shopify. These may or may not be in the correct order as I know very little of JS. There may also be HTML(liquid) in the JS, which shouldn’t be there. I think you change the ISO code using the first part of JS. If you need anything else, please leave a comment and I will add it.

//1st part of JS (
<script>
    {%- comment -%} common data {%- endcomment -%}
    window.BOLD = window.BOLD || {};
    window.BOLD.common = window.BOLD.common || {};
    window.BOLD.common.Shopify = window.BOLD.common.Shopify || {};
    window.BOLD.common.Shopify.shop = {
      domain: '{{ shop.domain }}',
      permanent_domain: '{{ shop.permanent_domain }}',
      url: '{{ shop.url }}',
      secure_url: '{{ shop.secure_url }}',
      money_format: {{ shop.money_format | json }},
      currency: {{ shop.currency | json }}
    };
    window.BOLD.common.Shopify.customer = {
      id: {{ customer.id | json }},
      tags: {{ customer.tags | json }},
    };
    window.BOLD.common.Shopify.cart = {{ cart | json }};
    window.BOLD.common.template = '{{ template | split: "." | first }}';
    {%- comment -%} common functions {%- endcomment -%}
    window.BOLD.common.Shopify.formatMoney = function(money, format) {
        function n(t, e) {
            return "undefined" == typeof t ? e : t
        }
        function r(t, e, r, i) {
            if (e = n(e, 2),
                r = n(r, ","),
                i = n(i, "."),
            isNaN(t) || null == t)
                return 0;
            t = (t / 100).toFixed(e);
            var o = t.split(".")
                , a = o[0].replace(/(d)(?=(ddd)+(?!d))/g, "$1" + r)
                , s = o[1] ? i + o[1] : "";
            return a + s
        }
        "string" == typeof money && (money = money.replace(".", ""));
        var i = ""
            , o = /{{s*(w+)s*}}/
            , a = format || window.BOLD.common.Shopify.shop.money_format || window.Shopify.money_format || "$ {% raw %}{{ amount }}{% endraw %}";
        switch (a.match(o)[1]) {
            case "amount":
                i = r(money, 2, ",", ".");
                break;
            case "amount_no_decimals":
                i = r(money, 0, ",", ".");
                break;
            case "amount_with_comma_separator":
                i = r(money, 2, ".", ",");
                break;
            case "amount_no_decimals_with_comma_separator":
                i = r(money, 0, ".", ",");
                break;
            case "amount_with_space_separator":
                i = r(money, 2, " ", ",");
                break;
            case "amount_no_decimals_with_space_separator":
                i = r(money, 0, " ", ",");
                break;
            case "amount_with_apostrophe_separator":
                i = r(money, 2, "'", ".");
                break;
        }
        return a.replace(o, i);
    };
    window.BOLD.common.Shopify.saveProduct = function (handle, product) {
      if (typeof handle === 'string' && typeof window.BOLD.common.Shopify.products[handle] === 'undefined') {
        if (typeof product === 'number') {
          window.BOLD.common.Shopify.handles[product] = handle;
          product = { id: product };
        }
        window.BOLD.common.Shopify.products[handle] = product;
      }
    };
    window.BOLD.common.Shopify.saveVariant = function (variant_id, variant) {
      if (typeof variant_id === 'number' && typeof window.BOLD.common.Shopify.variants[variant_id] === 'undefined') {
        window.BOLD.common.Shopify.variants[variant_id] = variant;
      }
    };
    {%- comment -%} product data {%- endcomment -%}
    window.BOLD.common.Shopify.products = window.BOLD.common.Shopify.products || {};
    window.BOLD.common.Shopify.variants = window.BOLD.common.Shopify.variants || {};
    window.BOLD.common.Shopify.handles = window.BOLD.common.Shopify.handles || {};
    {%- if template == 'product' -%}
    window.BOLD.common.Shopify.handle = {{ product.handle | json }}
    {%- endif -%}
    {%- comment -%} product page {%- endcomment -%}
    window.BOLD.common.Shopify.saveProduct({{ product.handle | json }}, {{ product.id | json }});
    {%- for variant in product.variants -%}{%- assign csp_metafield_namespace = variant.id | prepend: "csp" -%}window.BOLD.common.Shopify.saveVariant({{ variant.id | json }}, { product_id: {{ product.id | json }}, product_handle: {{ product.handle | json }}, price: {{ variant.price | json }}, group_id: '{{variant.metafields.bold_rp.rp_group_id}}', csp_metafield: {{ product.metafields[csp_metafield_namespace] | json }}});{%- endfor -%}

    {%- comment -%} BOLD APPS INSTALLED {%- endcomment -%}
    {%- assign bold_apps_installed = shop | map: 'metafields' | map: 'bold_apps_installed' | first -%}
    window.BOLD.apps_installed = {{ bold_apps_installed | json }} || {};

    {%- unless bold_apps_installed contains 'Product Options' or bold_apps_installed contains 'Customer Pricing' or bold_apps_installed contains 'Product Bundles' or bold_apps_installed contains 'Product Discount' or bold_apps_installed contains 'Quantity Breaks' or bold_apps_installed contains 'Custom Order' or bold_apps_installed contains 'Order Manager' or bold_apps_installed contains 'The Motivator'-%}
        {%- comment -%} collection page {%- endcomment -%}
        {%- for product in collection.products -%}
            window.BOLD.common.Shopify.saveProduct({{ product.handle | json }}, {{ product.id | json }});
            {%- for variant in product.variants -%}{%- assign csp_metafield_namespace = variant.id | prepend: "csp" -%}window.BOLD.common.Shopify.saveVariant({{ variant.id | json }}, { product_id: {{ product.id | json }}, product_handle: {{ product.handle | json }}, price: {{ variant.price | json }}, group_id: '{{variant.metafields.bold_rp.rp_group_id}}', csp_metafield: {{ product.metafields[csp_metafield_namespace] | json }}});{%- endfor -%}
        {%- endfor -%}
        {%- comment -%} search page {%- endcomment -%}
        {%- for product in search.results -%}
            window.BOLD.common.Shopify.saveProduct({{ product.handle | json }}, {{ product.id | json }});
            {%- for variant in product.variants -%}{%- assign csp_metafield_namespace = variant.id | prepend: "csp" -%}window.BOLD.common.Shopify.saveVariant({{ variant.id | json }}, { product_id: {{ product.id | json }}, product_handle: {{ product.handle | json }}, price: {{ variant.price | json }}, group_id: '{{variant.metafields.bold_rp.rp_group_id}}', csp_metafield: {{ product.metafields[csp_metafield_namespace] | json }}});{%- endfor -%}
        {%- endfor -%}
    {%- endunless -%}

    {%- comment -%} cart page {%- endcomment -%}
    {%- for item in cart.items -%}{%- assign csp_metafield_namespace = item.variant_id | prepend: "csp" -%}window.BOLD.common.Shopify.saveVariant({{ item.variant_id | json }}, { product_id: {{ item.product.id | json }}, product_handle: {{ item.product.handle | json }}, price: {{ item.variant.price | json }}, group_id: '{{item.variant.metafields.bold_rp.rp_group_id}}', csp_metafield: {{ item.product.metafields[csp_metafield_namespace] | json }}});{%- endfor -%}
    {%- comment -%} metafields {%- endcomment -%}
    window.BOLD.common.Shopify.metafields = window.BOLD.common.Shopify.metafields || {};
    {%- assign metafield_namespaces_to_load = 'bold_rp,bold_csp_defaults' | split: ',' -%}
    {%- for namespace in metafield_namespaces_to_load -%}
        window.BOLD.common.Shopify.metafields[{{ namespace | json }}] = {{ shop.metafields[namespace] | json }};
    {%- endfor -%}
    window.BOLD.common.cacheParams = window.BOLD.common.cacheParams || {};
</script>

{%- comment -%} INCLUDE APP SCRIPTS BELOW {%- endcomment -%}







//2nd part of JS
{% comment %}
These script tags are DOM templates used by the Multi Currency javascript and should not be modified
{% endcomment %}
<script type="text/template" id="bold-currency-picker-template">
    <div class="BOLD-mc-picker multi">
        <div class="currentCurrency loading" data-current-currency>
            <span class="flag flag-loading" data-flag></span>
            <span class="name" data-name>&bull;&bull;&bull;</span>
            <span class="chevron">
                <svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M13.148 10.398l-1.297 1.289q-0.148 0.148-0.352 0.148t-0.352-0.148l-4.148-4.148-4.148 4.148q-0.148 0.148-0.352 0.148t-0.352-0.148l-1.297-1.289q-0.148-0.148-0.148-0.355t0.148-0.355l5.797-5.789q0.148-0.148 0.352-0.148t0.352 0.148l5.797 5.789q0.148 0.148 0.148 0.355t-0.148 0.355z" /></svg>
            </span>
        </div>
        <ul class="currencyList" data-currency-list></ul>
    </div>
</script>

<script type="text/template" id="bold-currency-picker-mount-template">
    {%- render 'bold-currency-picker-mount' -%}
</script>






//3rd piece of JS
{% comment %} always ensure the mc_base_url contains a trailing slash {% endcomment %}
{% assign mc_base_url = 'https://mc.boldapps.net/' %}
{% assign mc_shopDomain_url = mc_base_url | append: shop.permanent_domain %}
<script>
    // ensure these are available to the global window, for use in the bootstrap js asset
    window.BOLD_mc_bootstrapSettings = {
        shopDomainUrl: '{{ mc_shopDomain_url }}',
        flagsAssetUrl: '{{ 'flags.min.css' | asset_url }}',
        pickerCssAssetUrl: '{{ 'bold-currency-picker.css' | asset_url }}',
        productOriginalPrice: {{ product.price | default: '' | json }}

    };
</script>
<script src="{{ mc_base_url | append: 'install_assets/bold.multicurrency.js' }}" defer></script>
<script src="{{ 'bold-currency-bootstrap.js' | asset_url }}" defer></script>

{%- render 'bold-currency-templates' -%}




//last piece of JS
if (typeof BOLDCURRENCY !== 'undefined' && BOLDCURRENCY.converter && typeof BOLD_mc_bootstrapSettings !== 'undefined') {
  BOLD_mc_bootstrap(BOLD_mc_bootstrapSettings);
}

function BOLD_mc_bootstrap(options) {

  // inject CSS assets into the head of the document
  injectCssAssets([
    makeCssLink(options.flagsAssetUrl),
    makeCssLink(options.pickerCssAssetUrl)
  ]);

  BOLDCURRENCY.converter.requestRates = function (callback, moneyElements) {
    BOLD.helpers.js.get(options.shopDomainUrl + '/rates')
      .then(
        function (returnedValue) {
          if (returnedValue.hasOwnProperty('error')) {
            BOLDCURRENCY.enabled = false;
            console.info('Bold MultiCurrency: ' + returnedValue.error);
            throw(returnedValue.error);
          } else {
            callback(returnedValue, moneyElements);
            BOLDCURRENCY.converter.enableAggressiveRefresh();
          }
        })
      .catch(function (err) {
        if (true === options.debug) {
          console.log(err);
        }
        BOLDCURRENCY.converter.hideAllInstances();
      });
  };

  BOLDCURRENCY.converter.postCartDataToCashier = function (cartId, callback, moneyElements) {
    BOLD.helpers.js.post(options.shopDomainUrl + '/rates', {'cart_id': cartId})
      .then(
        function (returnedValue) {
          if (returnedValue.hasOwnProperty('error')) {
            BOLDCURRENCY.enabled = false;
            console.info('Bold MultiCurrency: ' + returnedValue.error);
            throw(returnedValue.error);
          } else {
            if (typeof callback === 'function') {
              callback(returnedValue, moneyElements);
              BOLDCURRENCY.converter.enableAggressiveRefresh();
            }
          }
        })
      .catch(function (err) {
        if (true === options.debug) {
          console.log(err);
        }
        BOLDCURRENCY.converter.hideAllInstances();
      });
  };

  if (BOLD && typeof BOLD.helpers !== 'undefined') {
    BOLD.helpers.setupMutationObservers = function (target, eventToEmit) {
      var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
          var variantId = parseInt(document.querySelector('select[name=id]').value);
          BOLD.helpers.shopify.getVariant(BOLD.helpers.shopify.getProductHandleById(variantId), variantId)
            .then(function (data) {
              BOLD.common.eventEmitter.emit(eventToEmit, {
                selector: target,
                variant: data,
                originalProductPrice: options.productOriginalPrice
              });
            });
        });
      });

      var config = {attributes: true, childList: true, characterData: true};

      observer.observe(target, config);
    };
  }

  document.addEventListener('DOMContentLoaded', function (event) {
    if (window.jQuery && jQuery().on) {
      jQuery('.bold_product_page_price').parent().each(function (i, parent) {
        BOLD.helpers.setupMutationObservers(parent, 'BOLD_CURRENCY_product_price_updated');
      });
    }

    BOLDCURRENCY.converter.initialize(initPickers());
  });

  function injectCssAssets(assets) {
    assets.forEach(function (asset) {
      document.head.appendChild(asset);
    });
  }

  function initPickers() {
    var pickerTemplateParent = document.getElementById('bold-currency-picker-template');
    var mountpointTemplateParent = document.getElementById('bold-currency-picker-mount-template');

    if (null === pickerTemplateParent) {
      throw 'No picker template found';
    } else if (null === mountpointTemplateParent) {
      throw 'No mountpoint template found';
    }

    // a live HTMLCollection that will automatically reflect DOM updates
    var mountpointInstances = document.getElementsByClassName('BOLD-mc-picker-mnt');
    if (0 === mountpointInstances.length) {
      // inject automatically if necessary
      var injectedMount = document.body.appendChild(getElementFromTemplate(mountpointTemplateParent));
      addClass(injectedMount, 'injected');
    }

    var pickerInstances = [];

    /** @type {Element} instance **/
    Array.prototype.forEach.call(mountpointInstances, function (instance) {
      var appendedChild = instance.appendChild(getElementFromTemplate(pickerTemplateParent));
      appendedChild.style.display = '';
      pickerInstances.push(appendedChild);
    });

    return pickerInstances;
  }

  function makeCssLink(href) {
    var cssLink = document.createElement('link');
    cssLink.type = 'text/css';
    cssLink.rel = 'stylesheet';
    cssLink.href = href;
    return cssLink;
  }

  /**
   * This function requires that the template element contains only one single child element
   * (The child element can contain arbitrary content however)
   *
   * @param {Element} templateElement
   * @return {Node} the top-level child element within the template
   */
  function getElementFromTemplate(templateElement) {
    var tmp = document.createElement('div');
    tmp.innerHTML = templateElement.innerHTML.trim();
    return tmp.firstChild;
  }

  function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
  }

  function addClass(element, className) {
    if (!hasClass(element, className)) {
      return element.className += ' ' + className;
    }
  }

}
//end

.BOLD-mc-picker-mnt {
    position: relative;
    display: inline-block; }

.BOLD-mc-picker-mnt.injected {
    position: fixed;
    overflow: visible;
    z-index: 99999; }
    
    
.BOLD-mc-picker > .currentCurrency > .flag, .BOLD-mc-picker > .currencyList > .option > .flag {
    background-image: url("https://static.boldcommerce.com/multicurrency/flags.png");
    position: absolute;
    height: 11px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 6px;
    width: 16px; }

.BOLD-mc-picker {
    margin-bottom: 0;
    white-space: nowrap;
    height: 32px;
  	
}
.BOLD-mc-picker * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
.BOLD-mc-picker > .currentCurrency {
    position: relative;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    width: 80px;
/*     border: 1px solid #DDD; */
    background: #FFF;
    /*-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);*/
    padding: 0 0 0 27px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
	color: #1c1b1b !important;  
	font-family: Montserrat,sans-serif;
    font-weight: 600;
  	font-size: 11px;
    font-style: normal;
    transition: color 0.2s ease-in-out;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.BOLD-mc-picker > .currentCurrency > .flag.flag-loading {
    background: gray;
    display: inline-block; }
.BOLD-mc-picker > .currentCurrency > .chevron {
    position: absolute;
    right: 3px;
    top: 53%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    display: block;
    margin-left: -3px; }
.BOLD-mc-picker > .currentCurrency > .chevron > svg {
    position: absolute;
/*     top: 0; */
    right: 0;
    bottom: 2px;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s; }
.BOLD-mc-picker > .currencyList {
  	color: #1c1b1b !important;  
	font-family: Montserrat,sans-serif;
    font-weight: 600;
  	font-size: 11px;
    font-style: normal;
    transition: color 0.2s ease-in-out;
    letter-spacing: 0.1em;
    text-transform: uppercase;  
  	width: 200px;
    vertical-align: inherit;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #fff;
    /* prevent horizontal scrollbars on windows */
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 145px;
/*     border: 1px solid #e5e5e5; */
    z-index: 111;
    list-style: none;
    margin: 0;
    padding: 0;
    display: none !important;
	margin-left: 60px;
  	
}
.BOLD-mc-picker > .currencyList > .option {
/*     border-bottom: 1px solid #e5e5e5; */
    width: 200px;
    margin: 0;
    padding: 0 0 0 27px;
    cursor: pointer;
    text-align: left;
    float: none;
    height: 32px;
    line-height: 32px; }
.BOLD-mc-picker > .currencyList > .option:last-child {
    border-bottom: none; }
.BOLD-mc-picker.open > .currentCurrency > .chevron > svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
.BOLD-mc-picker.open > .currencyList {
    display: block !important; }
.BOLD-mc-picker-mnt[data-open="up"] > .BOLD-mc-picker > .currentCurrency > .chevron > svg {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
.BOLD-mc-picker-mnt[data-open="up"] > .BOLD-mc-picker.open > .currentCurrency > .chevron > svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
.BOLD-mc-picker-mnt[data-open="up"] > .BOLD-mc-picker > .currencyList {
    bottom: 31px;
    top: auto; }
.BOLD-mc-picker-mnt[data-open="down"] > .BOLD-mc-picker > .currentCurrency > .chevron > svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
.BOLD-mc-picker-mnt[data-open="down"] > .BOLD-mc-picker.open > .currentCurrency > .chevron > svg {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
.BOLD-mc-picker-mnt[data-open="down"] > .BOLD-mc-picker > .currencyList {
    top: 31px;
    bottom: auto; }


/* Add own CSS to style BOLD currency picker */

@media only screen and (max-width: 767px){  
  .BOLD-desktop-currency-picker {
    display:none;
  }
}

@media only screen and (min-width: 768px){  
  .BOLD-mobile-currency-picker {
    display:none;
  }
}

.BOLD-sidebar-menu {
 	margin: 0 0 15px 12px; 
}

{% assign openDirection = openDirection | default: 'up' %}
<span style="display:none;" class="BOLD-mc-picker-mnt" data-open="{{openDirection}}" g-bold-mc-picker-mnt></span>

Answers

- MustaphaDABELLA
- September 26, 2020 at 6:46 pm
- 0 votes
0
To remove ISO
- for example 1,000.00 USD will be 1,000.00:
  {{ product.price_min| money_without_currency | remove:","}}
- 1,000.00 USD to 1000.00 :
  {{ product.price_min| money_without_currency | remove:","}}
- - 1,000.00 USD to 1000 :
    
    {{ product.price_min| money_without_currency | remove:"," | remove:"." | divided_by: 100}}
Login or Signup to reply.

- AcidCoder
- May 22, 2021 at 8:42 pm
- 0 votes
0
go to setting then general

in the store currency section, click change formatting

in my case, I need to remove MYR

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.