Comment afficher des pages en popup sur Prestashop 1.4/1.5 et 1.6 ?

septembre 17th, 2014 | by | prestashop

Sep
17

Un jour j'ai voulu afficher des pages CMS dans un popup, mais je ne voulais pas installer un n-ième module pour faire simplement cela ni insérer un autre script/bibliothèque que ceux inclus dans Prestashop.
Puis je me suis souvenu que les CGV apparaissaient exactement comme je le souhaitais. Je vous épargne mon tâtonnement et mes recherches pour vous donner directement la solution.

page popup prestashop

Il faut tout d'abord faire les liens de cette façon (en ajoutant la classe iframe) :

1
<a class="iframe" href="../cms.php?id_cms=13&content_only=1">mon lien popup</a>

Le paramètre content_only=1 n'est pas obligatoire mais celui n'affichera - comme son nom l'indique - que le contenu de la page. Sans le header, footer ou même les colonnes, suivant votre template. Il faut ensuite appeler le script fancybox. Placer donc ce morceau de code dans votre fichier footer.tpl avant la fermeture de la balise body.

1
2
3
<script>// <![CDATA[
$('a.iframe').fancybox();
// ]]></script>

Version 1.4.X :
Dans le fichier classes/FrontController.php
Chercher la fonction :
public function setMedia()

On voit qu'il y a une condition pour afficher la fancybox et cette condition n'est généralement pas remplie, d'où le fait que l'ouverture en popup ne fonctionne pas.

La remplacer par :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public function setMedia()
{
global $cookie;
 
Tools::addCSS(_THEME_CSS_DIR_.'global.css', 'all');
Tools::addJS(array(_PS_JS_DIR_.'jquery/jquery-1.4.4.min.js', _PS_JS_DIR_.'jquery/jquery.easing.1.3.js', _PS_JS_DIR_.'tools.js'));
Tools::addJS(_PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js');
Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css');
if (Tools::isSubmit('live_edit') AND Tools::getValue('ad') AND (Tools::getValue('liveToken') == sha1(Tools::getValue('ad')._COOKIE_KEY_)))
{
Tools::addJS(array(
_PS_JS_DIR_.'jquery/jquery-ui-1.8.10.custom.min.js',
_PS_JS_DIR_.'hookLiveEdit.js')
);
 
}
$language = new Language($cookie->id_lang);
if ($language->is_rtl)
Tools::addCSS(_THEME_CSS_DIR_.'rtl.css');
}

Version 1.5.X :
Dans le fichier classes/controller/FrontController.php

Remplacer par :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
public function setMedia()
{
// if website is accessed by mobile device
// @see FrontControllerCore::setMobileMedia()
if ($this->context->getMobileDevice() != false)
{
$this->setMobileMedia();
return true;
}
$this->addCSS(_THEME_CSS_DIR_.'global.css', 'all');
$this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'all'); // @TODO
$this->addjquery();
$this->addjqueryPlugin('easing');
$this->addJS(_PS_JS_DIR_.'tools.js');
$this->addjqueryPlugin('fancybox');
if (Tools::isSubmit('live_edit') && Tools::getValue('ad') && Tools::getAdminToken('AdminModulesPositions'.(int)Tab::getIdFromClassName('AdminModulesPositions').(int)Tools::getValue('id_employee')))
{
$this->addJqueryUI('ui.sortable');
$this->addJS(_PS_JS_DIR_.'hookLiveEdit.js');
}
if ($this->context->language->is_rtl)
$this->addCSS(_THEME_CSS_DIR_.'rtl.css');
// Execute Hook FrontController SetMedia
Hook::exec('actionFrontControllerSetMedia', array());
}

MAJ pour la version 1.6 :

