Specifying the Number of Columns for Each PrestaShop Page

In today’s tutorial we will see how to specify which columns to show for each page in our PrestaShop store.

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!

Inspect the page name in Prestashop

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!

After changing the tpl grid class in Prestashop

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!

Need Prestashop Modules? Have a look at my Prestashop Addons Store!

Looking for quality PrestaShop Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , | Posted under PrestaShop | RSS 2.0

Author Spotlight

Fabio Porta

Fabio Porta

Fabio has been involved in web development and design since 2005, when launched his first website at the age of 16. He’s now highly skilled in both client and server side development, along with design, and since August 2012 runs a successful website about PrestaShop tutorials and Prestashop Modules called Nemo’s Post Scriptum, at http://nemops.com

Leave a Reply

Your email address will not be published. Required fields are marked *


4 × = 8

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>