Watch the screencast

Text Version

Open up Module.php, located in the classes/module/ folder. Reach the display method, and right at the very end, just before the return statement, add the following:

            if($result && _PS_MODE_DEV_ === true)
            {
                $tpl_path = $this->getTemplatePath($template);
                $result = '<!-- START ' . $tpl_path .' -->' . $result . '<!-- END ' . $tpl_path .' -->';    
            }

Save, make sure dev mode is enabled, then refresh the front office. Open up Chrome developer tools (or equivalent) and inspect the section you need of the template, you will see each module’s box wrapped with the corresponding template path

The post PrestaShop Debug tip: display template names and path in the front office appeared first on NemoPS.

I am pleased to announce that I just finished editing my new premium course, this time on PrestaShop Themes! Many merchants usually spend hundreds or thousands, to hire professionals  for basic modifications. With this course, anyone can learn to customize a PrestaShop template and save plenty of bucks!

The course has been released! Click on the image for more info about it.

The post PrestaShop Themes Crash Course – Released! appeared first on NemoPS.

Prestashop 1.7’s Homepage

Here is how PrestaShop will (likely) look like in 1.7:

The first thing we can notice is that the new template looks a lot more compact than the previous. In the header, they decided to take advantage of the extra space of the navigation bar, and stick the cart there as well. The top menu has been floated to the left, next to the logo, with the search bar presumably being part of it, instead of laying there as separate module (the top horizontal menu had an option to include a search bar).

The slider is still boxed, but we all hope there will be an option to let us make it full width.

There is not much to say about the products list in the homepage, since it looks to be a work in progress (we expect to see more info on hover, in any case).

The footer has been left untouched, with the only difference of the light color scheme against the previous dark one.

Prestashop 1.7’s Product View

The product page has gone through a diet as well. It switched from a 3-columns to a 2-columns layout for the top part.
The choice is nice, but I find it arguable to keep the tabs on a narrow column as well. Although I can see this has been done to allow images to display without scrolling buttons, it seldom happened to me, workinng with prestashop, to see a product having more than 8 images. That said, the Free shipping info box will hopefully be configurable; nice addition.

One File to style them all

Maxime Biloé announced that PrestaShop 1.7’s theme will compile everything into a single CSS file, and that this will happen for JS as well. Although good for reducing the HTTPS lookups and improving a page’s rendering speed, there are some potential issues to consider in doing so.

The first is that, being PrestaShop a variegated software that uses third party implementations, you cannot predict if any third party code will break the page rendering. Having them split into multiple files, you would be able not only to easily troubleshoot, but the only broken one would probably not so deadly affect everything as if it were in a single file. You might be familiar with this type of errors if you ever used CCC. A broken comment in one file is enough to kill the whole page, because of compression.

Hopefully, they will opt for a wiser division in groups, to help scalability and maintainability.

Bottom Line

Visually speaking, although I kind of like the new clean interface, the theme currently looks poor and aesthetically unappealing. PrestaShop 1.6’s template looked more professional and “full” in comparison. Being it still in development, we will hopefully see changes in this sense, as the release is still a few months ahead.

As a side not, you will notice PrestaShop’s pink is currently not in the color scheme. The Blue/gray scheme kind of makes it similar to OpenCart.

Notice this is not the Starter Theme, but actually based on it. Starter will be a skeleton that developers will use to build new PrestaShop Templates, instead of doing it from scratch

The post PrestaShop 1.7’s new Theme Preview appeared first on NemoPS.

Written by Cassie Blackburn

PrestaShop is one of the best e-Commerce platforms and it has undeniable advantages.
Firstly, it’s free and Opensource – any extra money saved never hurts when you run an online shop.
Secondly, it’s SEO friendly and multilingual. The latter is incredibly important when your audience speaks several languages.
Thirdly, PrestaShop doesn’t require much in the way of server resources and it’s extremely easy to learn. Consequently you don’t have to pay a lot for any kind of customization work, or, alternatively, you can even do it yourself. It is also light-weight, which is why PrestaShop is one of the best options in the case of someone who wants to create a website for a small store, but hasn’t dealt with coding before.
Apart from all that, you’ll always have access to a big and active PrestaShop community and be able to get answers to your questions.
Now that we’ve outlined the main advantages of this CMS, let’s see what the Web offers us when it comes to free PrestaShop themes.
We’ve chosen the latest and the most beautiful free PrestaShop themes from such providers as TemplateMonster, Leo Theme and Apollotheme.

