Add translation attributes to menu items and enhance translation mappings

website/index.html

@@ -18,15 +18,15 @@
 
     <!-- Top bar menu -->
     <div class="menu-bar">
-        <div class="menu-item" onclick="showCategory('Broodjes')">Broodjes</div>
+        <div class="menu-item" onclick="showCategory('Broodjes')" data-translate="Broodjes">Broodjes</div>
-        <div class="menu-item" onclick="showCategory('Koude-Dranken')">Koude Dranken</div>
+        <div class="menu-item" onclick="showCategory('Koude-Dranken')" data-translate="Koude Dranken">Koude Dranken</div>
-        <div class="menu-item" onclick="showCategory('Warme-Dranken')">Warme Dranken</div>
+        <div class="menu-item" onclick="showCategory('Warme-Dranken')" data-translate="Warme Dranken">Warme Dranken</div>
-        <div class="menu-item" onclick="showCategory('Snacks')">Snacks</div>
+        <div class="menu-item" onclick="showCategory('Snacks')" data-translate="Snacks">Snacks</div>
-        <div class="menu-item" onclick="showCategory('deserts')">Ijsjes</div>
+        <div class="menu-item" onclick="showCategory('deserts')" data-translate="deserts">Ijsjes</div>
-        <div class="menu-item" onclick="showCategory('Deals')">Deals</div>
+        <div class="menu-item" onclick="showCategory('Deals')" data-translate="Deals">Deals</div>
-        <div class="menu-item" onclick="showCategory('Soepen')">Soepen</div>
+        <div class="menu-item" onclick="showCategory('Soepen')" data-translate="Soepen">Soepen</div>
-        <div class="menu-item" onclick="showCategory('Salades')">Salades</div>
+        <div class="menu-item" onclick="showCategory('Salades')" data-translate="Salades">Salades</div>
-        <div class="menu-item" onclick="showCategory('Sausjes')">Sausjes</div>
+        <div class="menu-item" onclick="showCategory('Sausjes')" data-translate="Sausjes">Sausjes</div>
     </div>
 
     <!-- Productweergave -->
@@ -42,20 +42,20 @@
             <img id="modal-image" src="" alt="">
             <p id="modal-description"></p>
             <p id="modal-price" ></p>
-            <button id="add-to-cart" >Toevoegen aan winkelmandje</button>
+            <button id="add-to-cart" data-translate="Toevoegen aan winkelmandje">Toevoegen aan winkelmandje</button>
         </div>
     </div>
 
     <!-- Winkelmandje sectie -->
     <div id="cart" class="cart">
-        <h2 >Winkelmandje</h2>
+        <h2 data-translate="Winkelmandje">Winkelmandje</h2>
         <ul id="cart-items">
             <!-- Winkelmandje items worden hier dynamisch toegevoegd -->
         </ul>
         <p><span data-translate="Totaal">Totaal</span>: €<span id="total-price">0.00</span></p>
 
         <a href="betalen.html">
-            <button id="order-button" >Bestellen</button>
+            <button id="order-button" data-translate="Bestellen">Bestellen</button>
         </a>
     </div>
 

website/script.js

