Jump to content
  • 1
vekia

[tutorial] Product tags on product page

Question

tutorial: product tags on product page

 

In this tutorial i want to show you how you can easily display product tags on product page without any core modification. The only thing which we will modify will be template file product.tpl file. (and also global.css styles if you want to create nice "labels" effect.

 

So, finally, with this tutorial you will be able to create tag "labels" exactly as i show on picture below:

 

 

tags-on-product-page-prestashop.gif

 

enjoy community!

:)

Share this post


Link to post
Share on other sites

30 answers to this question

Recommended Posts

  • 1

Hi, I really like the option to display tags on the product page. However, in prestashop 1.7 template files have changed and I can't apply the modifications to product.tpl in prestashop 1.7.

 

Is there a way to display product tags in prestashop 1.7 too?

Any tips are much appreciated. Thanks !

Share this post


Link to post
Share on other sites
  • 0

Hi.

 

Thanks for the tutorial.

 

Would appreacite if you can help with the code.

Using ps 1.4.10 The tag displayed in the product page but the tag search code appeared imcompleate.

 

When we click on the tag link on product page it give the imcomplete search and unable to show the result since it wil show

as www.mywebsite.com/search.

 

Thank you.

Share this post


Link to post
Share on other sites
  • 0

Using ps 1.4.10 (...) When we click on the tag link on product page it give the imcomplete search and unable to show the result since it wil show

as www.mywebsite.com/search.

 

I will show how to achieve this in PrestaShop in version 1.5.x

 

i think that the problem is with $Link variable

Share this post


Link to post
Share on other sites
  • 0

Hello,

 

thanks for the great tutorial, I was able to get tags in the product page. Unfortunately, the tags related to a product are visualised, even in the other language installed. Changing language in the FO will give you the tags created for one specific language. What I would like is to display all the tags for EN related to that product only when EN is selected, or to display all the French tags for a product only when the customer has French as selected language.

 

 

Example: English tags get displayed when French (other language than English) is selected.

 

 

What should I modify to be able to make the change I want?

Thank you.

Share this post


Link to post
Share on other sites
  • 0

Hello,

 

thanks for the great tutorial, I was able to get tags in the product page. Unfortunately, the tags related to a product are visualised, even in the other language installed. Changing language in the FO will give you the tags created for one specific language. What I would like is to display all the tags for EN related to that product only when EN is selected, or to display all the French tags for a product only when the customer has French as selected language.

 

 

Example: English tags get displayed when French (other language than English) is selected.

 

 

What should I modify to be able to make the change I want?

Thank you.

 

Hello,

 

I just found out how you can achieve this: you have to modify in Tag.php function getProductTags, by adding the lang variable. Or, you can create your own function getProductTagsByLang($id_product,$id_lang).

 

 

Best Regards,

--

TP

Share this post


Link to post
Share on other sites
  • 0

Hello,

 

I just found out how you can achieve this: you have to modify in Tag.php function getProductTags, by adding the lang variable. Or, you can create your own function getProductTagsByLang($id_product,$id_lang).

 

 

Best Regards,

--

TP

Hello,

 

I have found the same problem but I'm not able to fix it. How do you add the lang variable? I'm totally new to prestashop and this is my first approach, it would help me a lot if you can share the code to insert in Tag.php

 

I have seen this post after asking Vekia in his web page, sorry if I'm duplicating questions.

 

Thanks in advance.

 

Jota.

Share this post


Link to post
Share on other sites
  • 0

Hi, I have been triying to find a solution to the languages problem, after a lot of experimentation and testing I found some code that nearly works, it works indeed, but it breaks the database of my second language .

 

Let's see:

 

I added this code to the classes/tag.php

 

public static function getProductTags($id_product, $id_lang = NULL)
{
global $cookie;
$id_lang = $id_lang ? $id_lang : $cookie->id_lang;

if (!$tmp = Db::getInstance(_PS_USE_SQL_SLAVE_)->ExecuteS('
SELECT t.`id_lang`, t.`name`
FROM '
._DB_PREFIX_.'tag t
LEFT JOIN '
._DB_PREFIX_.'product_tag pt ON (pt.id_tag = t.id_tag)
WHERE pt.`id_product`='
.(int)($id_product).' AND t.`id_lang` = '.(int)($id_lang)))
return false;
$result = array();
foreach ($tmp AS $tag)
$result[$tag['id_lang']][] = $tag['name'];
return $result;
}

 