1. Wheels And Tires

When speaking about structured designs, this template comes up first: modern looking and carefully designed, this free PrestaShop theme may provide a great basis for a car, interior, sport, fashion and many other online stores. Check it out to see if it can be adapted to your project.

Live Demo
Download

2. Free PrestaShop Theme for Book Website

‘Book Hangover’ is one more free PrestaShop template for an online store produced by TemplateMonster. Flat design, being one of the latest trends in web design, can become a key feature as to why your clients will keep coming back to your website. Besides, there is Parallax effect in the theme which adds depth.

Live Demo
Download

3.Ap Travel Theme

Image slider, hover effect, one step Add to cart and color scheme – these are the features which can help you create a perfect online shop. Apart from that, you can see ghost buttons at the bottom of the template.

Live Demo
Download

4.Ap Culinary Theme

One of the main rules of culinary themes is having the color red in its design. This one has it. Apart from that, if you have powerful imagery, you can create leverage from it – this template is illustrated with beautiful pictures, that will showcase your products in the best possible way.

Live Demo
Download

5. Leo Converse

If your aim is to create an online sports shop, you should check out this theme as well. It is responsive, so your website will look good regardless of the size of the gadget’s screen. Image slider and vertical top menu will help you make the display more effective.

Live Demo
Download

6.Ot Jewelry

One of the beautiful free PrestaShop themes is this one: a great choice for those who want to incorporate a good description of the product – a harmonious combination of imagery and text will create a memorable impact on the visitors.

Live Demo
Download

7. Leo T-Shirt Free PrestaShop Theme

A beautiful free PrestaShop theme, which can be a perfect fit for almost any online store. The light colored background provides a great contrast for product images – nothing superfluous and the viewer’s attention is drawn towards the things you sell. Apart from that, the top horizonal menu is one of the most commonly used and most effective features of online stores.

Live Demo
Download

8. Ap Office

This free theme creates an engaging impression due to the light design, flex and product list carousel, category pages etc. It can serve well for those who need to create a clothing, bag, shoe shop etc. And, as with all of the above and below mentioned themes, it is responsive.

Live Demo
Download

9. Free PrestaShop 1.5 Theme

The carefree design of this theme will emphasize the product you sell – the product and the product only. You can add as many categories to the menu as you wish, and showcase your products using an image slider.

Live Demo
Download

10. Leo Sport Shoes

If you need your template to be lightweight and modern – you should check out this free PrestaShop theme as well. PSD files are included and the images gradually get smaller as you get closer to the bottom of the theme, which makes a complete logical layout.

Live Demo
Download

Well, now that you’ve seen 10 free PrestaShop themes, you can start work on creating your own profitable online store website.
By the way, which theme of these ten do you like the most? Please feel free to mention in the comments below.

The post Guest Post: 10 Free PrestaShop Themes for Your Future Online Store appeared first on NemoPS.

Assigning variables to smarty from PHP

$this->context->smarty->assign('variablenameinsmarty', $myvalue); // you will be able to access this as {$variablenameinsmarty} in the template

// same as above, but in batch
$this->context->smarty->assign(array(
	'variablenameinsmarty' => $myvalue,
	'anothervariablenameinsmarty' => $myothervalue,
));

Creating translatable strings

{l s='This is my string'} // theme template
{l s='This is my string' mod='modulename'}// module template
{l s='There are %s errors' sprintf=[$account_error|@count]} // theme template with variable replacement
{l s='No file selected' js=1} // supposed to be used in a javascript script, only within addJsDef (see below)
{l s='Billing Address' pdf='true'} // only used within PDF templates

