Dark mode sur fiche produit

[Richard42]

Bonjour,

j'essaye de mettre  en place un darkmode sur les fiches produits.

L'idée est de charger des images différentes du produit si l'on passe en darkmode, sachant que des déclinaisons sont présentent.

Je pensais pouvoir me contenter de  CSS avec display block ou none mais le sujet est plus complexe que je ne le pensais.

Actuellement voilà ce que j'ai utilisé.

Script du darkmode : https://codepen.io/FlorinPop17/pen/XWWZYYG

Que j'ai intégré comme ceci :

page product.tpl

<div>
	<input type="checkbox" class="checkbox" id="chk" />
	<label class="label" for="chk">
		<i class="fas fa-moon"></i>
		<i class="fas fa-sun"></i>
		<div class="ball"></div>
	</label>
</div>

page custom.css

.checkbox {
	opacity: 0;
	position: absolute;
}

.label {
	background-color: #111;
	border-radius: 50px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px;
	position: relative;
	height: 26px;
	width: 50px;
	transform: scale(1.5);
}

.label .ball {
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	height: 22px;
	width: 22px;
	transform: translateX(0px);
	transition: transform 0.2s linear;
}

.checkbox:checked + .label .ball {
	transform: translateX(24px);
}


.fa-moon {
	color: #f1c40f;
}

.fa-sun {
	color: #f39c12;
}
/* Dark Mode */
body.page-product.darkmode .slick-track .thumb-item.slick-slide.light{
	display:none; /* Ne pas afficher les images avec le title "ligh" dans le darkmode */
}
body.page-product.darkmode .slick-track .thumb-item.slick-slide.dark{
	display:block; /* Afficher les images avec le title "dark" dans le darkmode */
}
body.page-product .slick-track .thumb-item.slick-slide.dark{
	display:none; /* Ne pas afficher les images avec le title "dark" par defaut */
}

page custom.js

/*----- Dark mode -----*/
const chk = document.getElementById('chk');

chk.addEventListener('change', () => {
	document.body.classList.toggle('darkmode');
});

Jusqu'ici tout est ok, j'ai bien la class "darkmode" qui s'ajoute à la balise Body.

Et voici ma page product-cover-thumbnails.tpl

{if $postheme.product_thumbnail == 0}
	<div class="images-container">
	  {block name='product_cover'}
		<div class="product-view_content">
		  {block name='product_flags'}
			<ul class="product-flag">
			  {foreach from=$product.flags item=flag}
				<li class=" {$flag.type}">{$flag.label}</li>
			  {/foreach}
			</ul>
		  {/block}
		<div class="product-cover slider-for">
		 {foreach from=$product.images item=image}
		 <div class="thumb-item {$image.legend}">
		  {if $product.cover}
		  <div class="easyzoom-disable easyzoom--overlay-disable">
			  <a href="{$image.bySize.large_default.url}">
			   <img class=""  style="width:100%;" src="{$image.bySize.large_default.url}" alt="{$image.legend}" title="{$image.legend}" itemprop="image">
			  </a>
		  </div>
		  {else}
			<img src="{$urls.no_picture_image.bySize.large_default.url}" style="width:100%;">
		  {/if}
		   </div>
		 {/foreach}
		</div>
		</div>
	  {/block}

	  {block name='product_images'}
		  <ul class="product-images slider-nav">
			{foreach from=$product.images item=image}
			  <div class="thumb-container {$image.legend}">
				<div>
				<img
				  class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
				  src="{$image.bySize.home_default.url}"
				  alt="{$image.legend}"
				  title="{$image.legend}"
				  width="100"
				  itemprop="image"
				>
				</div>
			  </div>
			{/foreach}
		  </ul>

	  {/block}
	</div>
{/if}

