NemoPS » product

Display a “Bought product” label in PrestaShop

Nemo — Mon, 05 Sep 2016 08:30:53 +0000

In today’s tutorial we will learn how to add a “bought product” notification on the PrestaShop product page, much like Amazon does.

Creating a ProductController override in PrestaShop

The cleanest and standard compliant method for assigning the proper variables in PrestaShop, is to use a controller. We need to add content to the product page, so the one we are interested in is the ProductController. Additionally, in order to make sure our modification is upgrade-safe, we need to use an override instead of modifying the original.

Let’s get started!

Create a new file inside override/controllers/front/ and name it ProductController.php

Open it up, and within php tags add the following:


Class ProductController extends ProductControllerCore
{

}

We want to extend the initContent() method, so let’s do it:


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

We are calling the parent’s initContent as well, to make sure all the needed variables are loaded. At this point, before the parent is called, let’s first check if the current user is a registered customer, as we will never be able to tell what a guest has bought:


Class ProductController extends ProductControllerCore
{
	public function initContent()
    {

    	if($this->context->customer->id) // only if logged in
        {
			$bought_products = $this->context->customer->getBoughtProducts(); // only valid orders
        }
        parent::initContent();
    }
}

If it is, we get all the products he bought. Please notice only valid(paid) orders are considered. If you wish to include them all, you must remove the condition “valid = 1″ in the getBoughtProducts method, Customer class.

Now let’s cycle through them. If the current product’s id is matched, we assign a date variable to the template:

    if($this->context->customer->id) // only if logged in
    {
        $bought_products = $this->context->customer->getBoughtProducts(); // only valid orders
        if($bought_products)
        {
            foreach ($bought_products as $prod) {

                if($prod['product_id'] = $this->product->id)
                {
                    $this->context->smarty->assign(array(
                        'bought_on'=> $prod['date_add']
                    ));
                }
            }
        }
    }

We are done with php, the next step will be showing our custom text in the product.tpl file. Before proceeding, make sure to erase your class_index.php file, located in the cache/ folder.

Adding a bought product text to the product page

Open up product.tpl, located in the theme folder. Please notice your code will be different if you use a custom template, as I am using default-bootstrap for this demonstration. I decided to add the info box at the top of the page, above the product image.
If you want to pick the same spot, locate the div with class pb-left-column, and add the following right before it:

		{if isset($bought_on)}
			
				
					{l s='You purchased this product on'} {dateFormat date=$bought_on}
					
			
		{/if}

Save and refresh, we are done! You should see something like this:

The post Display a “Bought product” label in PrestaShop 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.

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 Previous and Next navigation buttons to the Prestashop product page

Nemo — Tue, 30 Sep 2014 07:57:22 +0000

To allow an easier navigation through categories, let’s add Previous and Next product navigation buttons to each product page in Prestashop

Prestashop version: 1.5, 1.6

Download Project Files

Please notice project files are from 1.6.0.9

Introduction

Although I only tested this code on Prestashop 1.6, it should equally work on 1.5 as the database structure didn’t change. That said, we need to edit/extend the following files:

classes/Product.php (to grab previous and next products)
controllers/front/ProductController.php (to assign links to the template)
themes/default-bootstrap/product.tpl (to add the buttons)

As always, I recommend overriding whenever possible; therefore, we will extend the first 2 files and directly modify the template one.

Additionally, given that a product can belong to different categories, we will only navigate through the default one, to make things easier.

Step 1 – Retrieving the previous and next product

First off, we need some data to work with. Neither previous nor next product are assigned to the product page, so we need to get them first. As mentioned above, to simplify we will only retrieve the ones that come before and after in the default product category. It is indeed possible to use the previously visited category, but things can get quite complicated and overly troublesome (it might be a good subject for another tutorial though!).

Create a new file inside override/classes and call it Product.php, and paste the following inside php tags:

class Product extends ProductCore
{
}

Then, let’s create the method we need, and start by grabbing the current product’s position in its default category:


	public function getAdjacentProducts()
	{

		$position  = Db::getInstance()->getValue('SELECT position FROM '._DB_PREFIX_.'category_product WHERE id_product = ' . (int)$this->id . ' AND id_category = ' . (int)$this->id_category_default);
	}

