Implement multilingual support: Integrate i18next for language translation across components, update configuration for multilingual descriptions and keywords, and enhance user interface elements with dynamic language switching. Add new dependencies for i18next and related libraries in package.json and package-lock.json.

2025-07-16 02:34:36 +02:00
parent b78de53786
commit cff9c88808
29 changed files with 3347 additions and 86 deletions
--- a/src/i18n/withTranslation.js
+++ b/src/i18n/withTranslation.js
@@ -0,0 +1,113 @@
+import React, { Component } from 'react';
+import { withTranslation as reactI18nextWithTranslation } from 'react-i18next';
+
+// HOC to provide translation functions to class components
+export const withTranslation = (namespaces = 'translation') => (WrappedComponent) => {
+  return reactI18nextWithTranslation(namespaces)(WrappedComponent);
+};
+
+// Context for language switching
+export const LanguageContext = React.createContext({
+  currentLanguage: 'de',
+  changeLanguage: () => {},
+  availableLanguages: ['bg', 'cs', 'de', 'es', 'fr', 'hu', 'it', 'pl', 'ro', 'sr', 'ru', 'sk', 'uk', 'en']
+});
+
+// Provider component for language management
+export class LanguageProvider extends Component {
+  constructor(props) {
+    super(props);
+    
+    // Get initial language from i18n instance
+    const currentLanguage = props.i18n?.language || 'de';
+    
+    this.state = {
+      currentLanguage,
+      availableLanguages: ['bg', 'cs', 'de', 'es', 'fr', 'hu', 'it', 'pl', 'ro', 'sr', 'ru', 'sk', 'uk', 'en']
+    };
+  }
+
+  componentDidMount() {
+    // Listen for language changes from i18n
+    if (this.props.i18n) {
+      this.props.i18n.on('languageChanged', this.handleLanguageChanged);
+    }
+  }
+
+  componentWillUnmount() {
+    // Clean up listener
+    if (this.props.i18n) {
+      this.props.i18n.off('languageChanged', this.handleLanguageChanged);
+    }
+  }
+
+  handleLanguageChanged = (lng) => {
+    this.setState({ currentLanguage: lng });
+    
+    // Update HTML lang attribute for SEO
+    document.documentElement.lang = lng;
+    
+    // Update config if available
+    if (window.shopConfig) {
+      // Language code mapping for all supported languages
+      const languageMap = {
+        'de': 'de-DE',
+        'en': 'en-US',
+        'es': 'es-ES',
+        'fr': 'fr-FR',
+        'it': 'it-IT',
+        'pl': 'pl-PL',
+        'hu': 'hu-HU',
+        'sr': 'sr-RS',
+        'bg': 'bg-BG',
+        'ru': 'ru-RU',
+        'uk': 'uk-UA',
+        'sk': 'sk-SK',
+        'cs': 'cs-CZ',
+        'ro': 'ro-RO'
+      };
+      window.shopConfig.language = languageMap[lng] || 'de-DE';
+    }
+  };
+
+  changeLanguage = (language) => {
+    if (this.props.i18n && this.state.availableLanguages.includes(language)) {
+      this.props.i18n.changeLanguage(language);
+    }
+  };
+
+  render() {
+    const contextValue = {
+      currentLanguage: this.state.currentLanguage,
+      changeLanguage: this.changeLanguage,
+      availableLanguages: this.state.availableLanguages
+    };
+
+    return (
+      <LanguageContext.Provider value={contextValue}>
+        {this.props.children}
+      </LanguageContext.Provider>
+    );
+  }
+}
+
+// HOC to inject language context into class components
+export const withLanguage = (WrappedComponent) => {
+  return class extends Component {
+    render() {
+      return (
+        <LanguageContext.Consumer>
+          {(languageContext) => (
+            <WrappedComponent {...this.props} languageContext={languageContext} />
+          )}
+        </LanguageContext.Consumer>
+      );
+    }
+  };
+};
+
+// Combined HOC that provides both translation and language context
+export const withI18n = (namespaces = 'translation') => (WrappedComponent) => {
+  const WithTranslationComponent = withTranslation(namespaces)(WrappedComponent);
+  return withLanguage(WithTranslationComponent);
+};