Magento tutorial

WEB-T Magento is a JavaScript plugin for website content translation. It consists of two parts: a client-side plugin that is embedded in your Magento website, and a server-side Translation Hub that provides translation caching and post-editing.

The plugin translates the currently rendered webpage content into the selected language. All translations are saved into a database, allowing you to edit them via Translation editor on the Translation Hub.

Setup the Translation Hub:

1. Set-up and prepare Kubernetes environment.
2. Download deployment HELM and configure values.
3. Deploy.
4. Make available to the outside.

Obtain eTranslation or WEB-T compatible translation provider authorization information:

• Get MT provider access
• Use these credentials on the Translation Hub.

Create an integration and install the plugin on your website:

1. Create a Website Translator integration on the Translation Hub.
2. Install the plugin on your website.

Translate your website and improve the automated translations:

1. Translate your website by going through all pages and selecting every target language from the menu.
2. Use Translation editor to improve translated texts. The corrections will instantly appear on your website.
3. When new content is added in the original language, re-translate the edited page by selecting every target language from the menu.

First time the content of any page is loaded it will take some time to translate it. The translations will be saved into a database and will load faster the next time.

What are its limitations?

WEB-T Universal does not provide media or email translation.

This section shows multiple ways to download and install WEB-T plugin in your Magento website. You can choose which one suits best for you. 

Download WEB-T plugin 

To install the plugin, first you must download it. You can download WEB-T extension from WEB-T website, Adobe Commerce Marketplace, or by cloning WEB-T code repository and building the plugin manually. 

Download from WEB-T website 
Easiest way to download ZIP file of this plugin is to visit WEB-T website and click “Download Magento plugin”: https://website-translation.language-tools.ec.europa.eu/solutions/web-t-magento_en 

After downloading ZIP file, extract it and copy the europeancommission folder to [Magento root dir]/app/code, then follow installation instructions. 

Download from Adobe Commerce Marketplace
WEB-T can be downloaded from Adobe Commerce Marketplace by visiting this link: https://commercemarketplace.adobe.com/europeancommission-webt.html 

To download WEB-T: 

1. Select the store version and click Add to cart: 

2. Open the cart and click Proceed to checkout 
3. You will be asked to log in with Adobe Commerce account. If you don’t have it, you can create one (for free) at this step. 
4. After logging in, confirm the order, by clicking Place Order 
5. Now you have WEB-T listed in your product page. Click Install and follow the instructions to add this plugin to your website via Composer. These instructions will require you to: 
   1. Create Adobe Commerce access key (free) 
   2. Configure auth.json file with your access key so that Composer can download this plugin from
   3. Adobe Commerce Add WEB-T to your website with Composer 
6. Follow installation guide below to enable the WEB-T plugin. 

Download from code repository 

To download and build the plugin manually (from code repository): 

2. Clone the plugin repository: https://code.europa.eu/web-t/web-t-magento-hybrid  
3. Before building the plugin code, you must install the prerequisites – Node.js and npm. See the official documentation: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm 
4. From the plugin root directory run 'npm install'. 
   1. Alternatively, you can download the latest Website Translator module from: https://www.npmjs.com/package/@tilde-nlp/website-translator and copy the @tilde-nlp/website-translator/dist/widget.js file to the europeancommission/webt/view/frontend/web/js/ directory. 
5. (Optional) Add Translation Hub URL to the CSP whitelist, if it is not allowed by the Content Security Policy:
   1. Change ‘localhost’ to your custom URL in europeancommission/webt/etc/csp_whitelist.xml 
6. Copy the europeancommission folder to [Magento root dir]/app/code/ 
7. Follow installation guide below to enable the WEB-T plugin

Install WEB-T plugin 

