Adding snippets

Overview

By default Shopware 6 uses the Vue I18n plugin in the Administration to deal with translation.

Creating snippet files

Normally you want to use snippets in you custom module. To keep things organized, create a new directory named snippet inside your module directory <plugin root>/src/Resources/app/administration/src/module/<your-module>/snippet. For each language you want to support, you need a JSON file inside here, e.g. de-DE.json and of course en-GB.json.
Each language then receives a nested object of translations, so let's have a look at an example snippet/en-GB.json:
1
{
2
"swag-example": {
3
"nested": {
4
"value": "example"
5
},
6
"foo": "bar"
7
}
8
}
Copied!
In this example you would have access the two translations by the following paths: swag-example.nested.value to get the value 'example' and swag-example.foo to get the value 'bar'. You can nest those objects as much as you want.
By default, Shopware 6 will collect those files automatically when your plugin is activated.
When you do not build a module and therefore do not fit into the suggested directory structure, you can still place the translation files anywhere in <plugin root>/src/Resources/app/administration/.

Using the snippets in JavaScript

Since snippets are automatically registered in the scope of your module, you can use them directly:
1
Component.register('my-custom-page', {
2
...
3
4
methods: {
5
createdComponent() {
6
// call the $tc helper function provided by Vue I18n
7
const myCustomText = this.$tc('swag-example.general.myCustomText');
8
9
console.log(myCustomText);
10
}
11
}
12
...
13
});
Copied!

Using the snippets in templates

The same $tc helper function can be used in the templates to access translations.
1
{% block my_custom_block %}
2
<p>
3
{{ $tc('swag-example.general.myCustomText') }}
4
</p>
5
{% endblock %}
Copied!

More interesting topics