Code du thème Base

templates/product.html

<div class="wrap">
  {% include "breadcrumbs" with current: product.name %}

  <div class="pdp" data-product>
    <div class="pdp-media" data-gallery>
      <div class="gallery-main">
        {% if product.images %}
          <img src="{{ product.images.first.url }}" alt="{{ product.images.first.alt }}" data-gallery-main>
        {% else %}
          <div class="noimg big">{{ product.name | truncate: 1, "" }}</div>
        {% endif %}
        {% if product.on_sale %}<span class="badge sale">{{ product.sale_label | default: "Promo" }}</span>{% endif %}
      </div>
      {% if product.images.size > 1 %}
      <div class="gallery-thumbs" role="list">
        {% for img in product.images %}
          <button type="button" class="thumb" role="listitem" data-gallery-thumb="{{ img.url }}" data-alt="{{ img.alt }}" aria-label="Photo {{ loop.index }} sur {{ loop.length }}"{% if loop.first %} aria-current="true"{% endif %}>
            <img src="{{ img.url }}" alt="" loading="lazy">
          </button>
        {% endfor %}
      </div>
      {% endif %}
    </div>

    <div class="pdp-info">
      {% if product.categories %}<p class="eyebrow">{% for c in product.categories %}<a href="{{ c.url }}">{{ c.name }}</a>{% unless loop.last %} · {% endunless %}{% endfor %}</p>{% endif %}
      <h1>{{ product.name }}</h1>
      <p class="price big">
        {% if product.price_from %}<small data-price-from>À partir de</small>{% endif %}
        <b data-price{% if product.on_sale %} class="now"{% endif %}>{% if product.price > 0 %}{{ product.price | money }}{% else %}Offert{% endif %}</b>
        <s data-compare{% unless product.on_sale %} hidden{% endunless %}>{% if product.on_sale %}{{ product.compare_at | money }}{% endif %}</s>
      </p>

      {% if product.bookable %}
        {% if product.duration > 0 %}<p class="meta">Durée : {{ product.duration }} min</p>{% endif %}
        {% if shop.booking %}<a class="btn btn-wide" href="{{ shop.booking_url }}">Réserver</a>{% endif %}
      {% else %}
        {% if product.has_variants %}
        <div class="variant-picker" data-variant-picker>
          {% for o in product.options %}
          {% set oi = loop.index0 %}
          <fieldset class="opt">
            <legend>{{ o.name }}<span data-opt-chosen></span></legend>
            <div class="opt-values">
              {% for v in o.values %}
              <label class="opt-chip"><input type="radio" name="opt{{ oi }}" value="{{ v }}" data-option="{{ o.name }}"{% if o.values.size == 1 %} checked{% endif %}><span>{{ v }}</span></label>
              {% endfor %}
            </div>
          </fieldset>
          {% endfor %}
          <script type="application/json" data-variants>{{ product.variants | json }}</script>
        </div>
        {% endif %}

        <p class="availability {% if product.in_stock %}ok{% else %}ko{% endif %}" data-availability>
          {% if not product.in_stock %}Épuisé{% elsif product.has_variants %}Choisissez vos options{% elsif product.low_stock %}Plus que {{ product.stock }} en stock{% else %}En stock{% endif %}
        </p>
        {% if product.buyable %}
          <button class="btn btn-wide" type="button" data-dc-add="{{ product.id }}"{% if product.has_variants %} data-dc-variant="" disabled data-needs-choice{% endif %}>
            {% if product.has_variants %}Choisissez vos options{% else %}Ajouter au panier{% endif %}
          </button>
        {% endif %}
      {% endif %}

      {% if modules.accounts %}
      <form method="post" class="fav-form">{% csrf %}<input type="hidden" name="form" value="favorite"><input type="hidden" name="product" value="{{ product.id }}">
        <button type="submit" class="fav{% if product.is_favorite %} on{% endif %}">{% if product.is_favorite %}♥ Dans vos favoris{% else %}♡ Ajouter aux favoris{% endif %}</button>
      </form>
      {% endif %}
      {% if show.product_assurances %}
      <ul class="assurances">
        {% if modules.shop %}<li>Paiement sécurisé</li>{% endif %}
        {% if product.message_url %}<li>Une question ? <a href="{{ product.message_url }}">Écrivez-nous</a></li>
        {% elsif modules.contact %}<li>Une question ? <a href="{{ shop.contact_url }}">Contactez-nous</a></li>{% endif %}
      </ul>
      {% endif %}

      {% if product.description %}
      <div class="pdp-desc">
        <h2>Description</h2>
        <p>{{ product.description | newline_to_br }}</p>
      </div>
      {% endif %}
      {% if product.specs %}
      <div class="pdp-desc">
        <h2>Caractéristiques</h2>
        <dl class="specs">
          {% for s in product.specs %}<dt>{{ s.name }}</dt><dd>{{ s.value }}</dd>{% endfor %}
        </dl>
      </div>
      {% endif %}
      <p class="sku" data-sku{% unless product.sku %} hidden{% endunless %}>Réf. <span>{{ product.sku }}</span></p>
    </div>
  </div>

  {% if modules.reviews and show.product_reviews %}
  <section class="block reviews" id="avis">
    <div class="block-head"><h2>Avis clients{% if product.rating_count > 0 %} <small>{{ product.rating }}/5 · {{ product.rating_count }} {{ product.rating_count | pluralize: "avis", "avis" }}</small>{% endif %}</h2></div>
    {% for r in product.reviews %}
    <article class="review">
      <p class="stars" aria-label="{{ r.rating }} sur 5">{% if r.rating >= 1 %}★{% endif %}{% if r.rating >= 2 %}★{% endif %}{% if r.rating >= 3 %}★{% endif %}{% if r.rating >= 4 %}★{% endif %}{% if r.rating >= 5 %}★{% endif %}</p>
      <p>{{ r.body | newline_to_br }}</p>
      <p class="review-by">{{ r.author }} · Achat vérifié · {{ r.date | date: "d/m/Y" }}</p>
      {% if r.reply %}<p class="review-reply"><b>Réponse de {{ shop.name }} :</b> {{ r.reply }}</p>{% endif %}
    </article>
    {% else %}<p class="muted-text">Aucun avis pour le moment.</p>{% endfor %}
    {% if product.can_review %}
    <form method="post" class="review-form">{% csrf %}
      <input type="hidden" name="form" value="review"><input type="hidden" name="product" value="{{ product.id }}">
      <label>Votre note <select name="rating" required><option value="5">★★★★★</option><option value="4">★★★★</option><option value="3">★★★</option><option value="2">★★</option><option value="1">★</option></select></label>
      <label>Votre avis <textarea name="body" rows="3" minlength="5" maxlength="2000" required></textarea></label>
      <button class="btn" type="submit">Envoyer mon avis</button>
    </form>
    {% endif %}

    <h2 class="questions-title">Questions</h2>
    {% for q in product.questions %}
    <article class="review"><p><b>{{ q.question }}</b></p><p>{{ q.answer }}</p></article>
    {% endfor %}
    <details class="ask"><summary>Poser une question</summary>
      <form method="post" class="review-form">{% csrf %}
        <input type="hidden" name="form" value="question"><input type="hidden" name="product" value="{{ product.id }}">
        <input type="text" name="website" class="hp" tabindex="-1" autocomplete="off" aria-hidden="true">
        <label>Votre nom <input name="name" maxlength="160" required></label>
        <label>Votre e-mail <small>(pour recevoir la réponse, jamais affiché)</small> <input type="email" name="email" maxlength="190" required></label>
        <label>Votre question <textarea name="question" rows="3" minlength="5" maxlength="1000" required></textarea></label>
        <button class="btn" type="submit">Envoyer</button>
      </form>
    </details>
  </section>
  {% endif %}

  {% if related and show.product_related %}
  <section class="block">
    <div class="block-head"><h2>Dans la même catégorie</h2>{% if breadcrumbs %}<a href="{{ breadcrumbs.last.url }}">Tout voir →</a>{% endif %}</div>
    {% include "product-grid" with products: related %}
  </section>
  {% endif %}
</div>
<script src="{{ "product.js" | asset_url }}" defer></script>