These are to be used whenever you want to create a translatable string in a template. After adding them, you can reach out the translations page in the back office and add them into other languages. “mod” ones will be found under “Installed Modules Translations”; “pdf” ones under PDF Translations; theme ones under Front Office Translations, choosing the specific template.

Adding javascript variable definitions

{addJsDef wishlistProductsIds=$wishlist_products}

{addJsDef mySliderCount=7}

{addJsDefL name='youhavelides'}{l s='You save Slides!' js=1}{/addJsDefL}

These are needed when you want to pass data from the template to any attached .js file. You will have to make sure to write any script inside a jquery ready statement if you load them in the header, or variables won’t be readily available. Notice how the first one uses the javascript variable name, while the language one sets it using name=”.

Example Usage

// will alert "You have slides!" in the current language
if(mySliderCount > 0)
	alert(youhavelides);

Displaying a formatted price

{convertPrice price=$price} // display Price in the current currency
{displayPrice price=$price currency=$id_currency} // specify the currency

These are used to format the price only. They will not take care of any conversion rate, even if the first one is named that way.

Example Usage

// default currency is $, id 2 is Euros
{convertPrice price=1} // $1.00
{displayPrice price=1 currency=2} // 1,00 €

Displaying a formatted date

{dateFormat date=$date full =1} // display a date formatted like specified in the back office

Example Usage

// chosen date format is dd/mm/yyyy H:i
{dateFormat date="2015-01-07 22:45:01" } // 07/01/2015
{dateFormat date="2015-01-07 22:45:01" full=1} // 07/01/2015 22:45

Getting a page Link

{$link->getPageLink('pagename', ssl, id_lang, "GET string or Array")}

Example Usage

// Gets a link for step 3 of the order process, with ssl
{$link->getPageLink('order', true, NULL, "step=3")}

// link to the contact us page
<a href="{$link->getPageLink('contact'}" title="{l s='Contact us'}">{l s='Contact us'}</a>

Getting a Product Image

{$link->getImageLink(link_rewrite, id_image, 'image_type')}

Example Usage

// gets the home_default image type, having a product as array
<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}"/>

Adding a new hook

{hook h='displaySomething'} // will process any hookDisplaySomething method
{hook h='displaySomething' parameter='my string'} // will pass a variable named "parameter" with value "my string" later available using "params['mystring']" in the hook method

Conclusion

This batch concludes our series on Useful Prestashop Functions. Bear in mind logic should be kept off the templates as much as possible, to preserve the MVC pattern (Prestashop is heading towards it with Prestashop 1.7 removing plenty of modifiers next year). Therefore, whenever possible, try using the PHP counterpart of these functions, preprocessing the output and only using template for displaying data.

Additional Resources

• Essential Prestashop Functions – Day 1
• Essential Prestashop Functions – Day 2
• Essential Prestashop Functions – Day 3
• Essential Prestashop Functions – Day 4

The post Essential Prestashop Functions – Day 5 appeared first on NemoPS.

Last week, I came across a really useful hook, almost by chance: displayOverrideTemplate. It’s not (of course) mentioned anywhere in the official Prestashop documentation, but it’s fundamental to anyone willing to extend/modify the current template without fearing to lose all these tweaks with the next upgrade.

It’s been around since Prestashop 1.5, given what the calling method states, inside the FrontController.php file:

	/**
	 * Returns the template corresponding to the current page.
	 * By default this method return false but could easily be overridden in a specific controller
	 *
	* @since 1.5
	* @return bool
	*/
	public function getOverrideTemplate()
	{
		return Hook::exec('DisplayOverrideTemplate', array('controller' => $this));
	}

At any rate, enough chit-chatting, it’s time to see the true power of this hook!

Example – Overriding the category page

In this example, we will use a simple module to override the category page. Download the project files above, and then place the ‘psoverridetemplatedemo’ folder in your Prestashop modules/ folder. It’s nothing fancy, it’s just a blank module that does absolutely nothing. We will add something to it right away: locate the install method, and register our fancy hook

	public function install()
	{
		if (!parent::install() ||
			!$this->registerHook('displayOverrideTemplate')
			)
			return false;
		return true;
	}
	

Install it. Then, to test that it really works, let’s add something SO invasive:

	public function hookDisplayOverrideTemplate($params)
	{
		die('here');
		// return dirname(__FILE__).'/views/templates/hook/skeleton.tpl';
	}

This should kill every single page of your store, displaying “here” instead. If not, check the registerHook method.

What should we now return from the hook? Not a template, as you might think, nor we will call smarty’s fetch method. We need to return a path to the template file we want to use. We have one in out module’s root (psoverridetemplatedemo.tpl), so let’s reference it here:

	public function hookDisplayOverrideTemplate($params)
	{
		return dirname(__FILE__).'/psoverridetemplatedemo.tpl';
	}

Save and refresh. Every page of your store should now have the center column blank. Why? Because there is nothing in the template file. Add some garbage test to try it out, and you will see it appearing in every page. Yes, but this is not so useful, how can we replace a specific template? In a previous tutorial on Target specific pages from a Prestashop Module’s Hook, I showed you how to get each page’s specific identifier using the following method:

$this->context->controller->php_self

If you recall the beginning of this article, we saw the Front Controller is passing the current controller object into the hook, which is then available to us for use within our method. The snippet I just mentioned therefore becomes:

$params['controller']->php_self;

Easy as that. Let’s override the category page only, for example:

	public function hookDisplayOverrideTemplate($params)
	{
		if ($params['controller']->php_self == 'category')
			return dirname(__FILE__).'/psoverridetemplatedemo.tpl';
	}

Save and refresh. The only overridden template will now be the category one! Sounds like a good deal. What about other pages? It’s easy enough to inspect each page’s name as follows:

	public function hookDisplayOverrideTemplate($params)
	{
		var_dump($params['controller']->php_self);
		//if ($params['controller']->php_self == 'category')
		//	return dirname(__FILE__).'/psoverridetemplatedemo.tpl';
	}

The page name will be shown at the top. There are some exceptions though.

Some pages simply don’t have any php_self assigned, and that statement would therefore cause trouble. To overcome, it’s enough to make sure it is assigned before comparing it to anything:

	public function hookDisplayOverrideTemplate($params)
	{
		if (isset($params['controller']->php_self) && $params['controller']->php_self == 'category')
			return dirname(__FILE__).'/psoverridetemplatedemo.tpl';
	}

And that’s it, you can target virtually every template for every controller with a page name now!

The post Prestashop: Upgrade-safe template modifications appeared first on NemoPS.

The $page_name variable

In Prestashop, every page has a name. Okay, sounds ridiculous put in this way. However, it simply means that each page of your Prestashop store has a unique identifier that can help you target that and no other page specifically when you want to modify the template?

It is utterly simple to know the name for each page. Reach the page you want, hit f12 to bring up the developer console of your browser and inspect the html source. Look for the tag and its ID, that’s the page’s name!

If you have a look at header.tpl, you’ll see where that name is pulling from as well:

<!-- <body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}  -->

Therefore, you can see we can target both the specific page id and use that $page_name variable in the template as well. We can therefore have 2 ways (actually 3, if you considered the mixed one), to bend Prestashop to our needs: hard-editing the tpl files, or targeting the page id from CSS.

Varying the column layout in Prestashop – the TPL way

For this first example, we will see how to remove all columns from the homepage, and leave the left one only in the CMS pages. This TPL-only way has its disadvantages, which we’ll discover soon enough.

Open your header.tpl file, and locate

				<div id="left_column" class="column grid_2 alpha">
					{$HOOK_LEFT_COLUMN}
				</div>

Note: I’m using the default template, yours might be different.

CHange it as follows

				{if $page_name != 'index'}
					<div id="left_column" class="column grid_2 alpha">
						{$HOOK_LEFT_COLUMN}
					</div>
				{/if}
				

