feat(GrowTentKonfigurator): implement add to cart functionality with component collection

src/components/CartItem.js

@@ -75,10 +75,24 @@ class CartItem extends Component {
               component="div" 
               sx={{ fontWeight: 'bold', mb: 0.5 }}
             >
-              <Link to={`/Artikel/${item.seoName}`} style={{ textDecoration: 'none', color: 'inherit' }}>
+              {item.seoName ? (
-                {item.name}
+                <Link to={`/Artikel/${item.seoName}`} style={{ textDecoration: 'none', color: 'inherit' }}>
-              </Link>
+                  {item.name}
+                </Link>
+              ) : (
+                item.name
+              )}
             </Typography>
+
+            {item.komponenten && Array.isArray(item.komponenten) && (
+              <Box sx={{ ml: 2, mb: 1 }}>
+                {item.komponenten.map((comp, index) => (
+                  <Typography key={index} variant="body2" color="text.secondary">
+                    {comp.name}
+                  </Typography>
+                ))}
+              </Box>
+            )}
             
             <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1, mt: 1 }}>
               <Typography 
@@ -146,7 +160,7 @@ class CartItem extends Component {
                   display: "block"
                 }}
               >
-                {this.props.id.toString().endsWith("steckling") ? 
+                {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") : 
@@ -162,4 +176,4 @@ class CartItem extends Component {
   }
 }
 
-export default withI18n()(CartItem); 
+export default withI18n()(CartItem);

src/pages/GrowTentKonfigurator.js

@@ -93,6 +93,7 @@ class GrowTentKonfigurator extends Component {
     this.calculateTotalPrice = this.calculateTotalPrice.bind(this);
     this.saveStateToWindow = this.saveStateToWindow.bind(this);
     this.checkCacheValidity = this.checkCacheValidity.bind(this);
+    this.handleAddToCart = this.handleAddToCart.bind(this);
   }
 
   saveStateToWindow() {
@@ -237,6 +238,71 @@ class GrowTentKonfigurator extends Component {
     this.setState({ selectedExtras: newSelectedExtras });
   }
 
+  handleAddToCart() {
+    if (!window.cart) window.cart = [];
+
+    // Collect components
+    const setComponents = [];
+
+    // Tent
+    let selectedTent = null;
+    const allShapes = ['60x60', '80x80', '100x100', '120x60'];
+    for (const shape of allShapes) {
+      const tents = this.getTentsForShape(shape);
+      selectedTent = tents.find(t => t.id === this.state.selectedTentSize);
+      if (selectedTent) {
+        setComponents.push(selectedTent);
+        break;
+      }
+    }
+
+    // Light
+    if (this.state.selectedLightType) {
+      const availableLamps = this.getLampsForTentShape(this.state.selectedTentShape);
+      const light = availableLamps.find(l => l.id === this.state.selectedLightType);
+      if (light) setComponents.push(light);
+    }
+
+    // Ventilation
+    if (this.state.selectedVentilationType) {
+      const availableVentilation = this.getVentilationForTentShape(this.state.selectedTentShape);
+      const ventilation = availableVentilation.find(v => v.id === this.state.selectedVentilationType);
+      if (ventilation) setComponents.push(ventilation);
+    }
+
+    // Extras
+    const extrasData = getCachedCategoryData('Set-zubehoer');
+    if (extrasData && Array.isArray(extrasData.products)) {
+      this.state.selectedExtras.forEach(extraId => {
+        const extra = extrasData.products.find(e => e.id === extraId);
+        if (extra) setComponents.push(extra);
+      });
+    }
+
+    // Now push to cart
+    const totalPrice = this.state.totalPrice;
+    const setName = `Growbox Set - ${this.state.selectedTentShape}`;
+
+    window.cart.push({
+      id: null,
+      name: setName,
+      seoName: null,
+      pictureList: null,
+      price: totalPrice,
+      fGrundPreis: null,
+      cGrundEinheit: null,
+      quantity: 1,
+      weight: null,
+      vat: 19,
+      versandklasse: null,
+      availableSupplier: 0,
+      komponenten: setComponents,
+      available: 1
+    });
+
+    window.dispatchEvent(new CustomEvent("cart"));
+  }
+
 
 
   // Helper function to filter real tent products by shape
@@ -1233,6 +1299,7 @@ class GrowTentKonfigurator extends Component {
             <Button
               variant="contained"
               size="large"
+              onClick={this.handleAddToCart}
               startIcon={<ShoppingCartIcon />}
               sx={{
                 bgcolor: '#2e7d32',
@@ -1246,7 +1313,24 @@ class GrowTentKonfigurator extends Component {
         </Paper>
     );
   }
-
+/*
+      window.cart.push({
+        id: null,
+        name: "Set 80x80",
+        seoName: nnull,
+        pictureList: null,
+        price: total,
+        fGrundPreis: null,
+        cGrundEinheit: null,
+        quantity: 1,
+        weight: null,
+        vat: vat,
+        versandklasse: null,
+        availableSupplier: null,
+        komponenten: setComponents,
+        available: null
+      });
+*/ 
 
 
   render() {
@@ -1333,4 +1417,4 @@ class GrowTentKonfigurator extends Component {
   }
 }
 
-export default GrowTentKonfigurator; 
+export default GrowTentKonfigurator;