Currency conversion

This page will walk you through the process of configuring currency conversion for your Hello plugin.


Currency conversion for Zonos Hello plugins

Shopify

  1. Go to Apps > iGlobal Stores.
  2. Under Foreign Currency, click on Convert prices to foreign currency to enable currency conversion. foreign currency
  3. Under Currency Selectors, input your site’s currency selectors. Refer to Grabbing selectors tutorial if you do not know how to grab the site’s selectors.

Note: If you have multiple selectors, make sure to separate each selector with a comma.

Magento 1

  1. Go to System > Configuration > Zonos > Configuration > Zonos Hello.
  2. There is an input box labeled Currency Conversion; add all your price-related CSS selectors here.
    • Refer to Grabbing selectors tutorial if you do not know how to grab the site’s selectors.
    • Note: If you have multiple selectors, make sure to separate each selector with a comma.
  3. Hit Save on the top right.
  4. Clear your cache, if needed.

Magento 2

  1. Go to Stores > Configuration.
  2. On the left column under Zonos Configuration, click on Integration Options. This will bring up the Zonos settings.
  3. Under Zonos Hello, you can enter your currency selectors in the Currency selectors box. Currency selectors
    • Refer to Grabbing selectors tutorial if you do not know how to grab the site’s selectors.
    • Note: If you have multiple selectors, make sure to separate each selector with a comma.
  4. Refresh the cache to get your changes to show.

BigCommerce Stencil

  1. Go to App > Zonos Checkout.
  2. Toggle Currency Conversion to ENABLED.

BigCommerce Blueprint

  1. Go to Advanced Settings > Web Analytics > Google Analytics.
  2. Make sure Manually add Google Analytics tracking Code is selected.
  3. Add <script src="https://cdn.iglobalstores.com/js/bigcommerce/bc_currency.js"></script> to the bottom of the text area.
  4. Hit Save.

WooCommerce

  1. Click on Plugins > Installed Plugins.
  2. Scroll to the very bottom, then find the Zonos Checkout plugin.
  3. Click Settings for Zonos Checkout.
  4. Click on the Zonos Hello tab.
  5. Under Currency Selectors, add in your site’s currency selectors. Currency conversion
  6. Refer to Grabbing selectors tutorial if you do not know how to grab the site’s selectors.
    • *Note: If you have multiple selectors, make sure to separate each selector with a comma.

Volusion

You will need the code found in the Advanced info section. Refer to Grabbing selectors tutorial if you do not know how to grab the site’s selectors.

Volusion v1

  1. Go to Design > File Editor in your Admin area.
  2. Choose the template_x.html file from the file browser. (Note: x is the name or number to your current applied theme.)
  3. Paste in the JavaScript code you got from Advanced info. Make sure you have changed the currency selectors to your site’s currency selectors.
  4. Save and test your site to make sure your currency is converting as expected.

Custom

  1. You will need the code found in the Advanced info section.
  2. Place this code in an HTML or JavaScript file that gets used on all your websites. The code should be placed before your ending body tag: </body>.
  3. Refer to Grabbing selectors tutorial if you do not know how to grab the site’s selectors.

Sites not using USD as domestic currency

  1. In the helloSite database, find the entry based on siteKey and change the domesticCountries to the country code.
  2. Change the currencyCode to that country’s currency code; also change the country in the app.zonos Hello settings.
  3. Open your browser, and go to: https://store.iglobalstores.com/hello/site/{id-of-the-helloSite-entry-here}.

Note: If your site uses a domestic currency other than USD, please get in touch with Zonos to let us know what domestic currency you are using.


Grabbing selectors tutorial

Below is an example of prices that can be converted. By convention, all these prices must have a common selector that once found, can be used to pass into the config function on the zonos class to allow the price to toggle conversion. Refer to “Advanced info” for more information.

If your prices do not have a common selector, you will have to query each individual price until they are all converted.

Conversion prices

Step 1

Inspect

Step 2

Elements

Step 3

Highlighted prices

Step 4

Step 5

Money class

For class=”money”:

document.querySelectorAll('.money');

For id=”money”:

document.querySelectorAll('#money');

Step 6

Results

Highlight element

Step 7

Conversion


Advanced info

Using Zonos for currency conversion is a straightforward process. Simply call the method config on the zonos class and pass in the most specific currency selector you can find for the element(s) you want to convert.

This code will need to go in a script tag () if placed in an HTML file; otherwise, the code will need to be placed ina JavaScript file (a file ending in .js).

zonos.config({currencySelectors: “.class-name-here”}])

For example, if all the prices you want to convert have the class money, place .money in the function. If you have multiple selectors you want to convert, simply place them in a comma-separated list in the function.

One selector:

zonos.config({currencySelectors: ".money"});

Many selectors:

zonos.config({currencySelectors: ".money, #prices, div[class*='newprice']"});

Refer to Grabbing selectors tutorial on how to find your site’s selectors.

Zonos recommends the following code for currency conversion. This will ensure that currency conversion waits for Zonos Hello to load (so the code will not throw errors) and converts currency after prices on the site have loaded.

