NemoPS » Theming

Manufacturers in alphabetical list in PrestaShop 1.7

Nemo — Tue, 07 Feb 2017 11:50:04 +0000

As we did for PrestaShop 1.5, let’s see how to turn the boring manufacturer list into an alphabetical, fancy one, for PrestaShop 1.7

Subscribe Post Scriptum's Youtube Channel

Full Code to display manufacturers in an alphabetical list

 
      
      
        #
        A
        B
        C
        D
        E
        F
        G
        H
        I
        J
        K
        L
        M
        N
        O
        P
        Q
        R
        S
        T
        U
        V
        W
        X
        Y
        Z        
      

  
      
          {$current_letter = '#'}
          {foreach from=$brands item=brand}
            {$first_letter = $brand.name|substr:0:1}
            {if $current_letter != $first_letter}
              {if !$first_letter|in_array:['0','1','2','3','4','5','6','7','8','9']}
                {$current_letter = $first_letter|upper}
                
              
              {/if}
              
              
                {$current_letter|upper}
                
            {/if}
            
              {$brand.name}
            
          {/foreach}



.all-brands .letter-select li {
	float:left;
}

.all-brands .letter-select a {
	padding: 11px;
	font-weight: bold;
	font-size: 14px;
	display:block;
}

.all-brands .box-letter .box-title {
	width: 100%;
	display:block;
	background: #ccc;
	font-weight: bold;
	height: 40px;
	line-height: 40px;
	padding-left: 10px
}

.all-brands .box-letter .letter-content {
	line-height: 32px;
	padding-left: 10px
}

.all-brands .box-letter p {
	margin-bottom: 0;
	float: left;
	width: 25%;
}

The post Manufacturers in alphabetical list in PrestaShop 1.7 appeared first on NemoPS.

Adding images to the top menu in PrestaShop 1.7

Nemo — Tue, 17 Jan 2017 11:42:39 +0000

In this tutorial we will take back images for the PrestaShop top menu, that had been removed in 1.7

Subscribe Post Scriptum's Youtube Channel

The post Adding images to the top menu in PrestaShop 1.7 appeared first on NemoPS.

Adding subcategories to the category page in PrestaShop 1.7

Nemo — Mon, 02 Jan 2017 11:48:34 +0000

Have you been troubled by the absence of subcategories, in PrestaShop 1.7’s category pages? Let’s take them back in a few, simple steps!

Long time PrestaShop users have always been able to display subcategories in category pages, whatever theme they used. However, for some reason PrestaShop 1.7 doesn’t seem to have any subcategory showing on page with the classic (standard) theme, making it harder for users to navigate through the catalog, if the merchant chose not to use the side category block or layered navigation. Taking them back is fortunately easy enough, and can be done by almost just cloning the code from the 1.6 default-bootstrap template.
The files we need to edit are category.tpl and theme.css, so let’s get to it!

Adding the subcategories loop to PrestaShop 1.7’s category template

In the classic theme, let’s open up category.tpl, located in themes\classic\templates\catalog\listing, it should look like the following:

{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
    
      {$category.name}
      {if $category.description}
        {$category.description nofilter}
        
          
        
      {/if}
    
    
      {$category.name}
    
{/block}

What we want to do is append the subcategory loop inside the block, just before it closes, so after the div containing the category title. The $subgcategories variable is already assigned to the template, much like in PrestaShop 1.6, and it’s ready to be used:



  {l s='Subcategories'}
  
  	{foreach from=$subcategories item=subcategory}
  	{$subcategory.name}
	{/foreach}

The code we just added is pretty much useless at this stage, as it just prints out each subcategory’s name, but let’s first see if it works. Save and refresh any category having children, and subcategories should pop up like this:

Nice! Let’s not make our effort useful by linking them to the proper pages



  {l s='Subcategories'}
  
  	{foreach from=$subcategories item=subcategory}
  	
  		{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}
  	
	{/foreach}

Explanation: I copied and pasted the code from 1.6 for the category title, simply wrapping the name in an h5 tag, then an anchor pointing to the proper page. To get the url, we can still use the $link class, and its getCategoryLink method. I also left in the truncate modifier for the name, which cuts it to the length of 25 characters, and lastly escaped it.

At this point they are at least useful! But why don’t we go ahead and add the image as well? Let’s do it right before the h5:



  {l s='Subcategories'}
  
  	{foreach from=$subcategories item=subcategory}
  	
  		
          	
        
  		{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}
  	
	{/foreach}

Explanation: once more, we are using the link class’s method to get the correct url pointing to the subcategory; then, we simply add an img tag, pointing directly to the category images folder, as each of them has an image named with the corresponding ID. Careful though! We have no way to check if the category has an image or not, and since the default method this theme uses is broken (heh.), you might as well get away without images.
At this point you should have something like this, depending on your images’ size:

It needs some styling, so let’s see what we can do with css!

Styling subcategories in PrestaShop 1.7

Open up theme.css, located in themes\classic\assets\css. At the very end, let’s append our css code:

.subcategory-heading {
  font-weight: bold;
}
#subcategories ul li {
  float: left;
  width: 25%;
  text-align: center;
}
#subcategories ul li img {
  margin-bottom: 10px;
}

