Integrate i18n support across multiple components: Update AddToCartButton, CartDropdown, CartItem, Footer, ProductFilters, ProductList, and profile components to utilize translation functions for dynamic text rendering. Enhance user experience by providing localized content for various UI elements, including buttons, labels, and tax information.

2025-07-16 03:03:47 +02:00
parent cff9c88808
commit 5c90d048fb
12 changed files with 122 additions and 59 deletions
--- a/src/components/AddToCartButton.js
+++ b/src/components/AddToCartButton.js
@@ -10,6 +10,7 @@ import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
 import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
 import DeleteIcon from "@mui/icons-material/Delete";
+import { withI18n } from "../i18n/withTranslation.js";

 if (!Array.isArray(window.cart)) window.cart = [];

@@ -184,7 +185,9 @@ class AddToCartButton extends Component {
                },
              }}
            >
-              {this.props.steckling ? "Als Steckling vorbestellen" : "In den Korb"}
+              {this.props.steckling ? 
+                (this.props.t ? this.props.t('cart.preorderCutting') : "Als Steckling vorbestellen") : 
+                (this.props.t ? this.props.t('cart.addToCart') : "In den Korb")}
            </Button>
          );
        }
@@ -330,7 +333,9 @@ class AddToCartButton extends Component {
            },
          }}
        >
-          {this.props.steckling ? "Als Steckling vorbestellen" : "In den Korb"}
+          {this.props.steckling ? 
+            (this.props.t ? this.props.t('cart.preorderCutting') : "Als Steckling vorbestellen") : 
+            (this.props.t ? this.props.t('cart.addToCart') : "In den Korb")}
        </Button>
      );
    }
@@ -439,4 +444,4 @@ class AddToCartButton extends Component {
  }
 }

