Guide d'intégration

Traduire le site Adobe Commerce (Magento) avec l'IA

1. Créer un compte

Tout ce que vous devez faire est d'ajouter un code personnalisé au début de la balise body et d'intégrer un code pour le sélecteur de langue. De plus, assurez-vous d'avoir complété les étapes suivantes :

  • Inscrivez-vous sur https://app.globalseo.ai.
  • Créez un projet et sélectionnez les langues dans lesquelles vous souhaitez traduire votre site web.
  • Copiez le code HTML généré.
  • Enregistrez le projet.

Comment ajouter le script HTML à votre site web :

1. Access Your Magento Admin Panel

  • Log in to your Magento admin panel using your administrator credentials.

2. Navigate to Content Configuration

  • From the admin sidebar, go to Content.
  • Under Design, click on Configuration.

3. Select the Theme to Edit

  • You will see a list of your store views and their corresponding themes.
  • Find the store view you want to edit (usually the Default Store View) and click on Edit under the Action column.

4. Edit the HTML Head

  • In the Edit Theme page, scroll down to the Other Settings section.
  • Click on the HTML Head tab to expand it.

5. Add HTML Code Snippet

  • In the Scripts and Style Sheets field, you can add your HTML code snippet.
  • This field allows you to add any HTML, JavaScript, or CSS that you want to include in the head tag of your pages.

6. Save the Configuration

  • After adding your code snippet, click the Save Configuration button located at the top right of the page.

7. Flush Cache

  • To ensure your changes take effect, you need to flush the cache.
  • Go to System from the admin sidebar.
  • Under Tools, click on Cache Management.
  • Select all cache types by clicking on the checkbox at the top of the list.
  • Click Flush Magento Cache.


Error: "Refused to load the script 'https://unpkg.com/weploy-translate/dist/weploy-translate.js' because it violates the following Content Security Policy directive: ."

1. Create or Edit the CSP Whitelist Configuration File

  • Navigate to your Magento installation directory.
  • If it doesn't exist already, create a new file in the following path: app/code/[Vendor]/[Module]/etc/csp_whitelist.xml. Replace [Vendor] and [Module] with your specific vendor and module names, e.g., Custom/Module.

2. Edit the csp_whitelist.xml File

  • Add the following XML content to the file, ensuring that the necessary hosts are included in the script-src and connect-src policies:
<?xml version="1.0" encoding="UTF-8"?>
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
    <policies>
        <policy id="script-src">
            <values>
                <value id="globalseo" type="host">cdn.globalseo.ai</value>
                <value id="globalseoapi" type="host">api.globalseo.ai</value>
                <value id="unpkg" type="host">unpkg.com</value>
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <value id="globalseo" type="host">cdn.globalseo.ai</value>
                <value id="globalseoapi" type="host">api.globalseo.ai</value>
                <value id="unpkg" type="host">unpkg.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

3. Enable the Module (if it is a new module)

  • If you created a new module for this, you need to enable it. Run the following commands from your Magento root directory:
php bin/magento module:enable [Vendor]_[Module]
php bin/magento setup:upgrade
php bin/magento setup:di:compile

Replace [Vendor] and [Module] with your specific names.

4. Flush the Cache

  • After making changes to the configuration, flush the cache to apply the changes:
php bin/magento cache:flush
<link href="https://unpkg.com/globalseo/dist/translate.css" rel="stylesheet">
<script
  src="https://unpkg.com/globalseo/dist/translate.js"
  data-globalseo-key="YOUR_API_KEY"
  data-use-browser-language="true"
  data-dynamic-translation="false"
  data-original-language="en"
  data-allowed-languages="de, es, ru, id, hi, zh, ja"
  data-exclude-classes=""
></script>

Configuration:

  1. Important: Replace YOUR_API_KEY with the actual API key obtained from your project. This is crucial for enabling the translation services.
  2. Language Settings:
    • data-original-language: Set this attribute to your website's primary language code (e.g., en for English, fr for French).
    • data-allowed-languages: Configure this according to your project's requirements. List the language codes (e.g., en, fr, de) that you wish to support on your site.

