studio-variable/index-shop
4
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

style gallery

Browse source
This commit is contained in:
Julie Blanc 2025-12-19 19:35:22 +01:00
parent 57037fc435
commit 14438b642b
12 changed files with 388 additions and 333 deletions
Download patch file Download diff file Expand all files Collapse all files

64
site/templates/product.php
View file

@ -78,24 +78,52 @@
</div>
</div>
<?php if ($page->hasFiles()): ?>
<ul class="product-gallery">
<?php foreach($page->files()->sort() as $image): ?>
<li>
<figure>
<?php snippet('picture', [
'file' => $image,
'alt' => $page->title()->html(),
'preset' => 'product-detail',
'size' => 50,
'lazy' => false
]) ?>
</figure>
</li>
<?php endforeach ?>
</ul>
<?php endif ?>
<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']]) ?>
<?php snippet('footer', ['scripts' => ['assets/js/product-size.js', 'assets/js/snipcart.js', 'assets/js/product-gallery.js']]) ?>