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 :
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/