I preferred staying on a simple styling here, and of course you will need to adapt the width depending on your category image size. Also, you might want to add media queries to make sure it displays well at smaller resolutions.
Save and refresh, we are done!

The post Adding subcategories to the category page in PrestaShop 1.7 appeared first on NemoPS.

Displaying the EAN/JAN barcode in PrestaShop’s product page

Nemo — Thu, 14 Jan 2016 10:49:33 +0000

In this tutorial we will learn how to display the EAN13 or JAN barcode field in product pages in PrestaShop.

* You can apply the same process to the UPC barcode, if that is the one you need, just by changing every occurrence of ean13 to upc

1 – Amending the product.tpl file

The first, obvious step is to modify the product page template. If you are not using Attribute Combinations, this is actually the only step you need to complete!

Therefore, open up your theme’s product.tpl, and decide where you want to add the field. Above or below the reference (or instead of it) might be a good spot.

ean13) || !$product->ean13} style="display: none;"{/if}>
	{l s='Ean13:'} 
	ean13) && $product->ean13} content="{$product->ean13}"{/if}>{$product->ean13|escape:'html':'UTF-8'}

Save and refresh to see the field pop up where you placed it. As mentioned above, if you are not using product combinations, you can stop here. Otherwise, there are a couple of other modifications you need to do.

2 – Getting the new field for combinations

In order to display the proper ean when changing attributes, having each combination its own, we need to ensure the field is assigned to the javascript that handles the page update on select. Sadly, PrestaShop only grabs a limited number of fields with the default combinations query, and we therefore need to override/modify both the Product class and controller.

Extending the Product Plass in PrestaShop

Create a new file named Product.php inside override/classes, that will serve as Product class override. Begin by writing some standard override code:

class Product extends ProductCore
{

}

We want to extend the getAttributesGroups method. Mine, grabbed from a clean 1.6.1.2 version, looks like this:

    public function getAttributesGroups($id_lang)
    {
        if (!Combination::isFeatureActive()) {
            return array();
        }
        $sql = 'SELECT ag.`id_attribute_group`, ag.`is_color_group`, agl.`name` AS group_name, agl.`public_name` AS public_group_name,
					a.`id_attribute`, al.`name` AS attribute_name, a.`color` AS attribute_color, product_attribute_shop.`id_product_attribute`,
					IFNULL(stock.quantity, 0) as quantity, product_attribute_shop.`price`, product_attribute_shop.`ecotax`, product_attribute_shop.`weight`,
					product_attribute_shop.`default_on`, pa.`reference`, product_attribute_shop.`unit_price_impact`,
					product_attribute_shop.`minimal_quantity`, product_attribute_shop.`available_date`, ag.`group_type`
				FROM `'._DB_PREFIX_.'product_attribute` pa
				'.Shop::addSqlAssociation('product_attribute', 'pa').'
				'.Product::sqlStock('pa', 'pa').'
				LEFT JOIN `'._DB_PREFIX_.'product_attribute_combination` pac ON (pac.`id_product_attribute` = pa.`id_product_attribute`)
				LEFT JOIN `'._DB_PREFIX_.'attribute` a ON (a.`id_attribute` = pac.`id_attribute`)
				LEFT JOIN `'._DB_PREFIX_.'attribute_group` ag ON (ag.`id_attribute_group` = a.`id_attribute_group`)
				LEFT JOIN `'._DB_PREFIX_.'attribute_lang` al ON (a.`id_attribute` = al.`id_attribute`)
				LEFT JOIN `'._DB_PREFIX_.'attribute_group_lang` agl ON (ag.`id_attribute_group` = agl.`id_attribute_group`)
				'.Shop::addSqlAssociation('attribute', 'a').'
				WHERE pa.`id_product` = '.(int)$this->id.'
					AND al.`id_lang` = '.(int)$id_lang.'
					AND agl.`id_lang` = '.(int)$id_lang.'
				GROUP BY id_attribute_group, id_product_attribute
				ORDER BY ag.`position` ASC, a.`position` ASC, agl.`name` ASC';
        return Db::getInstance()->executeS($sql);
    }

