Page produit - desactiver la fancybox pour les mobiles

[KonfiDD]

Bonjour à tous,

 

Je cherche à désactiver la fancybox de la page produit uniquement sur les mobiles.

 

Donc sur mobile, pour se rapprocher du changement d'image au survol présent sur les grands écrans :

 

- clic sur une miniature en-dessous de l'image principale du produit

- la grande image changerait mais ne lance pas la fancybox.

 

Merci d'avance pour votre aide !

[KonfiDD]

J'ai trouvé le topic suivant en anglais : https://www.prestashop.com/forums/topic/232287-prestashop-product-image-swap-on-thumbnail-click/

mais je ne retrouve pas les concordances dans le code.

 

Depuis, je suppose que le JS a été retravaillé par l'équipe Prestashop.

 

Est-ce que quelqu'un a une piste ?

[KonfiDD]

J'y suis presque !

 

Voici mon process :

 

dans mon-theme > js > product.js

 

en-dessous des lignes suivantes :

//hover 'other views' images management
$('#views_block li a').hover(
	function(){displayImage($(this));},
	function(){}
);

J'ai ajouté une ligne qui dit de ne pas afficher l'image en grand donnée par le lien lorsque l'on clique sur les miniatures, mais juste de mettre à jour la grande image produit au-dessus.

//click 'other views' images management
$('#views_block li a').click(function(e){
	e.preventDefault();
	displayImage($(this));
});

J'ai commenté les lignes suivantes pour éviter le fancybox lors du clic :

if (contentOnly == false){
	if (!!$.prototype.fancybox)
		$('li:visible .fancybox, .fancybox.shown').fancybox({
			'hideOnOverlayClick': false,
			'openEffect'	: 'elastic',
			'closeEffect'	: 'elastic',
			helpers : { 
  				overlay : {closeClick: false}
			}
		});
}

Puis j'ai changé les lignes suivantes :

//add a link on the span 'view full size' and on the big image
$(document).on('click', '#view_full_size, #image-block', function(e){
	$('#views_block .shown').click();
});

Par celles données dans le post datant d'un an, en modifiant le nom des images appellées :

$('#view_full_size, #image-block img').click(function(){
	var imageBuilder = [];
	var counter = 0;
	var current = $('#views_block .shown img').attr('src').replace('cart','thickbox');
	imageBuilder.push(current);

	$("#views_block li img").each(function() {
		if($(this).attr('src').replace('cart','thickbox') != current){
			imageBuilder.push($(this).attr('src').replace('cart','thickbox'));
			counter++;
		}
	});
	$.fancybox(
		imageBuilder,
		{
		'hideOnContentClick': true,
		'transitionIn' : 'elastic',
		'transitionOut' : 'elastic',
		'type'		  : 'image'  
		}
	);
});

Sur ordi, tout se passe comme je le souhaitais : le hover marche, le clic fancybox que sur la grande image.

Sur smartphone : le hover est remplacé par le clic et le fancybox est désactivé.

 

Reste juste à mettre à jour la classe qui montre quelle miniature est affichée en grand lors du clic sur smartphone, la classe shown si je ne me trompe pas …

 

C'était assez simple :

//click 'other views' images management
$('#views_block li a').click(function(e){
	e.preventDefault();
	displayImage($(this));
	this.addClass("shown");
});

Si vous avez une meilleure solution à me proposer, n'hésitez pas ! En tout cas, ça marche dans mon cas !

Edited February 3, 2015 by KonfiDD (see edit history)

[PsychoZzzorD]

Dans product.css de votre thème

@media (max-width: 767px) {

.pb-left-column #image-block {

pointer-events: none;

}

}