diff --git a/src/pages/GrowTentKonfigurator.js b/src/pages/GrowTentKonfigurator.js
index d06e61b..d6485dd 100644
--- a/src/pages/GrowTentKonfigurator.js
+++ b/src/pages/GrowTentKonfigurator.js
@@ -16,7 +16,7 @@ import {
} from '@mui/material';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import { TentShapeSelector, ProductSelector, ExtrasSelector } from '../components/configurator/index.js';
-import { tentShapes, lightTypes, ventilationTypes, extras } from '../data/configuratorData.js';
+import { tentShapes, ventilationTypes, extras } from '../data/configuratorData.js';
function setCachedCategoryData(categoryId, data) {
if (!window.productCache) {
@@ -244,7 +244,13 @@ class GrowTentKonfigurator extends Component {
const productDepth = parseInt(depthMatch[1]);
// Check if dimensions match
- return productWidth === targetWidth && productDepth === targetDepth;
+ const sizeMatch = productWidth === targetWidth && productDepth === targetDepth;
+
+ // Check availability - only show products that are available for delivery
+ // Following same logic as Content.js: available > 0 OR availableSupplier == 1
+ const isAvailable = (product.available > 0) || (product.availableSupplier === 1);
+
+ return sizeMatch && isAvailable;
});
return matchingProducts.map(product => {
@@ -254,6 +260,58 @@ class GrowTentKonfigurator extends Component {
}); // No sorting needed
}
+ // Filter lamps by tent size using "passend für Zelt" attribute
+ filterLampsByTentSize(tentShape, products, attributes) {
+ if (!products || !attributes || !tentShape) return [];
+
+ console.log('Filtering lamps for tent shape:', tentShape);
+ console.log('Available lamp products:', products.length);
+ console.log('Available lamp attributes:', attributes.length);
+
+ // Group attributes by product ID and attribute name
+ const attributesByProduct = {};
+ attributes.forEach(attr => {
+ if (!attributesByProduct[attr.kArtikel]) {
+ attributesByProduct[attr.kArtikel] = {};
+ }
+ attributesByProduct[attr.kArtikel][attr.cName] = attr.cWert;
+ });
+
+ // Filter products by matching tent size in "passend für Zelt" attribute
+ const matchingProducts = products.filter(product => {
+ const attrs = attributesByProduct[product.id];
+ if (!attrs) return false;
+
+ // Check "passend für Zelt" attribute
+ const tentSizeAttr = attrs['passend für Zelt'];
+ if (!tentSizeAttr) return false;
+
+ // Check if tent size matches
+ const sizeMatch = tentSizeAttr === tentShape;
+
+ // Check availability - only show products that are available for delivery
+ const isAvailable = (product.available > 0) || (product.availableSupplier === 1);
+
+ console.log(`Product ${product.id}: tentSize=${tentSizeAttr}, match=${sizeMatch}, available=${isAvailable}`);
+
+ return sizeMatch && isAvailable;
+ });
+
+ console.log('Filtered lamps:', matchingProducts.length);
+ return matchingProducts;
+ }
+
+ // Get lamps for selected tent shape
+ getLampsForTentShape(shapeId) {
+ const cachedData = getCachedCategoryData('Lampen');
+ if (!cachedData || !cachedData.products || !cachedData.attributes) {
+ console.log('No cached lamp data available');
+ return [];
+ }
+
+ return this.filterLampsByTentSize(shapeId, cachedData.products, cachedData.attributes);
+ }
+
// Helper function to generate coverage descriptions
getCoverageDescription(width, depth) {
const area = width * depth;
@@ -355,8 +413,9 @@ class GrowTentKonfigurator extends Component {
// Add light price
if (selectedLightType) {
- const light = lightTypes.find(l => l.id === selectedLightType);
- if (light) {
+ const availableLamps = this.getLampsForTentShape(this.state.selectedTentShape);
+ const light = availableLamps.find(l => l.id === selectedLightType);
+ if (light && light.price) {
total += light.price;
itemCount++;
}
@@ -427,8 +486,9 @@ class GrowTentKonfigurator extends Component {
}
if (selectedLightType) {
- const light = lightTypes.find(l => l.id === selectedLightType);
- if (light) {
+ const availableLamps = this.getLampsForTentShape(this.state.selectedTentShape);
+ const light = availableLamps.find(l => l.id === selectedLightType);
+ if (light && light.price) {
originalTotal += light.price;
itemCount++;
}
@@ -543,15 +603,16 @@ class GrowTentKonfigurator extends Component {
display: 'flex',
flexDirection: 'column',
borderRadius: '8px',
- boxShadow: '0px 2px 8px rgba(0,0,0,0.1)',
overflow: 'hidden',
- backgroundColor: '#ffffff',
cursor: 'pointer',
border: '2px solid',
borderColor: this.state.selectedTentSize === product.id ? '#2e7d32' : '#e0e0e0',
+ backgroundColor: this.state.selectedTentSize === product.id ? '#f1f8e9' : '#ffffff',
'&:hover': {
- borderColor: '#90caf9'
- }
+ boxShadow: 6,
+ borderColor: this.state.selectedTentSize === product.id ? '#2e7d32' : '#90caf9'
+ },
+ transition: 'all 0.3s ease'
}}
onClick={() => this.handleTentSizeSelect(product.id)}>
{/* Image */}
@@ -568,48 +629,41 @@ class GrowTentKonfigurator extends Component {
{/* Content */}
{/* Name */}
-
+
{product.name}
- {/* Price */}
-
-{product.price ? new Intl.NumberFormat('de-DE', {
+ {/* Price with VAT - Same as Product.js */}
+
+ {product.price ? new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR'
- }).format(product.price) : 'Kein Preis'}
-
-
- {/* VAT */}
-
- (incl. 19% MwSt.,*)
+ }).format(product.price) : 'Kein Preis'}
+ {product.vat && (
+
+ (incl. {product.vat}% MwSt.,*)
+
+ )}
- {/* Selection Indicator */}
+ {/* Selection Indicator - Separate line */}
{this.state.selectedTentSize === product.id && (
-
-
- ✓ Ausgewählt
-
-
+
+ ✓ Ausgewählt
+
)}
@@ -621,17 +675,128 @@ class GrowTentKonfigurator extends Component {
}
renderLightSection() {
- const { selectedLightType } = this.state;
+ const { selectedLightType, selectedTentShape } = this.state;
+ if (!selectedTentShape) {
+ return (
+
+
+ 3. Beleuchtung wählen
+
+
+ Bitte wählen Sie zuerst eine Zeltgröße aus.
+
+
+ );
+ }
+
+ // Get real lamps for selected tent shape
+ const availableLamps = this.getLampsForTentShape(selectedTentShape);
+ const cachedData = getCachedCategoryData('Lampen');
+
+ if (!cachedData) {
+ return (
+
+
+ 3. Beleuchtung wählen - {selectedTentShape}
+
+
+ Lade Beleuchtungs-Produkte...
+
+
+ );
+ }
+
+ if (availableLamps.length === 0) {
+ return (
+
+
+ 3. Beleuchtung wählen - {selectedTentShape}
+
+
+ Keine passenden Lampen für Zeltgröße {selectedTentShape} verfügbar.
+
+
+ );
+ }
+
return (
-
+
+
+ 3. Beleuchtung wählen - {selectedTentShape}
+
+
+ {availableLamps.map((lamp) => (
+
+ this.handleLightTypeSelect(lamp.id)}
+ >
+ {/* Image */}
+
+ {this.renderTentImage(lamp)}
+
+
+ {/* Content */}
+
+ {/* Name */}
+
+ {lamp.name}
+
+
+ {/* Price with VAT */}
+
+ {lamp.price ? new Intl.NumberFormat('de-DE', {
+ style: 'currency',
+ currency: 'EUR'
+ }).format(lamp.price) : 'Kein Preis'}
+ {lamp.vat && (
+
+ (incl. {lamp.vat}% MwSt.,*)
+
+ )}
+
+
+ {/* Selection Indicator */}
+ {selectedLightType === lamp.id && (
+
+ ✓ Ausgewählt
+
+ )}
+
+
+
+ ))}
+
+
);
}
@@ -676,7 +841,8 @@ class GrowTentKonfigurator extends Component {
selectedTent = tents.find(t => t.id === selectedTentSize);
if (selectedTent) break;
}
- const selectedLight = lightTypes.find(l => l.id === selectedLightType);
+ const availableLamps = this.state.selectedTentShape ? this.getLampsForTentShape(this.state.selectedTentShape) : [];
+ const selectedLight = availableLamps.find(l => l.id === selectedLightType);
const selectedVentilation = ventilationTypes.find(v => v.id === selectedVentilationType);
const selectedExtrasItems = extras.filter(e => selectedExtras.includes(e.id));
const savingsInfo = this.calculateSavings();