How to switch the language in the administration at the Shopware

In this blog, you are going to learn “How to switch the language in the administration at Shopware.”
I hope you know the directory structure of Shopware 6 plugin, if you don’t know, see here- https://docs.shopware.com/en/shopware-platform-dev-en/internals/directory-structure.

If you change the content language in the so-called language switch, every listing or detail page will update and use that new language to display and edit content. To make sure your custom entity supports translations, look at overview of translations in the DAL

In order to change the language in an administration listing, you will have to add the language switch component to your smart bar.

<sw-page>
    <template #language-switch>
        <sw-language-switch @change="changeLanguage"></sw-language-switch>
    </template>
</sw-page>

The slot is used to place the language switch in the same place on all pages according to Shopware conventions. Firstly, not all components are translatable. Additionally, pages do not know how to handle language switching themselves. Thelanguage switch triggers the language change. Every request afterward will then use the new language. So, as our content is not automatically reloaded by default on switching the language, you will have to listen to the change event.

listing page

import template from './test-list.html.twig';
const { Component } = Shopware;
const { Criteria } = Shopware.Data;

Component.register('test-list', {
    template,

    inject: ['repositoryFactory'],

    data() {
        return {
            items: null,
            isLoading: true
        }
    },

    computed: {
        testEntityRepository() {
            return this.repositoryFactory.create('test_entity');
        }
    },

    methods: {
        changeLanguage() {
            this.getList();
        },

        getList() {
            this.isLoading = true;

            return this.testEntityRepository.search(new Criteria(), 
            Shopware.Context.api).then((searchResult) => {
                this.items = searchResult;
                this.isLoading = false;
            })
        }
    }
});

detail page

import template from './test-detail.html.twig';
const { Component } = Shopware;

Component.register('test-detail', {
    template,

    inject: ['repositoryFactory'],

    data() {
        return {
            item: null
        };
    },

    created() {
        this.createdComponent();
    },

    computed: {
        testEntityRepository() {
            return this.repositoryFactory.create('test_entity');
        }
    },

    methods: {
        createdComponent() {
            this.loadItem();
        },

        loadItem() {
            return this.testEntityRepository.get(this.$route.params.id, Shopware.Context.api).then((entity) => {
                this.item = entity;
            });
        },

        abortOnLanguageChange() {
            return this.testEntityRepository.hasChanges(this.item);
        },

        saveOnLanguageChange() {
            return this.testEntityRepository.save(this.item, Shopware.Context.api);
        }
    }
});

This will reload the active entity on a detail page. Be aware, you may lose data here. To prevent data loss, a modal will give you the opportunity to save unsaved changes, while switching the language.

<sw-language-switch :saveChangesFunction="saveOnLanguageChange"
                    :abortChangeFunction="abortOnLanguageChange"
                    @change="loadItem">
</sw-language-switch>

This component displays a short info text about the currently selected language and its impacts on the current entity.

<sw-page class="test-detail">
    <template #content>
        <sw-card-view v-if="item">
            <sw-language-info :entityDescription="item.name"></sw-language-info>
        </sw-card-view>
    </template>
</sw-page>

create page

On a creation page, there is nothing to reload. It is common to re-use the editing page for creation, but you have to make sure that you don’t do it while creating. 

<sw-page>
    <template #language-switch>
        <sw-language-switch :disabled="isCreateMode"></sw-language-switch>
        <sw-language-info :entityDescription="item.name"
                  :isNewEntity="isCreateMode">
        </sw-language-info>
    </template>
</sw-page>

When you create a new entry using a different language than the system default language, you have to switch back to it for the creation process.

Component.extend('test-create', 'test-detail', {
    created() {
        if (this.languageStore.getCurrentId() !== this.languageStore.systemLanguageId) {
            this.languageStore.setCurrentId(this.languageStore.systemLanguageId)
        }
    }
});

The language info differs depending on its entity, so be sure to tell the sw-language-info the component about it.

I hope it will help you. Thanks for reading. Happy Coding 🙂
Thank You.