How to add hyperlink and images to features ?

[gigamax]

hi every one . 

is it possible to add additional data like hyperlink or image to product features ? 

 

for example when customer want to see product features , it will show like bellow :

 

sex:     [men icon] For Men 

scent:   [proper icon] sweet and warm

 

when customer clicks on each hyperlink , he will be direct to the page that shows all product witch contain for example "sweet and warm" scent .

 

is it possible ?

[gigamax]

hello again . i tried to enter a custom url in ps_feature_value_lang manually but it didnt work. where is the problem ? please help me dudes ...

[PascalVG]

I tried something that I think you asked. Have a look here for a sample:

 

http://ps1560.buymethai.com/index.php?id_product=2&controller=product

 

go to datasheet (features tab):

Is that what you want?

 

 

If so, do this: (Sample code from PrestaShop 1.5.6.0)

in file: /classes/FeatureValue.php, change this: (change red code)  (Back up the file first, just in case...)

public static $definition = array(

  'table' => 'feature_value',

  'primary' => 'id_feature_value',

  'multilang' => true,

  'fields' => array(

  'id_feature' => array('type' => self::TYPE_INT, 'validate' => 'isUnsignedId', 'required' => true),

  'custom' => array('type' => self::TYPE_BOOL, 'validate' => 'isBool'),

 

  // Lang fields

  'value' => array('type' => self::TYPE_NOTHING, 'lang' => true, 'validate' => 'isAnything', 'required'

  => true, 'size' => 255),

  ),

);

 

and save file.

 

Then edit file: /themes/<your theme folder>/product.tpl  (backup file...)

and find the following code: (around line 500, search for 'feature' using Ctrl-F): Remove red code:

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

<!-- product's features -->

<ul id="idTab2" class="bullet">

{foreach from=$features item=feature}

            {if isset($feature.value)}

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

            {/if}

{/foreach}

</ul>

{/if}

 

and save. then edit/create your features and add as feature value something like this:

 

<img src="http://fff.re/d5aH" width=40 height=40><a href="http://fff.re/8T1G">Search</a>

 

Where <img> of course gives the image, and <a> gives the link

 