Note: The following code uses arrive.js to listen and wait for prices to load on the site.

<script>
/*
 * arrive.js
 * v2.4.1
 * https://github.com/uzairfarooq/arrive
 * MIT licensed
 *
 * Copyright (c) 2014-2017 Uzair Farooq
 */

var Arrive=function(e,t,n){"use strict";function r(e,t,n){l.addMethod(t,n,e.unbindEvent),l.addMethod(t,n,e.unbindEventWithSelectorOrCallback),l.addMethod(t,n,e.unbindEventWithSelectorAndCallback)}function i(e){e.arrive=f.bindEvent,r(f,e,"unbindArrive"),e.leave=d.bindEvent,r(d,e,"unbindLeave")}if(e.MutationObserver&&"undefined"!=typeof HTMLElement){var o=0,l=function(){var t=HTMLElement.prototype.matches||HTMLElement.prototype.webkitMatchesSelector||HTMLElement.prototype.mozMatchesSelector||HTMLElement.prototype.msMatchesSelector;return{matchesSelector:function(e,n){return e instanceof HTMLElement&&t.call(e,n)},addMethod:function(e,t,r){var i=e[t];e[t]=function(){return r.length==arguments.length?r.apply(this,arguments):"function"==typeof i?i.apply(this,arguments):n}},callCallbacks:function(e,t){t&&t.options.onceOnly&&1==t.firedElems.length&&(e=[e[0]]);for(var n,r=0;n=e[r];r++)n&&n.callback&&n.callback.call(n.elem,n.elem);t&&t.options.onceOnly&&1==t.firedElems.length&&t.me.unbindEventWithSelectorAndCallback.call(t.target,t.selector,t.callback)},checkChildNodesRecursively:function(e,t,n,r){for(var i,o=0;i=e[o];o++)n(i,t,r)&&r.push({callback:t.callback,elem:i}),i.childNodes.length>0&&l.checkChildNodesRecursively(i.childNodes,t,n,r)},mergeArrays:function(e,t){var n,r={};for(n in e)e.hasOwnProperty(n)&&(r[n]=e[n]);for(n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);return r},toElementsArray:function(t){return n===t||"number"==typeof t.length&&t!==e||(t=[t]),t}}}(),c=function(){var e=function(){this._eventsBucket=[],this._beforeAdding=null,this._beforeRemoving=null};return e.prototype.addEvent=function(e,t,n,r){var i={target:e,selector:t,options:n,callback:r,firedElems:[]};return this._beforeAdding&&this._beforeAdding(i),this._eventsBucket.push(i),i},e.prototype.removeEvent=function(e){for(var t,n=this._eventsBucket.length-1;t=this._eventsBucket[n];n--)if(e(t)){this._beforeRemoving&&this._beforeRemoving(t);var r=this._eventsBucket.splice(n,1);r&&r.length&&(r[0].callback=null)}},e.prototype.beforeAdding=function(e){this._beforeAdding=e},e.prototype.beforeRemoving=function(e){this._beforeRemoving=e},e}(),a=function(t,r){var i=new c,o=this,a={fireOnAttributesModification:!1};return i.beforeAdding(function(n){var i,l=n.target;(l===e.document||l===e)&&(l=document.getElementsByTagName("html")[0]),i=new MutationObserver(function(e){r.call(this,e,n)});var c=t(n.options);i.observe(l,c),n.observer=i,n.me=o}),i.beforeRemoving(function(e){e.observer.disconnect()}),this.bindEvent=function(e,t,n){t=l.mergeArrays(a,t);for(var r=l.toElementsArray(this),o=0;o<r.length;o++)i.addEvent(r[o],e,t,n)},this.unbindEvent=function(){var e=l.toElementsArray(this);i.removeEvent(function(t){for(var r=0;r<e.length;r++)if(this===n||t.target===e[r])return!0;return!1})},this.unbindEventWithSelectorOrCallback=function(e){var t,r=l.toElementsArray(this),o=e;t="function"==typeof e?function(e){for(var t=0;t<r.length;t++)if((this===n||e.target===r[t])&&e.callback===o)return!0;return!1}:function(t){for(var i=0;i<r.length;i++)if((this===n||t.target===r[i])&&t.selector===e)return!0;return!1},i.removeEvent(t)},this.unbindEventWithSelectorAndCallback=function(e,t){var r=l.toElementsArray(this);i.removeEvent(function(i){for(var o=0;o<r.length;o++)if((this===n||i.target===r[o])&&i.selector===e&&i.callback===t)return!0;return!1})},this},s=function(){function e(e){var t={attributes:!1,childList:!0,subtree:!0};return e.fireOnAttributesModification&&(t.attributes=!0),t}function t(e,t){e.forEach(function(e){var n=e.addedNodes,i=e.target,o=[];null!==n&&n.length>0?l.checkChildNodesRecursively(n,t,r,o):"attributes"===e.type&&r(i,t,o)&&o.push({callback:t.callback,elem:i}),l.callCallbacks(o,t)})}function r(e,t){return l.matchesSelector(e,t.selector)&&(e._id===n&&(e._id=o++),-1==t.firedElems.indexOf(e._id))?(t.firedElems.push(e._id),!0):!1}var i={fireOnAttributesModification:!1,onceOnly:!1,existing:!1};f=new a(e,t);var c=f.bindEvent;return f.bindEvent=function(e,t,r){n===r?(r=t,t=i):t=l.mergeArrays(i,t);var o=l.toElementsArray(this);if(t.existing){for(var a=[],s=0;s<o.length;s++)for(var u=o[s].querySelectorAll(e),f=0;f<u.length;f++)a.push({callback:r,elem:u[f]});if(t.onceOnly&&a.length)return r.call(a[0].elem,a[0].elem);setTimeout(l.callCallbacks,1,a)}c.call(this,e,t,r)},f},u=function(){function e(){var e={childList:!0,subtree:!0};return e}function t(e,t){e.forEach(function(e){var n=e.removedNodes,i=[];null!==n&&n.length>0&&l.checkChildNodesRecursively(n,t,r,i),l.callCallbacks(i,t)})}function r(e,t){return l.matchesSelector(e,t.selector)}var i={};d=new a(e,t);var o=d.bindEvent;return d.bindEvent=function(e,t,r){n===r?(r=t,t=i):t=l.mergeArrays(i,t),o.call(this,e,t,r)},d},f=new s,d=new u;t&&i(t.fn),i(HTMLElement.prototype),i(NodeList.prototype),i(HTMLCollection.prototype),i(HTMLDocument.prototype),i(Window.prototype);var h={};return r(f,h,"unbindAllArrive"),r(d,h,"unbindAllLeave"),h}}(window,"undefined"==typeof jQuery?null:jQuery,void 0);

