Git Product home page Git Product logo

currencies's Introduction

jquery.currencies.js

Tutorial

How to Show Multiple Currencies

Description

jquery.currencies.js expands the currencies.js library provided by Shopify and has to be used in conjunction with it.

While currencies.js allows you to convert a money amount from one currency to another, jquery.currencies.js provides a function that converts all money amounts on a web page and shows a formatted result, with currency symbol and descriptor.

Installation

Download jquery.currencies.min.js and upload it to your Shopify theme assets. Include the file in your theme.liquid file before the closing body tag like so:

{{ "/services/javascripts/currencies.js" | script_tag }}
{{ "jquery.currencies.min.js" | asset_url | script_tag }}

Usage

To save a picked currency to a cookie, use the following line of code, passing the currency code as parameter:

Currency.cookie.write('CAD');

To read the currency code saved to your 'currencies' cookie, use the following code:

var cookieCurrency = Currency.cookie.read();

The above will return the currency code, or will return null if the cookie does not exist.

To convert formatted money (with or without the currency code and descriptor) to formatted money in another currency use this:

Currency.convertAll(oldCurrency, newCurrency, selector, format);

The parameters oldCurrency and newCurrency must be set to the 3-letter currency codes of the FROM and TO currencies.

The parameter selector is a CSS selector that tells the function where to find the money on the page. It is optional. If it is not used, the function will look for all span elements on the page with a class attribute set to 'money', and will convert the money in those elements.

So, using it without selector is the same as calling the function like so:

Currency.convertAll('CAD', 'USD', 'span.money');

The parameter format is optional and can take on the value 'money_format' or 'money_with_currency_format'.

Calling the function without format is the same as calling the function like so:

Currency.convertAll('CAD', 'USD', 'span.money', 'money_with_currency_format');

Important: the convertAll method updates the 'currencies' cookie with newCurrency and it also sets a global property that remembers what the current currency is: Currency.currentCurrency. Why? The cookie needs only be read once, ie. when the page loads, and one must keep a copy of the old value to send both old and new values to the converting drone.

Optional global settings

Add the following line of JavaScript before you own code, if you do not want the formatted money to show the currency descriptor:

Currency.format = 'money_format';

If you don't use the above line of code, the formatted money will be showing both the currency symbol and descriptor, i.e. it will show $20.00 USD instead of $20.00.

If you want to use a different name for your cookie, use this:

Currency.cookie.name = 'my_awesome_cookie_name';

If you don't use the above line of code, the name of your cookie will be 'currencies'.

Dependencies

jQuery >= 1.3.1

jquery.min.currencies.js also requires Shopify's library currencies.js.

currencies.js must be included before jquery.currencies.min.js.

Author

jquery.currencies.js was created and is maintained by Caroline Schnapp mllegeorgesand AT gmail DOT com.

License

jquery.currencies.js and its minified version are covered by the MIT License. http://www.opensource.org/licenses/mit-license.php

currencies's People

Contributors

carolineschnapp avatar sjelfull avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.