index-shop/site/templates/product.php

<?php snippet('header', ['title' => $page->title(), 'template' => 'shop']) ?>

    <main>
        <nav class="store__nav">
            <a href="<?= $site->homePage()->url() ?>"><?= t('backToShop', 'Retour à la boutique') ?></a>
        </nav>

        <section class="section__product">
            <div class="col-left">
                <div class="hero">
                    <h2 class="p__baseline-big"><?= $page->title()->html() ?></h2>
                    <p class="p__baseline-big"><?= $page->price() ?>€</p>
                </div>

                <div class="details">
                    <?php if($page->details()->isNotEmpty()): ?>
                        <?= $page->details()->kt() ?>
                    <?php endif ?>
                </div>

                <?php if($page->hasOptions()->toBool() && $page->optionValues()->isNotEmpty()): ?>
                <div class="product-options">
                    <ul class="product-options__list">
                        <?php
                        $values = $page->optionValues()->split(',');
                        $optionSlug = $page->optionLabel()->slug();
                        foreach($values as $index => $value):
                            $value = trim($value);
                            $uniqueId = $optionSlug . '-' . Str::slug(strtolower($value));
                        ?>
                        <li>
                            <input type="radio" id="<?= $uniqueId ?>" name="<?= $optionSlug ?>" value="<?= $value ?>" />
                            <label for="<?= $uniqueId ?>"><?= $value ?></label>
                        </li>
                        <?php endforeach ?>
                    </ul>
                </div>
                <?php endif ?>

                <div class="add-to-cart">
                    <button
                        class="btn__default snipcart-add-item"
                        data-item-id="<?= $page->slug() ?>"
                        data-item-price="<?= $page->price() ?>"
                        data-item-description="<?= $page->description()->excerpt(100) ?>"
                        data-item-image="<?= $page->images()->first() ? $page->images()->first()->url() : '' ?>"
                        data-item-name="<?= $page->title()->html() ?>"
                        data-item-shippable="true"
                        data-item-weight="<?= $page->weight()->or(0) ?>"
                        data-item-length="<?= $page->length()->or(0) ?>"
                        data-item-width="<?= $page->width()->or(0) ?>"
                        data-item-height="<?= $page->height()->or(0) ?>"
                        <?php
                        if($page->hasOptions()->toBool() && $page->optionValues()->isNotEmpty()):
                            $values = $page->optionValues()->split(',');
                            $trimmedValues = array_map('trim', $values);
                            $snipcartOptions = implode('|', $trimmedValues);
                        ?>
                        data-item-custom1-name="<?= $page->optionLabel()->html() ?>"
                        data-item-custom1-options="<?= $snipcartOptions ?>"
                        data-item-custom1-required="true"
                        disabled
                        <?php endif; ?>
                    >
                        <span class="icon">
                            <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.530c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z" fill-rule="nonzero" />
                            </svg>
                        </span>
                        <div class="txt" data-default-text="<?= t('addToCart', 'Ajouter au panier') ?>">
                            <?php if($page->hasOptions()->toBool() && $page->optionValues()->isNotEmpty()): ?>
                                <?= t('chooseOption', 'Choisissez une option') ?>
                            <?php else: ?>
                                <?= t('addToCart', 'Ajouter au panier') ?>
                            <?php endif ?>
                        </div>
                    </button>
                </div>
            </div>

            <div class="product-gallery swiper">
                <div class="swiper-wrapper">
                    <?php
                    // Afficher les vraies images du produit
                    $realImages = $page->hasFiles() ? $page->files()->sortBy('sort', 'asc') : [];
                    $imageCount = 0;

                    // Afficher d'abord les vraies images
                    foreach($realImages as $image):
                        $imageCount++;
                    ?>
                        <div class="swiper-slide">
                            <figure>
                                <?php snippet('picture', [
                                    'file' => $image,
                                    'alt' => $page->title()->html(),
                                    'preset' => 'product-detail',
                                    'size' => 50,
                                    'lazy' => false
                                ]) ?>
                            </figure>
                        </div>
                    <?php endforeach;

                    // Compléter avec des images temporaires si moins de 5 images
                    $colors = ['4ECDC4', '45B7D1', 'FFA07A', '98D8C8'];
                    while($imageCount < 5):
                        $colorIndex = $imageCount - count($realImages);
                        $imageCount++;
                    ?>
                        <div class="swiper-slide">
                            <figure>
                                <img src="https://placehold.co/800x1000/<?= $colors[$colorIndex] ?>/ffffff?text=Image+<?= $imageCount ?>" alt="Image test <?= $imageCount ?>">
                            </figure>
                        </div>
                    <?php endwhile; ?>
                </div>

                <!-- Navigation arrows -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

                <!-- Pagination dots -->
                <div class="swiper-pagination"></div>
            </div>
        </section>
    </main>

<?php snippet('footer', ['scripts' => ['assets/js/product-size.js', 'assets/js/snipcart.js', 'assets/js/product-gallery.js']]) ?>