Quick Tip: 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

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

  • Jesus Espinosa

    Hi, thanks for shared yours knowledge, I hope you can help me, how can add section “more info” in the quick view box

    Iam trying this, based your tutorial, but dont me work:

    this code: {if !$content_only}
    {if isset($product) && $product->description}

    {l s=’More info’}

    {$product->description}


    {/if}
    {/if}

  • Waël

    Thank you for this great tuto,
    It’s working on quick view page but not on product page.

    I just add it as mentioned. Please advise.

    Regards

    quantity > 0} style=”display: none;”{/if}>

    {$HOOK_PRODUCT_OOS}

    {if $content_only}

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

    {l s=’Features’}

    {foreach from=$features item=feature}

    {if isset($feature.value)}

    {$feature.name|escape:’html':’UTF-8′} :

    {$feature.value|escape:’html':’UTF-8′}

    {/if}

    {/foreach}

    {/if}

    {/if}

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

    {if !$content_only}

    • NemoPS

      That is only supposed to display in the quick view box, is it what you want? Otherwise get rid of {if $content only}

      • Waël

        Hi, I want it to display in the product page, i changes the product.tpl but it appears only in quick view.
        if i get rid of {if $content only} i get a white page
        Thanks

        • NemoPS

          Yeah, you must get rid of the corresponding closing {/if} as well

        • Waël

          THANKS, you are Great.

  • Sridhar Mundra

    Hi, Is there a way in which I can display only selected features instead of all the features?
    That is, I want to show only two features in the quick view and the rest in the data sheet. Is That Possible??

    • NemoPS

      Indeed. Just use {if $feature.id_feature == 42} for example

      • Waël

        Hi Nemo,
        TO display 2 features:
        we have to replace {if isset($feature.value)} by {if $feature.id_feature == 5} ?
        and how to add another one ? feature 6 for exemple.

        If you developpe a module for that a lot will buy it.

    • Sridhar Mundra

      Worked just fine.
      Thank you

  • Muhammad Iqbal

    I followed the procedure but its not working. I am using prestashop 1.6.0.13

  • alex

    Hello ,

    thank you en wish for advice,

    We where able to manage the datasheet now.
    thanks for the article.
    i want to buy module seo also when it is updated for putting datasheet(hmm maybe now it is ok for loading the datasheet like short discription?)

    ok i hope hear from you if the search module works together with our live search

    We want to change / move also: Condition & Item things , to cart block.We dont know how to do this unfortunatly yet , we hope for advice from you( then there is more space left for the data sheet & that our cutomors dont have to scroll much down the site……also we gonna make try to make datasheet tabel smaller(we want to let it fit until the end of the product photo Vertical…then info tabs will be nice under Product photo with nice smal space,then customor dont have to scroll much )

    greeting,

    we hope for buying modules with you,but they have to work with our wishes /other modules…we hope this will do..again thanks for good article

    greetings,

    alex

    • NemoPS

      Hi there!
      Well, the SEO Booster doesn’t implement adding features yet, unfortunately. I’m not sure what you mean with the search thing though. Nor I get the vertical thing, would you perhaps post in the official forums a more structured description, and point me to it? :)

  • Angela

    Ciao Nemo.
    Is it possible to display the products feature with an accordion?

    thanks
    angela

You like the tuts and want to say "thank you"? Well, you can always feel free to donate: