Where to Start to Become a PrestaShop Developer – Languages to Know – Part 2

by Adrian Nethercott on April 10, 2012


It can be difficult to know where to start when learning how to become a PrestaShop developer.  This series of articles aims to provide you the information you need to start developing for PrestaShop.  In this second article, I will talk about the different programming languages used by PrestaShop and resources to help you learn them.

HTML, CSS and JavaScript

Programming Languages You Need to Know to be a Prestashop DeveloperThe obvious languages that you need to know are HTML, CSS and JavaScript, which are used when programming all websites.  You will need to know all of these when customising a PrestaShop theme.  The TPL files contain HTML code, the css directory contains CSS files and the js directory contains JavaScript files.

A great place to start learning about HTML, CSS and JavaScript is the Opera Web Standards Curriculum.  I read this free guide when I was learning how to create websites.  It covers web standards and how to write standards-compliant HTML, CSS and JavaScript.  It even covers web design concepts such as colour schemes and typography.

Another useful resource is the W3Schools website, which provides tutorials on just about every web technology you can think of, including HTML, CSS and JavaScript.  I use it as a reference guide when I want to know what options are available for a particular HTML element.  For example, if I’ve forgotten what options are available for the <table> tag, I’ll use the search box in the top-right corner of the website to search for “table”, then click on the first result to find a page listing all the options.

jQuery

PrestaShop uses the jQuery JavaScript library to simplify its event handler and AJAX code, and add animations to make PrestaShop more dynamic.  You can find information and tutorials on the jQuery documentation page, but PrestaShop only uses jQuery in a few different ways, so you don’t need to learn everything about jQuery to become a PrestaShop developer.

PrestaShop uses a few different jQuery event handlers in the PrestaShop theme.  The $(document).ready() event handler is used to run code when the page has finished loading.  That code may add event handlers to buttons or images.  For example, ('#button').click() to add a mouse click event to the element with id="button" or ('#button').hover() to add a mouse hover event.

In an event handler, you will often see code that shows or hides a button or text.  For example, ('#text').show(); will show hidden text with id="text" instantly and $('#text').hide(); to hide it instantly.  Buttons and text may also be faded in or out.  For example, $('#text').fadeIn(); will fade the text in using a fast animation and $('#text').fadeOut(); will fade out the text using a fast animation.  Some blocks of text may slide up or down to make them visible.  For example, $('#block').slideUp(); and $('#block').slideDown();.  The parameter 'slow' can be added to the fade and slide functions to use a slower animation.  Lastly, you can chain together function calls in jQuery, so you can use run one animation after the other.  You might expect $('#block').slideUp().slideDown() to slide a block up and then down, but in fact, it will both slide up and down at the same time, so it won’t work.  You must use $('#block').slideUp(function() { $('#block').slideDown(); }); to call the slideDown() function once the slideUp() animation finishes.

Lastly, PrestaShop uses AJAX calls to save some forms without refreshing the page.  For example:

$.ajax({
type: "POST",
url: "file.php",
data: 'variable='+value,
success: function(html) {
$('#message').html('Data saved');
},
error: function () {
$('#message').html('Could not save data');
}
});

In this code, the JavaScript variable value is converted into a variable called variable and sent by POST to file.php.  If successful, the success function will be called to change the text inside the element with id=message to 'Data saved'.  If it fails for some reason, the error function will be called to change the message to 'Could not save data'.

That’s just about all the kind of jQuery code you should encounter in PrestaShop.

PHP and MySQL

The main programming language that PrestaShop uses is object-oriented PHP.  You’ll need to use this language when modifying PrestaShop’s modules and overriding PrestaShop’s core files.  You’ll also need to know to how to write SQL queries, since PrestaShop stores its data in a MySQL database.  I learnt PHP and MySQL by reading the book “PHP and MySQL Web Development” by Luke Welling and Laura Thompson.  You can buy this book on Amazon or another bookstore.

Learn PHP to be a PrestaShop DeveloperPrestaShop uses the Model-View-Controller (MVC) for its software architecture.  MVC isolates application logic from the input and presentation, so that they can be separately developed, tested and maintained.  A view provides the user interface presented to the customer in the browser.  A controller receives input from the browser, decides what to do with it and then passes information to models that carry out specific tasks.  In PrestaShop, the models are in the classes directory, the views are in the themes directory and the controllers are in the controllers directory.  The files in the root directory are the public interface used to call the controllers.

