[TomatoCart] An Elegant Languages Box is Available to You

I had illustrated how to integrate an elegant currencies box into your store in this article several days ago. I think you may also need a similar languages box for your store too. So, I have implemented a languages box both for bootstrap and glass gray template today.

Bootstrap Template:

Snip20140830_1

Glass Gray Template:

Snip20140830_2

Now, let me teach you how to apply this functionality for your store.

Step 1. Download languages_flag.zip from dropbox.

Step 2. Unzip the package and copy the includes and templates folds into your tomatocart root directory.

Step 3. Add languages box module into the templates layout under admin panel > Templates > Templates Modules Layout > Boxes.

Snip20140830_3

Step 4. Change the layout of template for the store front.

If you are using bootstrap template for your store:

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

If you are using glass gray template for your store:

  • Find templates/glass_gray/index.php.
  • Find following code snippet:
<?php }else { ?>
<script type="text/javascript" src="templates/<?php echo $osC_Template->getCode(); ?>/javascript/all.min.js"></script>
<?php }?>
  • Add following code snippet 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("#languages").ddslick(
		{
			width : 210,
			onSelected : function(c) {
				b('input[name="language"]').prop("value", c.selectedData.value);
				
				if (a > 0) {
					b("#languages").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

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

Leave a Reply

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