[TomaotCart] Integrate an Elegant Currencies Box into your Store

The default currencies box in TomatoCart system is not elegant and efficient enough for the users to change the currency in your store. So, I spend several hours to implement a new currencies box for TomatoCart system that will support following functionalities:

  1. You could add country flag for each currency in your administrator panel.

Snip20140828_1

2. Show an elegant currencies dropped menus with the flags in the store front.

In bootstrap template:

Snip20140828_4

In glass_gray Template:

Snip20140828_6

Now, let me teach you how to integrate it into your store.

Step 1. Download currencies with flags package.

Step 2. Unzip it and then copy following folds into your tomatocart root directory:

  • admin
  • includes
  • templates

Step 3. You need to run following sql in your database:

ALTER TABLE `toc_currencies` ADD `countries_iso_code_2` CHAR(2) DEFAULT NULL AFTER `decimal_places`;

Note: you have to replace the default toc_ prefix with yours.

Step 4. Set the currencies flags under admin panel > Definitions > Currencies.

  • You need to enter the countries iso cod for each currencies as follow:

Snip20140828_2

As you can see, you just need to find the iso code 2 in the countries module and then enter it into the field.

Step 5. Set the layout of currencies box under admin panel > Templates Modules Layout > Boxes.

Screen Shot 2014-08-28 at 23.21.42

The group is not significant. You could choose left or right for it.

Step 6. Edit the bootstrap template layout if you are using the bootstrap template for your store.

  • Find templates > bootstrap > index.php.
  • Find following code:
<script type="text/javascript">
  jQuery.noConflict();
</script>
  • Add following code after it:
<script src="templates/<?php echo $osC_Template->getCode(); ?>/javascript/ddslick/jquery.ddslick.js"></script>
<script>
	jQuery(function(b) {
		var a = 0;
		b("#currencies").ddslick(
		{
			width : 180,
			onSelected : function(c) {
				b('input[name="currency"]').prop("value", c.selectedData.value);
				
				if (a > 0) {
					b("#currencies").parents("form").submit();
				}
				a++;
			}
		})
	});
</script>

Step 7. Edit the glass_gray template layout if you are using the glass_gray template for your store.

  • Find templates > glass_gray > index.php.
  • Find following code:
<script type="text/javascript" src="templates/<?php echo $osC_Template->getCode(); ?>/javascript/all.min.js"></script>
<?php }?>
  • Add following code after it:
<script type="text/javascript" src="templates/<?php echo $osC_Template->getCode(); ?>/javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
</script>
<script src="templates/<?php echo $osC_Template->getCode(); ?>/javascript/ddslick/jquery.ddslick.js"></script>

<script>
	jQuery(function(b) {
		var a = 0;
		b("#currencies").ddslick(
		{
			width : 210,
			onSelected : function(c) {
				b('input[name="currency"]').prop("value", c.selectedData.value);
				
				if (a > 0) {
					b("#currencies").parents("form").submit();
				}
				a++;
			}
		})
	});
</script>

That’s it. It may be difficult for you to integrate this feature into your store by yourself. I prefer to do it for you. Please just contact me via support@tomatocart.com.

Looking for quality TomatoCart Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

Your email address will not be published. Required fields are marked *


× 9 = 18

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>