Prestashop : problème de marge blanche avec JQZoom

JqZoom est une application, basée sur le framework Javascript JQuery, permettant de zoomer sur la photo d’un produit sur la fiche produit (par exemple).
Par le passé, j’ai déjà utilisé JQ Zoom et il est vraiment pas mal ! Il est assez facilement paramétrable, il fonctionne bien… et c’est très agréable !

De base, JqZoom est installé sur Prestashop (du moins, à partir de la version 1.3 de Prestashop).
Pour l’activer ou désactiver JqZoom, aller dans l’interface d’administration de Prestashop > Onglet Préférences > Sous-onglet Produits.

Comment activer ou désactiver JqZoom sur Prestashop

 Problème de marge blanche avec JqZoom sur Prestashop : Comment faire ?

bug marge blanche Jquery JqZoom

Quand est-ce que ce bug a lieu ?

La plupart du temps sur Prestashop.

Pourquoi y a-t’il une marge blanche en Haut et en Bas ?

Cet marge blanche peut être présente sur tous les côtés, selon la taille de l’image zoomée. Si l’image est en mode portrait, alors on aura les marges blanches à gauche et à droite. Si l’image est en mode paysage, les marges seront en haut et en bas. Pour ne pas avoir les marges, il faudrait une image aux dimansions d’un carré.

Pourquoi l’image doit-elle être de forme carrée ?

Sur Prestashop 1.4 (c’est celle que j’utilise actuellement), lorsque l’on survole l’image à zoomer, Prestashop appelle une autre déclinaison de l’image à zoomer !
Cette image est nommée de la façon suivante : http://www. mon_domaine.com/img/p/id_produit–id_image-thickbox.jpg (ex : « ./img/p/10-36-thickbox.jpg »)

Or, le format de l’image Thickbox est par défaut de 600 x 600 px.

Parametrage de la taille des images produits dans prestashop

2 Solutions :

– Si toutes vos images sources ont toutes les mêmes dimensions et/ou proportions, dans ce cas il est préférable de modifier les dimensions des différentes images qui seront utilisées, et ce via l’interface d’administration (Cf. écran ci-contre).

– Si vos images sont tantôt verticales, tantôt horizontales, il sera préférable d’effectuer la modification de code ci-dessous.

Comment éviter les problèmes de marge blanche avec JqZoom et Prestashop ?

Vos images n’ont pas les mêmes proportions ? Du coup, vous aurez une marge blanche! Pour éviter celà, il faut non plus appeler l’image thickbox ayant une dimension définie, mais appeler l’image originale.
Cette image est nommée de la façon suivante : http://www. mon_domaine.com/img/p/id_produit–id_image.jpg (ex : « ./img/p/10-36.jpg »)

Pour cela, ouvrez le fichier product.tpl (/www/themes/mon_theme/product.tpl).

A la ligne 150, vous êtes sensés avoir :