Have to say that this code is not mine, I found it in another post from this forum: http://www.prestashop.com/forums/topic/27151-features-or-tags-on-productlist/page-2

 

When I add this code to the tag.php file it fixes the language problem, and it works OK, BUT something very weird happens as a colateral effect..., when I enter in one product through the back office and I edit the product and I try to update the tags box all the tags inside my second language box are reseted and deleted from database ... :( . I don't know if i explain myself very well...

 

One example, I have several tags in one product, language 1 is Spanish and tags are Spanish, Klaus (no problem with this ones), English is my second language and in the same product I have the tags English, Klaus. Once I have edited tag.php it works Ok in the front office, but if I go to the product again to add a new tags, I can add a new tag in Spanish but when I change to English to place the tag in the english language box all the tags inside are reseted and the box appears empty, all the former tags are deleted from the database  .... this happens only for English language..

 

Any clue?

 

Thanks in advance.

Share this post


Link to post
Share on other sites
  • 0

Hello,

 

I have been working on this for a long, without any success, too much time invested and I have not been able to fix it, I give up. Anyway thanks for the tutorial, it works well for one language.

 

kind regards.

Share this post


Link to post
Share on other sites
  • 0

Jota I have found! i have lose one day too ^^ i hope you can read my post

Just you have add it in your product.tpl: 

 

{assign var='id_lang' value=Language::getIdByIso($lang_iso)}

    {assign var='productTags' value=$product->tags}
    {l s='Tags of this product :'}
    {foreach from=$productTags[$id_lang] item=productTag name=productTags}
  <a href="{$base_dir}index.php?controller=search&tag={$productTag|escape:'url'}"><strong>{$productTag}</strong></a>{if !$smarty.foreach.productTags.last}, {/if}
    {/foreach}
 
Or it if you want that nothing is display when product don't have tag is better you past it :
 
{if isset($product->tags) && $product->tags}
{assign var='id_lang' value=Language::getIdByIso($lang_iso)}
{assign var='productTags' value=$product->tags}
{l s='Tags of this product :'}
{foreach from=$productTags[$id_lang] item=productTag name=productTags}
  <a href="{$base_dir}index.php?controller=search&tag={$productTag|escape:'url'}"><strong>{$productTag}</strong></a>{if !$smarty.foreach.productTags.last}, {/if}
{/foreach}
{/if}
 
I'M NOT A PRESTASHOP LEGEND BUT I WORK GOOD  :ph34r:

Share this post


Link to post
Share on other sites
  • 0

Yes i know, i have found it in a topic french after one day. But why don't help Jota that never have found it after months?! Forum are do for answer and help people... is better you modify your tutorial: product tags on product page and explain how function show tags when you have different languages in the shop

Share this post


Link to post
Share on other sites
  • 0

Thank you very much cicciotargatona, I really appreciate your help. 

I decided to not include this modification in my store due to the mixed tags problem, I didn't want to confuse my customers. I will reconsider to implement it again .... I don't have a clue of PHP but I'm quite good doing "trial and error" :-)

Anyway thanks both for sharing your knowledge for free, I understand that sometimes is not possible to answer all the questions, and I really appreciate the effort.

Share this post


Link to post
Share on other sites
  • 0

you're right

i just thought that problem was solved and to be honest, i found this topic  today after so many months, because of link in PM.

im reading a lot of posts everyday here - it's hard to reply for each post here, im trying all the best

 

i will update article, definitely

thanks for suggestions,

Milos

Share this post


Link to post
Share on other sites
  • 0

Jota, how i have customize it in my shop of lighting:

 

in product.tpl:

 

{if isset($product->tags) && $product->tags}
{assign var='id_lang' value=Language::getIdByIso($lang_iso)}
{assign var='productTags' value=$product->tags}
<img src="http://luxelumi.com/themes/theme784/img/relatedfamilyicon2.png" title="Family Product" alt="Family Product" /><br>{l s='Family Product:'}
<ul class="producttags">
{foreach from=$productTags[$id_lang] item=productTag name=productTags}
  <a href="{$base_dir}index.php?controller=search&tag={$productTag|escape:'url'}"><strong>{$productTag}</strong></a>{if !$smarty.foreach.productTags.last} {/if}
{/foreach}
{/if}
</ul>

 

in global css or in cache theme:

 

.producttags {
    list-style:none;
    position:relative;
    clear:both;
    display:block;
    padding-bottom:20px;
    margin-bottom:20px;
}
 
.producttags li, .producttags a{
    float:left;
    height:24px;
    line-height:24px;
    position:relative;
    font-size:11px;
    }
 
.producttags a{
    margin-left:20px;
    padding:0 10px 0 12px;
    background:#000;
    color:#fff;
    text-decoration:none;
    border-radius:25px   
.producttags a:visited{
    color:#fff;
}
 
.producttags a:after{
    content:"";
    position:absolute;
    top:10px;
    left:0;
    float:left;
    width:4px;
    height:4px;
    border-radius:25px
    background:#fff;
 
}
 
.producttags a:hover{background:#E10000; text-decoration:none;}    
 
.producttags a:hover:before{border-color:transparent #E10000 transparent transparent;}
 
I know Vekia! is not simple to answer in all post and remember what was not solved. I will come more often in this forum and help when i will solved othar problems in my shop. Thanks  :)

Share this post


Link to post
Share on other sites
  • 0

 

How do I change tag's url ?

for example 

site.com/index.php?controller=search&tag=Apple   >>>>>  site.com/tag/Apple

 

 

you have friendly urls option active?

Share this post


Link to post
Share on other sites
  • 0

Unfortunately when I click on the tag, No results are found. I think that there is a problem with the link ? I'm using 2 languages and friendly URL's. No one of the solutions added here are working with multilanguage and friendly-URL's the tag page is an empty page "no results found for xxxx"

Edited by selectshop.at

Share this post


Link to post
Share on other sites
  • 0

Hello Vekia,

 

I followed you in another subjects that you posted.

 

One in particular was H1 Tag missing where you suggest to wrapped around the logo in the header.tpl file as below.

 

<h1>
<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />


</h1>

 

After I installed rich snippets to my site appears that the H1 tag is duplicate in the products page after I removed the tags is fine no errors found, however the H1 Tag is missing in the index page or main landing page.

 

How can I solve this issue and to avoid the H1 missing in the index.page?

Share this post


Link to post
Share on other sites
  • 0

I did just like it was in the tutorial and I found a problem: tags are listed one after another

 

x

xx

xxx

xxxx

 

and have no labels, just hyperlinks.

 

If not with the labels, could you at least tell me what to change to have them in one line?

Share this post


Link to post
Share on other sites
  • 0

Unfortunately when I click on the tag, No results are found. I think that there is a problem with the link ? I'm using 2 languages and friendly URL's. No one of the solutions added here are working with multilanguage and friendly-URL's the tag page is an empty page "no results found for xxxx"

 

First of all; please check your tag url. Normally it displays like yoursite.com/en/index.php?controller=search&tag=tag. So please add "{$lang_iso}/" just after "{$base_dir}" like:


<a href="{$base_dir}{$lang_iso}/index.php?controller=search&tag={$productTag|escape:'url'}"><strong>{$productTag}</strong></a>{if !$smarty.foreach.productTags.last}, {/if}

You should also change the code accordingly; Iike mine the tag "123" dispalys mysite.com/en/recherche?tag=123, so my code will be:

<a href="{$base_dir}{$lang_iso}/recherche?tag={$productTag|escape:'url'}"><strong>{$productTag}</strong></a>{if !$smarty.foreach.productTags.last}, {/if}

Share this post


Link to post
Share on other sites
  • 0

tutorial: product tags on product page

 

In this tutorial i want to show you how you can easily display product tags on product page without any core modification. The only thing which we will modify will be template file product.tpl file. (and also global.css styles if you want to create nice "labels" effect.

 

So, finally, with this tutorial you will be able to create tag "labels" exactly as i show on picture below:

 

 

tags-on-product-page-prestashop.gif

enjoy community! smile.png

 

Hi vekia!

 

Thanks for the tutorial. I am using 1.6.0.14 and would like when clicking on the link to search in the current category.  Can this be done ?

Share this post


Link to post
Share on other sites
  • 0

<bump>

Does anybody know what code to add to the css to add some space between lines? My tags look like in the image I added here: 

 

 

css2.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

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