Skip to content

Adding snippets

You are viewing the next version (v6.7) of the documentation.
Click here to switch to the stable version (v6.6), or use the version switcher on the left to navigate between versions.

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:

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:

javascript
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);
        }
    }
    ...
});

Or use Shopware.Snippet.tc('swag-example.general.myCustomText') when this doesn't point to a component (see also Vue3 upgrade)

Using the snippets in templates

The same $tc helper function can be used in the templates to access translations.

twig
{% 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:

twig
{% 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.

More interesting topics