For more settings, please visit: GitHub

Optional Configuration:

  1. data-use-browser-language: By default, this is set to automatically translate the website based on the user's browser language. If you prefer to disable this feature, set it to false.
  2. data-exclude-classes: Specify any CSS class names that should not be translated by the service. This is particularly useful for elements such as chatbots, which may not require translation. List the classes separated by commas (e.g., chatbot, no-translate).

2. Add the language selector

Add the following line of code somewhere on your website. We recommend including it inside the navigation.

<div class="globalseo-select globalseo-lang-selector-wrapper globalseo-exclude">
  <details rôle="groupe">
     <résumé rôle="bouton" class="globalseo-lang-selector-loading">
        <svg class="globalseo-lang-selector-loading-icon" width="20" hauteur="20" vueBoîte="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M16.7906 28.9982C14.131 28.9516 11.5622 28.0231 9.48748 26.3584C7.4128 24.6937 5.94973 22.3871 5.328 19.8007M16.7906 28.9982C13.4777 28.9404 10.8853 23.521 11.0009 16.8953C11.1166 10.2697 13.8966 4.94402 17.2094 5.00185M16.7906 28.9982C17.4055 29.0089 18.0021 28.8342 18.5667 28.5M16.7906 28.9982C17.4353 29.0094 17.904 28.9456 18.4338 28.8411M5.328 19.8007C8.73815 21.7699 12.6799 22.9255 16.8953 22.9991C17.5541 23.0116 18.2116 22.9969 18.8663 22.9553M5.328 19.8007C5.09283 18.8151 4.98323 17.8037 5.00182 16.7906C5.03917 14.6509 5.63417 12.6503 6.64706 10.9277M17.2094 5.00185C20.5222 5.05968 23.1147 10.4791 22.9991 17.1047C22.9878 17.7501 22.9513 18.3831 22.8914 19M17.2094 5.00185C19.3374 5.03811 21.4175 5.63986 23.2362 6.74538C25.0548 7.8509 26.5467 9.42037 27.5585 11.2928M17.2094 5.00185C15.0814 4.96382 12.9816 5.49262 11.1255 6.53399C9.26935 7.57536 7.72367 9.09181 6.64706 10.9277M27.5585 11.2928C24.612 13.7563 20.8749 15.0729 17.0349 15.0003C13.0382 14.9306 9.40832 13.4003 6.64706 10.9277M27.5585 11.2928C28.5415 13.1075 29.0375 15.146 28.9982 17.2095C28.9905 17.6459 28.9597 18.0764 28.9068 18.5" 
           stroke="#000000" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
           <g style="animation: globalseospin 2s linéaire infini; origine-de-transformation: 26px 26px;">
             <circle cx="26" cy="26" r="7.125" stroke="#000000" stroke-width="1.75" stroke-dasharray="31.42" stroke-dashoffset="10.47"></circle>
           </g>
       </svg>
     </résumé>
  </details>
</div>

Vous pouvez changer de langue simplement en ajoutant le paramètre URL : "?lang=LANG_CODE". Par exemple :

<div class="globalseo-exclude">
    <a href="?lang=en">EN</a>
    <a href="?lang=de">DE</a>
</div>

3. Traduire le site web

Après la publication de la page, vérifiez l'URL de votre site web et sélectionnez une langue dans le sélecteur de langue. La page est en cours de traduction, cela peut prendre quelques minutes.

Optionnellement : Exclure le texte de la traduction

Si vous souhaitez exclure du texte de la traduction, ajoutez simplement "globalseo-exclude" comme classe à l'élément parent. Tous les textes à l'intérieur de cet élément ne seront pas traduits.

Il ne reste plus qu'une chose à faire : Inscrivez-vous et essayez par vous-même.

Inscrivez-vous et obtenez une clé API
Plus Icon
Intégrer avec
Adobe Commerce

Construit par

Adobe Inc.

Catégorie

E-Commerce

Bienvenue dans le futur de la localisation de sites web par IA

Commencez à traduire pour votre site web en moins de 5 minutes. Inscrivez-vous et obtenez 2 000 mots traduits gratuitement.

Commencer