(N.B. Note that I used a short URL (created here: http://fff.re/ , but there are also other places where you can do this), so save character space, as you currently only have 255 characters in the database for the value field... Just a suggestion :-)  )

 

Hope this helps,

pascal.

[gigamax]

thanks a lot dear pascal. it's working !! 

 

the code is working but i heard that changing presta core is dangerous for security and future update.  how can i add this codes into override folder and undo the core changes? can you help me in this please ? 

[User1234567891]

Hi guys,

 

I just tried this little hack.

 

Changed FeatureValue.php and product.tpl as described above, uploaded and changed the vaule of the feature.

But the link as entered in the value field is displayed on the frontend. Not an image.

 

Force compilation is on.

Prestashop version 1.5.4.1

[PascalVG]

Hi Lostrisq,

 

Sorry for late reaction, was sick for some days and extremely busy.

 

Can you add a link to the product page where you added the link+ Image? Otherwise/also, can you add the value of the feature, exactly as you added it?

 

thanks,

pascal.

Hi Gigamax,

 

sorry, missed your question:

about overriding classes:

http://doc.prestashop.com/display/PS15/Overriding+default+behaviors#Overridingdefaultbehaviors-Overridingaclass

 

Hope this helps,

pascal.

[PascalVG]

Hi gigamax,

 

Sorry, missed your question :-[

 

How to override classes, see here:

http://doc.prestashop.com/display/PS15/Overriding+default+behaviors#Overridingdefaultbehaviors-Overridingaclass

 

hope this helps,

pascal.

[the_raven]

Hi 

 

I used this method and its worked well .

 

but in comparison page ,HTML features doesn't compile and shown as HTML code. what is the solution now  ?

 

thank you 

 

_______________________Solution_________________________

 

I found the solution .its need to edit "products-comparison.tpl" . find two <td> "comparison_infos" class and remove 'htmlall' from that line .

 

it's need to do this editing everywhere that feature values are used .

_______________________Solution_________________________

Edited February 10, 2014 by the_raven (see edit history)

[mickeyboy1]

I tried something that I think you asked. Have a look here for a sample:

 

http://ps1560.buymethai.com/index.php?id_product=2&controller=product

 

go to datasheet (features tab):

Is that what you want?

feature search result.jpg

 

 

If so, do this: (Sample code from PrestaShop 1.5.6.0)

in file: /classes/FeatureValue.php, change this: (change red code)  (Back up the file first, just in case...)

public static $definition = array(

  'table' => 'feature_value',

  'primary' => 'id_feature_value',

  'multilang' => true,

  'fields' => array(

  'id_feature' => array('type' => self::TYPE_INT, 'validate' => 'isUnsignedId', 'required' => true),

  'custom' => array('type' => self::TYPE_BOOL, 'validate' => 'isBool'),

 

  // Lang fields

  'value' => array('type' => self::TYPE_NOTHING, 'lang' => true, 'validate' => 'isAnything', 'required'

  => true, 'size' => 255),

  ),

);

 

and save file.

 

Then edit file: /themes/<your theme folder>/product.tpl  (backup file...)

and find the following code: (around line 500, search for 'feature' using Ctrl-F): Remove red code:

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

<!-- product's features -->

<ul id="idTab2" class="bullet">

{foreach from=$features item=feature}

            {if isset($feature.value)}

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

            {/if}

{/foreach}

</ul>

{/if}

 

and save. then edit/create your features and add as feature value something like this:

 

<img src="http://fff.re/d5aH" width=40 height=40><a href="http://fff.re/8T1G">Search</a>

 

Where <img> of course gives the image, and <a> gives the link

 

(N.B. Note that I used a short URL (created here: http://fff.re/ , but there are also other places where you can do this), so save character space, as you currently only have 255 characters in the database for the value field... Just a suggestion :-)  )

 

Hope this helps,

pascal.

Hiya Pascal

I am using 1.5.3 and cant get this to work

Are the code changes different for 1.5.3

 

Thanks in advance mb

[User1234567891]

Hi PascalVG,

 

I reacted to quickly. I works like a charm, I want it to work in the layered navigation however.

I ended up solving it with plain old css, works well!
 

[PascalVG]

Hi Mickeyboy1,

Can you show me the changes you made, or add the two files you edited?

Or, add the two clean, unchanged files so I can try to add it for you.

 

Pascal

[Bhodi]

Dear PascalVG

 

Woks nicely - thx

 

But not in 'compare products'

 

Can you help me.

Have version 1,6

 

your friend Tommy

[the_raven]

Dear PascalVG

 

Woks nicely - thx

 

But not in 'compare products'

 

Can you help me.

Have version 1,6

 

your friend Tommy

 

Dear Tommy

 

I did this change for comparison page on PS 1.5 . read post #8 , it may be useful for ver 1.6 .

[PascalVG]

Hi Tommy,

 

did the_raven's post help you?

 

Let me know,

pascal.

[miki22]

Hi PascalVG,

 

I reacted to quickly. I works like a charm, I want it to work in the layered navigation however.

I ended up solving it with plain old css, works well!

 

I use 1.6 version. Is there any css solution?

How did You solved your problem?

[frank_jarle]

seems not to work in the latest 1.6 edition. followed as in the guide, but whenever adding a small html tag in the feature and value-field for a given product, PS removes the html-tag from it. Pity.

[miki22]

I use 1.6 version. Is there any css solution?

How did You solved your problem?

I edit product.tpl

{if isset($feature.value)}
<td class="feature-name" id="{$feature.name|escape:'html':'UTF-8'}">{$feature.name|escape:'html':'UTF-8'}</td>
<td>{$feature.value|escape:'html':'UTF-8'}</td>
{/if}

then add styles to product.css or global css if used on compare.

example:

.feature-name{padding-left: 60px!important;}  
#Leistung.feature-name{background: #fff url(http://www.hundb.de/img/features/6.jpg) no-repeat 15px;}

[frank_jarle]

 

I edit product.tpl

{if isset($feature.value)}
<td class="feature-name" id="{$feature.name|escape:'html':'UTF-8'}">{$feature.name|escape:'html':'UTF-8'}</td>
<td>{$feature.value|escape:'html':'UTF-8'}</td>
{/if}

then add styles to product.css or global css if used on compare.

example:

.feature-name{padding-left: 60px!important;}  
#Leistung.feature-name{background: #fff url(http://www.hundb.de/img/features/6.jpg) no-repeat 15px;}

 

 

Oh, please tell me you are my angel?!?!?

 

With this method you mention here, does this means that i could name every single Feature in the CSS file, but also make a CSS-style tool-tip when hovering over the icon/picture/text?

 

In HTML its super-simple to create a tool-tip its simply need to pass the Title= parameter some text and there you go, but because Prestashop prevent adding HTML code in the Product Feature name field (because of verification on those fields) i thought maybe your method would allow to use some simple CSS-kind of stylesheet.

 

In your example it seems that the main CSS is "feature-name", and each subsequent feature name is given a url to a picture, instead i thought i could do some "hover over" tool-tip.

[bogdan90i]

Hello,

 

Just tried your patch on prestashop 1.6 and each time i try to enter the image+link and i click on save, i get

 

Successful update

 

But it only saves The actual text from the hyperlink.

 

Can you please help me?

 

Edit 17.06.2015:

I just saw that it actually works if i add the hyperlink to the value as a fixed value, but if i try to add it as a customized value it does not work.

Edited June 17, 2015 by bogdan90i (see edit history)

[antonin fayard]

Hi everybody,

 

I use prestashop 1.6.

 

I have the same problem as bogdan90i , I successfully completed the steps except that when I update my page to see if I have a picture or a link , I have neither the one nor the other apart from the written sentence.

 

Please, i need to find a solution, it's important, can you help me ?

 

--------------------------------------------------------------------------------------------------------------------------------------

 

I found a solution !! This solution about people being on version 1.6 of PrestaShop .
We must simply go to themes / your site / modules / blocklayered / blocklayered.tpl then in this file must be added on line 101 :

 

{if $filter.name == 'name of your features'}

     <td><img src="path of your photos/{$value.name|escape:'htmlall':'UTF-8'}.png" alt="{$value.name|escape:'html':'UTF-8'}"title="      {$value.name|escape:'html':'UTF-8'}"></td>
     <td>{if $layered_show_qties}<span> ({$value.nbr})</span>{/if}</td>

{else}
    <td>{$value.name|escape:'html':'UTF-8'}</td>
    <td>{if $layered_show_qties}<span> ({$value.nbr})</span>{/if}</td>
                                                        
{/if}

 

If you don't understand you can send me a private message or just answer here, i'll help you =)

Edited July 8, 2015 by antonin fayard (see edit history)

[tadas.karosas]

Can anyone help me, how to add hyperlink email at availability value when product is out of stock?

I would like instead of: out of stock at this moment to write out of stock at this moment, contact us at [email protected]

Is it possible somehow?

[bogdan90i]

Any help please?

I looked at what antonin fayard wrote but it's not what i need.

[gantz37]

hi everybody

 

i use last version 1.6. is all work for me except on enable active, is in html code when show filters active, how to fix it?

i try to remove all html from blocklayered.tpl but dont work

 

 

Edited August 2, 2015 by gantz37 (see edit history)

[gantz37]

hi everybody

 

i use last version 1.6. is all work for me except on enable active, is in html code when show filters active, how to fix it?

i try to remove all html from blocklayered.tpl but dont work

 

anyone can help

[bogdan90i]

Any help please? i'm really stuck and i got nowhere

[cafeine404]

I know its a old one, but i'm on prestashop 1.6.1.3, an di done all the change but no effects... can anyone help ?