Implemte behavior wenn options null

src/components/ProductDetails.tsx

@@ -10,13 +10,17 @@ type ProductDetailsProps = {
 };
 
 const ProductDetails: React.FC<ProductDetailsProps> = ({ product, category }) => {
-  const [selectedOption, setSelectedOption] = useState<ProductOption>(product.options[0]);
+  const [selectedOption, setSelectedOption] = useState<ProductOption>(
+    product.options?.[0] || { name: product.name, price: 0 }
+  );
   const [quantity, setQuantity] = useState(1);
   const { addToCart } = useCart();
   const navigate = useNavigate();
 
-  // Check if all options have the same price
-  const hasSamePrice = product.options.every(option => option.price === product.options[0].price);
+  // Use a safer approach for options
+  const options = product.options || [];
+  const hasSamePrice = options.length > 0 && 
+    options.every(option => option.price === options[0].price);
 
   const handleAddToCart = () => {
     addToCart({
@@ -30,14 +34,13 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({ product, category }) =>
   };
 
   return (
-    <div 
-      className="product-details"
-    >
+    <div className="product-details">
       <h2>{product.name}</h2>
       
+      {options.length > 0 && (
         <div className="options-list">
           <h3>Optionen:</h3>
-        {product.options.map(option => (
+          {options.map(option => (
             <div 
               key={option.name}
               className={`option-item ${selectedOption.name === option.name ? 'selected' : ''}`}
@@ -50,9 +53,10 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({ product, category }) =>
             </div>
           ))}
           {hasSamePrice && (
-          <div className="uniform-price">Preis: {product.options[0].price.toFixed(2)} €</div>
+            <div className="uniform-price">Preis: {options[0].price.toFixed(2)} €</div>
           )}
         </div>
+      )}
       
       <div className="quantity-controls">
         <h3>Menge:</h3>

src/components/ProductList.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Product } from '../types/types';
 import { Link } from 'react-router-dom';
+import { useCart } from '../contexts/CartContext';
 import './ProductList.css';
 
 type ProductListProps = {
@@ -9,26 +10,55 @@ type ProductListProps = {
 };
 
 const ProductList: React.FC<ProductListProps> = ({ products, category }) => {
-  // Sort products by name alphabetically
+  const { addToCart } = useCart();
   const sortedProducts = [...products].sort((a, b) =>
     a.name.localeCompare(b.name)
   );
 
+  const handleDirectAddToCart = (product: Product) => {
+    addToCart({
+      productId: product.id,
+      productName: product.name,
+      selectedOption: { name: product.name, price: product.basePrice },
+      quantity: 1,
+      category
+    });
+  };
+
   return (
     <div className="product-list">
-      {sortedProducts.map(product => (
+      {sortedProducts.map(product => {
+        const hasOptions = product.options && product.options.length > 0;
+        const style = product.color ? { backgroundColor: `${product.color}80` } : {};
+        if (hasOptions) {
+          return (
             <Link
               to={`/product/${category}/${product.id}`}
               key={product.id}
               className="product-item"
-          style={product.color ? { backgroundColor: `${product.color}80` } : {}}
+              style={style}
             >
               <div className="product-name">{product.name}</div>
               <div className="product-price">{product.basePrice.toFixed(2)} €</div>
             </Link>
-      ))}
+          );
+        } else {
+          return (
+            <div
+              key={product.id}
+              className="product-item"
+              style={style}
+              onClick={() => handleDirectAddToCart(product)}
+            >
+              <div className="product-name">{product.name}</div>
+              <div className="product-price">{product.basePrice.toFixed(2)} €</div>
+            </div>
+          );
+        }
+      })}
     </div>
   );
 };
 
+
 export default ProductList;

src/data/products.json

@@ -15,12 +15,7 @@
       "id": "f2",
       "name": "Schnitzelsemmel",
       "basePrice": 5.80,
-      "color": "#FFEFC1",
-      "options": [
-        {"name": "Klassisch", "price": 5.80},
-        {"name": "Mit Salat", "price": 6.50, "color": "#E8F5E9"},
-        {"name": "Mit Käse", "price": 6.80, "color": "#FFF9C4"}
-      ]
+      "color": "#FFEFC1"
     },
     {
       "id": "f3",
@@ -95,13 +90,7 @@
       "id": "d3",
       "name": "Softdrinks",
       "basePrice": 3.50,
-      "color": "#FFDAB9",
-      "options": [
-        {"name": "Fanta (0,5L)", "price": 3.50},
-        {"name": "Sprite (0,5L)", "price": 3.50},
-        {"name": "Almdudler (0,5L)", "price": 3.50},
-        {"name": "Eistee (0,5L)", "price": 3.50}
-      ]
+      "color": "#FFDAB9"
     },
     {
       "id": "d4",

src/types/types.ts

@@ -8,7 +8,7 @@ export type Product = {
   id: string;
   name: string;
   basePrice: number;
-  options: ProductOption[];
+  options?: ProductOption[];
   color?: string; // Optional color code for background highlight
 };