1. Set up Translation Hub (see: https://website-translation.language-tools.ec.europa.eu/instruction-information-about-universal-plugin_en#translation-hub-setup). 
2. SSH into Magento instance and execute:   
   1. Change workdir to [Magento root dir] 
   2. Enable europeancommission_webt module: php bin/magento module:enable europeancommission_webt 
   3. Update DB: php bin/magento setup:upgrade
   4. Clean cache: php bin/magento cache:clean 
   5. Generate classes: php bin/magento setup:di:compile (Optional) Fix permissions for the [Magento root dir]/var folder, if they have changed after executing any of the previous commands 
      1. e.g., for Apache: chown -R daemon:root [Magento root dir]/var/ 
3. Restart Magento instance. 

After you have set-up the Translation Hub, open the browser and navigate to the URL where it is located.

On the Translation Hub, you will find:

• Translation Provider – for setting the translation provider authorization information (eTranslation API credentials or Base URL & API key).
• My integrations – for creating and managing your website integrations. Once you create an integration it appears in the “My integrations” list.
• Translation editor – for managing and editing translations (for each integration separately).
• Settings – for editing languages, machine translation engines and domain access (for each integration separately). This page also includes the generated JavaScript integration code.

You can configure the translation provider and create new website integrations on the Translation Hub.

On the Magento dashboard, under Stores > Configuration > WEB-T settings you will find:

• Connection with Translation Hub – for setting your Translation Hub URL and Client ID.
• General settings – for changing MT notice visibillity and excluding paths from translation.

Before you continue:
You have deployed and configured the Translation Hub.
You must have an eTranslation or WEB-T compatible translation provider account.
You have obtained eTranslation API credentials or Base URL & API key from your translation provider.

Configure the translation provider

To configure the MT Provider on the Translation Hub:

1. On the Translation Hub, open Translation provider.
2. Select MT provider (eTranslation or Custom).
3. Enter the required data (eTranslation API credentials or Base URL & API key).
4. Click Save.

Create new integration

To create a new website integration:

1. On the Translation Hub, open My integrations.
2. Click +Create website translator.
3. Select General setup.
4. Fill the form:
   1. Give your integration a name.
   2. Add your website domain URL. (https://example.com, https://www.example.com and https://sub.example.com should all be added separately by clicking Add another domain).
   3. Select your website's original language.
   4. Select the languages you want your website to be translated into.
   5. In the generated table, select an MT engine for each language.
5. Click Save.

Configure plugin

To configure the plugin:

1. Open the Magento administrator dashboard.
2. Open Stores > Configuration.
3. Under General settings find WEB-T Settings.
4. Enter the Translation Hub URL and Client ID generated on the Translation Hub.
5. Click Save Config.
6. Open any frontend page,  WEB-T widget should be visible on the top of every page. Change the language to see if the translation is working.

Find the Translation Hub URL and the Client ID on the Translation Hub in integration settings under Hybrid plugin setup.

Hide MT notice

To hide machine-translation notice bar shown at the top of every translated page:

1. Open the Magento administrator dashboard.
2. Open Stores > Configuration.
3. Under General settings find WEB-T Settings.
4. Under General settings section set Show MT notice value to No.
5. Click Save Config.

Exclude certain paths from translation

If, for some reason, you do not want to translate certain webpages in your website, you can exclude their URL from plugin settings.

To exclude paths from translation:

1. Open the Magento administrator dashboard.
2. Open Stores > Configuration.
3. Under General settings find WEB-T Settings.
4. Under General settings section find Exclude paths from translation
5. Enter path to each page you want to exclude on its own line. Wildcard (*) at the end of the path is also supported. You can use either full paths or relative paths (e.g. 'http://example.com/some/path' or '/some/path' or '/some/*').
6. Click Save Config.

The translations will appear on the Translation Hub in Translation editor where you can edit them.

To translate content:

1. Open the page you want to translate.
2. Select the language from the widget’s language switcher.
3. Wait for the content to be translated.
4. Open every form, dropdown, and any dynamic content to translate and assess the translation quality.
5. Repeat the steps for every language.