@@ -291,14 +291,38 @@ const translations = {
         "Prijs": "Price",
         "Toevoegen aan winkelmandje": "Add to cart",
         "Bestellen": "Order",
-        "Totaal": "Total"
+        "Totaal": "Total",
+        "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus.": "This sandwich contains cheese, lamb's lettuce, cucumber, tomato, egg, ham and/or chicken, and bufkes sauce.",
+        "Doughnut brood met spek, ei en kaas": "Doughnut bread with bacon, egg, and cheese",
+        "Een wit of bruin broodje met Gehakt, Ei, Sla en Joppiesaus": "A white or brown sandwich with minced meat, egg, lettuce, and Joppiesaus",
+        "Een knapperig korstje met een warme, kruidige vleesvulling": "A crispy crust with a warm, spicy meat filling",
+        "Een knapperige korstje met een warme frikandel en curry saus erin": "A crispy crust with a warm frikandel and curry sauce inside",
+        "Koude verfrissende water.": "Cold refreshing water.",
+        "Verschillende diverse milkshake (keuze bij de counter maken)": "Various milkshakes (choose at the counter)",
+        "Een lekker warme chocolade melk": "A delicious hot chocolate milk",
+        "Een lekkere warme chocolade melk met slagroom": "A delicious hot chocolate milk with whipped cream",
+        "Een lekker warme koffie": "A delicious hot coffee",
+        "heerlijke warme thee (keuze bij de kassa)": "Delicious hot tea (choose at the counter)",
+        "Een frikandel, dat wil je wel!": "A frikandel, you want that!",
+        "Een klein bakje met friet.": "A small box of fries.",
+        "Een lekkere krokante Kipcorn.": "A delicious crispy Kipcorn.",
+        "Een bakje met 9 kipnuggets.": "A box with 9 chicken nuggets.",
+        "Een pittige mexicano.": "A spicy mexicano.",
+        "Een bakje met 9 Bitterballen.": "A box with 9 Bitterballen.",
+        "Een lekker ijsje met vele smaken, zoals aardbei, vanille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!).": "A delicious ice cream with many flavors, such as strawberry, vanilla, chocolate, mint, blueberry, and many more (only in summer!).",
+        "Lekkeresorbet met saus naar keuze": "Delicious sorbet with sauce of your choice",
+        "Bij deze deal krijg je 1 snack naar keuze, wat frietjes en drinken naar keuze erbij!": "With this deal, you get 1 snack of your choice, some fries, and a drink of your choice!",
+        "Bij deze deal krijg je een keuze naar een broodje en een keuze naar een koude drank!!": "With this deal, you get a choice of a sandwich and a choice of a cold drink!!",
+        "Soep van de dag! (Allergieën? Meld het bij ons!)": "Soup of the day! (Allergies? Let us know!)",
+        "Een heerlijke salade met verse groenten en een dressing naar keuze.": "A delicious salad with fresh vegetables and a dressing of your choice.",
+        "Kies de saus naar je keuze!": "Choose the sauce of your choice!"
     },
     nl: {
         "Sandwiches": "Broodjes",
         "Cold Drinks": "Koude Dranken",
         "Hot Drinks": "Warme Dranken",
         "Snacks": "Snacks",
-        "Ice Creams": "Ijsjes",
+        "Ice Creams": "deserts",
         "Deals": "Deals",
         "Soups": "Soepen",
         "Salads": "Salades",
@@ -307,7 +331,31 @@ const translations = {
         "Price": "Prijs",
         "Add to cart": "Toevoegen aan winkelmandje",
         "Order": "Bestellen",
-        "Total": "Totaal"
+        "Total": "Totaal",
+        "This sandwich contains cheese, lamb's lettuce, cucumber, tomato, egg, ham and/or chicken, and bufkes sauce.": "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus.",
+        "Doughnut bread with bacon, egg, and cheese": "Doughnut brood met spek, ei en kaas",
+        "A white or brown sandwich with minced meat, egg, lettuce, and Joppiesaus": "Een wit of bruin broodje met Gehakt, Ei, Sla en Joppiesaus",
+        "A crispy crust with a warm, spicy meat filling": "Een knapperig korstje met een warme, kruidige vleesvulling",
+        "A crispy crust with a warm frikandel and curry sauce inside": "Een knapperige korstje met een warme frikandel en curry saus erin",
+        "Cold refreshing water.": "Koude verfrissende water.",
+        "Various milkshakes (choose at the counter)": "Verschillende diverse milkshake (keuze bij de counter maken)",
+        "A delicious hot chocolate milk": "Een lekker warme chocolade melk",
+        "A delicious hot chocolate milk with whipped cream": "Een lekkere warme chocolade melk met slagroom",
+        "A delicious hot coffee": "Een lekker warme koffie",
+        "Delicious hot tea (choose at the counter)": "heerlijke warme thee (keuze bij de kassa)",
+        "A frikandel, you want that!": "Een frikandel, dat wil je wel!",
+        "A small box of fries.": "Een klein bakje met friet.",
+        "A delicious crispy Kipcorn.": "Een lekkere krokante Kipcorn.",
+        "A box with 9 chicken nuggets.": "Een bakje met 9 kipnuggets.",
+        "A spicy mexicano.": "Een pittige mexicano.",
+        "A box with 9 Bitterballen.": "Een bakje met 9 Bitterballen.",
+        "A delicious ice cream with many flavors, such as strawberry, vanilla, chocolate, mint, blueberry, and many more (only in summer!).": "Een lekker ijsje met vele smaken, zoals aardbei, vanille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!).",
+        "Delicious sorbet with sauce of your choice": "Lekkeresorbet met saus naar keuze",
+        "With this deal, you get 1 snack of your choice, some fries, and a drink of your choice!": "Bij deze deal krijg je 1 snack naar keuze, wat frietjes en drinken naar keuze erbij!",
+        "With this deal, you get a choice of a sandwich and a choice of a cold drink!!": "Bij deze deal krijg je een keuze naar een broodje en een keuze naar een koude drank!!",
+        "Soup of the day! (Allergies? Let us know!)": "Soep van de dag! (Allergieën? Meld het bij ons!)",
+        "A delicious salad with fresh vegetables and a dressing of your choice.": "Een heerlijke salade met verse groenten en een dressing naar keuze.",
+        "Choose the sauce of your choice!": "Kies de saus naar je keuze!"
     }
 };