Add translations to Zed GUI


#1

Hi there,

we’ve already updated some modules to benefit from support for multiple languages.
Unfortunately I haven’t found a way to either overwrite an existing translation or to add my own translation if I extend a module.

In my case, I tried to extend a company-gui form. For me, it looks like translations for fields are applied automatically. But using existing glossary keys didn’t work.

As the Zed GUI translation was available without re-importing the glossary, I guess the backend translations work different?

Could you please give an example on how to add own translations to the backend?


#2

Hello Felix,

First, you need to integrate Zed Translations to your project, in order to do this follow next steps (integration guide will be published soon):

  1. Install Translator module using Composer:
composer require spryker/translator 
  1. Set up Configuration (in config/Shared/config_default.php):
<?php
...
use Spryker\Shared\Translator\TranslatorConstants;
...

// ----------- Translator
$config[TranslatorConstants::TRANSLATION_ZED_FALLBACK_LOCALES] = [
   'de_DE' => ['en_US'],
];

$config[TranslatorConstants::TRANSLATION_ZED_CACHE_DIRECTORY] = sprintf(
   '%s/data/%s/cache/Zed/translation',
   APPLICATION_ROOT_DIR,
   $CURRENT_STORE
);

$config[TranslatorConstants::TRANSLATION_ZED_FILE_PATH_PATTERNS] = [
   APPLICATION_ROOT_DIR . '/data/translation/Zed/*/[a-z][a-z]_[A-Z][A-Z].csv',
];
...
  1. Set up behaviour
    Add the following plugins in your project:

UserLocalePlugin and ZedTranslatorPlugin

File: src/Pyz/Zed/Application/ApplicationDependencyProvider.php

<?php

namespace Pyz\Zed\Application;

use Spryker\Zed\Application\ApplicationDependencyProvider as SprykerApplicationDependencyProvider;
...
use Spryker\Zed\Translator\Communication\Plugin\Application\ZedTranslatorPlugin;
...
use Spryker\Zed\UserLocale\Communication\Plugin\Application\UserLocalePlugin;
...

class ApplicationDependencyProvider extends SprykerApplicationDependencyProvider
{
...
    /**
     * @return \Spryker\Shared\ApplicationExtension\Dependency\Plugin\ApplicationPluginInterface[]
     */
    protected function getApplicationPlugins(): array
    {
        return [
            ...
            new UserLocalePlugin(),
            new ZedTranslatorPlugin(),
            ...
        ];
    }
...
}

CleanTranslationCacheConsole and GenerateTranslationCacheConsole

File: src/Pyz/Zed/Console/ConsoleDependencyProvider.php

<?php

namespace Pyz\Zed\Console;
...
use Spryker\Zed\Console\ConsoleDependencyProvider as SprykerConsoleDependencyProvider;
...
use Spryker\Zed\Kernel\Container;
...
use Spryker\Zed\Translator\Communication\Console\CleanTranslationCacheConsole;
use Spryker\Zed\Translator\Communication\Console\GenerateTranslationCacheConsole;
...

/**
 * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
 */
class ConsoleDependencyProvider extends SprykerConsoleDependencyProvider
{
    ...

    /**
     * @param \Spryker\Zed\Kernel\Container $container
     *
     * @return \Symfony\Component\Console\Command\Command[]
     */
    protected function getConsoleCommands(Container $container)
    {
        $commands = [
            ...
            new CleanTranslationCacheConsole(),
            new GenerateTranslationCacheConsole(),
            ...
        ];
        ...
    }

    ...
}

TranslatorInstallerPlugin

File: src/Pyz/Zed/Installer/InstallerDependencyProvider.php

<?php

namespace Pyz\Zed\Installer;

...
use Spryker\Zed\Installer\InstallerDependencyProvider as SprykerInstallerDependencyProvider;
...
use Spryker\Zed\Translator\Communication\Plugin\TranslatorInstallerPlugin;
...

