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

septembre 17th, 2014 | by Rabot | 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.

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 :

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 :

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 :

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 :

<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 Rabot

zico dit :

25 juin 2013 à 11 h 13 min

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 🙂

Répondre

Rabot dit :

30 juin 2013 à 10 h 23 min

<script type="text/javascript">  
$(document).ready(function () {  
 $("#popupchargement").fancybox().trigger('click');  
});  
</script>

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

mathurin dit :

3 juillet 2013 à 9 h 55 min

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

Rabot dit :

3 juillet 2013 à 10 h 25 min

Merci c’est corrigé.

Répondre

Marc dit :

9 octobre 2013 à 12 h 06 min

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

9 octobre 2013 à 13 h 11 min

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’
})

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-(

Rabot dit :

3 avril 2014 à 19 h 48 min

Désolé pour le temps de réponse.
Si tu n’as pas réussi, as-tu une url pour me montrer ?

Répondre

Ewa dit :

12 octobre 2013 à 8 h 59 min

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

Rabot dit :

3 avril 2014 à 18 h 55 min

As-tu bien ajouter le morceau de script dans ton footer ?
Sinon donne moi une URL que je regarde.

Répondre

noemo dit :

8 février 2014 à 19 h 40 min

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?

Rabot dit :

3 avril 2014 à 18 h 56 min

Comment ça, uniquement pour les pages cms ? ça fonctionne pour toutes les pages dont celles cms

Répondre

Richard dit :

25 avril 2014 à 17 h 32 min

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 :

26 août 2014 à 12 h 57 min

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.

Répondre

Philippe dit :

25 août 2014 à 20 h 24 min

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.

Rabot dit :

26 août 2014 à 12 h 51 min

C’est fait !

Répondre

Céline dit :

26 août 2014 à 21 h 45 min

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

Rabot dit :

17 septembre 2014 à 14 h 36 min

Bonjour,

J’ai modifié la fonction setmedia.

Attention à bien supprimer le fichier /cache/class_index.php pour que l’override soit bien pris en compte.

Répondre

Hamraras dit :

1 septembre 2014 à 18 h 57 min

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

Rabot dit :

17 septembre 2014 à 14 h 37 min

Oui, soit directement modifier dans le fichier CmsController.php (non recommandé) soit faire un override.

Répondre

2 septembre 2014 à 18 h 20 min

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

Rabot dit :

17 septembre 2014 à 14 h 38 min

Même réponse qu’en dessous 😉

Répondre

Patrick dit :

7 janvier 2015 à 8 h 58 min

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 :

17 août 2015 à 9 h 23 min

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.

Répondre

Bruno dit :

23 février 2016 à 10 h 03 min

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

Rabot dit :

9 mars 2016 à 14 h 53 min

Merci pour ces précisions 😉
Bonne journée à vous également.

Répondre

Le blog de Rabot

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

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

Laisser un commentaire