Prestashop
1.6
Prestashop
1.7
Difficulté
2/4
Durée
5′
Dans ce tutoriel nous allons voir comment ajouter un lien JavaScript au sein de votre page CMS pour par exemple afficher une popup d’information, une galerie photo FancyBox ou encore des fonctionnalités jQueryUI .
Avant de commencer je vous laisse jeter un œil à la documentation Prestashop pour savoir comment overrider une classe.
Override de la classe CMS.php
Nous allons tout d’abord commencer par créer un fichier CMS.php dans le dossier « /override/classes ».
Ensuite collez le code suivant dans votre fichier précédemment créé :
<?php
/**
* Class CMSCore
*/class CMS extends CMSCore
{
/**
* @see ObjectModel::$definition
*/ public static $definition = array(
'table' => 'cms',
'primary' => 'id_cms',
'multilang' => true,
'multilang_shop' => true,
'fields' => array(
'id_cms_category' => array('type' => self::TYPE_INT, 'validate' => 'isUnsignedInt'),
'position' => array('type' => self::TYPE_INT),
'indexation' => array('type' => self::TYPE_BOOL),
'active' => array('type' => self::TYPE_BOOL),
/* Lang fields */ 'meta_description' => array('type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isGenericName', 'size' => 255),
'meta_keywords' => array('type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isGenericName', 'size' => 255),
'meta_title' => array('type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isGenericName', 'required' => true, 'size' => 128),
'link_rewrite' => array('type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isLinkRewrite', 'required' => true, 'size' => 128),
'content' => array('type' => self::TYPE_HTML, 'lang' => true, 'size' => 3999999999999),
),
);
} Explications :
- Nous avons simplement surchargé la propriété $definition en supprimant la ligne ‘validate’ => ‘isCleanHtml’ du tableau ‘content’.
- La ligne ‘validate’ => ‘isCleanHtml’ comme son nom l’indique nettoie les données lors de l’enregistrement de votre page CMS.
- N’oubliez pas de supprimer le fichier « class_index.php » dans le dossier /cache pour la version 1.6 de Prestashop, dans le dossier /app/cache/prod pour la version 1.7
Modification du fichier tinymce.inc.js
Nous allons ajouter la directive « allow_script_urls: true » dans la configuration de tinymce dans le fichier /js/admin/tinymce.inc.js (sauvegardez le fichier avant toute modification) :
default_config = {
selector: ".rte" ,
plugins : "colorpicker link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor anchor",
browser_spellcheck : true,
toolbar1 : "code,|,bold,italic,underline,strikethrough,|,alignleft,aligncenter,alignright,alignfull,formatselect,|,blockquote,colorpicker,pasteword,|,bullist,numlist,|,outdent,indent,|,link,unlink,|,anchor,|,media,image",
toolbar2: "",
external_filemanager_path: ad+"/filemanager/",
filemanager_title: "File manager" ,
external_plugins: { "filemanager" : ad+"/filemanager/plugin.min.js"},
language: iso,
skin: "prestashop",
statusbar: false,
relative_urls : false,
convert_urls: false,
entity_encoding: "raw",
extended_valid_elements : "em[class|name|id]",
valid_children : "+*[*]",
valid_elements:"*[*]",
menu: {
edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
insert: {title: 'Insert', items: 'media image link | pagebreak'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
tools: {title: 'Tools', items: 'code'}
},
allow_script_urls: true
}; Rajouter la directive allow_script_urls: true à la fin le l’objet « default_config » ligne 18.
Cette directive autorise l’ajout de JavaScript dans l’attribut href des liens.
Vous pouvez dès maintenant ajouter l’appel d’une fonction JavaScript dans vos liens sur vos pages CMS.
Pour tester le bon fonctionnement des liens JavaScript collez ce code dans une page CMS de votre boutique Prestashop :
<a href="javascript:alert('hello world')">Hello World</a>