Display Features in Product List & Product Page

[roz]

hi!

 

i want to change my product list as well as my product page to be able to show the features in it.

 

for example: 1kg, 500ml, etc.

 

i want it to include below the product name.

 

can anyone share how do this in the very simplest way?

 

thanks in advance!

[letrof]

hi!

 

i want to change my product list as well as my product page to be able to show the features in it.

 

for example: 1kg, 500ml, etc.

 

i want it to include below the product name.

 

can anyone share how do this in the very simplest way?

 

thanks in advance!

 

looking for the same thing!

I want to remove the tabs and show everything on one page, is it possible?

[NemoPS]

Try something like this, you can adjust the css afterwards, of course!

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

[prestamax]

 

Try something like this, you can adjust the css afterwards, of course!

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

Sounds great. Do you know if there is an option to link to all other products having the same feature (similar to tags)? This would be exactly what I need.

Edited March 31, 2014 by prestamax (see edit history)

[roz]

 

Try something like this, you can adjust the css afterwards, of course!

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

thanks Nemo! this script i need to inject in product-list.tpl right?

can lead me where exactly? many thanks!

[NemoPS]

I wrote a tut about it in the end

 

http://nemops.com/features-to-product-list-prestashop-16/#.Uzpyr_na6r1

[roz]

I wrote a tut about it in the end

 

http://nemops.com/features-to-product-list-prestashop-16/#.Uzpyr_na6r1

 

cool! i will try this on my page. thanks a lot!

[letrof]

 

Try something like this, you can adjust the css afterwards, of course!

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

 

Adding this to my product.tpl makes the right column showing inside the center one.

What can I do about it?

[letrof]

anyone, please!

Edited April 4, 2014 by letrof (see edit history)

[NemoPS]

Can you show us what you added? Read the tutorial above anyway, you probably missed a closing div

[letrof]

I did read the tut, the code that I add in product.tpl is:

<div><ul>{foreach from=$product.features item=feature name=features}         <li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>               {/foreach}</ul></div>

the features are shown but the page goes crazy afterwards.

[NemoPS]

weird, can you share the site's url?

[letrof]

sure it's http://lawendowykredens.pl

Right now the product page is in "old" working version, no changes made.

[NemoPS]

hm, no idea, quite clueless at the moment, can  you share more of the code when the page breaks? like the whole div around the lines you add

[letrof]

<div id="thumbs_list">
			<ul id="thumbs_list_frame">
				{if isset($images)}
					{foreach from=$images item=image name=thumbnails}
					{assign var=imageIds value="`$product->id`-`$image.id_image`"}
					<li id="thumbnail_{$image.id_image}">
            <div class="block_img_m_top"></div>
            <div class="block_img_m">
            <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
							<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="62px" width="62px" />
						</a>
            </div>
            <div class="block_img_m_bottom"></div>
					</li>
					{/foreach}
				{/if}
			</ul>
		</div>
		{if isset($images) && count($images) > 2}<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a>{/if}
		</div>
		{/if}
		{if isset($images) && count($images) > 1}<p class="align_center clear"><span id="wrapResetImages" style="display: none;"><img src="{$img_dir}icon/cancel_16x18.gif" alt="{l s='Cancel'}" width="16" height="18"/> <a id="resetImages" href="{$link->getProductLink($product)}" onclick="$('span#wrapResetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></span></p>{/if}
    <div style="clear:both;"></div>
	<div><ul>{foreach from=$product.features item=feature name=features}         <li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>               {/foreach}</ul></div>
		<br>
<div id="social" style="width: 285px; height: 20px; border: solid black 0px; margin-top: 15px;">
  
  <div id="Facebook" style="float: left; padding-right: 30px; width: 68px; border: solid black 0px;">
            <!-- Facebook like button -->
						<div class="fb-like" data-href="{$link->getProductLink($product->id, $product->link_rewrite)}"  data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div></div>
  <div id="twitter" style="float: left; padding-right: 30px; width: 50px; border: solid black 0px;">
            <!-- Twitter tweet button -->
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="EN" data-url="{$link->getProductLink($product->id, $product->link_rewrite)}" data-text="{$product->name}"></a>

  </div>
	<div id="pinterest" style="float: left; padding-right: 30px; width: 15px; border: solid black 0px;">
                	<!-- Pinterest Pin it button -->
								<a href="http://pinterest.com/pin/create/button/?url={$link->getProductLink($product->id, $product->link_rewrite)}&media={$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}&description={$product->name|escape:'htmlall':'UTF-8'}" class="pin-it-button" count-layout="horizontal" always-show-count="true"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
  </div>
	<div id="G+" style="float: right; padding-right: 30px; width: 30px; border: solid black 0px;">
            <!-- Google +1 button -->
