In a recent tutorial, we saw How to add features to the product list in Prestashop 1.6.

However, if you want to save some space, and take full advantage of Prestashop 1.6, you might want to add them to the QuickView box instead. The procedure is quite simple, and only involves editing one file!

Understanding the Quick View box in Prestashop 1.6

What is this Quick View box, exactly? Where is it pulling data from? Simply put, it fetches the product.tpl file by sending an ajax request to the ProductController, and returns a portion of the page, instead of the whole.
How does it do it? It uses the {$content_only} variable in Smarty, which allows Prestashop to know if we are trying to display the content inside a lightbox, or generally picking it using ajax. Therefore, to add content to the Quick View, it’s enough to use a condition in the product.tpl file.

Editing product.tpl

As always, it’s best practice not to edit files directly, but cloning the default template and proceeding from there. Once you have a clean copy, enable it, then open product.tpl.

The spot where to add feature is entirely up to your discretion, I chose the one right below quantities, as shown below.

To add them over there, locate the following inside product.tpl

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

Right before it, add

			{if $content_only}
				{if isset($features) && $features}
					<!-- Data sheet -->
					<section class="page-product-box">
						<p><strong>{l s='Features'}</strong></p>
				
							{foreach from=$features item=feature}
							<div class="{cycle values="odd,even"}">
								{if isset($feature.value)}			    
									{$feature.name|escape:'html':'UTF-8'} :
									{$feature.value|escape:'html':'UTF-8'}
								{/if}
							</div>
							{/foreach}

					</section>
					<!--end Data sheet -->
				{/if}
			{/if}

Explanation: What are we doing here? As explained above, we need to tell prestashop to show this content only if it’s grabbing the template in “content_only” mode. Otherwise, the features list would be added to the normal product page as well. Then, we make sure there actually are features, and if so, we add the box with them inside. I used a slightly modified version of the original features table that you can find in the very same product.tpl file, so that it doesn’t look as big as that one. {cycle values=”odd,even”} allows you to style each row separately, in case you need to.

We are done!

The post Quick Tip: Add product features to the Prestashop 1.6 Quick View box appeared first on NemoPS.

Product-list.tpl

