Adding snippets
Overview
By default Shopware 6 uses the Vue I18n plugin in the Administration to deal with translation.
Creating snippet files
Normally you use snippets in your custom module. To keep things organized, create a new directory named snippet inside 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 it, e.g., de-DE.json, en-GB.json.
INFO
Providing snippets for apps works the same as in plugins but it has a more simplistic file structure. Also, unlike plugins, App-Snippets are not allowed to override existing snippet keys. So, use the following path for vendor-prefixed app snippet files: <app root>/Resources/app/administration/snippet
Each language then receives a nested object of translations, so let's have a look at an example snippet/en-GB.json:
{
"swag-example": {
"nested": {
"value": "example",
"examplePluralization": "1 Product | {n} Products"
},
"foo": "bar"
}
}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.
INFO
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:
Component.register('my-custom-page', {
...
methods: {
createdComponent() {
// call the $tc helper function provided by Vue I18n
const myCustomText = this.$tc('swag-example.general.myCustomText');
console.log(myCustomText);
}
}
...
});Using the snippets in templates
The same $tc helper function can be used in the templates to access translations.
{% block my_custom_block %}
<p>
{{ $tc('swag-example.general.myCustomText') }}
</p>
{% endblock %}Another feature of $tc is pluralization. Use a | in snippets to provide translations depending on the number. The first part shows singular expression, while the second takes care of plural cases. Let's have a look at this example of "examplePluralization": "One Product | {n} Products" with the following implementation:
{% block my_custom_block %}
<p>
{{ $tc('swag-example.nested.examplePluralization', products.length) }}
</p>
{% endblock %}If you provide 1 as the second parameter to $tc(), the text One Product would be rendered. For any other value greater than 1, the number itself is shown — for example, 4 Products.
