Add Product Features to the Prestashop 1.6 Quick View Box

We already saw how to add features to the products list. It’s now time to implement then into the quick view box!

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.

Adding product features to quick view in prestashop 1.6, spot

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!

Adding product features to quick view in prestashop 1.6, added

Looking for quality 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 *


3 + 9 =

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>