templates/Shop/checkout.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Checkout{% endblock %}
  5. {% block body %}
  6. <div class="container my-5">
  7.     <!-- Hauptcontainer -->
  8.     <div class="row">
  9.         
  10.         <!-- Produktübersicht -->
  11.         <section class="col-md-8">
  12.             <div class="card h-100 shadow-sm">
  13.                 <div class="card-body">
  14.                     {% if cart is not empty %}
  15.                         <h1 class="mb-4 product-name">{{ product.name }}</h1>
  16.                         <p class="product-description">{{ product.beschreibung }}</p>
  17.                         <p><strong>Preis: <span class="product-price">{{ product.preis|number_format(2, ',', '.') }} €</span></strong></p>
  18.                     {% else %}
  19.                         <h1 class="mb-4">Keine Produkte im Warenkorb</h1>
  20.                         <p>Bitte fügen Sie ein Produkt hinzu, um es im Warenkorb anzuzeigen.</p>
  21.                     {% endif %}
  22.                 </div>
  23.             </div>
  24.         </section>
  25.         
  26.         <!-- Kasse -->
  27.         <section class="col-md-4">
  28.             <div class="card h-100 shadow-sm">
  29.                 <div class="card-body d-flex flex-column justify-content-between">
  30.                     <div>
  31.                         <h4 class="mb-4">Kasse</h4>
  32.                         <div id="cart-items">
  33.                             {% if cart is not empty %}
  34.                                 {% set total = 0 %}
  35.                                 <ul class="list-group mb-3">
  36.                                     {% for cart_item in cart %}
  37.                                         <li class="list-group-item d-flex justify-content-between align-items-center">
  38.                                             <span>{{ cart_item.product.name }}</span>
  39.                                             <div>
  40.                                                 <span>{{ cart_item.product.preis|number_format(2, ',', '.') }} € x {{ cart_item.quantity }}</span>
  41.                                                 <button class="btn btn-sm btn-danger ms-3 remove-from-cart" data-id="{{ cart_item.product.id }}">-</button>
  42.                                             </div>
  43.                                         </li>
  44.                                         {% set total = total + (cart_item.product.preis * cart_item.quantity) %}
  45.                                     {% endfor %}
  46.                                 </ul>
  47.                                 <div class="d-flex justify-content-between mb-3">
  48.                                     <strong>Gesamt:</strong>
  49.                                     <strong id="cart-total">{{ total|number_format(2, ',', '.') }} €</strong>
  50.                                 </div>
  51.                             {% else %}
  52.                                 <div class="alert alert-warning">
  53.                                     Ihr Warenkorb ist leer.
  54.                                 </div>
  55.                             {% endif %}
  56.                         </div>
  57.                     </div>
  58.                     
  59.                     <!-- Auswahl der Zahlungsmethoden -->
  60.                     <form method="post" action="{{ path('shop_checkout_process') }}">
  61.                         <div class="form-group mb-3">
  62.                             <label for="payment_method">Zahlungsmethode auswählen:</label>
  63.                             <select name="payment_method" id="payment_method" class="form-select">
  64.                                 <option value="paypal">PayPal</option>
  65.                                 <option value="stripe">Kreditkarte (Stripe)</option>
  66.                             </select>
  67.                         </div>
  68.                         <button type="submit" class="btn btn-primary btn-lg w-100 mt-3" {% if cart is empty %}disabled{% endif %}>Bezahlen</button>
  69.                     </form>
  70.                 </div>
  71.             </div>
  72.         </section>
  73.     </div>
  74. </div>
  76. <!-- Ähnliche Produkte (über volle Breite) -->
  77. <section class="py-5" style="background-color: #f8f9fa;">
  78.     <div class="container">
  79.         <h2 class="text-center mb-4">Diese Produkte könnten Ihnen auch gefallen</h2>
  81.         <div class="row">
  82.             {% for similar_product in similar_products %}
  83.                 <div class="col-md-6 mb-4">
  84.                     <div class="card h-100 shadow-sm">
  85.                         <div class="card-body">
  86.                             <h5 class="card-title">{{ similar_product.name }}</h5>
  87.                             <p class="card-text">{{ similar_product.beschreibung|length > 50 ? similar_product.beschreibung|slice(0, 50) ~ '...' : similar_product.beschreibung }}</p>
  88.                             <p class="card-text">
  89.                                 <strong>{{ similar_product.preis|number_format(2, ',', '.') }} €</strong>
  90.                             </p>
  91.                         </div>
  92.                         <div class="card-footer bg-white">
  93.                             <button class="btn btn-secondary w-100 add-to-cart" data-id="{{ similar_product.id }}">Hinzufügen</button>
  94.                         </div>
  95.                     </div>
  96.                 </div>
  97.             {% else %}
  98.                 <div class="col-12">
  99.                     <div class="alert alert-warning text-center">
  100.                         Keine ähnlichen Produkte gefunden.
  101.                     </div>
  102.                 </div>
  103.             {% endfor %}
  104.         </div>
  105.     </div>
  106. </section>
  108. <!-- AJAX Script -->
  109. <script>
  110.     document.addEventListener('DOMContentLoaded', function() {
  111.         // Hinzufügen von Produkten
  112.         document.querySelectorAll('.add-to-cart').forEach(button => {
  113.             button.addEventListener('click', function() {
  114.                 let productId = this.getAttribute('data-id');
  116.                 fetch('/shop/cart/add/' + productId, {
  117.                     method: 'POST',
  118.                     headers: {
  119.                         'Content-Type': 'application/json',
  120.                         'X-Requested-With': 'XMLHttpRequest'
  121.                     }
  122.                 })
  123.                 .then(response => response.json())
  124.                 .then(data => {
  125.                     // Aktualisiere den Warenkorb-Bereich
  126.                     document.getElementById('cart-items').innerHTML = data.cartHtml;
  127.                     document.getElementById('cart-total').innerText = data.total + ' €';
  129.                     // Aktualisiere die Produktinformationen, wenn der Warenkorb nicht leer ist
  130.                     if (data.product) {
  131.                         document.querySelector('.product-name').innerText = data.product.name;
  132.                         document.querySelector('.product-description').innerText = data.product.description;
  133.                         document.querySelector('.product-price').innerText = data.product.price + ' €';
  134.                     }
  135.                 });
  136.             });
  137.         });
  139.         // Entfernen von Produkten
  140.         document.addEventListener('click', function(event) {
  141.             if (event.target.classList.contains('remove-from-cart')) {
  142.                 let productId = event.target.getAttribute('data-id');
  144.                 fetch('/shop/cart/remove/' + productId, {
  145.                     method: 'POST',
  146.                     headers: {
  147.                         'Content-Type': 'application/json',
  148.                         'X-Requested-With': 'XMLHttpRequest'
  149.                     }
  150.                 })
  151.                 .then(response => response.json())
  152.                 .then(data => {
  153.                     // Aktualisiere den Warenkorb-Bereich
  154.                     document.getElementById('cart-items').innerHTML = data.cartHtml;
  155.                     document.getElementById('cart-total').innerText = data.total + ' €';
  157.                     // Wenn der Warenkorb leer ist, zeige Nachricht an
  158.                     if (Object.keys(data.cart).length === 0) {
  159.                         document.querySelector('.product-name').innerText = 'Keine Produkte im Warenkorb';
  160.                         document.querySelector('.product-description').innerText = '';
  161.                         document.querySelector('.product-price').innerText = '';
  162.                     }
  163.                 });
  164.             }
  165.         });
  166.     });
  167. </script>
  168. {% endblock %}