{hook h='displayAfterProductThumbs'}

 <script type="text/javascript">
	$(document).ready(function() {
	$('.images-container .slider-for').slick({
	   slidesToShow: 1,
	   slidesToScroll: 1,
	   focusOnSelect: true,
	   arrows: true, 
	   fade: true,
	   infinite: true,
	   lazyLoad: 'ondemand',
	   asNavFor: '.slider-nav'
	 });
	  if ({$postheme.product_thumbnail} == 0) {
		 $('.images-container .slider-nav').slick({
		   slidesToShow: 4,
		   slidesToScroll: 1,
		   asNavFor: '.slider-for',
		   dots: false, 
		   arrows: true, 
		   infinite: true,
		   focusOnSelect: true
		 });
	 }else {
	 $('.images-container .slider-nav').slick({
	   slidesToShow: 4,
	   slidesToScroll: 1,
	   asNavFor: '.slider-for',
	   vertical:true,
	   dots: false, 
	   arrows: true, 
	   infinite: true,
	   focusOnSelect: true,
	   responsive: [
	   	{
		  breakpoint: 991,
		  settings: {
			slidesToShow: 2, 
			slidesToScroll: 1,
		  }
		},
		{
		  breakpoint: 767,
		  settings: {
			slidesToShow: 4, 
			slidesToScroll: 1,
		  }
		},
		{
		  breakpoint: 543,
		  settings: {
			slidesToShow: 3, 
			slidesToScroll: 1,
		  }
		},
		{
		  breakpoint: 399,
		  settings: {
			slidesToShow: 2,
			slidesToScroll: 1, 
		  }
		}
		]
	 });
	 }
	 
	 $('.images-container .slider-for').slickLightbox({
			src: 'src',
			itemSelector: '.thumb-item img'
	 });
	 	if($(window).width() >= 992) 
		{
			var $easyzoom = $('.images-container .easyzoom').easyZoom(); 
		}
	$(window).resize(function(){
		if($(window).width() >= 992)
		{
			 var $easyzoom = $('.images-container .easyzoom').easyZoom();  
			$('.easyzoom--overlay').addClass('easyzoom');
		}
		else
		{
			$('.easyzoom--overlay').removeClass('easyzoom'); 	
		}
	});
});
</script>

Dans cette page j'ai voulu utiliser le champ title de la légende des images. Je pensais ajouter lorsque j'ajoute une image depuis le BO mettre la mention "dark" ou "light" pour chaque image afin qu'elles s'affichent ou non suivant le mode actif.

Actuellement, en lightmode (par défaut) mes images pour le darkmode avec le title "dark" ne sont pas affichées (sauf pour les miniatures, mais cela me dérange pas car je vais probablement le retirer).

Par contre en Darkmode, les miniatures sont bien présentent mais à la place du cover les images ne s'affichent pas.

Egalement ça génère un problème au niveau des slides. En effet je pensais qu'en mettant display none sur le div <div class="thumb-item {$image.legend}"> qu'il ne serait plus comptabilisé, mais il est toujours et là.

Quand je contrôle avec F12 du navigateur j'ai ceci pour les div en question:

<div class="thumb-item light slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" style="width: 640px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 500ms ease 0s;">
		  <div class="easyzoom-disable easyzoom--overlay-disable">
			  <a href="http://localhost/lgvmamp2/4-large_default/test.jpg" tabindex="-1">
			   <img class="" style="width:100%;" src="http://localhost/lgvmamp2/4-large_default/test.jpg" alt="light" title="light" itemprop="image">
			  </a>
		  </div>
 </div>

Donc là je pense qu'il faut passer par le javascript? ou peut-on gérer autrement?

Désolé ça fait pas mal d'infos mais j'essaye d'être le plus précis afin que mon problème soit clair.

Je trouve que cette fonction ajouterai un vrai plus à notre boutique, donc si quelqu'un à la réponse à mes bugs ^^ ou voir une autre piste.

L'idée principale est qu'on puisse choisir les images à afficher si on passe en Darkmode.

Précision, je suis sur prestashop 1.7.7.3 en local.

Merci d'avoir pris le temps de lire jusque là ^^