var z_vars = {currencySelectors: '.money, .price'};
  function znCustomizations() {
    // All calls to Zonos should be made in this function to guarantee that Zonos Hello has been loaded.
    znCurrencyConversionEnabled();
  }

  function znSetCurrencySelectors() {
      zonos.config({currencySelectors: z_vars.currencySelectors});
  }

  var znIntervalID = null;
  znDisplayCurrency = function() {
    if (typeof zonos !== 'undefined' && zonos.config) {
      znSetCurrencySelectors();
      znIntervalID && clearInterval(znIntervalID);
    } else if (znIntervalID === null) {
      znIntervalID = setInterval(znDisplayCurrency, 100);
    }
  }

  function znCurrencyConversionEnabled() {
    znDisplayCurrency();
    document.arrive(z_vars.currencySelectors, {existing: true}, znDisplayCurrency);
  }

  var znListenForCountryChange = true;
  function zonosLoaded() {
    if (!znListenForCountryChange) {
      document.removeEventListener('z-country-change', zonosLoaded);
      return;
    }

    znListenForCountryChange = false;
    znCustomizations();
  }

  function znOnPageLoad() {
    document.addEventListener('z-country-change', zonosLoaded);
  }

  znOnPageLoad();
</script>

Common problems

Currency is double converting.

Problem: The price converts, then converts that price again.

Code example:

<div class="price"> <span class="price">20.00</span> </div> <script> zonos.config({currencySelectors: ".price"}); </script>

Answer: The selector will convert twice, because it is grabbing the same price twice due to the chosen selectors to be converted. Be more specific with selectors, so the parent element (div.price) does not get selected with the child element (span.price).

Code example:

<script> zonos.config({currencySelectors: "span.price"}); </script>

Price changes, but conversion does not update.

Problem: For example, the subtotal price does not change when the quantity of the product increases.

Answer: Currency conversion only converts when the page loads and prices show up the first time. Add the code below to get currency conversion to update when the price changes. (Note: This code is only for USD as the default currency.)

<script>
  function customConverter(formatter, converter) {
    if (this.currencySelectors && this.currencySelectors.length > 0) {
      const removeCurrencySymbolRegex = /[^\d.]/g;
      var moneySelectors = document.querySelectorAll(this.currencySelectors);
      for (var i = 0; i < moneySelectors.length; i++) {
        var moneySelector = moneySelectors[i];
        var previousConvertedPrice = moneySelector.getAttribute('data-USD');
        const price = moneySelector.textContent.replace(removeCurrencySymbolRegex, '');
        const isUSD = moneySelector.textContent.charAt(0) === "$";

        if (!previousConvertedPrice || (isUSD && price !== previousConvertedPrice)) {
          moneySelector.setAttribute('data-USD', price);
          previousConvertedPrice = price;
        }
        moneySelector.setAttribute('data-zIntl', converter(previousConvertedPrice));
        moneySelector.textContent = formatter(previousConvertedPrice);
      }
    }
  }
  zonos.config({currencyConverter: customConverter});
</script>

Price converts to one large number with two decimal points (e.g. 12.0020.00).

Problem: The price is 12.00, and the price next to it is 12.00; thus, Zonos converts the price to 12.0020.00.

Code example:

<span class="money">12.00 - 20.00</span>

Answer: This issue will happen when two prices are in the same selector. Separate the two prices using span tags with the class money or a class you are currently using to convert the price.

Code example:

<span class="money">12.00</span><span>-</span><span class="money">20.00</span>