Find out how to display HTML in Prestashop’s category description…

You need to make some changes to Prestashop’s core code so please be advised any future upgrades may overwrite your changes. Backup all files before beginning!

These changes have been tested with Prestashop version 1.3

1. [admin folder]/tabs/AdminCategories.php

First we need to add class=”rte” to the text area as well as load the tinyMCE script on the edit category page in the admin area.

Approx line 212,

replace

<textarea cols="40" rows="10" id="description_'.$language['id_lang'].'" name="description_'.$language['id_lang'].'">'.htmlentities(stripslashes($this->getFieldValue($obj, 'description', intval($language['id_lang']))), ENT_COMPAT, 'UTF-8').'</textarea>

with

<textarea class="rte" cols="40" rows="10" id="description_'.$language['id_lang'].'" name="description_'.$language['id_lang'].'">'.htmlentities(stripslashes($this->getFieldValue($obj, 'description', intval($language['id_lang']))), ENT_COMPAT, 'UTF-8').'</textarea>
<script type="text/javascript" src="'.__PS_BASE_URI__.'js/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
  <script type="text/javascript">
  function tinyMCEInit(element)
  {
   $().ready(function() {
    $(element).tinymce({
     // Location of TinyMCE script
     script_url : \''.__PS_BASE_URI__.'js/tinymce/jscripts/tiny_mce/tiny_mce.js\',
     // General options
     theme : "advanced",
     plugins : "safari,pagebreak,style,layer,table,advimage,advlink,inlinepopups,media,searchreplace,contextmenu,paste,directionality,fullscreen",
     // Theme options
     theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
     theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,,|,forecolor,backcolor",
     theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,media,|,ltr,rtl,|,fullscreen",
     theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,pagebreak",
     theme_advanced_toolbar_location : "top",
     theme_advanced_toolbar_align : "left",
     theme_advanced_statusbar_location : "bottom",
     theme_advanced_resizing : false,
     content_css : "'.__PS_BASE_URI__.'themes/'._THEME_NAME_.'/css/global.css",
     width: "582",
     height: "auto",
     font_size_style_values : "8pt, 10pt, 12pt, 14pt, 18pt, 24pt, 36pt",
     // Drop lists for link/image/media/template dialogs
     template_external_list_url : "lists/template_list.js",
     external_link_list_url : "lists/link_list.js",
     external_image_list_url : "lists/image_list.js",
     media_external_list_url : "lists/media_list.js",
     elements : "nourlconvert",
     convert_urls : false,
     language : "'.(file_exists(_PS_ROOT_DIR_.'/js/tinymce/jscripts/tiny_mce/langs/'.$iso.'.js') ? $iso : 'en').'"
    });
   });
  }
  tinyMCEInit(\'textarea.rte\');
  </script>

2. classes/Category.php

Now we change the field type of description: ‘description’ => ‘isCleanHtml’ becomes ‘description’ => ‘isString’

Approx. line 65, replace

protected 	$fieldsValidateLang = array('name' => 'isCatalogName', 'link_rewrite' => 'isLinkRewrite', 'description' => 'isCleanHtml',
'meta_title' => 'isGenericName', 'meta_description' => 'isGenericName', 'meta_keywords' => 'isGenericName');

with

protected 	$fieldsValidateLang = array('name' => 'isCatalogName', 'link_rewrite' => 'isLinkRewrite', 'description' => 'isString',
'meta_title' => 'isGenericName', 'meta_description' => 'isGenericName', 'meta_keywords' => 'isGenericName');

3. classes/ObjectModel.php

Approx. line 295, replace

if (isset($this->{$field}[$language['id_lang']]) AND !Tools::isEmpty($this->{$field}[$language['id_lang']]))
$fields[$language['id_lang']][$field] = pSQL($this->{$field}[$language['id_lang']]);
elseif (in_array($field, $this->fieldsRequiredLang))
$fields[$language['id_lang']][$field] = pSQL($this->{$field}[$defaultLanguage]);
else
$fields[$language['id_lang']][$field] = '';

with

if (isset($this->{$field}[$language['id_lang']]) AND !Tools::isEmpty($this->{$field}[$language['id_lang']])) {
if(isset($this->fieldsValidateLang[$field]) && $this->fieldsValidateLang[$field]=='isString'){
$fields[$language['id_lang']][$field] = pSQL($this->{$field}[$language['id_lang']],'true');
}else{
$fields[$language['id_lang']][$field] = pSQL($this->{$field}[$language['id_lang']]);
}
}
elseif (in_array($field, $this->fieldsRequiredLang))
$fields[$language['id_lang']][$field] = pSQL($this->{$field}[$defaultLanguage]);
else
$fields[$language['id_lang']][$field] = '';

4. category.php

Lastly make sure we get rid of carriage returns being converted in to breaks when displaying the description.

Approx. line 49, replace

$category->description = nl2br2($category->description);

with

$category->description = ($category->description); 

Thats all there is to it. If you notice any bugs or problems please drop me an email or comment.

I had reservations making my CMS completely dependent on MochaUI so I have made everything modular. This will allow me to easily change the user interface should I no longer wish to use MochaUI in the future.

MochaUI provides the ability to open draggable, resizable, rounded-corner and dropshadowed windows without using images. These work great for help and file browser popup windows. It lets you design the user interface using columns and panels which are also resizeable. It uses the canvas tag so everything looks great with customisable curves and dropshadows.

View a screen shot of the CMS initial concept.

function clean_query_string($vsString) {
     return ereg_replace("[^A-Za-z0-9-]", "", $vsString);
}

The regular expression, [^A-Za-z0-9-] tells the function to replace any character that is not (^ means not) any of these characters, A-Za-z0-9-

This would be useful when you need to clean a query string value or the like.

The osCommerce File Browser contribution is a lightweight file browsing utility that allows you to upload, delete, select files within your images folder. You can create and navigate sub folders too. When editing or creating a new product simply click on “Choose file” next to the product image field and select the image you want to use from the popup file browser. This then copies the correct path back to the product image field.

Download the osCommerce File Browser v2.0.2 contribution [zip 297kB]

If you use this contribution please leave a comment giving your thoughts. A link back to my site would also be appreciated.

Features:

• browse and select files
• create new folders
• upload files
• delete files
• delete folders
• preview images
• thumbnail mode to preview all images in a folder

This package also includes the phpThumb() class by James Heinrich. (http://phpthumb.sourceforge.net)

Requirements

• GD image library is required for this mod.
• PHP 5
• osCommerce MS2
• UNIX based or Windows web server
• Folder based user validation (do not rely on osCommerce’s security)
• Mootools v1.11

For those readers who think I am talking about a set of spanners for working on cows;

“MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.” – http://mootools.net/

Admittedly I haven’t created anything spectacular as I use it predominantly as a time saving tool when developing web sites. Some practical uses that I have found for MooTools so far:

• dropdown list population – using AJAX. Is very handy for lists where the second list is dependant on the first
• showing / hiding content on a web page, e.g. toggle Aha, you found me!
• lightbox tool for showing images – I use Roebox as it is very lightweight, e.g. view image
• client-side form validation – simply enter a class for the input field e.g. class=”val_required”

Client-side Form Validation

The following shows how easy it is to validate forms using the Mootools framework.

View the demonstration of form validation in action

The javascript:

var fields = f.getElements('*[class^=val_]');
fields.each(function(element) {
  var lsElementName = jly_get_human_field_name(element.name);
  if((element.hasClass('val_required')) && (lsElementValue=='')){
    laValidateFields.push(new jly_validator(element,lsElementName+' is required.\n'));
    lbReturnValue = false;
  }
}

The HTML:

<input name="name" id="name" class="val_required" />
<input name="email" id="email" class="val_required val_email" />
 
 

As you can see, it is a very simple process of adding validation. All that is required is adding a class to the input field. The two examples shown here are val_required and val_email. Have a look at the source code of the demo for more information.

The demo uses alert boxes to inform the user that something is missing but you could take it a step further and add inline messages using MooTool’s injectAfter command.

What the system needed was a file manager utility to let the administrator insert some organisation into the images folder. There wasn’t a contribution at the time that suited my needs so I decided to create one myself.

Based on the simple File Browser from by Steve Blinch [code.blitzaffe.com] and using his excellent DirecTemplate system I have created an easy to use File Browser for osCommerce.

The current version is a complete rewrite of version 1. Version 1 was a bit quick and dirty. Version 2+ of the File Manager has addressed any CSS problems and now runs on both Windows and *NIX based servers. It also has some new features including thumbnail view and a more intuitive preview mode.

Version 1 is available from the contributions section at the osCommerce web site and I will post Version 2 very soon. (Version 2 of the File Manager is now posted.)

The osCommerce File Browser v2 contribution is available for download now.

So, after a few nights work, here it is. I plan on adding useful information to this blog that hopefully you will find helpful.

Instructions

1. Ensure you have an image open in Photoshop
2. Choose the paint bucket tool
3. Set the foreground colour to one of your liking
4. Hold down shift while left clicking in the workspace area surrounding your open image
5. This should fill the workspace with your selected colour

All future images will use this workspace colour.

Keep in mind that grey (RGB 128:128:128) is the best colour to use as it is least likely to affect the appearance of the colours within your image. I am using Photoshop 7.0.