-export default AddToCartButton;
+export default withI18n()(AddToCartButton);
--- a/src/components/CartDropdown.js
+++ b/src/components/CartDropdown.js
@@ -8,6 +8,7 @@ import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import CartItem from './CartItem.js';
+import { withI18n } from '../i18n/withTranslation.js';


 class CartDropdown extends Component {
@@ -119,7 +120,7 @@ class CartDropdown extends Component {
                        )}
                        {totalVat7 > 0 && (
                          <TableRow>
-                            <TableCell>7% Mehrwertsteuer:</TableCell>
+                            <TableCell>{this.props.t ? this.props.t('tax.vat7') : '7% Mehrwertsteuer'}:</TableCell>
                            <TableCell align="right">
                              {currencyFormatter.format(totalVat7)}
                            </TableCell>
@@ -127,7 +128,7 @@ class CartDropdown extends Component {
                        )}
                        {totalVat19 > 0 && (
                          <TableRow>
-                            <TableCell>19% Mehrwertsteuer (inkl. Versand):</TableCell>
+                            <TableCell>{this.props.t ? this.props.t('tax.vat19WithShipping') : '19% Mehrwertsteuer (inkl. Versand)'}:</TableCell>
                            <TableCell align="right">
                              {currencyFormatter.format(totalVat19)}
                            </TableCell>
@@ -170,14 +171,14 @@ class CartDropdown extends Component {
                  <Table size="small">
                    <TableBody>
                      <TableRow>
-                        <TableCell>Gesamtnettopreis:</TableCell>
+                        <TableCell>{this.props.t ? this.props.t('tax.totalNet') : 'Gesamtnettopreis'}:</TableCell>
                        <TableCell align="right">
                          {new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(priceCalculations.totalNet)}
                        </TableCell>
                      </TableRow>
                      {priceCalculations.vat7 > 0 && (
                        <TableRow>
-                          <TableCell>7% Mehrwertsteuer:</TableCell>
+                          <TableCell>{this.props.t ? this.props.t('tax.vat7') : '7% Mehrwertsteuer'}:</TableCell>
                          <TableCell align="right">
                            {new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(priceCalculations.vat7)}
                          </TableCell>
@@ -185,14 +186,14 @@ class CartDropdown extends Component {
                      )}
                      {priceCalculations.vat19 > 0 && (
                        <TableRow>
-                          <TableCell>19% Mehrwertsteuer:</TableCell>
+                          <TableCell>{this.props.t ? this.props.t('tax.vat19') : '19% Mehrwertsteuer'}:</TableCell>
                          <TableCell align="right">
                            {new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(priceCalculations.vat19)}
                          </TableCell>
                        </TableRow>
                      )}
                      <TableRow>
-                        <TableCell sx={{ fontWeight: 'bold' }}>Gesamtbruttopreis ohne Versand:</TableCell>
+                        <TableCell sx={{ fontWeight: 'bold' }}>{this.props.t ? this.props.t('tax.totalGross') : 'Gesamtbruttopreis ohne Versand'}:</TableCell>
                        <TableCell align="right" sx={{ fontWeight: 'bold' }}>
                          {new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(priceCalculations.totalGross)}
                        </TableCell>
@@ -210,7 +211,7 @@ class CartDropdown extends Component {
                fullWidth
                onClick={onClose}
              >
-                Weiter einkaufen
+                {this.props.t ? this.props.t('cart.continueShopping') : 'Weiter einkaufen'}
              </Button>
            )}

@@ -222,7 +223,7 @@ class CartDropdown extends Component {
                sx={{ mt: 2 }}
                onClick={onCheckout}
              >
-                Weiter zur Kasse
+                {this.props.t ? this.props.t('cart.proceedToCheckout') : 'Weiter zur Kasse'}
              </Button>
            )}
          </>
@@ -232,4 +233,4 @@ class CartDropdown extends Component {
  }
 }

-export default CartDropdown; 
+export default withI18n()(CartDropdown); 
--- a/src/components/CartItem.js
+++ b/src/components/CartItem.js
@@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import { Link } from 'react-router-dom';
 import AddToCartButton from './AddToCartButton.js';
+import { withI18n } from '../i18n/withTranslation.js';

 class CartItem extends Component {

@@ -126,9 +127,9 @@ class CartItem extends Component {
                    fontStyle="italic"
                    component="div"
                  >
-                    inkl. {new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(
+                    {this.props.t ? this.props.t('product.inclShort') : 'inkl.'} {new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(
                      (item.price * item.quantity) - ((item.price * item.quantity) / (1 + item.vat / 100))
-                    )} MwSt. ({item.vat}%)
+                    )} {this.props.t ? this.props.t('product.vatShort') : 'MwSt.'} ({item.vat}%)
                  </Typography>               
                )}

@@ -146,9 +147,12 @@ class CartItem extends Component {
                  display: "block"
                }}
              >
-                {this.props.id.toString().endsWith("steckling") ? "Lieferzeit: 14 Tage" :
-                 item.available == 1 ? "Lieferzeit: 2-3 Tage" : 
-                 item.availableSupplier == 1 ? "Lieferzeit: 7-9 Tage" : ""}
+                {this.props.id.toString().endsWith("steckling") ? 
+                  (this.props.t ? this.props.t('delivery.times.cutting14Days') : "Lieferzeit: 14 Tage") :
+                 item.available == 1 ? 
+                  (this.props.t ? this.props.t('delivery.times.standard2to3Days') : "Lieferzeit: 2-3 Tage") : 
+                 item.availableSupplier == 1 ? 
+                  (this.props.t ? this.props.t('delivery.times.supplier7to9Days') : "Lieferzeit: 7-9 Tage") : ""}
              </Typography>
              <AddToCartButton available={1} id={this.props.id} komponenten={item.komponenten} availableSupplier={item.availableSupplier} price={item.price} seoName={item.seoName} name={item.name} weight={item.weight} vat={item.vat} versandklasse={item.versandklasse}/>
            </Box>          
@@ -159,4 +163,4 @@ class CartItem extends Component {
  }
 }

-export default CartItem; 
+export default withI18n()(CartItem); 
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -6,6 +6,7 @@ import Link from '@mui/material/Link';
 import { Link as RouterLink } from 'react-router-dom';
 import { styled } from '@mui/material/styles';
 import Paper from '@mui/material/Paper';
