I'm looking for a solution/idea to dynamically change the translation value of each key in Sparatcus translations files outside the code. I don't want only to create a file and override the I18nModule config, I'm looking for some kind of service/API like Lokalize API to be able to change the translation values outside the code.
Thanks in advance!
The internationalisation features are prepared for this. Although we do not have a service at hand for the localised labels, Spartacus is prepared for this. You can read more about this at https://sap.github.io/spartacus-docs/i18n/#lazy-loading. You can configure loadPath to an API endpoint, including the variable language (lng) and namespace (ns).
imports: [
B2cStorefrontModule.withConfig({
i18n: {
backend: {
loadPath: 'assets/i18n-assets/{{lng}}/{{ns}}.json'
// crossOrigin: true (use this option when i18n assets come from a different domain)
},
chunks: translationChunksConfig
}
})
];
Related
I'm using SeedStack to create a web application. In order to do that, I use W20 to develop my frontend. I need specific JavaScript libraries into that project. How can I inject an external javascript library into it ? I want to use Chart.js http://www.chartjs.org/ to visualize data into charts. To do that, I suppose that I have to inject ChartJS as a dependency module in Angular.
Thank you for your help.
Before getting to the specific answer, please note that SeedStack already has an add-on for charts. As for integrating a library with W20, you have two main things to do:
Configure RequireJS to load the JS file and be able to inject it as a dependency.
Integrate the library with the AngularJS framework, which is often done by writing some directive.
Fortunately for you, Angular directives are already available for Chart.js, thanks to the angular-chart.js library. You just need to configure RequireJS to load it. Add a requireConfig section to the manifest of one of your fragments:
{
"id": "my-fragment",
...
"requireConfig": {
"paths": {
"{angular-chart.js}": "${components-path:bower_components}/angular-chart.js/dist",
"{chart.js}": "${components-path:bower_components}/chart.js/dist"
},
"map": {
"{angular-chart.js}/angular-chart": {
"angular": "{angular}/angular",
"chart": "{chart.js}/Chart"
}
}
}
}
The paths section declares locations of the two Chart.js libraries. Note that we use a variable named components-path with a default value of bower_components here. This is useful when using the W20 bridge add-on.
The map section declares a mapping between the expected and the real paths for dependencies of angular-chart.js.
You can then use the angular-chart.js library according to its documentation:
define([
'{angular}/angular',
'{angular-chart.js}/angular-chart',
], function(angular) {
var module = angular.module('myModule', ['ngResource', 'chart.js']);
module.controller('ContentController', [ '$scope', function($scope) {
// your JS code here
// (with your markup in a corresponding angular template)
}]);
});
I have a working app using aurelia-i18n. I would like to split translation.json file into multiple files like nav.json, message.json, etc but I am not sure how to do it.
This is how it looks right now.
locale
|-en
|- translation.json
But I want to change it to this way.
locale
|-en
|- nav.json
|- message.json
Is it possible to do it? If so, how do I configure it and access values in each file?
You can have multiple resource files and these are called namespaces in the i18next library (by default you only have one namespace which is called: translation) which is used by aurelia i18N.
You just need to list your namespaces when configuring the plugin with the namespaces and defaultNs properties inside the ns option:
.plugin('aurelia-i18n', (instance) => {
// adapt options to your needs (see http://i18next.com/pages/doc_init.html)
instance.setup({
resGetPath : 'locale/__lng__/__ns__.json',
lng : 'de',
attributes : ['t','i18n'],
ns: {
namespaces: ['nav', 'message'],
defaultNs: 'message'
},
getAsync : true,
sendMissing : false,
fallbackLng : 'en',
debug : false
});
});
See also the documentation of i18next and this related github issue: Using namespaces
How can I change locale after the plugin has been applied?
Let say I have "en_US" locale assigned. Now I want to change it on runtime.
I tried to re-apply plugin to element:
$(element).formValidation({locale: 'es_ES',....});
But no effect. Any idea?
How can I refresh the view?
EDIT: 2015-06-18
Before you follow the solution bellow (step 1 & step 2 (option 3)), make sure that you downloaded the i18n add-on from here, this add-on will help you define messages in different languages.
Include it and then use it as following:
$(form).formValidation({
framework: '...',
icon: {
// ...
},
addOns: {
i18n: {}
},
fields: {
// ...
}
});
For more information, see http://formvalidation.io/addons/i18n/
This is how to solve your problem:
Include the language file es_ES.(min.)js after including formvalidation.(min.)js.
Set the locale:
Option 1: Use the locale option as you provided in your question.
Option 2: You can add the attribute data-fv-locale="es_ES" to your form.
Option 3: Use the setLocale method:
$('#yourFormId').formValidation('setLocale', 'es_ES');
NOTES:
the setLocale method is not documented, to see its usage see
the example here http://formvalidation.io/addons/i18n/.
Option 1 & 2 should be used before you initialize the plugin and without using the i18n add-on.
Option 3 after initialization.
I'm trying to internationalize my application that uses Express and Handlebars. Is it possible to get Handlebars partials (fragments) to load and render the localization resource file?
Noting that I've already read this question: express3-handlebars and 18next-node - internationalisation based on page?.
Here is my directory structure:
views/
index.html
login.html
fragments/
frag1.html
frag2.html
frag3.html
locales/
index.json
login.json
fragments/
frag1.json
frag2.json
frag3.json
If necessary, I can separate the JSON files in the locales/ directory to be something like this:
locales/
en-CA/
index.json
...other files
fr-CA/
index.json
...other files
Here is the relevant code in my server.js file:
// ...
hbs = exphbs.create({
extname: '.html',
layoutsDir: [
__dirname + '/views'
],
partialsDir: [
__dirname + '/views/fragments'
],
helpers: {
'json': function(context) {
return JSON.stringify(context);
},
't': function(k) {
// ?
}
}
});
app.engine('.html', hbs.engine);
app.set('view engine', 'html');
The t helper is what I need help with. In my templates/template fragments, I have these:
<h1>{{ t 'pageTitle' }}</h1>
<p>{{ t 'foo' }}</p>
<p>{{ t 'moreThings' }}</p>
And my JSON file could look like this:
{
"pageTitle": "Hello world",
"foo": "Paragraph contents here",
"moreThings": "There are %d things"
}
Also how do I deal with the printf parameters?
Doing internationalization in your application means doing two things:
1) Determine which locale should be used
Depending on how you determine the used locale it can be difficult to do this inside a helper. Helpers do not have access to the request object for instance. To be honest i cannot think of a good way to do this inside a helper.
Personally i use the i18n-abide middle-ware to do internationalization. They have several options to determine the locale for a given request. Once locale is determined it is added as a property to the request object. So you only need to determine the locale once for each request. An other advantage is that you have also access to the locale outside the handlebars helper.
2) Access the resource files
To access the resource files from within a helper means that you should read and parse the resource files outside the helper. Parsing resource files every time you need to translate a string really hurts performance.
Here you also should use middle-ware. You can do something like the pseudo code below.
function setup() {
// Load resource files from disk and parse them.
var resources = { /* parsed resources*/ }
return function(req, res, next) {
var locale = determineLocalFunction(req);
req.getText = function(label) {
return resources[local][label];
}
}
}
Now you can use the req.getText function every where in your code. Personally i never use language labels inside a partial. Instead i pass all the language strings needed in a partial using a data object. The reason behind this is that i think partials should be as re-usable as possible. Using hardcoded language labels inside them makes them less re-useable.
When you do want to use the getText function in your partials you can pass to getText function to your partial.
Something like this:
var objectPassedToPartial = {
getText: req.getText
}
Use it like:
{{getText 'label'}}
Read more about Mozilla's i18n-abide solution, i really love it.
I've seen similar posts around the web and nothing anyone has suggested works for me. I'm really faced with the choice of dumping one or the other it seems at this point.
This "Getting Started with SignalR and MVC 4 tutorial":
http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc-4
says you need two script includes to make signalR work:
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-1.0.1.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
I'm at a loss as to how to make the second one, the autogenerated SignalR hub script, happen in require.js. Unless I'm missing something there just doesn't seem to be a viable require.js syntax for inclusion of autogenerated scripts. Without it you get this error at line 159 of jquery.signalR-1.1.2.js:
"JavaScript runtime error: SignalR: Error loading hubs. Ensure your hubs reference is correct, e.g. "
The code at that point in jquery.signalR is doing this:
signalR.hub = {
start: function () {
// This will get replaced with the real hub connection start method when hubs is referenced correctly
throw new Error("SignalR: Error loading hubs. Ensure your hubs reference is correct, e.g. <script src='/signalr/hubs'></script>.");
}
};
Has anyone actually made this autogenerated script thing happen via require.js?
Been studying this a bit more. Let me add some detail:
I'm using this approach - Structuring scalable client side applications: (http://johndavidmathis.wordpress.com/2013/04/23/structuring-scalable-client-side-applications/) to make a more scalable structure. Second part in that series "Permit modules to utilize multiple files and a logical folder structure" http://johndavidmathis.wordpress.com/2013/04/23/structuring-scalable-client-side-applications/ has me splitting my actual signalr code out into a separate Marionette chat module (separate from my main app.js file) to achieve a better file structure. I really like this approach. The rest of my project is set up like this now and it really is showing benefits when it comes to finding code. I think that extra split is where I'm stuck. Can't seem to get that second dependency, the autogenerated script, into that separate chat module file. I'm still studying this but it looks like this to me at this point. require.js gets the dependency into my Marionette app:
require(["marionette","handlebars", "signalr", "signalr.hubs"], function (Marionette) {
window.App = new Marionette.Application();
App.addRegions({
headerRegion: "#header",
contentRegion: "#content",
footerRegion: "#footer",
});
require(["modules/main/loader", "modules/chat/loader"], function () {
App.start();
});
})
If I want chat that dependency to make its way further into the app, into the chat module in another file?
Something like?
define(dependencies,
function () {
App.module("ChatModule", function (ChatModule, App, Backbone, Marionette, $, _, "signalr.hubs", "signalr.hubs") {
// SignalR Proxy created on the fly
var chat = $.connection.chatHub;
// Start the connection
$.connection.hub.start();
//more chat code...
An update:
The answer below does work in my dev environment. But it does not work when I publish the code to a real production server.
When the code is published to a real production server (IIS 6.1 on Windows Server Enterprise 2008 R2) the browser console once again shows a "404" for the autogenerated reference.
Specifically, the console shows the "?" is being added into the reference path before ".js", like this...
http://mydomain.com/myapp/Scripts/application/signalr/hubs?.js...
Tried taking the "?" out but then it removes my app name from the path, like this...
http://mydomain.com/signalr/hubs.js.
I think what would get me there is the first one, without the "?", like...
http://mydomain.com/myapp/Scripts/application/signalr/hubs.js
I'm just not seeing how to make that happen.
FINAL UPDATE:
Final piece of the puzzle for production server is the site's virtual directory. Here's final code that worked for me. Thanks Raciel R for your help:
requirejs.config({
paths: {
//core
"jquery": "jquery-1.9.1",
"signalr": "jquery.signalR-1.1.2",
"signalr.hubs": "/productionservervirtualdirectory/signalr/hubs?"
},
shim: {
"jquery": {exports: "$"},
"signalr": { deps: ["jquery"] },
"signalr.hubs": { deps: ["signalr"] }
});
//Then all you have to do is to make signalr.hubs required in your modules. Ie:
require(["signalr.hubs"], function(){
//your code here
});
requirejs.config({
paths: {
//core
"jquery": "jquery-1.9.1",
"signalr": "jquery.signalR-1.1.2",
"signalr.hubs": "/signalr/hubs?"
},
shim: {
"jquery": {exports: "$"},
"signalr": { deps: ["jquery"] },
"signalr.hubs": { deps: ["signalr"] }
});
Then all you have to do is to make signalr.hubs required in your modules. Ie:
require(["signalr.hubs"], function(){
//your code here
});
I set up RequireJS successfully using #raciel-r's solution but I was still having problems with other JavaScript modules like karma that were also confused by the dynamic proxy. I converted the signalr proxy to a static file and used that with RequireJS instead:
Import Microsoft.AspNet.SignalR.Utils
Run packages/Microsoft.AspNet.SignalR.Utils.2.X.X/tools/signalr.exe
ghp /path:my/bin /o:path/to/scripts/server.js where /my/bin is the directory containing the assemblies with your SignalR Hubs.
Replace your reference in to /signalr/hubs with server:
requirejs.config({
paths: {
// ...
"signalr.hubs": "path/to/scripts/server"
},
// ....
If you are using the convenience methods of the generated proxy, you will also have to rewrite them (see How to create a physical file for the SignalR generated proxy)