Copy and paste your own inside the override, then add another column to the SELECT statement, right after ag.`group_type`: , pa.`ean13`

Extending the Product Controller in PrestaShop

Create and initialize a file called ProductController.php inside override/controllers/front.

class ProductController extends ProductControllerCore
{

}

This time we have to copy the whole assignAttributesGroups method, so make sure you really grab yours from the original ProductController.
After pasting it, locate the following snippet

$combinations[$row['id_product_attribute']]['reference'] = $row['reference'];

Right after it, add

$combinations[$row['id_product_attribute']]['ean13'] = $row['ean13'];

Save, then reach cache/ and erase the class_index.php file, so that the overrides take place

Step 3 – displaying the EAN 13 field with Javascript

So far, so good. The very last thing we need to do it modifying product.js, located inside the theme folder, /js/, in order for the field to be displayed for the current combination, and to change when selecting attributes. Make sure the combinations you select have the field filled in; otherwise you might get misleading results.

The first block of code to locate is the following, around line 93 in PrestaShop 1.6.1.2:

combinationsJS[k]['reference'] = combinations[i]['reference'];

I am sure you can already bet what we need to add:

combinationsJS[k]['ean13'] = combinations[i]['ean13'];

Then, around line 427

selectedCombination['reference'] = combinations[combination]['reference'];
// add the following
selectedCombination['ean13'] = combinations[combination]['ean13'];

Lastly, the very code that acts on the switch:

	if (selectedCombination['reference'] || productReference)
	{
		if (selectedCombination['reference'])
			$('#product_reference span').text(selectedCombination['reference']);
		else if (productReference)
			$('#product_reference span').text(productReference);
		$('#product_reference:hidden').show('slow');
	}
	else
		$('#product_reference:visible').hide('slow');

Right after, add

	if (selectedCombination['ean13'] || productean13)
	{
		if (selectedCombination['ean13'])
			$('#product_ean13 span').text(selectedCombination['ean13']);
		else if (productean13)
			$('#product_ean13 span').text(productean13);
		$('#product_ean13:hidden').show('slow');
	}
	else
		$('#product_reference:visible').hide('slow');

We do not obviously have that productean13 variable. That needs to be added to product.tpl. So, back to it, locate

{addJsDef productReference=$product->reference|escape:'html':'UTF-8'}

And add

{addJsDef productean13=$product->ean13|escape:'html':'UTF-8'}

Right after that.

Save and refresh, we are done!

The post Displaying the EAN/JAN barcode in PrestaShop’s product page appeared first on NemoPS.

Displaying all Categories of a Product in PrestaShop

Nemo — Wed, 16 Dec 2015 13:13:03 +0000

In this quick tip we will extend the Product Controller and template, and display all categories a product belongs to, in PrestaShop.

Watch the screencast

Subscribe Post Scriptum's Youtube Channel

The post Displaying all Categories of a Product in PrestaShop appeared first on NemoPS.

Displaying more Supplier information on the Product Page in PrestaShop

Nemo — Wed, 18 Nov 2015 10:41:33 +0000

Displaying more information about a product’s Supplier, directly on the product page, is quite easy in PrestaShop. It only needs an override and a tiny modification to the product template.

Overriding the Product Controller

Unless you want to hard-modify the original ProductController, you would need an override to assign all the necessary Supplier data to your product page.

Create a new file in override/controllers/front, and name it ProductController.php. Open it up and add some generic override code inside php tags:

class ProductController extends ProductControllerCore
{

}

We have to override the initContentMethod

class ProductController extends ProductControllerCore
{
	public function initContent()
	{
		parent::initContent();
	}
}