+import { withI18n } from '../i18n/withTranslation.js';

 // Styled component for the router links
 const StyledRouterLink = styled(RouterLink)(() => ({
@@ -229,9 +230,9 @@ class Footer extends Component {
              alignItems={{ xs: 'center', md: 'left' }}
              flexWrap="wrap"
            >
-              <StyledRouterLink to="/datenschutz">Datenschutz</StyledRouterLink>
-              <StyledRouterLink to="/agb">AGB</StyledRouterLink>
-              <StyledRouterLink to="/sitemap">Sitemap</StyledRouterLink>
+              <StyledRouterLink to="/datenschutz">{this.props.t ? this.props.t('footer.legal.datenschutz') : 'Datenschutz'}</StyledRouterLink>
+              <StyledRouterLink to="/agb">{this.props.t ? this.props.t('footer.legal.agb') : 'AGB'}</StyledRouterLink>
+              <StyledRouterLink to="/sitemap">{this.props.t ? this.props.t('footer.legal.sitemap') : 'Sitemap'}</StyledRouterLink>
            </Stack>

            <Stack 
@@ -241,9 +242,9 @@ class Footer extends Component {
              alignItems={{ xs: 'center', md: 'left' }}
              flexWrap="wrap"
            >
-              <StyledRouterLink to="/impressum">Impressum</StyledRouterLink>
-              <StyledRouterLink to="/batteriegesetzhinweise">Batteriegesetzhinweise</StyledRouterLink>
-              <StyledRouterLink to="/widerrufsrecht">Widerrufsrecht</StyledRouterLink>
+              <StyledRouterLink to="/impressum">{this.props.t ? this.props.t('footer.legal.impressum') : 'Impressum'}</StyledRouterLink>
+              <StyledRouterLink to="/batteriegesetzhinweise">{this.props.t ? this.props.t('footer.legal.batteriegesetzhinweise') : 'Batteriegesetzhinweise'}</StyledRouterLink>
+              <StyledRouterLink to="/widerrufsrecht">{this.props.t ? this.props.t('footer.legal.widerrufsrecht') : 'Widerrufsrecht'}</StyledRouterLink>
            </Stack>
            
            {/* Payment Methods Section */}
@@ -338,7 +339,7 @@ class Footer extends Component {
            {/* Copyright Section */}
            <Box sx={{ pb:'20px',textAlign: 'center', filter: 'drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))', opacity: 0.7 }}>
              <Typography variant="body2" sx={{ mb: 1, fontSize: { xs: '11px', md: '14px' }, lineHeight: 1.5 }}>
-                * Alle Preise inkl. gesetzlicher USt., zzgl. Versand
+                {this.props.t ? this.props.t('footer.allPricesIncl') : '* Alle Preise inkl. gesetzlicher USt., zzgl. Versand'}
              </Typography>
              <Typography variant="body2" sx={{ fontSize: { xs: '11px', md: '14px' }, lineHeight: 1.5 }}>
                © {new Date().getFullYear()} <StyledDomainLink href="https://growheads.de" target="_blank" rel="noopener noreferrer">GrowHeads.de</StyledDomainLink>
@@ -351,4 +352,4 @@ class Footer extends Component {
  }
 }

-export default Footer;
+export default withI18n()(Footer);
--- a/src/components/ProductFilters.js
+++ b/src/components/ProductFilters.js
@@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography';
 import Filter from './Filter.js';
 import { useParams, useSearchParams, useNavigate, useLocation } from 'react-router-dom';
 import { setSessionSetting, removeSessionSetting, clearAllSessionSettings } from '../utils/sessionStorage.js';
+import { withI18n } from '../i18n/withTranslation.js';

 const isNew = (neu) => neu && (new Date().getTime() - new Date(neu).getTime() < 30 * 24 * 60 * 60 * 1000);

@@ -93,14 +94,14 @@ class ProductFilters extends Component {
  }

  _getAvailabilityValues = (products) => {
-    const filters = [{id:1,name:'auf Lager'}];
+    const filters = [{id:1,name: this.props.t ? this.props.t('product.inStock') : 'auf Lager'}];
    
    for(const product of products){
      if(isNew(product.neu)){
-        if(!filters.find(filter => filter.id == 2)) filters.push({id:2,name:'Neu'});
+        if(!filters.find(filter => filter.id == 2)) filters.push({id:2,name: this.props.t ? this.props.t('product.new') : 'Neu'});
      }
      if(!product.available && product.incomingDate){
-        if(!filters.find(filter => filter.id == 3)) filters.push({id:3,name:'Bald verfügbar'});       
+        if(!filters.find(filter => filter.id == 3)) filters.push({id:3,name: this.props.t ? this.props.t('product.comingSoon') : 'Bald verfügbar'});       
      }
    }
    return filters
@@ -193,7 +194,7 @@ class ProductFilters extends Component {

        {this.props.products.length > 0 && (
          <><Filter 
-          title="Verfügbarkeit"
+          title={this.props.t ? this.props.t('filters.availability') : 'Verfügbarkeit'}
          options={this.state.availabilityValues}
          searchParams={this.props.searchParams}
          products={this.props.products}
@@ -236,7 +237,7 @@ class ProductFilters extends Component {
        {this.generateAttributeFilters()}

        <Filter 
-          title="Hersteller"
+          title={this.props.t ? this.props.t('filters.manufacturer') : 'Hersteller'}
          options={this.state.uniqueManufacturerArray}
          filterType="manufacturer"
          products={this.props.products}
@@ -257,4 +258,4 @@ class ProductFilters extends Component {
  }
 }

-export default withRouter(ProductFilters); 
+export default withRouter(withI18n()(ProductFilters)); 
--- a/src/components/ProductList.js
+++ b/src/components/ProductList.js
@@ -11,6 +11,7 @@ import Chip from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
 import Product from './Product.js';
 import { removeSessionSetting } from '../utils/sessionStorage.js';
+import { withI18n } from '../i18n/withTranslation.js';

 // Sort products by fuzzy similarity to their name/description
 function sortProductsByFuzzySimilarity(products, searchTerm) {
@@ -327,13 +328,13 @@ class ProductList extends Component {
                  minWidth: { xs: 120, sm: 140 }
                }}
              >
-                <InputLabel id="sort-by-label">Sortierung</InputLabel>
+                <InputLabel id="sort-by-label">{this.props.t ? this.props.t('filters.sorting') : 'Sortierung'}</InputLabel>
                <Select
                  size="small"
                  labelId="sort-by-label"
                  value={(this.state.sortBy==='searchField')&&(window.currentSearchQuery)?this.state.sortBy:this.state.sortBy==='price-low-high'?this.state.sortBy:this.state.sortBy==='price-low-high'?this.state.sortBy:'name'}
                  onChange={this.handleSortChange}
-                  label="Sortierung"
+                  label={this.props.t ? this.props.t('filters.sorting') : 'Sortierung'}
                  MenuProps={{
                    disableScrollLock: true,
                    anchorOrigin: {
@@ -368,12 +369,12 @@ class ProductList extends Component {
                  minWidth: { xs: 80, sm: 100 }
                }}
              >
-                <InputLabel id="products-per-page-label">pro Seite</InputLabel>
+                <InputLabel id="products-per-page-label">{this.props.t ? this.props.t('filters.perPage') : 'pro Seite'}</InputLabel>
                <Select
                  labelId="products-per-page-label"
                  value={this.state.itemsPerPage}
                  onChange={this.handleProductsPerPageChange}
-                  label="pro Seite"
+                  label={this.props.t ? this.props.t('filters.perPage') : 'pro Seite'}
                  MenuProps={{
                    disableScrollLock: true,
                    anchorOrigin: {
@@ -496,4 +497,4 @@ class ProductList extends Component {
  }
 }

-export default ProductList; 
+export default withI18n()(ProductList); 
--- a/src/components/header/CategoryList.js
+++ b/src/components/header/CategoryList.js
@@ -597,7 +597,7 @@ class CategoryList extends Component {
              role="button"
              tabIndex={0}
              aria-label={this.props.t ? 
-                (mobileMenuOpen ? this.props.t('navigation.categories') + ' schließen' : this.props.t('navigation.categories') + ' öffnen') :
+                (mobileMenuOpen ? this.props.t('navigation.categoriesClose') : this.props.t('navigation.categoriesOpen')) :
                (mobileMenuOpen ? "Kategorien schließen" : "Kategorien öffnen")
              }
              onKeyDown={(e) => {
--- a/src/components/profile/OrderDetailsDialog.js
+++ b/src/components/profile/OrderDetailsDialog.js
@@ -15,8 +15,11 @@ import {
  TableRow,
  Paper
 } from '@mui/material';
+import { useTranslation } from 'react-i18next';

 const OrderDetailsDialog = ({ open, onClose, order }) => {
+  const { t } = useTranslation();
+  
  if (!order) {
    return null;
  }
@@ -108,7 +111,7 @@ const OrderDetailsDialog = ({ open, onClose, order }) => {
              <TableRow>
                <TableCell colSpan={2} />
                <TableCell align="right">
-                  <Typography fontWeight="bold">Gesamtnettopreis</Typography>
+                  <Typography fontWeight="bold">{t ? t('tax.totalNet') : 'Gesamtnettopreis'}</Typography>
                </TableCell>
                <TableCell align="right">
                  <Typography fontWeight="bold">{currencyFormatter.format(vatCalculations.totalNet)}</Typography>
@@ -117,21 +120,21 @@ const OrderDetailsDialog = ({ open, onClose, order }) => {
              {vatCalculations.vat7 > 0 && (
                <TableRow>
                  <TableCell colSpan={2} />
-                  <TableCell align="right">7% Mehrwertsteuer</TableCell>
+                  <TableCell align="right">{t ? t('tax.vat7') : '7% Mehrwertsteuer'}</TableCell>
                  <TableCell align="right">{currencyFormatter.format(vatCalculations.vat7)}</TableCell>
                </TableRow>
              )}
              {vatCalculations.vat19 > 0 && (
                <TableRow>
                  <TableCell colSpan={2} />
-                  <TableCell align="right">19% Mehrwertsteuer</TableCell>
+                  <TableCell align="right">{t ? t('tax.vat19') : '19% Mehrwertsteuer'}</TableCell>
                  <TableCell align="right">{currencyFormatter.format(vatCalculations.vat19)}</TableCell>
                </TableRow>
              )}
              <TableRow>
                <TableCell colSpan={2} />
                <TableCell align="right">
-                  <Typography fontWeight="bold">Zwischensumme</Typography>
+                  <Typography fontWeight="bold">{t ? t('tax.subtotal') : 'Zwischensumme'}</Typography>
                </TableCell>
                <TableCell align="right">
                  <Typography fontWeight="bold">{currencyFormatter.format(subtotal)}</Typography>
@@ -162,7 +165,7 @@ const OrderDetailsDialog = ({ open, onClose, order }) => {
            Bestellung stornieren
          </Button>
        )}
-        <Button onClick={onClose}>Schließen</Button>
+        <Button onClick={onClose}>{t ? t('common.close') : 'Schließen'}</Button>
      </DialogActions>
    </Dialog>
  );
--- a/src/components/profile/OrderSummary.js
+++ b/src/components/profile/OrderSummary.js
@@ -5,8 +5,10 @@ import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
+import { useTranslation } from 'react-i18next';

 const OrderSummary = ({ deliveryCost, cartItems = [] }) => {
+  const { t } = useTranslation();
  const currencyFormatter = new Intl.NumberFormat('de-DE', { 
    style: 'currency', 
    currency: 'EUR' 
@@ -63,7 +65,7 @@ const OrderSummary = ({ deliveryCost, cartItems = [] }) => {
          )}
          {totalVat7 > 0 && (
            <TableRow>
-              <TableCell>7% Mehrwertsteuer:</TableCell>
+              <TableCell>{t ? t('tax.vat7') : '7% Mehrwertsteuer'}:</TableCell>
              <TableCell align="right">
                {currencyFormatter.format(totalVat7)}
              </TableCell>
@@ -71,7 +73,7 @@ const OrderSummary = ({ deliveryCost, cartItems = [] }) => {
          )}
          {totalVat19 > 0 && (
            <TableRow>
-              <TableCell>19% Mehrwertsteuer (inkl. Versand):</TableCell>
+              <TableCell>{t ? t('tax.vat19WithShipping') : '19% Mehrwertsteuer (inkl. Versand)'}:</TableCell>
              <TableCell align="right">
                {currencyFormatter.format(totalVat19)}
              </TableCell>
--- a/src/components/profile/PaymentConfirmationDialog.js
+++ b/src/components/profile/PaymentConfirmationDialog.js
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { Box, Typography, Button } from "@mui/material";
+import { withI18n } from "../../i18n/withTranslation.js";

 class PaymentConfirmationDialog extends Component {
  render() {
@@ -28,24 +29,26 @@ class PaymentConfirmationDialog extends Component {
          color: paymentCompletionData.isSuccessful ? '#2e7d32' : '#d32f2f',
          fontWeight: 'bold'
        }}>
-          {paymentCompletionData.isSuccessful ? 'Zahlung erfolgreich!' : 'Zahlung fehlgeschlagen'}
+          {paymentCompletionData.isSuccessful ? 
+            (this.props.t ? this.props.t('payment.successful') : 'Zahlung erfolgreich!') : 
+            (this.props.t ? this.props.t('payment.failed') : 'Zahlung fehlgeschlagen')}
        </Typography>
        
        {paymentCompletionData.isSuccessful ? (
          <>
            {orderCompleted ? (
              <Typography variant="body1" sx={{ mt: 2, color: '#2e7d32' }}>
-                🎉 Ihre Bestellung wurde erfolgreich abgeschlossen! Sie können jetzt Ihre Bestellungen einsehen.
+{this.props.t ? this.props.t('payment.orderCompleted') : '🎉 Ihre Bestellung wurde erfolgreich abgeschlossen! Sie können jetzt Ihre Bestellungen einsehen.'}
              </Typography>
            ) : (
              <Typography variant="body1" sx={{ mt: 2, color: '#2e7d32' }}>
-                Ihre Zahlung wurde erfolgreich verarbeitet. Die Bestellung wird automatisch abgeschlossen.
+{this.props.t ? this.props.t('payment.orderProcessing') : 'Ihre Zahlung wurde erfolgreich verarbeitet. Die Bestellung wird automatisch abgeschlossen.'}
              </Typography>
            )}
          </>
        ) : (
          <Typography variant="body1" sx={{ mt: 2, color: '#d32f2f' }}>
-            Ihre Zahlung konnte nicht verarbeitet werden. Bitte versuchen Sie es erneut oder wählen Sie eine andere Zahlungsmethode.
+{this.props.t ? this.props.t('payment.paymentError') : 'Ihre Zahlung konnte nicht verarbeitet werden. Bitte versuchen Sie es erneut oder wählen Sie eine andere Zahlungsmethode.'}
          </Typography>
        )}

@@ -75,7 +78,7 @@ class PaymentConfirmationDialog extends Component {
                }
              }}
            >
-              Weiter einkaufen
+{this.props.t ? this.props.t('cart.continueShopping') : 'Weiter einkaufen'}
            </Button>
            <Button 
              onClick={onViewOrders}
@@ -85,7 +88,7 @@ class PaymentConfirmationDialog extends Component {
                '&:hover': { bgcolor: '#1b5e20' }
              }}
            >
-              Zu meinen Bestellungen
+{this.props.t ? this.props.t('payment.viewOrders') : 'Zu meinen Bestellungen'}
            </Button>
          </Box>
        )}
@@ -94,4 +97,4 @@ class PaymentConfirmationDialog extends Component {
  }
 }

-export default PaymentConfirmationDialog; 
+export default withI18n()(PaymentConfirmationDialog); 
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -5,7 +5,7 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 // Import all translation files
 import translationDE from './locales/de/translation.json';
 import translationEN from './locales/en/translation.json';
-import translationES from './locales/es/translation.json';
+/*import translationES from './locales/es/translation.json';
 import translationFR from './locales/fr/translation.json';
 import translationIT from './locales/it/translation.json';
 import translationPL from './locales/pl/translation.json';
@@ -17,14 +17,14 @@ import translationUK from './locales/uk/translation.json';
 import translationSK from './locales/sk/translation.json';
 import translationCS from './locales/cs/translation.json';
 import translationRO from './locales/ro/translation.json';
-
+*/
 const resources = {
  de: {
    translation: translationDE
  },
  en: {
    translation: translationEN
-  },
+  }/*,
  es: {
    translation: translationES
  },
@@ -60,7 +60,7 @@ const resources = {
  },
  ro: {
    translation: translationRO
-  }
+  }*/
 };

 i18n
--- a/src/i18n/locales/de/translation.json
+++ b/src/i18n/locales/de/translation.json
@@ -3,7 +3,9 @@
    "home": "Startseite",
    "aktionen": "Aktionen",
    "filiale": "Filiale",
-    "categories": "Kategorien"
+    "categories": "Kategorien",
+    "categoriesOpen": "Kategorien öffnen",
+    "categoriesClose": "Kategorien schließen"
  },
  "auth": {
    "login": "Anmelden",
@@ -32,6 +34,10 @@
  "cart": {
    "title": "Warenkorb",
    "empty": "leer",
+    "addToCart": "In den Korb",
+    "preorderCutting": "Als Steckling vorbestellen",
+    "continueShopping": "Weiter einkaufen",
+    "proceedToCheckout": "Weiter zur Kasse",
    "sync": {
      "title": "Warenkorb-Synchronisierung",
      "description": "Sie haben einen gespeicherten Warenkorb in ihrem Account. Bitte wählen Sie, wie Sie verfahren möchten:",
@@ -54,7 +60,13 @@
    "priceUnit": "{{price}}/{{unit}}",
    "new": "Neu",
    "arriving": "Ankunft:",
-    "inclVatFooter": "incl. {{vat}}% USt.,*"
+    "inclVatFooter": "incl. {{vat}}% USt.,*",
+    "availability": "Verfügbarkeit",
+    "inStock": "auf Lager",
+    "comingSoon": "Bald verfügbar",
+    "deliveryTime": "Lieferzeit",
+    "inclShort": "inkl.",
+    "vatShort": "MwSt."
  },
  "search": {
    "placeholder": "Du kannst mich nach Cannabissorten fragen...",
@@ -81,6 +93,11 @@
      "dhl": "6,99 €",
      "dpd": "4,90 €",
      "sperrgut": "28,99 €"
+    },
+    "times": {
+      "cutting14Days": "Lieferzeit: 14 Tage",
+      "standard2to3Days": "Lieferzeit: 2-3 Tage",
+      "supplier7to9Days": "Lieferzeit: 7-9 Tage"
    }
  },
  "checkout": {
@@ -92,6 +109,29 @@
    "sameAddress": "Lieferadresse ist identisch mit Rechnungsadresse",
    "termsAccept": "Ich habe die AGBs, die Datenschutzerklärung und die Bestimmungen zum Widerrufsrecht gelesen"
  },
+  "payment": {
+    "successful": "Zahlung erfolgreich!",
+    "failed": "Zahlung fehlgeschlagen",
+    "orderCompleted": "🎉 Ihre Bestellung wurde erfolgreich abgeschlossen! Sie können jetzt Ihre Bestellungen einsehen.",
+    "orderProcessing": "Ihre Zahlung wurde erfolgreich verarbeitet. Die Bestellung wird automatisch abgeschlossen.",
+    "paymentError": "Ihre Zahlung konnte nicht verarbeitet werden. Bitte versuchen Sie es erneut oder wählen Sie eine andere Zahlungsmethode.",
+    "viewOrders": "Zu meinen Bestellungen"
+  },
+  "filters": {
+    "sorting": "Sortierung",
+    "perPage": "pro Seite",
+    "availability": "Verfügbarkeit",
+    "manufacturer": "Hersteller"
+  },
+  "tax": {
+    "vat": "Mehrwertsteuer",
+    "vat7": "7% Mehrwertsteuer",
+    "vat19": "19% Mehrwertsteuer",
+    "vat19WithShipping": "19% Mehrwertsteuer (inkl. Versand)",
+    "totalNet": "Gesamtnettopreis",
+    "totalGross": "Gesamtbruttopreis ohne Versand",
+    "subtotal": "Zwischensumme"
+  },
  "footer": {
    "hours": "Sa 11-19",
    "address": "Trachenberger Straße 14 - Dresden",
@@ -157,6 +197,8 @@
    "edit": "Bearbeiten",
    "delete": "Löschen",
    "add": "Hinzufügen",
-    "remove": "Entfernen"
+    "remove": "Entfernen",
+    "products": "Produkte",
+    "product": "Produkt"
  }
 }