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

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;