[solved] Display Product Features

[Smijn1]

Hi,

 

I want my product features in the product features tab on the product page to display like in the attached file 'Product Features Example.jpg', but right now it's displayed like in the attached file 'Product Features Wrong.jpg'.

 

The code in product.tpl looks like this:

 

<!-- description and features -->
{if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments) || isset($product) && $product->customizable}
<div id="more_info_block" class="clear bg_white">
<ul id="more_info_tabs" class="idTabs idTabsShort clearfix bg_wood">
 {if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
 {if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
 {if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
 {if isset($accessories) AND $accessories}<li><a href="#idTab4">{l s='Accessories'}</a></li>{/if}
 {if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}
 {$HOOK_PRODUCT_TAB}
</ul>
<div id="more_info_sheets" class="sheets align_justify">
{if isset($product) && $product->description}
 <!-- full description -->
 <div id="idTab1" class="rte">{$product->description}</div>
{/if}
{if isset($features) && $features}
 <!-- product's features -->
 <ul id="idTab2">
 {foreach from=$features item=feature}
		{if isset($feature.value)}
	 <li><b>{$feature.name|escape:'htmlall':'UTF-8'}:</b> {$feature.value|escape:'htmlall':'UTF-8'}</li>
		{/if}
 {/foreach}
 </ul>
{/if}

 

Does anyone know how I can do this? It needs to be without a table actually, shouldn't be too hard but I can't figure it out myself.

 

Thanks in advance.

Edited September 1, 2013 by Smijn1 (see edit history)

[vekia]

use these styles:

div#more_info_sheets #idTab2 li {
background: url(../../../img_white/dashed_w.png) repeat-x scroll left bottom transparent;
border-left: 1px solid #EBEBEB;
float: left;
list-style: none outside none;
padding: 5px 10px 8px 5px;
text-align: right;
width: 316px;
display: block;
clear: both;
float: left;
text-align: left;
}

it's a part of http://www.piercing-groothandel.nl/presta/themes/parfum_store/css/modules/stylechanger/StyleC_1.css

line ~2806

[Smijn1]

Thank you, I've tried this but it seems that the style is used for more than just the product features, so other elements of the website are displayed wrongly after this edit.

 

Is there a way to edit this just for the product features?

 

Thanks again!

[PascalVG]

Hi Smijn,

 

In your own code you copied in original post, Almost at the end of the code: change idTab2 into idTab9

 

<!-- product's features -->

<ul id="idTab9"> <--- change into idTab9

{foreach from=$features item=feature}

{if isset($feature.value)}

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

{/if}

{/foreach}

 

Do you like this standard style of the theme?

 

 

If not,

- Change 'idTab2' to 'idTab2a',

- edit file /themes/parfum_store/css/modules/stylechanger/StyleC_1.css

find 'idTab2' (around line 2806) and copy all css code with idTab2 in it to idTab2a and add Vekia's code to this new idTab2a one.

(Or just copy code below and add to file StyleC_1.css)

 

div#more_info_sheets #idTab2a li {

background:url(../../../img_white/dashed_w.png) repeat-x scroll left bottom transparent;

border-left:1px solid #EBEBEB;

float:left;

list-style:none outside none;

padding:5px 10px 8px 5px;

text-align:left;

width:316px;

display: block;

clear: both;

}

 

div#more_info_sheets #idTab2a li.palietdeux {

border-right:none;

}

 

div#more_info_sheets #idTab2a li span {

background:url(../../../img_white/bullet.png) no-repeat scroll 0 5px transparent;

float:left;

padding-left:10px;

text-align:left;

width:200px!important;

}

 

My 2 cents,

pascal

[vekia]

Thank you, I've tried this but it seems that the style is used for more than just the product features, so other elements of the website are displayed wrongly after this edit.

 

Is there a way to edit this just for the product features?

 

Thanks again!

 

sounds strange because div#more_info_sheets #idTab2 li means that css styles will be applied only to product tabs <li> elements

may i know what code changed exactly? can you provide some screen?

[Smijn1]

must have done something wrong before... I just made the changes as Vekia suggested in the first post again, so I could make screenshots of the website going funky... But now it looks just fine!! So the first solution provided was working..

 

Sorry people, thanks a lot for your help!! I'm very happy that the features are displayed correctly from now om

[PascalVG]

Good to hear Vekia's solution worked!

 

Happy selling,

pascal

[amirl]

my site when products have normal price, features products is true

 

for example

 

features products data sheet is

 

cpu : 1.8

ram : 1 gig

 

but when products have special price for example 15 % offer, all off features products item dublicate

 

cpu : 1.8

cpu : 1.8

ram : 1 gig

ram : 1 gig

 

please help how fix this problem

 

Edited July 11, 2014 by amirl (see edit history)