padelclub_backend/shop/templates/shop/cart.html

{% extends 'tournaments/base.html' %}

{% block head_title %}La boutique{% endblock %}
{% block first_title %}La boutique Padel Club{% endblock %}
{% block second_title %}Plein de goodies !{% endblock %}

{% block content %}

<nav class="margin10">
  <a href="{% url 'shop:product_list' %}">La Boutique</a>
  <a href="{% url 'index' %}" class="orange">Accueil</a>
  <a href="{% url 'clubs' %}" class="orange">Clubs</a>
  {% if user.is_authenticated %}
  <a href="{% url 'my-tournaments' %}" class="orange">Mes tournois</a>
  <a href="{% url 'profile' %}">Mon compte</a>
  {% else %}
  <a href="{% url 'login' %}">Se connecter</a>
  {% endif %}
</nav>
<div class="grid-x">
  <div class="cell medium-9 large-8 my-block">
    <h1 class="club my-block topmargin20">Votre panier</h1>
    <div class="bubble">
      {% if cart_items %}
      <table class="cart-table">
        <thead>
          <tr>
            <th class="text-left">Produit</th>
            <th>Couleur</th>
            <th>Taille</th>
            <th>Quantité</th>
            <th class="price-column">Prix</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for item in cart_items %}
          <tr class="{% cycle 'odd' 'even' %}">
            <td class="text-left">{{ item.product.title }}</td>
            <td>{{ item.color.name }}</td>
            <td>{{ item.size.name }}</td>
            <td>
              <div class="quantity-controls">
                <form method="post" action="{% url 'shop:update_cart_item' %}" class="quantity-form">
                  {% csrf_token %}
                  <input type="hidden" name="item_id" value="{{ item.id }}">
                  <button type="submit" name="action" value="decrease" class="quantity-btn" {% if item.quantity <= 1 %}disabled{% endif %}>-</button>
                  <span class="quantity-value">{{ item.quantity }}</span>
                  <button type="submit" name="action" value="increase" class="quantity-btn">+</button>
                </form>
              </div>
            </td>
            <td class="price-column">{{ item.get_total_price }} €</td>
            <td>
              <form method="post" action="{% url 'shop:remove_from_cart' %}" class="remove-form">
                {% csrf_token %}
                <input type="hidden" name="item_id" value="{{ item.id }}">
                <button type="submit" class="remove-btn">retirer</button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3" class="total-label text-left">Total:</td>
            <td class="total-quantity">{{ total_quantity }}</td>
            <td class="price-column total-price">{{ total }} €</td>
            <td></td>
          </tr>
        </tfoot>
      </table>

      <div class="cart-summary">
        {% if cart_items %}
        <a class="cancel-nav-button checkout-button" href="{% url 'shop:clear_cart' %}">Vider le panier</a>
        {% endif %}

        {% if user.is_authenticated %}
          <!-- For authenticated users: Direct Stripe payment button -->
          <button id="checkout-button" class="confirm-nav-button checkout-button">Procéder au paiement</button>
        {% else %}
          <!-- For guest users: Regular checkout path -->
          <a class="confirm-nav-button checkout-button" href="{% url 'shop:checkout' %}">Passer la commande</a>
          <div class="guest-checkout-notice">
            <p>Connectez-vous pour un paiement plus rapide.</p>
            <a class="styled-link" href="{% url 'login' %}?next={% url 'shop:view_cart' %}">Se connecter</a>
          </div>
        {% endif %}
      </div>
      {% else %}
      <p>Votre panier est vide.</p>
      {% endif %}
    </div>
  </div>
</div>

{% if user.is_authenticated and cart_items %}
<!-- Stripe JavaScript for authenticated users -->
<script src="https://js.stripe.com/v3/"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const checkoutButton = document.getElementById('checkout-button');

    checkoutButton.addEventListener('click', function() {
      // Show a loading indicator
      checkoutButton.textContent = 'Chargement...';
      checkoutButton.disabled = true;

      // Create order and get checkout session
      fetch('{% url "shop:create_checkout_session" %}', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': '{{ csrf_token }}'
        },
        credentials: 'same-origin',
      })
      .then(function(response) {
        return response.json();
      })
      .then(function(session) {
        if (session.error) {
          // Handle error
          alert(session.error);
          checkoutButton.textContent = 'Procéder au paiement';
          checkoutButton.disabled = false;
          return;
        }

        // Initialize Stripe
        const stripe = Stripe('{{ stripe_publishable_key }}');

        // Redirect to Stripe Checkout
        return stripe.redirectToCheckout({ sessionId: session.id });
      })
      .then(function(result) {
        // If redirectToCheckout fails
        if (result && result.error) {
          alert(result.error.message);
          checkoutButton.textContent = 'Procéder au paiement';
          checkoutButton.disabled = false;
        }
      })
      .catch(function(error) {
        console.error('Error:', error);
        alert('Une erreur est survenue. Veuillez réessayer.');
        checkoutButton.textContent = 'Procéder au paiement';
        checkoutButton.disabled = false;
      });
    });
  });
</script>
{% endif %}
{% endblock %}