All these files have a warning at the top of them telling you not to modify them if you wish to upgrade PrestaShop to newer versions in the future.  That is because PrestaShop allows you to override its classes and controllers in the override directory.  By overriding classes and controllers instead of modifying them, you can safely overwrite them with new versions in the future without having to worry about losing any changes you have made.  PrestaShop’s modules also have the same warning, since they can be overridden in a theme by mirroring the module’s directory inside the theme, e.g. themes/themename/modules/blockuserinfo/blockuserinfo.tpl.

You can read more in my PrestaShop Development Guide.

Smarty

PrestaShop uses the Smarty template engine for PHP to separate the presentation (HTML/CSS) from the application logic (PHP), so that web designers can work on just the TPL files and web programmers can work on just the PHP files.  The web programmer can add variables in the PHP file that the web designer can use by adding code like the following:

$smarty->assign('variable', 'value');

The web programmer can also create multiple variables at a time using the following syntax:

$smarty->assign(array('variable1' => 'value1', 'variable2' => 'value2'));

Smarty uses its own simplified syntax to make it easier for web designers to embed PHP within HTML code.  In some cases, this syntax may reduce the amount of code, but in other cases it may increase the amount of code to make it easier to understand.  For example, here is a simple HTML file that embeds PHP without Smarty:

<? $name = 'Rocky'; ?>
<html>
<body>
<p>Hello, <? echo $name; ?></p>
</body>
</html>

And here’s an equivalent TPL file that embeds PHP with Smarty:

{assign var='name' value='Rocky'}
<html>
<body>
<p>Hello, {$name}</p>
</body>
</html>

If you are already a proficient PHP coder, you may be happy writing the first code block and not even want to use Smarty.  But what if you wanted to create a multi-language website?  If you weren’t using Smarty, you’d need to create a separate HTML file for each language, or store all the translations in a single HTML file and display just the ones for the current language, which would add a lot of unnecessary code.  You could use an online translation tool like Google Translate to translate the text using JavaScript, but then search engines like Google won’t be able to crawl those translations.

Smarty has an elegant solution to this problem by letting the web programmer map customised functions for the web designer to use.  PrestaShop uses this feature to enable the translation of text strings by creating a custom function called l for language with the parameter s for string.  Doing this, you can allow the “Hello” string to be translated for each language in Back Office in PrestaShop.  For example:

{assign var='name' value='Rocky'}
<html>
<body>
<p>{l s='Hello'}, {$name}</p>
</body>
</html>

Smarty also enables great flexibility in customising the theme by using conditional statements and loops.  For example, the following TPL file creates a variable n, uses a conditional statement to test whether it is odd or even, then displays whether it is odd or even:

{assign var='n' value=5}
<html>
<body>
<p>{$n} {if $n % 2 == 0}{l s='is even'}{else}{l s='is odd'}{/if}</p>
</body>
</html>

Here’s the equivalent of a for loop in PHP that iterations through 1 to 5 and displays each number on a new line:

<html>
<body>
{section loop=5 name='loop'}
{$smarty.section.loop.iteration}<br />
{/section}
</body>
</html>

Here’s the equivalent of a foreach loop in PHP that reads an array of names and displays the index and value of each:

<html>
<body>
{foreach from=$names item='name' name='names'}
{$smarty.foreach.names.index}: {$name}<br />
{/foreach}
</body>
</html>

Finally, Smarty lets you use many of the basic PHP functions and even has plugins to create custom functions such as the truncate function PrestaShop uses.    For example, the following code creates a string, then checks if the string is longer than 10 characters, then truncates the string so only the first 8 characters are displayed and adds … on the end:

{assign var='string' value='This is a test string'}
<html>
<body>
{if $string|strlen > 10}{$string|truncate:8:'...'}{/if}
</body>
</html>

You can learn more by reading the Smarty documentation.

Now you know the programming languages used by PrestaShop and have resources to learn them.  Please let us know your experiences with the software in the resources in this article in the comments below, or tell us about the resources that you’ve used to learn PrestaShop development.

If you enjoyed this article, stay tuned for the next article “Where to Start to Become a PrestaShop Developer – Debugging – Part 3,” where you will learn how to debug PHP, Smarty, JavaScript and CSS.  You also might want to check out the previous article “Where to Start to Become a PrestaShop Developer – Software Every Developer Needs – Part 1.”

This is just one of the many tutorials to help you get your PrestaShop store up and running the easy way.  Along with this tutorial, you’ll find over 36 other tutorials on the installation, setup, and configuration of a PrestaShop store.  Check out PrestaShop 1.4 tutorials.

Adrian Nethercott is a web developer with more than three years of experience working with PrestaShop. His website Nethercott Constructions has free PrestaShop guides and sells PrestaShop modules.

Facebook 

If you enjoyed this article, get email updates (it's free).