How to create a professional multilingual website

<script>
/* <![CDATA[ */
    // Check if the body has the class 'j-shop-special-page'
if (document.body.classList.contains('j-shop-special-page')) {
    // Create the google translate div
    var translateDiv = document.createElement('div');
    translateDiv.id = 'google_translate_element';
    translateDiv.style.maxHeight = '40px';

    // Select the cc-checkout-wrapper element
    var checkoutWrapper = document.getElementById('cc-checkout-wrapper');

    // Get the first child of cc-checkout-wrapper
    var firstChild = checkoutWrapper.firstChild;

    // Insert the google translate div before the first child
    checkoutWrapper.insertBefore(translateDiv, firstChild);

    // Create a script element for translation
    var scriptElement = document.createElement('script');
    scriptElement.innerHTML = `
        function googleTranslateElementInit() {
            new google.translate.TranslateElement(
                { includedLanguages: 'de,en,es,fr,it,nl,no,sv,da,pt,ru,ja,zh-CN,tr,el' },
                'google_translate_element'
            );
        }`;

    // Append the script to the checkout wrapper
    checkoutWrapper.insertBefore(scriptElement, firstChild);

    // Create a script element for the Google Translate API
    var translateAPIScript = document.createElement('script');
    translateAPIScript.type = 'text/javascript';
    translateAPIScript.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';

    // Append the API script to the checkout wrapper
    checkoutWrapper.insertBefore(translateAPIScript, firstChild);
}

/*]]>*/
</script>

<style>
    /* <![CDATA[*/
    .hs-footer .j-hgrid {
      display: none;
}

.matrix .hs-footer .j-hgrid,
.lang-1 .hs-footer .lang-1 .j-hgrid,
.lang-2 .hs-footer .lang-2 .j-hgrid,
.lang-3 .hs-footer .lang-3 .j-hgrid,
.lang-4 .hs-footer .lang-4 .j-hgrid,
.lang-5 .hs-footer .lang-5 .j-hgrid {
      display: block;
}
]]>
</style><script>



/* <![CDATA[ */

document.addEventListener('DOMContentLoaded', function () {
  var url = window.location.href;
  var languageIndex = 0;
  var languageMappings = {
    'de': 1,
    'ru': 2,
    'en': 3,
  };

  var decodedUrl = decodeURIComponent(url);

  var bodyClasses = document.body.classList;

  if (
    bodyClasses.contains('cc-indexpage') ||
    bodyClasses.contains('j-shop-special-page') ||
    bodyClasses.contains('cc-page-blog') ||
    bodyClasses.contains('cc-pagemode-overlay') ||
    decodedUrl.includes('/about')
  ) {
    languageIndex = 1;
  } else {
    for (var key in languageMappings) {
      var languageCode = '/' + key + '/';
      var languageCodeInUrl = '/' + key;
      if (
        decodedUrl.includes(languageCode) ||
        decodedUrl.includes(languageCodeInUrl)
      ) {
        languageIndex = languageMappings[key];
        break;
      }
    }
  }

  if (languageIndex > 0) {
    var languageClass = 'lang-' + languageIndex;
    document.body.classList.add(languageClass);
  }
});

/*]]>*/



</script>