class InstallerDependencyProvider extends SprykerInstallerDependencyProvider
{
    /**
     * @return \Spryker\Zed\Installer\Dependency\Plugin\InstallerPluginInterface[]
     */
    public function getInstallerPlugins()
    {
        return [
            ...
            new TranslatorInstallerPlugin(),
            ...
        ];
    }
}

Spryker\Zed\Glossary\Communication\Plugin\TranslationPlugin and Spryker\Zed\Translator\Communication\Plugin\Messenger\TranslationPlugin

File: src/Pyz/Zed/Messenger/MessengerDependencyProvider.php

<?php

namespace Pyz\Zed\Messenger;

use Spryker\Zed\Glossary\Communication\Plugin\TranslationPlugin as GlossaryTranslationPlugin;
use Spryker\Zed\Messenger\MessengerDependencyProvider as SprykerMessengerDependencyProvider;
use Spryker\Zed\Translator\Communication\Plugin\Messenger\TranslationPlugin;

class MessengerDependencyProvider extends SprykerMessengerDependencyProvider
{
    /**
     * @return \Spryker\Zed\MessengerExtension\Dependency\Plugin\TranslationPluginInterface[]
     */
    protected function getTranslationPlugins(): array
    {
        return [
            new GlossaryTranslationPlugin(),

            /**
             * TranslationPlugin needs to be after other translator plugins.
             */
            new TranslationPlugin(),
        ];
    }
}

AssignUserLocalePreSavePlugin, UserLocaleTransferExpanderPlugin and UserLocaleFormExpanderPlugin

File: src/Pyz/Zed/User/UserDependencyProvider.php

<?php

namespace Pyz\Zed\User;

...
use Spryker\Zed\User\UserDependencyProvider as SprykerUserDependencyProvider;
use Spryker\Zed\UserLocale\Communication\Plugin\User\AssignUserLocalePreSavePlugin;
use Spryker\Zed\UserLocale\Communication\Plugin\User\UserLocaleTransferExpanderPlugin;
use Spryker\Zed\UserLocaleGui\Communication\Plugin\UserLocaleFormExpanderPlugin;

class UserDependencyProvider extends SprykerUserDependencyProvider
{
    ...

    /**
     * @return \Spryker\Zed\UserExtension\Dependency\Plugin\UserFormExpanderPluginInterface[]
     */
    protected function getUserFormExpanderPlugins(): array
    {
        return [
            ...
            new UserLocaleFormExpanderPlugin(),
            ...
        ];
    }
    
    /**
     * @return \Spryker\Zed\UserExtension\Dependency\Plugin\UserPreSavePluginInterface[]
     */
    protected function getUserPreSavePlugins(): array
    {
        return [
            ...
            new AssignUserLocalePreSavePlugin(),
            ...
        ];
    }

    /**
     * @return \Spryker\Zed\UserExtension\Dependency\Plugin\UserTransferExpanderPluginInterface[]
     */
    protected function getUserTransferExpanderPlugins(): array
    {
        return [
            ...
            new UserLocaleTransferExpanderPlugin(),
            ...
        ];
    }
    
    ...
}
  1. Run following console commands:
console transfer:generate
console translator:generate-cache

After finishing this steps you will have Zed translations integrated to your project.
To set Locale for specific Zed user go to Zed Page: Dashboard => Users Control => User.
Edit any user and set needed locale:

Hit Update button and relogin to apply changes.

For overriding existing translations on project level, please create file in project root dir.:
data/translation/Zed/{ModuleName}/{locale_Code}.csv
e.g.: data/translation/Zed/CompanyGui/de_DE.csv

put in this file only needed keys and regenerate zed translations cache by running console command:

console translator:generate-cache

You can find existing translations in *Gui modles, e.g.: vendor/spryker/company-gui/data/translation/Zed/de_DE.csv


#3

Hi devromans,

thank you very much for your detailed response.

The spryker/user-locale module is not added as a dependency for spryker/translator, so one has to install it manually. But translations actually work without the user-locale module, so it’s not necessarily required.

Best regards
Felix