Once we get that, we can retrieve previous and next products:


	public function getAdjacentProducts()
	{


		$position  = Db::getInstance()->getValue('SELECT position FROM '._DB_PREFIX_.'category_product WHERE id_product = ' . (int)$this->id . ' AND id_category = ' . (int)$this->id_category_default);

		// get products that are before and after
		
		$previous = Db::getInstance(_PS_USE_SQL_SLAVE_)->getRow('
			SELECT cp.id_product, pl.link_rewrite, cp.position, pl.name
			FROM '._DB_PREFIX_.'category_product cp
			LEFT JOIN '._DB_PREFIX_.'product_lang pl ON (cp.id_product = pl.id_product)
			LEFT JOIN '._DB_PREFIX_.'product p ON (cp.id_product = p.id_product)
			WHERE p.id_category_default = '.(int)$this->id_category_default.' AND (cp.position < '. (int)($position ) .' ) AND cp.id_category = ' . (int)$this->id_category_default .' AND pl.id_lang = '.(Context::getContext()->language->id).'
			ORDER BY cp.position DESC');

		$next = Db::getInstance(_PS_USE_SQL_SLAVE_)->getRow('
			SELECT cp.id_product, pl.link_rewrite, cp.position, pl.name
			FROM '._DB_PREFIX_.'category_product cp
			LEFT JOIN '._DB_PREFIX_.'product_lang pl ON (cp.id_product = pl.id_product)
			LEFT JOIN '._DB_PREFIX_.'product p ON (cp.id_product = p.id_product)
			WHERE p.id_category_default = '.(int)$this->id_category_default.' AND (cp.position > '. (int)($position ) .' ) AND cp.id_category = ' . (int)$this->id_category_default .' AND pl.id_lang = '.(Context::getContext()->language->id).'
			ORDER BY cp.position ASC');


		return array('previous' => $previous, 'next' => $next);
	}

Explanation: We are using basically the same qurery for both the previous and next product. For the previous, we get the very first product that has a lower position, given the conditions. For the next, the one that has the immediately higher one. Notice we only grab products from the same default category, and that is why we can’t simply use position + 1 and position – 1 in a single query (we would have gaps)

Step 2 – Assigning products to the Product page

It’s time to assign the variables we got to the product page. Create a new override, this time inside override/controllers/front and call it ProductController.php. Then, as always, initialize the class override:



Class ProductController extends ProductControllerCore
{

	public function initContent()
	{
	
		parent::initContent();
	}	
}

We are going to extend the initContent() method, as you can see. Therefore, inside it, and before calling the parent’s initContent(), paste the following:



		$adjacent_products = $this->product->getAdjacentProducts();

		$this->context->smarty->assign(array(
			'prev_product'=> $adjacent_products['previous'],
			'next_product'=> $adjacent_products['next']
		));

Explanation: Nothing special here, we simply use the previously created method, and then assign previous and next products

Our final override should look like this:

Class ProductController extends ProductControllerCore
{

	public function initContent()
	{


		$adjacent_products = $this->product->getAdjacentProducts();

		$this->context->smarty->assign(array(
			'prev_product'=> $adjacent_products['previous'],
			'next_product'=> $adjacent_products['next']
		));

		parent::initContent();
	}	
}

Time to add our buttons! Before that, though, open the cache/ folder and erase class_index.php so that our overrides can take place!

Step 3 – Adding the new buttons to product.tpl

In this last stepm I will use the default template (as always), so your code might differ from mine, especially if you are using Prestashop 1.5, as I am using 1.6.

We first need to decide where the two buttons are going to sit. Ideally, I recommend adding them at the very top of the product page, so that they are easily and immediately accessible. Of course, any place is fine. Once you decide on position, open up product.tpl located in your theme’s folder.

For my position, the right spot is immediately before the following code, at the very beginning of the file:

Paste the following in:




	{if $prev_product}
		{l s='Previous Product'}
	{/if}
	{if $next_product}
		{l s='Next Product'}
	{/if}

And we are done!

The post Adding Previous and Next navigation buttons to the Prestashop product page appeared first on NemoPS.