Explanation: it simply means: if this is not the homepage, show me the left column. So, if we are currently viewing the home of our web store, that column won’t even be rendered. As soon as you refresh your homepage, and that only, your left column will be gone.

Now, we need to consider the center column’s width. In the default template, columns widths are defined by the so-called Prestashop grid, which is a 9-columns based wireframe system. Thus, if we want the center column to span across the entire site’s width in the homepage, we need to change its class to grid_9…but for the index only!

Look for

<div id="center_column" class=" grid_5">

And change it into

<div id="center_column" class="{if $page_name == 'index'}grid_9{else}grid_5{/if}">

Save&refresh. Your right column will be sent to next line. Again, for the homepage only. If we are not currently seeing the index, our center_column will still have a class of grid_5.

Right away, you can see the first issues that arise with this method. If you have custom modules which are set to a fixed width, or in any case are configured to span across the usual center column width, you’ll need to edit those too, and take the new with into account. This is also true for the featured products block as you can see the fifth element is stuck to the fourth. This happens because there is a variable set in homefeatured.tpl, which takes only 4 items per line. You can change it to account for the new size of course. And indeed, the slider up there needs bigger images!

Let’s get rid of the right column to complete our homepage. Open footer.tpl and change

				<div id="right_column" class="column grid_2 omega">
					{$HOOK_RIGHT_COLUMN}
				</div>

To

				{if $page_name != 'index'}
					<div id="right_column" class="column grid_2 omega">
						{$HOOK_RIGHT_COLUMN}
					</div>
				{/if}
				

There it is, homepage completed!

Moving onto the CMS pages layout, we can simply amend our previous changes and take the page_name ‘cms’ into account. So, to hide the right column:

				{if $page_name != 'index' AND $page_name != 'cms'}
					<div id="right_column" class="column grid_2 omega">
						{$HOOK_RIGHT_COLUMN}
					</div>
				{/if}
				

Then, to extend our center column, back to header.tpl:

<div id="center_column" class="{if $page_name == 'index'}grid_9{elseif $page_name == 'cms'}grid_7 omega{else}grid_5{/if}">
				

Explanation: alpha and omega. If you are wondering why I added ‘omega’ to this last block, instead of simply leaving grid_7 (which is, 7 columns over a total of 9, considering we still have the left column there), it’s because of margins. All blocks but grid_9 have a margin; adding alpha will kill the left margin, adding omega will kill the right one. This way, all blocks will fit into their space like puzzle pieces.

Varying the column layout in Prestashop – the CSS way

Using the previous method is certainly effective, and it’s okay on most pages. However, in some pages, like the checkout using one-page-checkout, it will simply fail. No matter what you’ll do, your center column will never cover the whole space. This is because on certain pages prestashop assigns a fixed width to the template. Here is an example taken from global.css

#order-opc #center_column {
	width: 757px;
}

As you can see, it has a fixed width. In addition, notice how we can actually target the specific page and change the width (and more) using css, since that ID is nothing but the $page_name. Let’s open up global.css located at themes/themename/css/. Look for the line I mentioned above. Now change it to

#order-opc #center_column {
	width: 980px;
}

Refresh, and you’ll see the center column taking up all the space all of a sudden. It’s then time to hide the right column. Note that this will simply hide it, and the actual html will still be parsed. Add this right after the previous modifications

#order-opc #right_column {
	display:none
}

There, the right column’s gone!

The mixed way

The first method we saw is cool since it will not render part of the template (though hooks will still be processed because they are assigned in a controller, perhaps a subject for some new tutorial? Let me know). However, as we saw it is useless in some pages. On the other hand, while it’s really easy to edit css, those blocks we hide are…uh, only hidden! What about going for a mixed way? You can try it yourself on the product page. Add the code to remove the left or right column (or both). Then, open up product.css and look for #pb-left-column and #pb-right-column. Change their size to account for the new space, but bear in mind their names are actually inverted!.

The post Specifying the number of columns for each Prestashop page appeared first on NemoPS.