Make sure you call the parent at the very beginning of it, then add the following inside:

if($this->product->id_supplier)
{
	
	$id_supplier_address = Address::getAddressIdBySupplierId($this->product->id_supplier);
	$supplier_address = new Address($id_supplier_address);
}

First off, we are checking the current product has a supplier. Then, we need its address id, which we use to instantiate a new Address object that contains all of the information we seek.

At this point, we can simply assign all we want to the template:

if (Validate::isLoadedObject($supplier_address))
				{
					$this->context->smarty->assign(array(
						'supplier_country'=>  $supplier_address->country,
						'supplier_company'=>  $supplier_address->company,
						'supplier_address1'=>  $supplier_address->address1,
						'supplier_postcode'=>  $supplier_address->postcode,
						'supplier_city'=>  $supplier_address->city,
						'supplier_phone'=>  $supplier_address->phone,
						'supplier_state' => State::getNameById($supplier_address->id_state),
						'supplier_vat_number'=>  $supplier_address->vat_number,
					));
				}

As an extra measure, we make sure the loaded address object is valid and exists

When you’re done modifying the file, reach the cache/ folder and erase class_index.php

Amending the product template

Now we are ready to display our data. Open product.tpl, located in your theme’s folder. You can choose any spot, I decided to go for the area below the social links in the center column.

			{if $product->id_supplier}
				{$product->supplier_name}
				
					{$supplier_address1}
					{$supplier_postcode}
					{$supplier_city}, {$supplier_state}
					{$supplier_country}
					{if $supplier_vat_number}
						{$supplier_vat_number}
					{/if}
				

			{/if}

I am obviously checking if this product has a supplier, otherwise those variables would not be assigned. Save and refresh, you might need to clear cache in the back office (Advanced Parameters, Performance). We’re done!

The post Displaying more Supplier information on the Product Page in PrestaShop appeared first on NemoPS.

Product page tabs like 1.5 on Prestashop 1.6

Nemo — Wed, 15 Jul 2015 09:15:34 +0000

Have you been missing the traditional product page tabs in the new Prestashop 1.6 Template? If so, see how to easily take them back.

Let’s get some Prestashop 1.5 template code

To start off, get some 1.5 template code and drop it into our 1.6. I chose 1.5.6.2 as it’s the latest 1.5 so far. This is how it looks like, you can simply copy/paste it:

{if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments) || isset($product) && $product->customizable}

	
		{if $product->description}{l s='More info'}{/if}
		{if $features}{l s='Data sheet'}{/if}
		{if $attachments}{l s='Download'}{/if}
		{if isset($accessories) AND $accessories}{l s='Accessories'}{/if}
		{if isset($product) && $product->customizable}{l s='Product customization'}{/if}
		{$HOOK_PRODUCT_TAB}
	
	
	{if isset($product) && $product->description}
		
		{$product->description}
	{/if}
	{if isset($features) && $features}
		
		
		{foreach from=$features item=feature}
            {if isset($feature.value)}
			    {$feature.name|escape:'htmlall':'UTF-8'} {$feature.value|escape:'htmlall':'UTF-8'}
            {/if}
		{/foreach}
		
	{/if}
	{if isset($attachments) && $attachments}
		
		{foreach from=$attachments item=attachment}
			{$attachment.name|escape:'htmlall':'UTF-8'}
{$attachment.description|escape:'htmlall':'UTF-8'}
		{/foreach}
		
	{/if}
	{if isset($accessories) AND $accessories}
		
		
			
				
					
					{foreach from=$accessories item=accessory name=accessories_list}
						{if ($accessory.allow_oosp || $accessory.quantity_all_versions > 0 || $accessory.quantity > 0) AND $accessory.available_for_order AND !isset($restricted_country_mode)}
							{assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)}
							
								
									{$accessory.name|escape:'htmlall':'UTF-8'}
									{if $accessory.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE} - {if $priceDisplay != 1}{displayWtPrice p=$accessory.price}{else}{displayWtPrice p=$accessory.price_tax_exc}{/if}{/if}
								
								
									getImageLink($accessory.link_rewrite, $accessory.id_image, 'medium_default')|escape:'html'}" alt="{$accessory.legend|escape:'htmlall':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" />
									
										{$accessory.description_short|strip_tags|truncate:400:'...'}
									
									 
								
								
								
									{l s='View'}
									{if !$PS_CATALOG_MODE && ($accessory.allow_oosp || $accessory.quantity > 0)}
									{l s='Add to cart'}
									{/if}
								
								
							
						{/if}
					{/foreach}
					
				
			
		
	{/if}

	
	{if isset($product) && $product->customizable}
		
			
				
					{l s='After saving your customized product, remember to add it to your cart.'}
					{if $product->uploadable_files}
{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
				
				{if $product->uploadable_files|intval}
				
					{l s='Pictures'}
					
						{counter start=0 assign='customizationField'}
						{foreach from=$customizationFields item='field' name='customizationFields'}
							{if $field.type == 0}
								{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
									{if isset($pictures.$key)}
									
										
										
											
										
									
									{/if}
									
										{if !empty($field.name)}{$field.name}{else}{l s='Please select an image file from your computer'}{/if}{if $field.required}^*{/if}
										
									
								
								{counter}
							{/if}
						{/foreach}
					
				
				{/if}
				{if $product->text_fields|intval}
				
					{l s='Text'}
					
					{counter start=0 assign='customizationField'}
					{foreach from=$customizationFields item='field' name='customizationFields'}
						{if $field.type == 1}
						
							{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field} {if !empty($field.name)}{$field.name}{/if}{if $field.required}^*{/if}
							{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}
						
						{counter}
						{/if}
					{/foreach}
					
				
				{/if}
				
					
					
					
					
				
			
			^* {l s='required fields'}
		
	{/if}

	{if isset($HOOK_PRODUCT_TAB_CONTENT) && $HOOK_PRODUCT_TAB_CONTENT}{$HOOK_PRODUCT_TAB_CONTENT}{/if}
	

{/if}

Copy the previous code. Then, open up product.tpl, which you can find in the theme’s folder, and locate this line:

{if isset($features) && $features}

Right before that, paste in the 1.5 template code. We will need to make minor adjustments to it, but before diving deep into coding, let’s comment out the 1.6 code.
Comment out everything from here:

{if isset($features) && $features}

To right before

{if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if}

The result should be as follows:

		{*if isset($features) && $features}
			
			
				{l s='Data sheet'}
				
					{foreach from=$features item=feature}
					
						{if isset($feature.value)}
						
						{/if}
					
					{/foreach}
				{$feature.name|escape:'html':'UTF-8'}
						{$feature.value|escape:'html':'UTF-8'}
			
			


// WHOLE CODE BLOCK HERE...



					
				
			
			
		{/if*}
		{if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if}

{$feature.name\|escape:'html':'UTF-8'}	{$feature.value\|escape:'html':'UTF-8'}

With the whole block commented out. Then, comment out what comes after the product footer hook as well


		{*if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments) || isset($product) && $product->customizable}
			{if isset($attachments) && $attachments}
	

		// WHOLE CODE BLOCK HERE...

				^* {l s='required fields'}
			
			
			{/if}
		{/if*}

Pay extra attention to this step, there are a bunch of IF statements at the end of the block, which might cause a bad error if not commented out in the right place.

Adapting the code

At this point, we need to adapt a couple of sections, to make sure they are compatible with 1.6. We will simply examine each section and replace the content with its newer counterpart when needed.

The first block is the product description, and there is really nothing to change here, as it’s the same across the two templates.

Features (data sheet) is another one that can be left as it is.

THe following one would be attachments, looking like this in the 1.5 snippet:

{foreach from=$attachments item=attachment}
	{$attachment.name|escape:'htmlall':'UTF-8'}
{$attachment.description|escape:'htmlall':'UTF-8'}
{/foreach}

Let’s compare it to the 1.6 version:

{foreach from=$attachments item=attachment name=attachements}
	{if $smarty.foreach.attachements.iteration %3 == 1}{/if}
		
			{$attachment.name|escape:'html':'UTF-8'}
			{$attachment.description|escape:'html':'UTF-8'}
			
				
				{l s="Download"} ({Tools::formatBytes($attachment.file_size, 2)})
			
			
		
	{if $smarty.foreach.attachements.iteration %3 == 0 || $smarty.foreach.attachements.last}{/if}
{/foreach}

Replacing it sounds like a good idea, so go ahead and do it. Simply paste over everything inside the foreach (make sure you also add the name=attachments part!).

Accessories is another one we need to replace, so delete everything within the condition:

	{if isset($accessories) AND $accessories}
		
		

			// Delete everything inside
		
	{/if}

Still making sure to retain the #idTab4 div

The last block of the 1.5 template concerns customizable data, and it’s better to replace the whole content here as well. Therefore, once more:

{if isset($product) && $product->customizable}
	
		// Delete everything inside

	
{/if}

Remove everything inside that div with idTab10 as ID.

We should be done…almost! There is a leftover of the 1.6 section, Pack Items, which used to be elsewhere in 1.5. If you don’t want it to be part of tabbed data, you can simply uncomment the section as it is. Otherwise, read on.

Dealing with the Pack Items block

We cannot simply copy and paste the pack items block, as that would result in a div having no parent link to call it among tabs. The first thing we therefore have to do is add a link pointing to it, in the tabs navigation bar:

	
		{if $product->description}{l s='More info'}{/if}
		{if $features}{l s='Data sheet'}{/if}
		{if $attachments}{l s='Download'}{/if}
		{if isset($accessories) AND $accessories}{l s='Accessories'}{/if}
		{if isset($product) && $product->customizable}{l s='Product customization'}{/if}
		{if isset($packItems) && $packItems|@count > 0}{l s='Pack Items'}{/if}
		{$HOOK_PRODUCT_TAB}

As you can see, I added a whole new line to handle the pack tab, which is referencing to a (still non existing) div with the id #blockpack. You can really choose any ID you want here, just making sure it matches in the following step.

Let’s not scroll back after the customization block:

	{/if}

	{if isset($HOOK_PRODUCT_TAB_CONTENT) && $HOOK_PRODUCT_TAB_CONTENT}{$HOOK_PRODUCT_TAB_CONTENT}{/if}

Right before {if isset($HOOK_… } but after that closing {/if} (which was the customization condition), so in that only one empty line, add the following:

	{if isset($packItems) && $packItems|@count > 0}
		
			{include file="$tpl_dir./product-list.tpl" products=$packItems}
		
	{/if}

Here is how it should look

{/if}
{if isset($packItems) && $packItems|@count > 0}
	
		{include file="$tpl_dir./product-list.tpl" products=$packItems}
	
{/if}
{if isset($HOOK_PRODUCT_TAB_CONTENT) && $HOOK_PRODUCT_TAB_CONTENT}{$HOOK_PRODUCT_TAB_CONTENT}{/if}

You can now breathe. The worst part is done. Save and refresh, you should have a working tabs system, even if navigation links are stack one on top of the other. Let’s give it some style!

Styling Tabs in the Product page

There is not much to do at this point. Open up product.css, located in the theme folder, css/, and paste in the following


#more_info_tabs li {
  float:left;

}

#more_info_tabs li a {
  padding: 0 20px;
  color:white;
  line-height: 40px;
  height: 40px;
  display:block;
  background: #555;
}

#more_info_tabs li a:active {text-decoration:none;}
#more_info_tabs li a.selected {
  background:black;
  text-decoration:none;
}

I gave it some generic styling to have them look like tabs, so feel free to expand over the tutorial and make it prettier! We’re done!

The post Product page tabs like 1.5 on Prestashop 1.6 appeared first on NemoPS.

Adding a datepicker to Prestashop Customization Fields

Nemo — Mon, 13 Apr 2015 10:20:36 +0000

In this quick tip we will see how to enable the jquery date picker for Prestashop customization fields

Watch the screencast

Subscribe Post Scriptum's Youtube Channel

The post Adding a datepicker to Prestashop Customization Fields appeared first on NemoPS.

Hook the Prestashop Layered Navigation Block to the Center Column

Nemo — Wed, 11 Feb 2015 09:05:46 +0000

Being one of the most frequently asked questions on the official board, in this quick tip we will see how to hook the layered navigation module to the center column, above the product list/grid in Prestashop.

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"}
			
            	
            		{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.

Prestashop: Upgrade-safe template modifications

Nemo — Wed, 03 Dec 2014 09:10:33 +0000

If you have ever been frustrated because your template modifications got lost after upgrading, here is the final, bulletproof solution for upgrade-safe prestashop template modifications (with overrides!).

Download Project Files

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.