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 snippet('buy-button--t-shirt') ?>
            </div>

            <div class="product-gallery swiper">
                <div class="swiper-wrapper">
                    <?php
                    if ($page->hasFiles()):
                        foreach($page->files()->sortBy('sort', 'asc') as $image):
                    ?>
                        <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;
                    endif;
                    ?>
                </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-add-to-cart.js',
    'assets/js/product-gallery.js'
]]) ?>