Translations for shopware 6 cms block

Question

I have a custom cms block as the one from the tutorial https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-block.html

i would like the text from the slot named "left" to be translatable

// sw-cms-block-my-image-text-reversed.html.twig

{% block sw_cms_block_my_image_text_reversed %}
    <div class="sw-cms-block-my-image-text-reversed">
        <slot name="left">{% block sw_cms_block_my_image_text_reversed_slot_left %}{% endblock %}</slot>
        <slot name="right">{% block sw_cms_block_my_image_text_reversed_slot_right %}{% endblock %}</slot>
    </div>
{% endblock %}

// index.js

import './component';
import './preview';

Shopware.Service('cmsService').registerCmsBlock({
    name: 'my-image-text-reversed',
    category: 'text-image',
    label: 'My Image Text Block!',
    component: 'sw-cms-block-my-image-text-reversed',
    previewComponent: 'sw-cms-preview-my-image-text-reversed',
    defaultConfig: {
        marginBottom: '20px',
        marginTop: '20px',
        marginLeft: '20px',
        marginRight: '20px',
        sizingMode: 'boxed'
    },
    slots: {
        left: 'text',
        right: 'image'
    }
});

in the "left" slot i should be able to add an element which can be configured with text translated for multiple languages. In the storefront, depending on the user language, the translation for that element text should be displayed.

Is there a way to do that?

Answer 1

This should happen more or less automatically depending on the context.

E.g. You store the text in the config object directly from the config .twig:

<sw-text-editor label="text:" v-model="element.config.testText.value.text" />

E.g. The path to such file may look like:

src/Resources/app/administration/src/module/sw-cms/elements/test-custom-text-element/config/sw-cms-el-config-test-custom-text-element.html.twig

Remember to also add some default text to the index.js. The path for this file may look like this:

src/Resources/app/administration/src/module/sw-cms/elements/test-custom-text-element/index.js

You should add something like:

defaultConfig: {
    testText: {
        source: 'static',
        value: [
           {
               'text': 'Lorim ipsum dolar sit finit',
           },
        ]
    },
}

When a user hits "save", the text is automatically saved in the currently selected language. You should not have to make any custom code for this to work.

This is so for Shopware's own text CMS element as well, which you are using. Just have a look in:

vendor/shopware/administration/Resources/app/administration/src/module/sw-cms/elements/text/config/sw-cms-el-config-text.html.twig

Note, it is loading the contents from element.config.content.value.