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-url="<?= $page->url() ?>/validate.json"
                        <?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-.53c-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"><?= t('addToCart', 'Ajouter au panier') ?></div>
                    </button>
                </div>
            </div>

            <figure>
                <?php if($image = $page->images()->first()): ?>
                    <?php snippet('picture', [
                        'file' => $image,
                        'alt' => $page->title()->html(),
                        'preset' => 'product-detail',
                        'size' => 50,
                        'lazy' => false
                    ]) ?>
                <?php endif ?>
            </figure>
        </section>
    </main>

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