Step 1: overriding the Layered Navigation Module (Optional – 1.6.0.11 and newer only)

If you are not using the latest Prestashop version, you can jump to step 2 as module overrides were not available before that, and it’s necessary to amend the module directly. If you are, reach the override/modules/ folder and create a new one inside it called blocklayered. Inside that, add a file named blocklayered.php and paste the following inside php tags:

 
if (!defined('_CAN_LOAD_FILES_'))
    exit;
 
class BlockLayeredOverride extends BlockLayered
{
 
 
}

We have just setup the base file for the override. Go ahead and erase the class_index.php located in the cache/ folder, so that the new file is loaded and we can start extending the module.

Step 2 – Adding code for a new hook

It’s given that no hook sits on top of the product listing, if you are using, like me, the default template. If you are not, you might want to check out the category.tpl file for any usable spot, to avoid adding another one.

We need to add a few lines of code to register a new hook, and allow the Layered Navigation block to stick there as well. First off, if you are using the override method, simply add the following to our new file:

 
	public function install()
	{
		if(parent::install() && $this->registerHook('categoryTop'))
			return true;
		else return false;
	}

Else, if you are not using the override method, simply amend the original install() of the blocklayered.php file, by adding the new hook registration as follows (see the fourth line “&& $this->registerHook(‘categoryTop’)”)

	public function install()
	{
		if (parent::install() && $this->registerHook('header')
		&& $this->registerHook('categoryTop')
		&& $this->registerHook('categoryAddition') && $this->registerHook('categoryUpdate') && $this->registerHook('attributeGroupForm')
		&& $this->registerHook('afterSaveAttributeGroup') && $this->registerHook('afterDeleteAttributeGroup') && $this->registerHook('featureForm')
		&& $this->registerHook('afterDeleteFeature') && $this->registerHook('afterSaveFeature') && $this->registerHook('categoryDeletion')
		&& $this->registerHook('afterSaveProduct') && $this->registerHook('productListAssign') && $this->registerHook('postProcessAttributeGroup')
		&& $this->registerHook('postProcessFeature') && $this->registerHook('featureValueForm') && $this->registerHook('postProcessFeatureValue')
		&& $this->registerHook('afterDeleteFeatureValue') && $this->registerHook('afterSaveFeatureValue') && $this->registerHook('attributeForm')
		&& $this->registerHook('postProcessAttribute') && $this->registerHook('afterDeleteAttribute') && $this->registerHook('afterSaveAttribute'))
		{
			if (version_compare(_PS_VERSION_, '1.6.0', '>=') === true)
			{
				// Hook the module either on the left or right column
				$theme = new Theme(Context::getContext()->shop->id_theme);
				if ((!$theme->default_left_column || !$this->registerHook('leftColumn'))
					&& (!$theme->default_right_column || !$this->registerHook('rightColumn')))
				{
					// If there are no colums implemented by the template, throw an error and uninstall the module
					$this->_errors[] = $this->l('This module need to be hooked in a column and your theme does not implement one');
					parent::uninstall();
					return false;
				}
			}
			else
				$this->registerHook('leftColumn');

			Configuration::updateValue('PS_LAYERED_HIDE_0_VALUES', 1);
			Configuration::updateValue('PS_LAYERED_SHOW_QTIES', 1);
			Configuration::updateValue('PS_LAYERED_FULL_TREE', 1);
			Configuration::updateValue('PS_LAYERED_FILTER_PRICE_USETAX', 1);
			Configuration::updateValue('PS_LAYERED_FILTER_CATEGORY_DEPTH', 1);
			Configuration::updateValue('PS_LAYERED_FILTER_INDEX_QTY', 0);
			Configuration::updateValue('PS_LAYERED_FILTER_INDEX_CDT', 0);
			Configuration::updateValue('PS_LAYERED_FILTER_INDEX_MNF', 0);
			Configuration::updateValue('PS_LAYERED_FILTER_INDEX_CAT', 0);
			Configuration::updateValue('PS_ATTRIBUTE_ANCHOR_SEPARATOR', '-');

			$this->rebuildLayeredStructure();
			$this->buildLayeredCategories();

			$products_count = Db::getInstance()->getValue('SELECT COUNT(*) FROM `'._DB_PREFIX_.'product`');

			if ($products_count < 20000) // Lock template filter creation if too many products
				$this->rebuildLayeredCache();

			self::installPriceIndexTable();
			$this->installFriendlyUrlTable();
			$this->installIndexableAttributeTable();
			$this->installProductAttributeTable();

			if ($products_count < 5000) // Lock indexation if too many products
			{
				self::fullPricesIndexProcess();
				$this->indexUrl();
				$this->indexAttribute();
			}

			return true;
		}
		else
		{
			// Installation failed (or hook registration) => uninstall the module
			$this->uninstall();
			return false;
		}
	}

Then, simply add the following new hooking method to your blocklayered file (whichever you are modifying)

	public function hookCategoryTop($params)
	{
		return $this->hookLeftColumn($params);
	}

Before proceeding further, make sure you actually reset the Layered Navigation module from the modules section of the back office, so it register the new hook (or uninstall, then install again if that doesn’t work).

Adding the new hook to the category.tpl template file

We will be using the new method to add hooks in Prestashop, introduced since version 1.5. Open up the category.tpl file of your template, locate a suitable spot and paste the following in:

{hook h="categoryTop"}

Tip: I suggest you do it right after the {if $products} statement, before the product list. Here is where I did it, on a default-bootstrap template on 1.6.0.11:

...

{if $products}
            {hook h="categoryTop"}
			<div class="content_sortPagiBar clearfix">
            	<div class="sortPagiBar clearfix">
            		{include file="./product-sort.tpl"}

...

Save and test, the module should be popping out in the middle column:

What to do if it doesn’t? First, make sure that your template has been recompiled: reach Advanced Parameters > Performance in the back office, and set Template Compilation to Recompile templates if the files have been updated at least, or even Force Compile. Refresh the Front office afterwards.

If you still don’t see anything, there might be a typo in the hook you register. Check all names, then try killing the script on the hooking method as follows:

	public function hookCategoryTop($params)
	{
		die('I am here!');
		return $this->hookLeftColumn($params);
	}

If you see the page rendering interrupted by the “I am here” text, the hook should work, check that blocklayered is properly configured. If not, check, once more, for typos in function names, registrations and calls. If you are using the override and it still won’t work after clearing cache, switch to core modifications.

Step 3 – Making it work

If you try out the module now, having it hooked to both either of the side columns and to the center one, you’ll be disappointed to notice it won’t work. Why? A javascript error will be triggered upon click.

To fix it, simply unhook the Layered Navigation from the side columns, leaving only one instance of it running in the center one. Reach Modules > positions and look the the module’s instances in displayLeftColumn and displayRightColumn. Unhook both, just in case.

Beauty Pass

There is no need to say a huge list of features/attributes/whatever shown at the very top of the product list will force people to scroll down to see products. It’s therefore better to give the new block some better styling. Open up themes\default-bootstrap\css\modules\blocklayered\blocklayered.css (or the one of your template, or create it if it’s not there).

At the cery end, add:

#center_column .layered_filter{
  float:left;
  width: 50%;
}
#center_column .layered_filter:nth-child(2n) {
  clear:left;
}

It’s just some basic styling to shorten the height, but it will give you the right pointer to customize it further.

We’re done!

The post Hook the Prestashop Layered Navigation Block to the Center Column 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.