{if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"
{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" 
{/if} id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />

à modifier en :

{if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, '')}"
{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}"
{/if} id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />

On a supprimé le paramètre thickbox du lien généré dans la balise de texte alternatif.

 

ATTENTION : Pensez à supprimer les fichier de cache des templates dans le répertoire ./www/tools/smarty/compile !

Bug JqZoom avec une petite image

NB : Si toutefois votre image originale est plus petite que l’image survolée, alors ça ne sera pas esthétique car d’une part il n’y aura pas de zoom, et d’autre part, le déplacement de la souris ne fera pas déplacer l’image zoomée.

Boutons de Partage Facebook – Ce qu’il faut savoir

Fashiontribu, le site de Grandes marques à prix déstock partage via Facebook

Afin de faire connaître le contenu de vos pages web, certains sites de réseaux sociaux permettent le partage d’informations (articles, médias, pages). Facebook,  propose aux développeurs différents boutons de partage.
Dans cet article, nous n’en étudierons qu’un et verrons ce qu’il faut savoir afin qu’il fonctionne correctement (car le bouton Share Facebook n’est pas facile à mettre en place).

<div style="float:left;padding:5px;">
      <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'>Partager ceci</a>
      <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></script>
</div>

Ce qu’il faut savoir :
Le bouton de partage Facebook fb_share, permet le partage de la page courante. L’url partagée doit obligatoirement contenir les paramètres (méthode GET) nécessaires s’il y en a.
Dans le cas d’une page dynamique, construite à partir de paramètres passés dans les variables de session (par exemple), l’url sera de type :

http://www.fashiontribu.com/products-new-r.php

Fashiontribu est un site de destockage de grandes marques de vêtements de mode et à petits prix. Le site posséde un puissant moteur de recherche en AJAX afin de trouver des produits qui nous corresponde le mieux.

 
Donc, le bouton de partage Facebook ne tiendra pas compte des éléments recherchés par la personne ayant partagé la page.

Partage Facebook avec paramètres

La solution c’est hélàs du bidouillage, mais au moins ça fonctionne!
Il s’agit, sur la page contenant le moteur de recherche, de créer un lien/bouton appelant une popup dont l’url comporte les variables nécessaires pour le partage. Ainsi, cette url sera de type :
 

http://www.fashiontribu.com/products-new-r.php?param1=valeur&param2=valeur&...

 
On appelle donc la popup de la façon suivante :

<?php
/*
* fonction javascript 'window.open()' :
* window.open(url, nom de la fenêtre, paramêtres)
*/
$sPermalinkParam = '&param1='.$_SESSION['param1'].'&'.'param2='.$_SESSION['param2'];
$sUrl = 'http://www.fashiontribu.com/share_fb.php?permalink=true'.$sPermalinkParam;
$sPopupName = 'Partagez votre recherche via Facebook';
$sParamPopup = 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhisto
ry=no, width=600, height=400, screenX=150, screenY=150, top=150, left=150';

echo '<a onClick="javascript:window.open(\''.$sUrl.'\', \''.$sPopupName.'\', \''.$sParamPopup.'\'); $return false;"'
     .' href="http://www.fashiontribu.com/share_fb.php?permalink=true'.$sPermalinkParam.'" alt="Partagez votre recherche 
via Facebook">';

echo '<img src="/images/icons/facebook_icon.png" border="0" /> Share Facebook</a><br />';
?>

NB: Les paramètres (ex: param1 et param2) doivent être au préalable déjà saisis en Session pour pouvoir utiliser les variables de session $_SESSION[‘param1’] etc…

Voici le code de la popup :

<?php
// On appelle le fichier permettant l'utilisation des sessions
require('includes/application-top-r.php');

// la variable de session 'share' permet de savoir qu'il s'agit de la popup
$_SESSION['share'] = 'true';

// on récupère les paramètres et on les intégre dans l'url de redirection
$aPermalinkParam = '';
$i = 0;
foreach ($_GET as $key => $value) {
    if($i > 0) $aPermalinkParam .= '&';
    $aPermalinkParam .= $key.'='.$value;
    $i++;
}
// on ouvre l'url suivante, toujours dans la popup
header('Location: ./products-new-r.php?'.$aPermalinkParam);  
?>

On constate que l’url appelée est celle où se trouve le moteur de recherche. La seule différence est que maintenant nous avons les paramètres dans l’url ainsi que la variable de session $_SESSION[‘share’].
Dans le fichier products-new-r.php, on vérifie en début de code (juste après la balise BODY) si l’on se trouve où non dans la popup.

<?php
if($_SESSION['share'] != 'true') { ?>
   <!-- Contenu de la page hors popup -->
   <?php
} else { // $_SESSION['share'] == 'true' -> on se trouve dans la popup
   // on vide la variable de session 'share' pour permettre le bonne affichage de la page appelante par la suite
   unset($_SESSION['share']);
   ?>
   <!-- Bouton de partage Facebook - NE PAS MODIFIER -->
   <div style="float:left;padding:5px;">
       <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'>Partager ceci</a>
       <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></script>
   </div>
   <?php
}
?>

On a ajouté le fameux code du bouton Facebook Share présenté en début d’article, à la condition que la variable de session est $_SESSION[‘share’] == true.

On a donc le bouton Facebook Share qui bénéficie des paramètres.

J’espère que cet article vous aura été utile. N’hésitez pas à laisser des commentaires si vous avez des questions ou remarques à propos du code.
Merci de votre attention.

PHP Pagination

Bonjour,

Voici un très bon exemple de pagination en provenance du site www.PHPeasystep.com

Exemple :

Exemple de pagination en PHP

Il s’agit d’un script clair et commenté permettant un paramétrage facile pour que vous puissiez l’adapter au mieux à votre site internet.

PHP Format Date

Bonjour,

Connaître la date du jour en PHP est assez simple :

<?php
echo date('Y-m-d H:i:s');
// Affichera 2011-02-14 17:30:59
?>

NB: Dans date(‘Y-m-d H:i:s’) nous avons mis des « – » et des « : », mais ils auraient pu être remplacés par des espaces, un caractère (précédé du caractère « \ ».), etc…

<?php
echo date('H\h i\m s\s \l\e d/m/Y');
// Affichera 17h 30m 59s le 14/02/2011
?>

 

Par contre, ce qui va suivre n’est pas plus compliqué, mais il faut le savoir :

• Connaitre la date du mois dernier en PHP :

<?php
echo date('Y-m-d H:i:s', strtotime('-1 month'));
// Affichera 2011-01-14 17:30:59
?>

• Connaitre la date dans 3 jours en PHP :

<?php
echo date('Y-m-d H:i:s', strtotime('+3 days'));
// Affichera 2011-02-17 17:30:59
?>

• Connaitre la date dans 1 semaine, 2 jours, 4 heures et 2 secondes :

<?php
echo date('Y-m-d H:i:s', strtotime('+1 week 2 days 4 hours 2 seconds'));
// Affichera 2011-02-26 21:31:01?>

• Connaitre la date du prochain lundi en PHP :

<?php
echo date('Y-m-d H:i:s', strtotime('next Monday'));
// Affichera 2011-02-21 17:30:59
?>

• Connaitre la date du vendredi précédent en PHP :

<?php
echo date('Y-m-d H:i:s', strtotime('last Friday'));
// Affichera 2011-02-11 17:30:59
?>

 

Potasser encore un peu :

Pour en savoir plus, consulter le manuel de référence sur la fonction date en PHP.