Toutes les clefs pour réussir dans le e-commerce

Mes modules Prestashop

Comment avoir un meilleur aperçu de vos descriptions dans l’admin de prestashop ?

Voici une astuce qui va vous permettre d’avoir pratiquement le même rendu dans le backoffice que dans le frontoffice pour vos descriptions produits

La solution est de charger le css qui gère l’affichage de la description de votre fiche produit, coté visiteurs, dans l’éditeur (tiniymce) de la fiche produit coté admin.

Prérequis:

On va supposer dans l’exemple que le fichier css qui gère cet affichage est “global.css”. Mais il est possible que ce soit “product.css” ou tout autre fichier, tout dépend de votre thème.
On suppose également que le contenu des descriptions est encapsulé dans un conteneur possédant la class “rte” (ce qui est le cas pour le thème par défaut et normalement pour les thèmes bien faits :) ).

Le css:

Tout d’abord il faut vérifier dans le fichier “global.css” que tout ce qui impacte la description produit commence bien par la classe “.rte”.
Si par exemple vous avez le code suivant


#pate .rte h5 {
color:red;
}

Vous devez le remplacer par:


.rte h5 {
color:red;
}

le js:

Il faut maintenant charger le fichier “global.css” dans tinymce et ajouter la classe “rte” à l’éditeur.
Ouvrez le fichier “\js\tinymce.inc.js” et rajoutez ceci dans le default_config


content_css : "../themes/mon_theme/css/global.css",
body_class: "rte",

Où “mon_theme” est le nom de votre thème.

Voici le code complet du fichier une fois modifié:


function tinySetup(config)
{
	if(!config)
		config = {};

	//var editor_selector = 'rte';

	if (typeof config.editor_selector != 'undefined')
		config.selector = '.'+config.editor_selector;

	default_config = {
		selector: ".rte" ,
		plugins : "colorpicker link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor anchor",
		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]",
                content_css : "../themes/mon_theme/css/global.css",
                body_class: "rte",
		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'}
		}
	};

	$.each(default_config, function(index, el)
	{
		if (config[index] === undefined )
			config[index] = el;
	});

	tinyMCE.init(config);
}


Désormais votre éditeur devrait reprendre les styles de votre thème et vous aurez donc un rendu dans l’admin bien plus proche de la réalité.

Si vous pensez avoir tout fait correctement et que vous ne voyez aucune différence dans votre éditeur de texte, pensez à vérifier les prérequis.

Poster un Commentaire

Soyez le premier à commenter !

Recevoir un email pour
avatar
wpDiscuz