Dernièrement, j’ai dû développer une e-boutique via l’application Prestashop dans sa version 1.4.

D’après le cahier des charges, l’une des pages du site internet est une galerie qui permet d’afficher les photos dans des fenêtres au premier plan comme le fait par exemple le célèbre module Javascript Lightbox 2.

Par défaut, Prestashop 1.4 embarque JQuery et le module Thickbox qui est un équivalent du module Lightbox 2.

Afin de développer cette galerie, j’ai décidé d’utiliser le système de pages CMS proposé par Prestashop, mais à ma grande surprise, le module Thickbox n’est pas chargé par défaut dans les pages CMS comme c’est le cas pour les pages products par exemple.

Ma première intention a été d’importer directement le module dans l’entête de ma page “en dur” directement dans le thème que j’étais en train de développer. Puis finalement, après avoir googlélisé mon problème, j’ai trouvé la solution : surcharger le contrôleur des pages CMS afin qu’il importe automatiquement le module Javascript.

Dans le dossier “override\controllers” de votre projet Prestahop, créez le fichier “CMSController.php” puis remplissez le avec le code suivante :

<?php
class CmsController extends CmsControllerCore {
    public function setMedia() {
        parent::setMedia();

        Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
        Tools::addJS(array(_PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js',
                           _PS_JS_DIR_.'jquery/jquery.serialScroll-1.2.2-min.js',
                           _THEME_JS_DIR_.'product.js'));

        if (Configuration::get('PS_DISPLAY_JQZOOM') == 1) {
            Tools::addCSS(_PS_CSS_DIR_.'jqzoom.css', 'screen');
            Tools::addJS(_PS_JS_DIR_.'jquery/jquery.jqzoom.js');
        }
    }
}

Maintenant que le module est chargé automatiquement, libre à vous de l’utiliser pour une image simple :

<a class="thickbox" href="mon_image.jpg">
  <img alt="mon image" src="miniature.jpg" />
</a>

ou pour une galerie d’images :

<a class="thickbox" rel="groupe" href="mon_image.jpg">
  <img alt="mon image" src="miniature.jpg" />
</a>