Hello,
Recently I was working on a project which requires multilingual support. Front end was built ExtJs so I decided to add multilingual support through JavaScript files. At a time of login user language is retrieved from database and respective language is downloaded on a client side then it can be used through out the app.
The approach is to store all language files in one common folder and from there it will be dynamically loaded using ScriptLoader.
For Example.
/root/languages/en.js
/root/languages/sw.js
/root/languages/fr.js
Each language file stores conversation in some common format. See the example below.
Ext.ns('WebAppName.language');
WebAppName.language = {
PageTitle : "Welcome to The Site",
HomePage : "This is HomePage",
WelcomeMessage : "Welcome to the Web App"
};
Here Ext.ns is used to define namespace. Once namespace is defined it can be used any where in the app with that reference name.
Once any of above files are loaded it can be used as follow.
var title = WebAppName.language['PageTitle '];
Above code will assign "Welcome to The Site" string to title variable. Same way any other words can be loaded and used through out the app.
So this was the approach to built multilingual web app using JavaScript. This approach is useful when you are building front end using JavaScript frameworks like ExtJs, jQuery. Main advantage of this approach is it will be one time download a language file and all the values are available on client side so it does not require server request.
Please remember above code will work for ExtJs.
Recently I was working on a project which requires multilingual support. Front end was built ExtJs so I decided to add multilingual support through JavaScript files. At a time of login user language is retrieved from database and respective language is downloaded on a client side then it can be used through out the app.
The approach is to store all language files in one common folder and from there it will be dynamically loaded using ScriptLoader.
For Example.
/root/languages/en.js
/root/languages/sw.js
/root/languages/fr.js
Each language file stores conversation in some common format. See the example below.
Ext.ns('WebAppName.language');
WebAppName.language = {
PageTitle : "Welcome to The Site",
HomePage : "This is HomePage",
WelcomeMessage : "Welcome to the Web App"
};
Here Ext.ns is used to define namespace. Once namespace is defined it can be used any where in the app with that reference name.
Once any of above files are loaded it can be used as follow.
var title = WebAppName.language['PageTitle '];
Above code will assign "Welcome to The Site" string to title variable. Same way any other words can be loaded and used through out the app.
So this was the approach to built multilingual web app using JavaScript. This approach is useful when you are building front end using JavaScript frameworks like ExtJs, jQuery. Main advantage of this approach is it will be one time download a language file and all the values are available on client side so it does not require server request.
Please remember above code will work for ExtJs.
Hi,
ReplyDeleteThis is really nice.
Do you maybe have a piece of code where this is fully used?
Let me know.
Thx.
Anibal
Yes I do have it. I made a complete bilingual application using above technique.
ReplyDeleteHi hiren,
ReplyDeleteI used three configurable products and i used their own attributes. but, if i select first product option and add to cart means its working good.but if i select other two products option it will not added to the cart.
This is the form here the values are submitted
Controller:
public function addtocartproductAction() {
$params = $this->getRequest()->getPost();
foreach($params['product'] as $values){
$total = array(
'product' => $values['id'],
'super_attribute' => $values['option'],
'qty' => $values['qty'],
);
$cart = Mage::getSingleton('checkout/cart');
$product = new Mage_Catalog_Model_Product();
$product->load($values['id']);
$cart->addProduct($product, $total);
}
$cart->save();
Mage::getSingleton('checkout/session')->setCartWasUpdated(true);
$this->_redirect('checkout/cart');
}This is the option values:
Array
(
[product] => 26
[super_attribute] => Array
(
[144] => 19
[145] => 30
)
[qty] => 5
)
Array
(
[product] => 32
[super_attribute] => Array
(
[142] => 7
[143] => 15
)
[qty] => 10
)
Array
(
[product] => 41
[super_attribute] => Array
(
[146] => 32
[147] => 37
)
[qty] => 5
)
All products are configurable products and have their own atrributes. Help me to solve this..Thanks
Maybe look at https://github.com/Novotive/Languative
ReplyDelete