<g:plusone href="{$link->getProductLink($product->id, $product->link_rewrite)}" size="medium"></g:plusone>
</div>
<div><ul id="CECHY" class="bullet">
		{foreach from=$features item=feature}
			<li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>
		{/foreach}
		</ul><div>
</div>
		<!-- usefull links
    <div class="block_l_top">
    </div>
    <ul id="usefull_link_block">
			{if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}
      <li><a href="javascript:print();">{l s='Print'}</a><br class="clear" /></li>
			{if $have_image && !$jqZoomEnabled}
			<li><span id="view_full_size" class="span_link">{l s='View full size'}</span></li>
			{/if}
      <li>{l s='Kolory na zdjęciach mogą nieznacznie różnić się od oryginału'}</li>
		</ul>
    <div class="block_l_bottom"></div>
	</div>

  left infos-->
  </div>
	<div id="pb-left-column">
    <!--
    {if $product->description_short OR $packItems|@count > 0}
    <div class="block_top"></div>
    <div id="short_description_block">
			{if $product->description_short}
				<div id="short_description_content" class="rte align_justify">{$product->description_short}</div>
			{/if}
			{if $product->description}
			<p class="buttons_bottom_block"><a href="javascript:{ldelim}{rdelim}" class="button">{l s='More details'}</a></p>
			{/if}
			{if $packItems|@count > 0}
				<h3>{l s='Pack content'}</h3>
				{foreach from=$packItems item=packItem}
					<div class="pack_content">
						{$packItem.pack_quantity} x <a href="{$link->getProductLink($packItem.id_product, $packItem.link_rewrite, $packItem.category)}">{$packItem.name|escape:'htmlall':'UTF-8'}</a>
						<p>{$packItem.description_short}</p>
					</div>
				{/foreach}
			{/if}
		</div>

I can even place my product.tpl file here if it helps, but the thing is no matter where i paste the code, the site breaks.

[NemoPS]

<div><ul id="CECHY" class="bullet">
        {foreach from=$features item=feature}
            <li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>
        {/foreach}
        </ul><div>
</div>

 

 

remove the last closing div here, see if it helps

[roz]

i just realized,

 

the features doesn't show in the product page, i only need to add in the same code in the product.tpl right? and also at the same location correcT?

[letrof]

<div><ul id="CECHY" class="bullet">

        {foreach from=$features item=feature}

            <li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>

        {/foreach}

        </ul><div>

</div>

 

 

remove the last closing div here, see if it helps

you mean this one?

 

After removing the underlined closing div my page looks like this:

Edited April 4, 2014 by letrof (see edit history)

[NemoPS]

Yes, well I have to admit it's a bit messy to be able to figure out where the extra div is  

[letrof]

I can search for an extra one if you say that's the reason.

I thought that adding <div> ..... </div> doesn't affect the rest of the code;/

Edited April 4, 2014 by letrof (see edit history)

[NemoPS]

Yes it's true, it doesn't. There should be something else left open, somewhere else. It's really weird

[prestamax]

You have uncommented some code

		<!-- usefull links
    <div class="block_l_top">
    </div>
    <ul id="usefull_link_block">
			{if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}
      <li><a href="javascript:print();">{l s='Print'}</a><br class="clear" /></li>
			{if $have_image && !$jqZoomEnabled}
			<li><span id="view_full_size" class="span_link">{l s='View full size'}</span></li>
			{/if}
      <li>{l s='Kolory na zdjęciach mogą nieznacznie różnić się od oryginału'}</li>
		</ul>
    <div class="block_l_bottom"></div>
	</div>

  left infos-->

The last div shouldn't be within the comments.

[roz]

