index-shop/site/templates/product.php
isUnknown a3620a1f5f
Some checks are pending
Deploy / Deploy to Production (push) Waiting to run
first commit
2025-12-10 15:12:06 +01:00

143 lines
8.2 KiB
PHP

<!DOCTYPE html>
<html lang="<?= $kirby->language()->code() ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<title><?= $page->title() ?> | Index.ngo</title>
<link rel="icon" type="image/png" href="<?= url('assets/favicon.png') ?>"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?= url('assets/fonts/stylesheet.css') ?>" />
<link rel="stylesheet" type="text/css" href="<?= url('assets/css/style.css') ?>" />
</head>
<body data-template="shop">
<header id="site-header">
<div class="header-left"></div>
<div class="header-center">
<h1 class="site-title">
<a href="<?= $site->url() ?>" aria-label="<?= t('backToHome', 'Retour à l\'accueil') ?>">
<svg width="100%" height="100%" viewBox="0 0 162 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;">
<title>Index.ngo</title>
<g transform="matrix(1.04516,0,0,0.659091,57.4839,-6.59091)">
<rect x="-55" y="10" width="155" height="44" style="fill: none" />
<clipPath id="_clip1">
<rect x="-55" y="10" width="155" height="44" />
</clipPath>
<g clip-path="url(#_clip1)">
<g transform="matrix(0.95679,0,0,1.51724,-55,10)">
<path d="M162,29L148.198,29L141.174,20.767L134.15,29L91.184,29L91.184,0.004L120.653,0.004L120.653,7.351L102.637,7.351L102.637,10.867L120.137,10.867L120.137,18.13L102.637,18.13L102.637,21.606L120.926,21.606L120.926,28.951L134.273,14.414L120.807,0L134.56,0L141.388,7.767L147.76,0L161.201,0L148.236,13.79L161.996,28.997L162,29ZM68.58,29L54.224,29L54.224,0.004L68.637,0.004C74.672,0.004 78.31,0.004 82.046,2.045C86.259,4.379 88.674,8.889 88.674,14.417C88.674,19.406 86.862,23.405 83.427,25.975C79.463,29 75.345,29 68.58,29ZM49.819,29L38.775,29L31.499,19.815C29.746,17.735 28.088,15.545 27.307,14.495C27.387,15.813 27.524,17.238 27.524,20.499L27.524,29L15.965,29L15.965,0.004L27.009,0.004L33.798,8.349C36.223,11.121 37.709,12.993 38.393,13.881C38.347,12.615 38.26,9.911 38.26,6.84L38.26,0.004L49.819,0.004L49.819,29ZM11.559,29L0,29L0,0.004L11.559,0.004L11.559,29ZM65.784,21.818L67.904,21.818C70.918,21.818 73.067,21.818 74.728,20.531C76.074,19.491 76.845,17.308 76.845,14.541C76.845,11.526 76.084,9.541 74.525,8.476C72.895,7.411 71.461,7.224 67.578,7.224L65.784,7.224L65.784,21.818Z" style="fill-rule: nonzero" />
</g>
</g>
</g>
</svg>
</a>
</h1>
</div>
<div class="header-right">
<ul id="toggle-lang">
<?php foreach($kirby->languages() as $language): ?>
<li<?= $kirby->language() == $language ? ' class="is-selected"' : '' ?>>
<a href="<?= $page->url($language->code()) ?>"><?= $language->code() === 'fr' ? 'Fr' : 'En' ?></a>
</li>
<?php endforeach ?>
</ul>
</div>
</header>
<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()->toBlocks() ?>
<?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()): ?>
<img src="<?= $image->url() ?>" alt="<?= $page->title()->html() ?>" />
<?php endif ?>
</figure>
</section>
</main>
<footer id="site-footer">
<div class="site-footer__container">
<div class="footer__mentions">
<p class="p__small">
© <?= date('Y') ?> Index Investigation |
<a target="_blank" href="https://www.index.ngo/mentions-legales/">Mentions légales</a>
</p>
</div>
</div>
</footer>
<script src="<?= url('assets/js/onload.js') ?>"></script>
<script src="<?= url('assets/js/product-size.js') ?>"></script>
<script src="<?= url('assets/js/snipcart.js') ?>"></script>
</body>
</html>