Dans override/controllers créez un fichier nommé CMSController.php (il faut également faire de l'override pour les versions 1.4 et 1.5 pour éviter la perte de ces modifications avec les mises à jour) et mettre :

1
2
3
4
5
6
7
8
9
10
11
12
class CmsController extends CmsControllerCore
{
public function setMedia(){
    parent::setMedia();
    if ($this->assignCase == 1)
        $this->addJS(_THEME_JS_DIR_.'cms.js');
    $this->addCSS(_THEME_CSS_DIR_.'product.css');
    $this->addCSS(_THEME_CSS_DIR_.'cms.css');
    $this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
    $this->addJqueryPlugin('fancybox');
}
}

Egalement mettre plus de paramètres dans le footer :

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$(document).ready(function() {
$('a.iframe').fancybox({
		'type' : 'iframe',
		'width':600,
		'height':600
	});
});
</script>

L'url d'appel des pages cms n'est pas la même :

1
<a class="iframe" href="index.php?id_cms=3&controller=cms&content_only=1">Lien popup</a>

Si vous avez des questions/problèmes n’hésitez pas à poster un petit commentaire 😉

Comme vous pouvez le voir j'ai commencé à utiliser un plugin pour formater les exemples de code source car ils n'étaient vraiment pas très lisible.
Vous pouvez le télécharger ici : http://wordpress.org/plugins/wp-syntax/

Authored by

25 Responses to “Comment afficher des pages en popup sur Prestashop 1.4/1.5 et 1.6 ?”

Show / Hide Comments
  1. zico dit :

    bonjour et merci pour ce post.

    j’ai une question, si je veux que la popin s’ouvre a l’affichage de la page et non au click sur un lien, comment faire ?

    merci 🙂

    • Rabot dit :
      1
      2
      3
      4
      5
      
      <script type="text/javascript">  
      $(document).ready(function () {  
       $("#popupchargement").fancybox().trigger('click');  
      });  
      </script>

      Tu peux essayer ceci en ajoutant l’id « popupchargement » à ton lien.

  2. mathurin dit :

    Salut il manque la première ligne de code de ton tuto.

  3. Marc dit :

    Merci pour cette astuce qui fonctionne bien. Maintenant j’essaye d’avoir une taille cohérente sur pc, tablette et smartphone mais j’ai beau joué avec tous les paramètres de la fancybox, autant sur pc, la taille et la position réagissent, autant sur tablette android 4.3 et mobile, c’est toujours pareil, une trop toute petite fenêtre 8-(, j’ai beau effacer les caches et historiques des navigateurs, rien n’y fait. Quels seraient à votre avis le bon paramétrage pour des viewports mobiles

    fancybox({
    ‘padding’ : ‘0’,
    ‘marging’ : ‘0’,
    ‘width’ : ‘70%’,
    ‘height’ : ‘70%’,
    ‘autoScale’ : false,
    ‘transitionIn’ : ‘elastic’,
    ‘transitionOut’ : ‘elastic’,
    ‘type’ : ‘iframe’
    })

    j’ai essayé par exemple autoScale à true et en retirant les dimensions: idem.

    merci d’avance

  4. Marc dit :

    je rectifie mon code car, il y avait quelques apostrophes en trop… en fait le paramètre taille peut être passé soit en numérique soit en pourcentage mais dans ce cas avec des quotes.

    fancybox({
    ‘padding’ : 0,
    ‘marging’ : 0,
    ‘width’ : 800,
    ‘height’ : 600,
    ‘autoScale’ : false,
    ‘transitionIn’ : ‘elastic’,
    ‘transitionOut’ : ‘elastic’,
    ‘type’ : ‘iframe’
    })

    ou bien

    fancybox({
    ‘padding’ : 0,
    ‘marging’ : 0,
    ‘width’ : ‘90%’,
    ‘height’ : ‘90%’,
    ‘autoScale’ : false,
    ‘transitionIn’ : ‘elastic’,
    ‘transitionOut’ : ‘elastic’,
    ‘type’ : ‘iframe’
    })

    ou bien

    fancybox({
    ‘padding’ : 0,
    ‘marging’ : 0,
    ‘autoScale’ : true,
    ‘transitionIn’ : ‘elastic’,
    ‘transitionOut’ : ‘elastic’,
    ‘type’ : ‘iframe’
    })

    dans les 3 cas mon souci reste le même, la largeur semble être bien prise en compte par ma tablette et mobile, mais la hauteur reste figée et ne contient que 2 lignes de texte, mobile vertical ou hozitonal. Les ascenseurs sont présent et je peux faire défiler le texte dans tout les sens, mais pourquoi une aussi petite fenêtre !!! 8-(

  5. Ewa dit :

    Bonjour, merci pour ce post, c’est exactement ce que j’essais de faire, par contre ça ne marche pas sur mon site. La page CMS s’affiche toujours en pleine page. Je suis sous PS 1.5.5. Une idée sur ce que j’ai pu faire de travers?
    Merci d’avance

  6. noemo dit :

    salut:

    superbe explication, moi ça marche déjà sur mon front office

    tu aurais la même chose uniquement pour les pagees cms? en 1.5?

  7. Richard dit :

    Salut, Super tuto qui me sert sur un projet pro actuellement (1.4.11)

    Le soucis c’est qu’apparement le content_only=1 n’a pas l’air de marcher complétement. Du moins quand tu désactive l’option dans le BO: « Rediriger automatiquement vers l’url canonique » la popup affiche bien uniquement que le contenu et non le header, footer etc..
    Mais une fois l’option activé, la fancybox va me charger l’ensemble de la page

    As tu une idée de comment régler ce soucis stp?

    • Rabot dit :

      Est-ce que ton url a toujours le content_only=1 quand tu actives cette option ?
      Cela doit enlever ce paramètre avec la réécriture. Essaie de mettre comme lien l’url réécrite directement + le content_only=1 à la fin.

  8. Philippe dit :

    Vraiment super, merci !

    et pour les versions 1.6.x c’est possible ?? ( je sais je suis gourmand )

    merci pour l’aide et les connaissances.

  9. Céline dit :

    Bonjour, chez moi en version 1.6, ca ne fonctionne pas. Le lien s’ouvre dans une nouvelle page, pas de pop up. La modification du FrontController.php fait meme planter le quick-view.
    Une idée?

    merci

  10. Hamraras dit :

    Bonjour,
    Je suis un peu bloquer le popup s’affiche pas.
    Pour la version 1.6 faut -il changer qq’chose dans le fichier :
    classes/controller/FrontController.php

    Merci pour l’aide

  11. Hamraras dit :

    Bonjour,

    Je suis en prestashop 1.6 et ça marche pas. Y a-t-il un truc à faire en plus?

    Qd je clique sur mon lien popup j’ai juste une nouvelle page qui s’ouvre, et non pas un pop-up, avec mon contenu cms

    Merci de bien vouloir m’éclairer.

    Hamraras

  12. Patrick dit :

    Bonjour,

    1- Pour Prestashop 1.5.6.2, quel serait le code à placer dans le fichier classes/controller/FrontController.php ?

    Pour infos, la fonction d’origine est la suivante :
    public function setMedia()
    {
    // if website is accessed by mobile device
    // @see FrontControllerCore::setMobileMedia()
    if ($this->context->getMobileDevice() != false)
    {
    $this->setMobileMedia();
    return true;
    }

    if (Tools::file_exists_cache(_PS_ROOT_DIR_.Tools::str_replace_once(__PS_BASE_URI__, DIRECTORY_SEPARATOR, _THEME_CSS_DIR_.’grid_prestashop.css’)))
    $this->addCSS(_THEME_CSS_DIR_.’grid_prestashop.css’, ‘all’);
    $this->addCSS(_THEME_CSS_DIR_.’global.css’, ‘all’);
    $this->addjquery();
    $this->addjqueryPlugin(‘easing’);
    $this->addJS(_PS_JS_DIR_.’tools.js’);

    if (Tools::isSubmit(‘live_edit’) && Tools::getValue(‘ad’) && Tools::getAdminToken(‘AdminModulesPositions’.(int)Tab::getIdFromClassName(‘AdminModulesPositions’).(int)Tools::getValue(‘id_employee’)))
    {
    $this->addJqueryUI(‘ui.sortable’);
    $this->addjqueryPlugin(‘fancybox’);
    $this->addJS(_PS_JS_DIR_.’hookLiveEdit.js’);
    $this->addCSS(_PS_CSS_DIR_.’jquery.fancybox-1.3.4.css’, ‘all’); // @TODO
    }
    if ($this->context->language->is_rtl)
    $this->addCSS(_THEME_CSS_DIR_.’rtl.css’);

    // Execute Hook FrontController SetMedia
    Hook::exec(‘actionFrontControllerSetMedia’, array());
    }

    2- Après avoir fait les corrections dans FrontController.php, faudra-t-il supprimer le fichier cache/class_index.php ?

    Merci par avance,

    Patrick

    • Rabot dit :

      Il faut principalement les lignes :
      $this->addCSS(_PS_CSS_DIR_.’jquery.fancybox-1.3.4.css’, ‘all’); // @TODO
      $this->addjquery();
      $this->addjqueryPlugin(‘easing’);
      $this->addjqueryPlugin(‘fancybox’);

      Si vous utilisez l’override oui il faut supprimer le fichier cache/class_index.php pour être sur que celui-ci soit pris en compte.

  13. Bruno dit :

    Bonjour,
    Merci pour ce code.
    Si je puis me permettre, j’ai 2 petites remarques à ajouter qui pourront aider les internautes (sous PS 1.6) :
    – j’ai du modifier le nom du fichier CMSController.php en CmsController.php pour que l’overide fonctionne.
    – rajouter une petite condition :
    if ($(‘a.iframe’).length){
    $(‘a.iframe’).fancybox({
    ‘type’ : ‘iframe’,
    ‘width’:600,
    ‘height’:600
    });
    }

    Pour ne pas avoir une erreur JS sur toutes les autres pages que Product.tpl

    Bonne journée,
    Bruno