hi Nemo1.

 

the features doesn't show in the product page after following your tutorial, i tried adding the same code in the product.tpl but i guess it doesn't work that way or it should be different format because my page broke after adding it hehehe..

 

please help how to do it. thank you

 

sorry just realized it's already at the bottom. but i still want to put it below the Reference No.

 

the one that is missing should be in the Quick View page. please advise on how to do it. thanks!

Edited April 7, 2014 by roz (see edit history)

[roz]

sorry. never mind already done it hehe! thanks!

[ricsavoy]

Hi, thanks Nemo for your great work. In case we need just 2 or 3 features, not the entire list, how would be the code ?

 

thx

[NemoPS]

well you have to use conditionals, like if the featured id == X then display it, otherwise don't

[ricsavoy]

yes, it works, thank you Nemo1  

[t00kie]

Could you please show an example how to make this conditionals?

[NemoPS]

Sure:

 

{foreach from=$product.features item=feature}

 

{if $feature.id_feature == 1}

// display only if so

{/if}

 

{/foreach}

[t00kie]

Thank you!

 

To show more than one I'll have to add another 'if' with different id, right?

[NemoPS]

Well yes, but it would be even better to use {elseif()}

[nickosn]

Hi all, 

 

First off a big thank you to Nemo1 for the great tutorials on your site. 

One of the tutorials that I have successfull implented is with the product features on the product list page

Now I am trying to add the same code to the product.tpl but without success

I have posted product.tpl here http://pastebin.com/EKHDCnMK 

but no matter where I put the code I  get 

Fatal error: Cannot use object of type Product as array in /var/www/presta/tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code on line 317

 

Can anyone please help?

 

Thanks

[vekia]

in product-list.tpl $product variable is an array, you call it in that way $product.name

in product.tpl $product variable is an object, you have to call it in that way: $product->name

[nickosn]

Hi vekia, 

 

So if I use a code like this in product-list :

 

{if isset($product.features)}

<div class="features">

{foreach from=$product.features item=feature name=pr_features}

{if $feature.id_feature == 8 OR $feature.id_feature == 11 OR $feature.id_feature == 12}

                <div>

                    {$feature.name}: <span>{$feature.value}</span>

                </div>

{/if}

{/foreach}

{/if}

</div>

 

 

What should it look like in products.tpl ?

[vekia]

{if isset($product->features)}

<div class="features">

{foreach from=$product->features item=feature name=pr_features}

{if $feature.id_feature == 8 OR $feature.id_feature == 11 OR $feature.id_feature == 12}

<div>

{$feature.name}: <span>{$feature.value}</span>

</div>

{/if}

{/foreach}

</div>

{/if}

[nickosn]

The page loads fine now but not features are shown

[vekia]

try with this one:

{if isset($features)}
 <div class="features">
  {foreach from=$features item=feature name=pr_features}
   {if $feature.id_feature == 8 OR $feature.id_feature == 11 OR $feature.id_feature == 12}
    <div>
     {$feature.name}: <span>{$feature.value}</span>
    </div>
   {/if}
  {/foreach}
 </div>
{/if}

[nickosn]

Works perfect! 

 

Thank you very much!

[nickosn]

Hi again, 

 

So here is the senario I have in mind:

 

I am setting up a computer related eshop and I need a differenent product-list.tpl and product.tpl for every category each one with it's custom set of features.

On the homepage I need to display the products from all categories but without the features,

I found this post https://www.prestashop.com/forums/topic/290255-custom-product-list-view-per-category/ that maybe could solve. 

But don't know how I can implent the the product.tpl per category and the custom homepage template file.

 

Can anyone help?

 

 

Thanks

[vekia]

it's a case for separate topic, both for custom homepage and product pages

[NemoPS]

As vekia said, better to  open a new topic. In any case I would look into the DIsplayOverrideTemplate hook for your multi-template scenario ( http://nemops.com/prestashop-upgrade-safe-template-modifications/#.VMYJS_6jOr0 )

[nickosn]

Thanks Nemo1 I will do that, 

 

I have tried your tutorial but not beeing a problem I didn't understand almost anything

[NemoPS]

Uh that's too bad, I guess you need someone to develop a custom solution then