Jump to content

Display Features in Product List & Product Page


roz
 Share

Recommended Posts

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! :)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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>
  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

 

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 by prestamax (see edit history)

Share this post


Link to post
Share on other sites

 

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!

Share this post


Link to post
Share on other sites

 

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

<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.

Share this post


Link to post
Share on other sites

<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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

<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:post-230236-0-21652900-1396604362_thumb.png

Edited by letrof (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by roz (see edit history)

Share this post


Link to post
Share on other sites

  • 4 months later...
  • 4 months later...

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

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites


{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}

Share this post


Link to post
Share on other sites

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}
  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More