The first step is to physically add features within the template, so open up product-list.tpl, which you can find in the theme’s folder. For the sake of this tutorial, we will add the features list right after the product name. Therefore, locate:

					<h5 itemprop="name">
						{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
						<a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
							{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}
						</a>
					</h5>

Right after it, and before (or after, depending on your likes!) the {hook h=’displayProductListReviews’ product=$product} part, add:

					{if isset($product.features)}
						<div class="features">
							
								{foreach from=$product.features item=feature}
									<div>
										{$feature.name}: <span>{$feature.value}</span>
									</div>
								{/foreach}
							
							
						</div>
					{/if}

Save and refresh, features will pop out if you have the grid view enabled once the page is loaded. But what happens if you switch to the list view, or have this one enabled on page load instead? They will not show up! Let’s deal with it!

Global.js

The list/grid switch is handled through javascript. The grid view being the default one, once you load the page and you had it set to list, the actual content will be generated using javascript; same for when you hit the list/grid switch button. To overcome this little issue, open up global.js located in the theme folder /js/. Find both occurrences of the following snippet:

html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';

And add this right after:

html += '<div class="features">'+ $(element).find('.features').html() + '</div>';

Once more, freely choose if to add this before or after ratings! It’s basically done, but let’s also add some cosmetic touches!

Cosmetic Touches

First off, features’ text is currently centered in the grid view; quite unnpleasant!

Using SASS?

Prestashop 1.6 uses the SASS css preprocessor to handle stylesheets, along with compass. Therefore, if you have a sass/compass-ready environment already setup, use product_list.scss instead of the .css version!

Open up product_list.css (or .scss) located in the /css/ folder of your theme. For convenience, let’s add the new code nearby the one relative to the product name in the grid/list. Therefore, locate:

			h5 {
				padding: 0 15px 7px 15px;
				min-height: 53px;
			}

After this, add:

			.features {
				text-align:left;
				padding-left:32px;
				padding-bottom:15px;
			}
			.features span {
				font-weight: bold;
			}

Note: I am using the normal css syntax, use indentation is you are modifying the .scss file!

My suggestion for the product grid is to try and align the left of the features block with the ‘add to cart’ button that pops out once the grid is hovered. Thus, you might need to adjust the left padding, depending on your language or “Add to cart” text!

The grid view is settled, now to fix the list one locate:

		h5 {
			padding-bottom: 8px;
		}

And insert the following right afterwards:

		.features {
			text-align:left;
			margin-bottom:8px;
		}
		.features span {
			font-weight: bold;
		}

We are done!

The post Quick Tip: Adding features to the product list in Prestashop 1.6 appeared first on NemoPS.

Ordering Prestashop Features by name

In order to change the features’ order we need to amend the method called getFrontFeaturesStatic, of the Product class. As it’s best practice, let’s use an override!

Go to override/classes and create a file named Product.php. Inside, add the following:

class Product extends ProductCore
{
}

Then, let’s have a look at the original getFrontFeaturesStatic, located in the code Product.php file, found in the classes/ folder.

	public static function getFrontFeaturesStatic($id_lang, $id_product)
	{
		if (!Feature::isFeatureActive())
			return array();
		if (!array_key_exists($id_product.'-'.$id_lang, self::$_frontFeaturesCache))
		{
			self::$_frontFeaturesCache[$id_product.'-'.$id_lang] = Db::getInstance(_PS_USE_SQL_SLAVE_)->executeS('
				SELECT name, value, pf.id_feature
				FROM '._DB_PREFIX_.'feature_product pf
				LEFT JOIN '._DB_PREFIX_.'feature_lang fl ON (fl.id_feature = pf.id_feature AND fl.id_lang = '.(int)$id_lang.')
				LEFT JOIN '._DB_PREFIX_.'feature_value_lang fvl ON (fvl.id_feature_value = pf.id_feature_value AND fvl.id_lang = '.(int)$id_lang.')
				LEFT JOIN '._DB_PREFIX_.'feature f ON (f.id_feature = pf.id_feature AND fl.id_lang = '.(int)$id_lang.')
				'.Shop::addSqlAssociation('feature', 'f').'
				WHERE pf.id_product = '.(int)$id_product.'
				ORDER BY f.position ASC'
			);
		}
		return self::$_frontFeaturesCache[$id_product.'-'.$id_lang];
	}

Pay close attention to the ORDER BY clause. It currently says: f.position. We want to order by name, which is a column of the feature_lang table! Therefore, copy this whole method to the new override:

class Product extends ProductCore
{

	public static function getFrontFeaturesStatic($id_lang, $id_product)
	{
		if (!Feature::isFeatureActive())
			return array();
		if (!array_key_exists($id_product.'-'.$id_lang, self::$_frontFeaturesCache))
		{
			self::$_frontFeaturesCache[$id_product.'-'.$id_lang] = Db::getInstance(_PS_USE_SQL_SLAVE_)->executeS('
				SELECT name, value, pf.id_feature
				FROM '._DB_PREFIX_.'feature_product pf
				LEFT JOIN '._DB_PREFIX_.'feature_lang fl ON (fl.id_feature = pf.id_feature AND fl.id_lang = '.(int)$id_lang.')
				LEFT JOIN '._DB_PREFIX_.'feature_value_lang fvl ON (fvl.id_feature_value = pf.id_feature_value AND fvl.id_lang = '.(int)$id_lang.')
				LEFT JOIN '._DB_PREFIX_.'feature f ON (f.id_feature = pf.id_feature AND fl.id_lang = '.(int)$id_lang.')
				'.Shop::addSqlAssociation('feature', 'f').'
				WHERE pf.id_product = '.(int)$id_product.'
				ORDER BY f.position ASC'
			);
		}
		return self::$_frontFeaturesCache[$id_product.'-'.$id_lang];
	}

}

And change the ORDER BY clause as follows:

ORDER BY fl.name ASC

Done! If you are using a version newer than 1.5.3, go to the cache/ folder and delete the class_index.php file in order for the new changes to take place!

The final override:

class Product extends ProductCore
{

	public static function getFrontFeaturesStatic($id_lang, $id_product)
	{
		if (!Feature::isFeatureActive())
			return array();
		if (!array_key_exists($id_product.'-'.$id_lang, self::$_frontFeaturesCache))
		{
			self::$_frontFeaturesCache[$id_product.'-'.$id_lang] = Db::getInstance(_PS_USE_SQL_SLAVE_)->executeS('
				SELECT name, value, pf.id_feature
				FROM '._DB_PREFIX_.'feature_product pf
				LEFT JOIN '._DB_PREFIX_.'feature_lang fl ON (fl.id_feature = pf.id_feature AND fl.id_lang = '.(int)$id_lang.')
				LEFT JOIN '._DB_PREFIX_.'feature_value_lang fvl ON (fvl.id_feature_value = pf.id_feature_value AND fvl.id_lang = '.(int)$id_lang.')
				LEFT JOIN '._DB_PREFIX_.'feature f ON (f.id_feature = pf.id_feature AND fl.id_lang = '.(int)$id_lang.')
				'.Shop::addSqlAssociation('feature', 'f').'
				WHERE pf.id_product = '.(int)$id_product.'
				ORDER BY fl.name ASC'
			);
		}
		return self::$_frontFeaturesCache[$id_product.'-'.$id_lang];
	}

}

The post Flash Tip: Order Prestashop Features by name appeared first on NemoPS.