haiku-atelier-2024/web/app/themes/haiku-atelier-2024/views/parts/pages/panier/panneau-panier.twig

<section
  class="panneau"
  id="panneau-panier"
>
  <header class="panneau__en-tete">
    <h2>Your cart</h2>
  </header>

  <div class="panneau__grille-produits">
    {% for produit in produits_panier %}
      <article
        class="panneau__grille-produits__produit"
        data-cle-panier="{{ produit.cle }}"
        data-id-produit="{{ produit.id_produit }}"
        data-id-variation="{{ produit.id_variation }}"
        data-quantite="{{ produit.quantite }}"
      >
        <div class="panneau__grille-produits__produit__illustratif">
          <a href="{{ produit.url }}">
            <picture>{{ produit.image }}</picture>
          </a>
        </div>

        <div class="panneau__grille-produits__produit__textuel detail-produit">
          <h3 class="detail-produit__nom-prix">
            <a href="{{ produit.url }}">{{ produit.titre }}.</a>
            <span>{{ produit.prix * produit.quantite }}€</span>
          </h3>

          <p class="detail-produit__description">
            {# Affiche tous les attributs relevants pour la variation choisie #}
            {% for attribut in produit.attributs %}
              {% if attribut.valeur %}
                {{ attribut.nom }}: <strong>{{ attribut.valeur }}</strong><br />
              {% endif %}
            {% endfor %}
            {# Affiche le nom de la Variation #}
          </p>

          <div class="detail-produit__actions">
            <button
              class="detail-produit__actions__soustraction"
              {{ produit.quantite <= 1 ? 'disabled' }}
              type="button"
            >
              -
            </button>
            <input
              aria-label="Quantity selector"
              min="1"
              type="number"
              value="{{ produit.quantite }}"
            />
            <button
              class="detail-produit__actions__addition"
              type="button"
            >
              +
            </button>

            <button
              class="detail-produit__actions__suppression"
              type="button"
            >
              Remove
            </button>
          </div>
        </div>
      </article>
    {% endfor %}
  </div>

  <div class="panneau__instructions-code-promo">
    <textarea
      aria-label="Special instructions for your order"
      class="panneau__instructions-code-promo__instructions"
      id="instructions-client"
      maxlength="2000"
      minlength="10"
      name="instructions"
      placeholder="Add special instructions for your order: specify the products you want wrapped and how (i.e. all in one bag or separated), a gift message, etc."
      resizable="false"
      rows="3"
      spellcheck="true"
    ></textarea>

    <form
      action=""
      class="panneau__instructions-code-promo__code-promo"
      {{ code_promo ? 'data-code-promo-present' }}
      id="ensemble-code-promo"
    >
      <input
        {{ code_promo ? 'disabled' }}
        aria-label="DIscount code or gift card"
        id="champ-code-promo"
        maxlength="20"
        minlength="3"
        name="code-promo"
        placeholder="Discount code or gift card"
        type="text"
        value="{{ code_promo ? code_promo }}"
      />
      <button
        class="bouton-blanc-sur-noir"
        for="code-promo"
        id="bouton-code-promo"
        type="button"
      >
        {{ code_promo ? 'Remove' : 'Apply' }}
      </button>

      <p class="panneau__instructions-code-promo__code-promo__message"></p>
    </form>
  </div>

  <div class="panneau__sous-totaux">
    <div
      class="panneau__sous-totaux__ligne"
      id="sous-total-produits"
    >
      <p>Subtotal:</p>
      <p><strong>{{ sous_total_panier }}€</strong></p>
    </div>

    <div
      class="panneau__sous-totaux__ligne"
      id="sous-total-reduction"
      {{ not code_promo ? 'hidden' }}
    >
      <p>Discount:</p>
      <p><strong>-{{ sous_total_reduction }}€</strong></p>
    </div>

    <div
      class="panneau__sous-totaux__ligne"
      id="sous-total-livraison"
    >
      <p>Shipping:</p>
      {% if not adresse_renseignee %}
        <p>
          <strong>Enter your delivery address</strong>
        </p>
      {% else %}
        <p>
          <strong>{{ sous_total_livraison }}€</strong>
        </p>
      {% endif %}
    </div>

    <fieldset
      class="panneau__sous-totaux__choix-methode-livraison"
      {{ not adresse_renseignee ? 'hidden' }}
      id="choix-methode-livraison"
    >
      <label>Select your shipping method</label>

      {% for methode_livraison in methodes_livraison %}
        <div data-methode-initiale>
          <input
            {{ methode_livraison.selectionnee ? 'checked' }}
            data-prix="{{ methode_livraison.prix }}"
            id="methode-livraison-{{ methode_livraison.id }}"
            name="choix-methode-livraison"
            type="radio"
            value="{{ methode_livraison.id }}"
          />
          <label for="methode-livraison-{{ methode_livraison.id }}">{{ methode_livraison.titre }} ({{
              methode_livraison.prix
            }}€)</label>
        </div>
      {% endfor %}
    </fieldset>

    <p class="panneau__sous-totaux__conditions-livraison">
      Belgium and France: free shipping on orders above 50€ (Pickup Point only).<br />
      Worldwide: free shipping on orders above 100€.
    </p>
  </div>

  <footer class="panneau__pied-de-page">
    <p>Total: <span>{{ total_panier }}€</span></p>
  </footer>
</section>