Colors on product-list.tpl

MaartenPol · December 3, 2010

I found the following on a Czech subforum. As I understand correct with the help of Google Translate it should display the colors of a product on the product-list pages. But with my 1.3.1 installation it won't work. I found a other user with the same problem, but no solution. Anyone who can help with this?

http://www.prestashop.com/forums/viewthread/48770/hlavn_diskuze/vyeeno_color_picker_pehled_barev_v_productlist

product-list.tpl

{if !empty($product.colors)}
   {foreach from=$product.colors key=id_attribute item=color }    

   {/foreach}
{/if}

category.php (cca řádek 62, před smarty->assign)

/* colors */
foreach ( $cat_products as $key => $cat_product ) {
$product = new Product ( intval ( $cat_product[ 'id_product' ] ), true , intval ( $cookie -> id_lang ));
$colors = array();
$attributesGroups = $product -> getAttributesGroups ( intval ( $cookie -> id_lang ));
if ( Db :: getInstance ()-> numRows ())
{
foreach ( $attributesGroups AS $k => $row )
{
/* Color management */
if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product -> id_color_default )
{
$colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
$colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
$colors[$row[ 'id_attribute' ]][ 'id_image' ] =(( $row[ 'id_image' ] != NULL ) ? intval ( $row[ 'id_image' ] ) : - 1 );
}
}
}
$cat_products[$key][ 'colors' ] = $colors ;
}

CSS (samozřejmě úpravy jsou na vás, toto je jen odpich)

#product_list .color_pick {
float: left;
width: 20px;
height: 20px;
border: 1px solid #D0D3D8;
}

Martin89 · December 17, 2010

Ik ben hier ook naar op zoek, werkt inderdaad bij mij ook niet.

MaartenPol · December 18, 2010

Ik ben hier ook naar op zoek, werkt inderdaad bij mij ook niet.

I left the code unchanged, didn't do an update, but suddenly I saw it on a page. If I put ONLY one product in a category it shows. How comes?

MaartenPol · December 21, 2010

Anyone who knows what makes this code go wrong in PS1.3??

Martin89 · December 30, 2010

This code didint work for my shop 1.3?? Is this working in older versions?? I hope someone knows how to fix this...

Niriza · February 23, 2011

I also want to put a color picker in the product-list.tpl can anyone post me all the code of product-list.tpl. :roll:

MaartenPol · April 9, 2011

Anyone who got this working in 1.3??

As an example I got one product putted in a new category where it's the only product. Then I got this:

The the same product in a category with other products:

It looks like the variable $product.colors isn't filled when more then one product in the category. Any clue?

MaartenPol · April 20, 2011

I got it finally working correctly on Prestashop 1.4. There are some little changes to let it work since the last codes. I tried the same code in a PS 1.3 environment but it won't work there. This is what I did:

in controllers/CategoryController.php add around line 141, just before self::$smarty->assign(array( :

/* colors */
foreach ( $cat_products as $key => $cat_product ) {
   $product = new Product ( intval ( $cat_product[ 'id_product' ] ), true , intval ( $cookie -> id_lang ));
   $colors = array();
   $attributesGroups = $product->getAttributesGroups((int)(self::$cookie->id_lang));
   if ( Db :: getInstance ()-> numRows ()) {
       foreach ( $attributesGroups AS $k => $row ) {
           /* Color management */
           if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product -> id_color_default ){
               $colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
               $colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
               $colors[$row[ 'id_attribute' ]][ 'id_image' ] =(( $row[ 'id_image' ] != NULL ) ? intval ( $row[ 'id_image' ] ) : - 1 );
           }
       }
   }
   $cat_products[$key][ 'colors' ] = $colors ;
}

In your themename/product-list.tpl add this where you want. I did it around line 35, just after the product description.

{if !empty($product.colors)} 
{l s='Available colors'} :    
   {foreach from=$product.colors key=id_attribute item=color }    

   {/foreach}
{/if}

in your themename/css/product_list.css add this:

#product_list .color_pick_text {
   margin-top:10px;
   float:left;    
}
#product_list .color_pick {
   margin-top:10px;
   float:left;
   display:block;
   width: 13px;
   height: 13px;
   margin-left:2px;
   margin-right:2px;
}

Should work in PS 1.4.0.17

aliaspt · April 26, 2011

Is this code going to work in PS 1.3.1?

MaartenPol · April 26, 2011

Is this code going to work in PS 1.3.1?

No, as I mentioned before in my previous post I tried in a 1.3.2 environment and it won't work there.

aliaspt · April 26, 2011

Bummer. Anyone knows how to make this work for PS 1.3?
I saw some website that added some images as specifications and they show up in the product list. But then you'd have to add the colors manually as images for every single product.

vanillafrog · June 9, 2011

The code works! Thanks!
I want to just display "More colors" in the product-list.tpl page.
So by altering the code to this works:

{if !empty($product.colors)} 
   More Colors
{/if}

However the colour picker must be enabled. Is there a way to show that even if the color picker is not enabled, but there are color combinations?

aliaspt · June 9, 2011

The code works! Thanks!
I want to just display "More colors" in the product-list.tpl page.
So by altering the code to this works:
{if !empty($product.colors)} 
   More Colors
{/if} 
However the colour picker must be enabled. Is there a way to show that even if the color picker is not enabled, but there are color combinations?

What version of PS are you using?

vanillafrog · June 9, 2011

Hi aliaspt, I am using 1.4.0!

aliaspt · June 9, 2011

OK, thank you. Glad it works for you.

I guess I'll have to wait until there is a solution for 1.3.1.

PrestaMagic · July 2, 2011

I was getting an empty array until I added the "self::" to:


   $product = new Product ( intval ( $cat_product[ 'id_product' ] ), true , intval (self::$cookie ->id_lang ));

   $attributesGroups = $product -> getAttributesGroups ( intval ( self::$cookie->id_lang ));

Just in case anyone else had trouble with this in 1.4x

queeckee · September 29, 2011

i am trying to add this code into 1.4.4.1 and no luck at all.

George Dina · October 13, 2011

i am trying to add this code into 1.4.4.1 and no luck at all.

Hey queekee,

Works fine for me in 1.4.4.1

Here is the code in the CategoryController.php

   /* colors */
   foreach ( $cat_products as $key => $cat_product ) {
    $product = new Product ( intval ( $cat_product[ 'id_product' ] ), true , intval ( self::$cookie -> id_lang ));
    $colors = array();
    $attributesGroups = $product->getAttributesGroups((int)(self::$cookie->id_lang));
    if ( Db :: getInstance ()-> numRows ()) {
	    foreach ( $attributesGroups AS $k => $row ) {
		    /* Color management */
		    if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product -> id_color_default ){
			    $colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
			    $colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
		    }
	    }
    }
    $cat_products[$key][ 'colors' ] = $colors ;
   }

You put this just above the self::$smarty->assign(array( 'products' => (isset($cat_pro... as MaartenPol said.

In product_list.tpl I have this:

   {if !empty($product.colors)}
   {foreach from=$product.colors key=id_attribute item=color}
 <span>
 <span class="color_picked" style="background: {$color.value};" title="{$color.name}"></span>
 </span>
   {/foreach}
   {/if}

And in product_list.css I have this:

.color_picked {
display: block;
float: left;
margin: 5px 2px 5px 2px;
width: 10px;
height: 10px;
cursor: pointer;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

Here is a print screen from the category page:

On the last product on the left I added in combinations three colors.

This is not the final version, just for you to see that works.

If you have problems doing this, send me those three files I mentioned.

Thanks MaartenPol for sharing, spared me for some coding hours.

George.

Luis Alcalá · November 17, 2011

This dont´ work on Prestashop 1.4.5.1 and im gettind crazy trying to implement it

Luis Alcalá · December 15, 2011

Nobody has achieved this in 1.4.X??

sokpet · December 22, 2011

Hi, MaartenPol

Did you try to implement the same with the thumbs on product-list page? for version 1.4.+

ismailov · December 27, 2011

For PrestaShop™ 1.4.6.2 works this one:

1. In controllers/CategoryController.php add around line 132, just before self::$smarty->assign(array( :

foreach ( $this->cat_products as $key => $cat_product ) {
    $product = new Product ( intval ( $cat_product[ 'id_product' ] ), true , intval ( self::$cookie -> id_lang ));
    $colors = array();
    $attributesGroups = $product->getAttributesGroups((int)(self::$cookie->id_lang));
    if ( Db :: getInstance ()-> numRows ()) {
		    foreach ( $attributesGroups AS $k => $row ) {
				    /* Color management */
				    if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product -> id_color_default ){
						    $colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
						    $colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
				    }
		    }
    }
    $this->cat_products[$key][ 'colors' ] = $colors ;
}

2. In your themename/product-list.tpl add this where you want. I did it around line 38, just after the product description.

{if !empty($product.colors)}
   {foreach from=$product.colors key=id_attribute item=color}
	 <span class="color_picker" style="background: {$color.value};" title="{$color.name}"></span>
   {/foreach}
{/if}

3. In your themename/css/product_list.css add this:

#product_list .color_picker {
   display: block;
   float: left;
   width: 10px;
   height: 10px;
   margin: 5px 2px 5px 2px;
   cursor: pointer;
   border: 1px solid #D0D3D8;
}

Good luck

MaartenPol · December 30, 2011

Hi, MaartenPol

Did you try to implement the same with the thumbs on product-list page? for version 1.4.+

no, i didn't. Just with the colors.

But now I am setting up a 1.6.2. site, but its not visible anymore. I am getting kind of frustrated as ismailov has it working on that version. Any ideas?

ismailov · January 1, 2012

no, i didn't. Just with the colors.

But now I am setting up a 1.6.2. site, but its not visible anymore. I am getting kind of frustrated as ismailov has it working on that version. Any ideas?

My code work with current version of PrestaShop 1.4.6.2.

For developing anything with PrestaShop you must set “Force Compile” to ON in Preference tab -> Performance. For more information looks this article.

hajakif · January 1, 2012

Its works... perfectly ! Instead of colors how to show the texture of the color attribute....? help me out Bro!

papich · January 13, 2012

For PrestaShop™ 1.4.6.2 works this one:

1. In controllers/CategoryController.php add around line 132, just before self::$smarty->assign(array( :

foreach ( $this->cat_products as $key => $cat_product ) {
	$product = new Product ( intval ( $cat_product[ 'id_product' ] ), true , intval ( self::$cookie -> id_lang ));
	$colors = array();
	$attributesGroups = $product->getAttributesGroups((int)(self::$cookie->id_lang));
	if ( Db :: getInstance ()-> numRows ()) {
			foreach ( $attributesGroups AS $k => $row ) {
					/* Color management */
					if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product -> id_color_default ){
							$colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
							$colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
					}
			}
	}
	$this->cat_products[$key][ 'colors' ] = $colors ;
}

2. In your themename/product-list.tpl add this where you want. I did it around line 38, just after the product description.

{if !empty($product.colors)}
{foreach from=$product.colors key=id_attribute item=color}
	 <span class="color_picker" style="background: {$color.value};" title="{$color.name}"></span>
{/foreach}
{/if}

3. In your themename/css/product_list.css add this:

#product_list .color_picker {
display: block;
float: left;
width: 10px;
height: 10px;
margin: 5px 2px 5px 2px;
cursor: pointer;
border: 1px solid #D0D3D8;
}

Good luck

Thanks but doesn't work in ps 1.4.4.1

rykketid · January 13, 2012

Thnx for the code.

It works in 1.4.6.2 on Category page but it doesn't work on other pages (Manufacturer, Prices-drop...)

How make it on these pages?

Cerise · January 13, 2012

rykketid: should probably add the line to tlp files associated with what you want (so manufacturer.tpl, ect).

The code works fine on 1.4.6 and I thank you. However, when I have a combination (color + size for example), it does not display color picker. Do you have an idea ?

Thank you !

Cerise · January 13, 2012

Oops, it's OK ! I forgot to display the color picker in the variation of the product Thx for your contribution !

kukucska666 · January 15, 2012

Thnx for the code.

It works in 1.4.6.2 on Category page but it doesn't work on other pages (Manufacturer, Prices-drop...)

How make it on these pages?

For PrestaShop™ 1.4.6.2 works this one:

1. In controllers/ManufacturerController.php around line 80

after $this->pagination($nbProducts);



$this->pagination($nbProducts);
self::$smarty->assign(array(
'nb_products' => $nbProducts,
'products' => $this->manufacturer->getProducts($this->manufacturer->id, (int)self::$cookie->id_lang, (int)$this->p, (int)$this->n, $this->orderBy, $this->orderWay),
'path' => ($this->manufacturer->active ? Tools::safeOutput($this->manufacturer->name) : ''),
'manufacturer' => $this->manufacturer));

replace for this

$this->pagination($nbProducts);
  $this->man_products =$this->manufacturer->getProducts($this->manufacturer->id, (int)self::$cookie->id_lang, (int)$this->p, (int)$this->n, $this->orderBy, $this->orderWay);
foreach ( $this->man_products as $key => $man_product ) {
		$product = new Product ( intval ( $man_product[ 'id_product' ] ), true , intval ( self::$cookie -> id_lang ));
		$colors = array();
		$attributesGroups = $product->getAttributesGroups((int)(self::$cookie->id_lang));
		if ( Db :: getInstance ()-> numRows ()) {
						foreach ( $attributesGroups AS $k => $row ) {
										/* Color management */
										if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product -> id_color_default ){
														$colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
														$colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
	   $colors[$row[ 'id_attribute' ]][ 'id' ] = $row[ 'id_attribute' ] ;
										}
						}
		}
		$this->man_products[$key][ 'colors' ] = $colors ;
}
self::$smarty->assign(array(
'nb_products' => $nbProducts,
'products' => $this->man_products,
'path' => ($this->manufacturer->active ? Tools::safeOutput($this->manufacturer->name) : ''),
'manufacturer' => $this->manufacturer));

2. If it works in the categories, you will not need to change product_list.tpl file.

3. If instead of color images using a colors to display, please write into the product_list.tpl this:

{if !empty($product.colors)}
	   {foreach from=$product.colors key=id_attribute item=color}
   <img style="border: 1px solid black;" src="{$img_col_dir}{$color.id}.jpg" alt="{$color.name}" title="{$color.name}" width="13" height="13" />
	  {/foreach}
  {/if}

Good luck

Rohidas Sanap · January 18, 2012

hey jus tell me can i replace the whole footer with different one?

If yes, then how can i do it?

rykketid · February 6, 2012

For PrestaShop™ 1.4.6.2 works this one:

...

Good luck

Thnx!

For Prices drop page (PricesDropController.php):

 $this->pagination($nbProducts);
 self::$smarty->assign(array(
  'products' => Product::getPricesDrop((int)(self::$cookie->id_lang), (int)($this->p) - 1, (int)($this->n), false, $this->orderBy, $this->orderWay),
  'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),
  'nbProducts' => $nbProducts,
  'homeSize' => Image::getSize('home')));

 $this->pagination($nbProducts);
 $this->sale =Product::getPricesDrop((int)(self::$cookie->id_lang), (int)($this->p) - 1, (int)($this->n), false, $this->orderBy, $this->orderWay);
 foreach ( $this->sale as $key => $sale ) {
  $product = new Product ( intval ( $sale[ 'id_product' ] ), true , intval ( self::$cookie -> id_lang ));
  $colors = array();
  $attributesGroups = $product->getAttributesGroups((int)(self::$cookie->id_lang));
  if ( Db :: getInstance ()-> numRows ()) {
foreach ( $attributesGroups AS $k => $row ) {
  if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product -> id_color_default ){
   $colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
   $colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
   $colors[$row[ 'id_attribute' ]][ 'id' ] = $row[ 'id_attribute' ] ;
  }
 }
}
  $this->sale[$key][ 'colors' ] = $colors ;
 }
 self::$smarty->assign(array(
 'products' => $this->sale,
 'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),
 'nb_products' => $nbProducts,
 'homeSize' => Image::getSize('home')));

rykketid · February 6, 2012

Anyone who knows how make it in SearchController?

flo-imajean · February 11, 2012

hi all,

thx for this code who work on my category.php but i can't add this on the best-sale.php, new-products.php and price-drop.php because i don't know how doing (i'm a noob)^^.

can someone help me to integrate this in my website ?

thanks for the help

edit : works on price-drop.php now! i try myself but it's hard

edit 2 : works on new-products.php ;p

edit 3 : wworks on best-sales.php yeahhh i win.

thanks again for all

ayakushin · February 22, 2012

Hi. Thanks for the solution. It works.

I recommend do not put your code inside the core classes. Instead use override functionality.

Put the following to override/classes/Product.php (or create new one):

<?php
class Product extends ProductCore
{
   public static function getProductsProperties($id_lang, $query_result)
{
    $products = parent::getProductsProperties($id_lang, $query_result);
    foreach ( $products as &$cat_product ) {
	    $product = new Product ( intval ( $cat_product[ 'id_product' ] ), true , intval ($id_lang));
	    $colors = array();
	    $attributesGroups = $product->getAttributesGroups((int)($id_lang));
	    if ( Db :: getInstance ()-> numRows ()) {
			    foreach ( $attributesGroups AS $k => $row ) {
					    /* Color management */
					    if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product->id_color_default ){
							    $colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
							    $colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
							    $colors[$row[ 'id_attribute' ]][ 'id_image' ] =(( !empty($row[ 'id_image' ]) ) ? intval ( $row[ 'id_image' ] ) : - 1 );
					    }
			    }
	    }
	    $cat_product[ 'colors' ] = $colors ;
    }
    return $products;
   }
}

As you can see I override the Product class because the method getProductsProperties() is highly usable inside the prestashop, so a lot of issues in this topic can be solved.

Jolkro · February 29, 2012

Hi All

I want to thank you for this code.

The problem is that it will not work if I use a Ajax filter module.

I use prestashop 1.4.4.1 and the filter module: Ajax Filter

v1.1.3 from

Presto-Changeo

When I turn it off it shows the color just fine, but when the module is activated the colors just disappears.

I have tried to modify the modules product-list.tpl, but with no luck.

Do anybody know what the problem could be?

The module most override something in the product-list.tpl or what do you guys think?

Any help would be greatly appreciated.

Francisco Carlão · February 29, 2012

Anyone who knows how make it in SearchController?

just change all the if()

if ($this->instantSearch && !is_array($query))
 {
  $this->productSort();
  $this->n = abs((int)(Tools::getValue('n', Configuration::get('PS_PRODUCTS_PER_PAGE'))));
  $this->p = abs((int)(Tools::getValue('p', 1)));
  $search = Search::find((int)(self::$cookie->id_lang), $query, $this->p, $this->n, $this->orderBy, $this->orderWay);
  Module::hookExec('search', array('expr' => $query, 'total' => $search['total']));
  $nbProducts = $search['total'];
  $this->pagination($nbProducts);


   //[email protected]

   $this->pesquisa =$search['result'];
 foreach ( $this->pesquisa as $key => $pesquisa ) {
  $product = new Product ( intval ( $pesquisa[ 'id_product' ] ), true , intval ( self::$cookie -> id_lang ));
  $colors = array();
  $attributesGroups = $product->getAttributesGroups((int)(self::$cookie->id_lang));
  if ( Db :: getInstance ()-> numRows ()) {
 foreach ( $attributesGroups AS $k => $row ) {
   if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product -> id_color_default ){
    $colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
    $colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
    $colors[$row[ 'id_attribute' ]][ 'id' ] = $row[ 'id_attribute' ] ;
   }
  }
 }
  $this->pesquisa[$key][ 'colors' ] = $colors ;
 }
  //


  self::$smarty->assign(array(
  'products' => $search['result'], // DEPRECATED (since to 1.4), not use this: conflict with block_cart module
  'search_products' => $this->pesquisa,
  'nbProducts' => $search['total'],
  'search_query' => $query,
  'instantSearch' => $this->instantSearch,
  'homeSize' => Image::getSize('home')));
 }

and

another if ()

elseif ($query = Tools::getValue('search_query', Tools::getValue('ref')) AND !is_array($query))
 {
  $this->productSort();
  $this->n = abs((int)(Tools::getValue('n', Configuration::get('PS_PRODUCTS_PER_PAGE'))));
  $this->p = abs((int)(Tools::getValue('p', 1)));
  $search = Search::find((int)(self::$cookie->id_lang), $query, $this->p, $this->n, $this->orderBy, $this->orderWay);




  Module::hookExec('search', array('expr' => $query, 'total' => $search['total']));
  $nbProducts = $search['total'];
  $this->pagination($nbProducts);


   //[email protected]

   $this->pesquisa =$search['result'];
 foreach ( $this->pesquisa as $key => $pesquisa ) {
  $product = new Product ( intval ( $pesquisa[ 'id_product' ] ), true , intval ( self::$cookie -> id_lang ));
  $colors = array();
  $attributesGroups = $product->getAttributesGroups((int)(self::$cookie->id_lang));
  if ( Db :: getInstance ()-> numRows ()) {
 foreach ( $attributesGroups AS $k => $row ) {
   if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product -> id_color_default ){
    $colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
    $colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
    $colors[$row[ 'id_attribute' ]][ 'id' ] = $row[ 'id_attribute' ] ;
   }
  }
 }
  $this->pesquisa[$key][ 'colors' ] = $colors ;
 }




  self::$smarty->assign(array(
  'products' => $search['result'], // DEPRECATED (since to 1.4), not use this: conflict with block_cart module
  'search_products' => $this->pesquisa,
  'nbProducts' => $search['total'],
  'search_query' => $query,
  'homeSize' => Image::getSize('home')));
 }

and if you use cloud tags module

elseif ($tag = urldecode(Tools::getValue('tag')) AND !is_array($tag))
 {
  $nbProducts = (int)(Search::searchTag((int)(self::$cookie->id_lang), $tag, true));
  $this->pagination($nbProducts);
  $result = Search::searchTag((int)(self::$cookie->id_lang), $tag, false, $this->p, $this->n, $this->orderBy, $this->orderWay);


  //[email protected]

   $this->pesquisa =$result;
 foreach ( $this->pesquisa as $key => $pesquisa ) {
  $product = new Product ( intval ( $pesquisa[ 'id_product' ] ), true , intval ( self::$cookie -> id_lang ));
  $colors = array();
  $attributesGroups = $product->getAttributesGroups((int)(self::$cookie->id_lang));
  if ( Db :: getInstance ()-> numRows ()) {
 foreach ( $attributesGroups AS $k => $row ) {
   if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product -> id_color_default ){
    $colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
    $colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
    $colors[$row[ 'id_attribute' ]][ 'id' ] = $row[ 'id_attribute' ] ;
   }
  }
 }
  $this->pesquisa[$key][ 'colors' ] = $colors ;
 }



  //


  Module::hookExec('search', array('expr' => $tag, 'total' => sizeof($result)));
  self::$smarty->assign(array(
  'search_tag' => $tag,
  'products' => $this->pesquisa, // DEPRECATED (since to 1.4), not use this: conflict with block_cart module
  'search_products' => $this->pesquisa,
  'nbProducts' => $nbProducts,
  'homeSize' => Image::getSize('home')));
 }

ayakushin · March 1, 2012

Francisco Carlão: why do you need this huge code duplication?

Just look inside the Search::find() method and you'll see that it uses Product::getProductsProperties() at the end. So you can override this method once, as I posted previously, and you'll get the same effect without breaking prestashop core.

Jolkro: colors disappear because Ajax Filter doesn't use CategoryController. Try to override Product::getProductsProperties()

Jolkro · March 1, 2012

Ayakushin: Thank you for your suggestion.

I have tried using the code you posted in #35.

I made a new Product.php with the code and copied it to myshop/override/classes

But it still doesn't show the colors.

I have also tried to put the Product.php in myshop/modules/ajaxfilter/override/classes/Product.php

Still no change. It only shows the colors on the frontpage where the filter is not activated.

Have I misunderstood something?

I would love to get this to work, they are both essential features on the webshop and I would hate to have to choose.

edit. Just to your information, these are the .php files in the module:

product_ajax_request.php

price_range_ajax.php

ajax_request.php

ajaxfilter.php

I shall probably override or change one of them. Guessing the product_ajax_request.php.

ayakushin · March 1, 2012

Jolkro:

1. Directory "myshop" - is it a root folder or a theme? Should be a root.

2. No need to put overridden class under a module directory, Prestashop will never find it.

3. Could you put var_dump('ok') or print_r('ok') inside the overridden class method. Does any output appear?

But if you have done what I've listed here and no reaction the way to solve your issue is to deep inside the Ajax Filter module

and find out what a method it calls. And then override this method.

Jolkro · March 1, 2012

Ayakushin:

1. myshop is the root (Just a name a gave it in this forum)

2. Ok

3. I put "print_r('ok');" just above "return $products;" in the code you gave me in my Product.php and it showed the "ok" on top of the page. So it should work.

Any suggestions?

ayakushin · March 1, 2012

Jolkro:

As I understand, a debug message is visible all time during ajax filtration. Have no idea why it doesn't work.

Recheck your product-list.tpl. Is it really used during filtration. Try {$products|debug_print_var}

Jolkro · March 5, 2012

Just wanted to post that ayakushin's solution works great.

The problem in my case was the modules product-list.tpl.

The module also had a Product-list144.tpl that where used with prestashop version 144*, so when I modified that file the modification worked with the filter module also.

Thank you for all your help ayakushin!

teekay · March 20, 2012

Thank you for this code.

It works in 1.4.7.0.

What should I change to display the image thumbnails of each item...instead of the color picker.

It would be more clear to have "This item is available in # colors:" and to display the small image of the product with that color (like in the product.tpl: Cover + small thumbnails).

Thanks for helping

sballi · March 27, 2012

teekay below code is best solution for you.

I have edited solution given in this topic and it works like charm......

but im facing one problem when i use layered navigation to filter the product than all colors get disappear

In Catefory Controller page
/* colors */
   foreach ( $this->cat_products as $key => $cat_product ) {
  $product = new Product ( intval ( $cat_product[ 'id_product' ] ), true , intval ( self::$cookie -> id_lang ));
  $colors = array();
  $combinationImages = $product->getCombinationImages((int)(self::$cookie->id_lang));
  $attributesGroups = $product->getAttributesGroups((int)(self::$cookie->id_lang));
  if ( Db :: getInstance ()-> numRows ()) {
   foreach ( $attributesGroups AS $k => $row ) {
    /* Color management */
    if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product -> id_color_default ){
	 $colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
	 $colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
	 $colors[$row['id_attribute']]['id_image'] = isset($combinationImages[$row['id_product_attribute']][0]['id_image']) ? $combinationImages[$row['id_product_attribute']][0]['id_image'] : -1;
    }
   }
  }
  $this->cat_products[$key][ 'colors' ] = $colors;
   }


In product-list.tpl page
{foreach from=$product.colors key=id_attribute item=color}
<img src="{$link->getImageLink($product.link_rewrite, $color.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" id="colorImage" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
{/foreach}

any helpful solution will be appriciated

thanks in advance

sballi · March 28, 2012

is there anyone.......... pls help me

sballi · March 30, 2012

???????????????????????????

sballi · April 10, 2012

bump bump bump bump bump bump bump bump bump bump

jagh3d · April 21, 2012

I'm like sballi, the colors are not displayed when using the navigation layers. Someone we can illustrate ...???

peanut · May 2, 2012

Has anyone managed to get this working on PS 1.4.7 with Layered Navigation module enabled?

sballi · May 2, 2012

Experts????????????????????????????????????

core- · May 10, 2012

For PrestaShop™ 1.4.6.2 works this one:

1. In controllers/CategoryController.php add around line 132, just before self::$smarty->assign(array( :

foreach ( $this->cat_products as $key => $cat_product ) {
	$product = new Product ( intval ( $cat_product[ 'id_product' ] ), true , intval ( self::$cookie -> id_lang ));
	$colors = array();
	$attributesGroups = $product->getAttributesGroups((int)(self::$cookie->id_lang));
	if ( Db :: getInstance ()-> numRows ()) {
			foreach ( $attributesGroups AS $k => $row ) {
					/* Color management */
					if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product -> id_color_default ){
							$colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
							$colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
					}
			}
	}
	$this->cat_products[$key][ 'colors' ] = $colors ;
}

2. In your themename/product-list.tpl add this where you want. I did it around line 38, just after the product description.

{if !empty($product.colors)}
{foreach from=$product.colors key=id_attribute item=color}
	 <span class="color_picker" style="background: {$color.value};" title="{$color.name}"></span>
{/foreach}
{/if}

3. In your themename/css/product_list.css add this:

#product_list .color_picker {
display: block;
float: left;
width: 10px;
height: 10px;
margin: 5px 2px 5px 2px;
cursor: pointer;
border: 1px solid #D0D3D8;
}

Good luck

For some reason i cannot get this to work in 1.4.7.3 (and i don't use layered navigation).

No effects here

Has someone succeeded with this in 1.4.7.3 ?

I have color picker enabled on product page, but i'd like to have it on product list as well (it doesn't necessarilly have to open another pic, it just should indicate /by color squares/ how many different colors are available).

Thanks

Edited May 10, 2012 by core- (see edit history)

shopbebe · May 22, 2012

Indeed, for 1.4.7.3 doesn't work with Layered navigation. And these are both very useful, many "funny" clients can't understand that a product has more than one color, the one in the main image

it doesn't work only when you select a specific menu from layered navigation

Edited May 22, 2012 by shopbebe (see edit history)

core- · May 28, 2012

Indeed, for 1.4.7.3 doesn't work with Layered navigation. And these are both very useful, many "funny" clients can't understand that a product has more than one color, the one in the main image

it doesn't work only when you select a specific menu from layered navigation

Does it mean you managed to get it work without layered navigation ??

I don't use layered navigation (it's not even installed), but still can't get this to work on 1.4.7.3

Any ideas?

Thanks

core- · June 5, 2012

bump

mko-nl · June 22, 2012

I was looking for a way to show an image of my products in every available color on the product-list page.

I have tried the solutions mentioned on this page and got it to work with a product.php override file.

Below is my test product with three images and three colors as you can see:

On my product-list.tpl it currently looks like this:

Now I am wondering how difficult it would be to set the product attributes through the generated product link. When I click on any of the three colors the product page loads with the default attributes, I would like the color attribute to be set on red when clicking the red image and on blue when clicking the blue image.

Can anyone tell me if this is manageable with basic PHP knowledge and if so, where do I start.

So in short, what I need is to save a color attribute when clicking a product link and after the link is clicked the saved attribute should be set on the product page.

If I can find a solution for this problem I will share my code here so that others can benefit.

Layered navigation still works with only one problem: When you filter on a color, red for example, all other colors for any product with a red color attribute will also be shown.

Edited June 22, 2012 by mko-nl (see edit history)

efrain42 · June 28, 2012

Hi. Thanks for the solution. It works.

I recommend do not put your code inside the core classes. Instead use override functionality.

Put the following to override/classes/Product.php (or create new one):

<?php
class Product extends ProductCore
{
public static function getProductsProperties($id_lang, $query_result)
{
	$products = parent::getProductsProperties($id_lang, $query_result);
	foreach ( $products as &$cat_product ) {
		$product = new Product ( intval ( $cat_product[ 'id_product' ] ), true , intval ($id_lang));
		$colors = array();
		$attributesGroups = $product->getAttributesGroups((int)($id_lang));
		if ( Db :: getInstance ()-> numRows ()) {
				foreach ( $attributesGroups AS $k => $row ) {
						/* Color management */
						if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product->id_color_default ){
								$colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
								$colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
								$colors[$row[ 'id_attribute' ]][ 'id_image' ] =(( !empty($row[ 'id_image' ]) ) ? intval ( $row[ 'id_image' ] ) : - 1 );
						}
				}
		}
		$cat_product[ 'colors' ] = $colors ;
	}
	return $products;
}
}

As you can see I override the Product class because the method getProductsProperties() is highly usable inside the prestashop, so a lot of issues in this topic can be solved.

AYAKUSHIN

I have to say that your code works like charm on my site but I have a little question about it. I am not a programmer/coder/scripter guy at all and I would like to know how you would modify it to do the following.

I am putting together a website selling shoes and your colors script works beautifully but I would also like to show and another available attributes that I have like the shoe size on the product-list.tpl. My attribute group is called 'size' and the values are EU shoe sizes.

I have tried a sort of mix-and-match copy-paste code that doesn't work at all because although I can sort of understand it I have no clue about the logic behind smarty and prestashop (my old days with Wordpress seems to be a lot clearer)

Thanks in advance

ayakushin · July 2, 2012

Hi efrain42.

Variable $attributesGroups contains all available attributes.

If you need to get only sizes do this:

1. Add $sizes = array(); after $colors = array();

2. Inside the "foreach ( $attributesGroups AS $k => $row )" loop add

if ('size' == $row['group_name']) {
   $sizes[$row['id_attribute']] = $row['attribute_name'];
}

3. And after "$cat_product[ 'colors' ] = $colors ;" add

$cat_product[ 'sizes' ] = $sizes ;

Now in the product-list.tpl you'll have access to sizes in the similar way as for colors.

If you will have any troubles with this solution, send me a private message.

faDdy · July 25, 2012

Is it possible to implement this mod in homefeatured block ?

Thanks.

jagh3d · November 2, 2012

Works on Prestashop 1.5?

jagh3d · November 10, 2012

I've been testing and definitely does not work in version 1.5.

Someone may say what has changed?.

tanasi · December 2, 2012

tried myself in 1.5.2 all the above solutions but no luck.

Maybe trying to copy code from the product.tpl and productcontroller.php get us somewhere...

Edited December 2, 2012 by tanasi (see edit history)

pazramone · December 21, 2012

I got it finally working correctly on Prestashop 1.4. There are some little changes to let it work since the last codes. I tried the same code in a PS 1.3 environment but it won't work there. This is what I did:

in controllers/CategoryController.php add around line 141, just before self::$smarty->assign(array( :

/* colors */
foreach ( $cat_products as $key => $cat_product ) {
$product = new Product ( intval ( $cat_product[ 'id_product' ] ), true , intval ( $cookie -> id_lang ));
$colors = array();
$attributesGroups = $product->getAttributesGroups((int)(self::$cookie->id_lang));
if ( Db :: getInstance ()-> numRows ()) {
	foreach ( $attributesGroups AS $k => $row ) {
		/* Color management */
		if (isset( $row[ 'attribute_color' ] ) AND $row[ 'attribute_color' ] AND $row[ 'id_attribute_group' ] == $product -> id_color_default ){
			$colors[$row[ 'id_attribute' ]][ 'value' ] = $row[ 'attribute_color' ] ;
			$colors[$row[ 'id_attribute' ]][ 'name' ] = $row[ 'attribute_name' ] ;
			$colors[$row[ 'id_attribute' ]][ 'id_image' ] =(( $row[ 'id_image' ] != NULL ) ? intval ( $row[ 'id_image' ] ) : - 1 );
		}
	}
}
$cat_products[$key][ 'colors' ] = $colors ;
}

In your themename/product-list.tpl add this where you want. I did it around line 35, just after the product description.

{if !empty($product.colors)}

{l s='Available colors'} :	

{foreach from=$product.colors key=id_attribute item=color }	



{/foreach}
{/if}

in your themename/css/product_list.css add this:

#product_list .color_pick_text {
margin-top:10px;
float:left;	
}
#product_list .color_pick {
margin-top:10px;
float:left;
display:block;
width: 13px;
height: 13px;
margin-left:2px;
margin-right:2px;
}

Should work in PS 1.4.0.17

Working in Prestashop 1.4.8.2

Thanks!

Radu · February 11, 2013

For prestashop 1.5 blocklayered module overwrites the product list data so that's why the code is not working.

For demo purposes I left out getting the image of the color group attribute (the previous code is not displaying in product list anyway)

Also for simplicity I just modify core files

1. CategoryController.php

after:

$this->assignProductList();

add:

 foreach ($this->cat_products as $key => $product_item) {
  $product = new Product($product_item['id_product'], false, self::$cookie->id_lang);
  $colors = array();
  $attributes = $product->getAttributeCombinations(self::$cookie->id_lang);
  foreach ($attributes as $attribute_key => $attribute) {
if ($attribute['is_color_group'] > 0) {
 $colors[$attribute['id_attribute']]['value'] = $attribute['attribute_name'];
}
  }
  $this->cat_products[$key]['colors'] = $colors;
 }

2. modules/blocklayered/blocklayered.php

after:

$products = Product::getProductsProperties((int)$cookie->id_lang, $products);

add:

 foreach ($products as $key => $product_item) {
  $product = new Product($product_item['id_product'], false, $cookie->id_lang);
  $colors = array();
  $attributes = $product->getAttributeCombinations($cookie->id_lang);
  foreach ($attributes as $attribute_key => $attribute) {
if ($attribute['is_color_group'] > 0) {
 $colors[$attribute['id_attribute']]['value'] = $attribute['attribute_name'];
}
  }
  $products[$key]['colors'] = $colors;
 }

2. product-list.tpl:

inside:

<div class="center_block">

add:

{if isset($product.colors)}{foreach from=$product.colors item=v}
 <a style="background: {$v.value};" title="{$v.value}">    </a>{/foreach}
{/if}

Now feel free to add actual attribute images and what else you need (style ...)

dpcdpc11 · February 12, 2013

For prestashop 1.5 blocklayered module overwrites the product list data so that's why the code is not working.

For demo purposes I left out getting the image of the color group attribute (the previous code is not displaying in product list anyway)

Also for simplicity I just modify core files

Thanks Radu... but your solution only works if English is the main language. Here's for example the output for the Yellow color in Romanian:

<a style="background: Galben" title="Galben">    </a>

The Title is fine but the background value doesn't make any sens in CSS.

So after 4 hours (it's freaking 6 AM and I have to be up in 3 hours) here's my alternative solution:

1. blocklayered.php

after:

$products = Product::getProductsProperties((int)$cookie->id_lang, $products);

add:

//START color picker
foreach ($products as $key => $product_item) {
$product = new Product($product_item['id_product'], false, $cookie->id_lang);
$colors = array();
$attributes_groups = $product->getAttributesGroups($cookie->id_lang);
if (is_array($attributes_groups) && $attributes_groups)
{
foreach ($attributes_groups as $k => $row)
{
// Color management
if ((isset($row['attribute_color']) && $row['attribute_color']) || (file_exists(_PS_COL_IMG_DIR_.$row['id_attribute'].'.jpg')))
{
$colors[$row['id_attribute']]['value'] = $row['attribute_color'];
$colors[$row['id_attribute']]['name'] = $row['attribute_name'];
}
}
$products[$key]['colors'] = $colors;
}
}
//END color picker

2. product-list.tpl

inside:

<div class="center_block">

add:

<!-- START color picker -->
<div class="color_picker">
{if isset($product.colors)}{foreach from=$product.colors item=v}
<span style="background: {$v.value};" title="{$v.name}"></span>{/foreach}
{/if}
</div>
<!-- END color picker -->

3. product_list.css

add:

#product_list li .color_picker span {
border: 1px solid #F8F8F8;
display: inline-block;
height: 14px;
width: 8px;x;
}

IMPORTANT!!! For some reason this code only works if it's placed into blocklayered.php. I don't know why this isn't working if it's placed inside CategoryController.php like it should! And the downside of this is that the color picker will not show up on pages where the Layered Navigation isn't displayed like: New Products and Price Drop Products Page.

If someone has a better solution please share it with us!

Edited February 12, 2013 by dpcdpc11 (see edit history)

Radu · February 12, 2013

The reason it's working only on blocklayered, because this module overwrites the product list results using javascript, after the page loads. So actually the pageloads with CategoryController code and then blocklayered takes over.

If you want to also test the CategoryController code just disable blocklayered

pradeep.k.srvastva · February 20, 2013

Guys i am able to generate all the groups combinations and combinationimages arrays on product listing page seperately for each of the product and display colors and other select groups created from b-offce on product-list.tpl in ps 1.5.2 but the thing is that presta uses js for changing for example images and updating the display of images i am stuck in there we could make this work if someone could help

shopbebe · February 25, 2013

Thank you Radu and dpcdpc11 ! I hope that some one will find a solution for showing color picker on the other pages, like new products and homefeatures... But thank you to those who did all the hard work until now

Radu · February 28, 2013

Firstly thank you to dpcdpc11 for his contribution on fixing the code.

For new products page and other similar ones the issue is that the products are taken using different methods

I exemplify for products new the solution for the other pages is very similar:

in controllers/front/NewProductsController.php

replace:

 $this->context->smarty->assign(array(
  'products' => Product::getNewProducts($this->context->language->id, (int)($this->p) - 1, (int)($this->n), false, $this->orderBy, $this->orderWay),
  'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),
  'nbProducts' => (int)($nbProducts),
  'homeSize' => Image::getSize(ImageType::getFormatedName('home')),
  'comparator_max_item' => Configuration::get('PS_COMPARATOR_MAX_ITEM')
 ));

with:

 $products = Product::getNewProducts($this->context->language->id, (int) ($this->p) - 1, (int) ($this->n), false, $this->orderBy, $this->orderWay);
//START color picker
 if (!empty($products)) {
  $cookie = $this->context->cookie;
  foreach ($products as $key => $product_item) {
   $product = new Product($product_item['id_product'], false, $cookie->id_lang);
   $colors = array();
   $attributes_groups = $product->getAttributesGroups($cookie->id_lang);
   if (is_array($attributes_groups) && $attributes_groups) {
 foreach ($attributes_groups as $k => $row) {
// Color management
  if ((isset($row['attribute_color']) && $row['attribute_color']) || (file_exists(_PS_COL_IMG_DIR_ . $row['id_attribute'] . '.jpg'))) {
   $colors[$row['id_attribute']]['value'] = $row['attribute_color'];
   $colors[$row['id_attribute']]['name'] = $row['attribute_name'];
  }
 }
 $products[$key]['colors'] = $colors;
   }
  }
 }
//END color picker
 $this->context->smarty->assign(array(
  'products' => $products,
  'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),
  'nbProducts' => (int) ($nbProducts),
  'homeSize' => Image::getSize(ImageType::getFormatedName('home')),
  'comparator_max_item' => Configuration::get('PS_COMPARATOR_MAX_ITEM')
 ));

the rest of modifications remain as dpcdpc11 wrote:

in themes/default/product-list.tpl inside <div class="center_block"> add:

<!-- START color picker -->
<div class="color_picker">
{if isset($product.colors)}AA{foreach from=$product.colors item=v}
<span style="background: {$v.value};" title="{$v.name}"></span>{/foreach}
{/if}
</div>
<!-- END color picker -->

in your css file:

#product_list li .color_picker span {
border: 1px solid #F8F8F8;
display: inline-block;
height: 14px;
width: 8px;
}

dpcdpc11 · February 28, 2013

THANK YOU RADU!!!! You're a genius as always!

And for the less experience prestashop coders like me, here's how you make the color picker work in the manufacturers list:

Edit controllers/front/ManufacturerController.php (I'm too tired to figure out again how to overwrite the function)

and replace (inside assignOne() function):

$this->context->smarty->assign(array(
'nb_products' => $nbProducts,
'products' => $this->manufacturer->getProducts($this->manufacturer->id, $this->context->language->id, (int)$this->p, (int)$this->n, $this->orderBy, $this->orderWay),
'path' => ($this->manufacturer->active ? Tools::safeOutput($this->manufacturer->name) : ''),
'manufacturer' => $this->manufacturer,
'comparator_max_item' => Configuration::get('PS_COMPARATOR_MAX_ITEM'))
);

with:

 $products = $this->manufacturer->getProducts($this->manufacturer->id, $this->context->language->id, (int)$this->p, (int)$this->n, $this->orderBy, $this->orderWay);

   //START color picker
   if (!empty($products)) {
 $cookie = $this->context->cookie;
 foreach ($products as $key => $product_item) {
  $product = new Product($product_item['id_product'], false, $cookie->id_lang);
  $colors = array();
  $attributes_groups = $product->getAttributesGroups($cookie->id_lang);
  if (is_array($attributes_groups) && $attributes_groups) {
 foreach ($attributes_groups as $k => $row) {
 // Color management
  if ((isset($row['attribute_color']) && $row['attribute_color']) || (file_exists(_PS_COL_IMG_DIR_ . $row['id_attribute'] . '.jpg'))) {
   $colors[$row['id_attribute']]['value'] = $row['attribute_color'];
   $colors[$row['id_attribute']]['name'] = $row['attribute_name'];
  }
 }
 $products[$key]['colors'] = $colors;
  }
 }
   }
   //END color picker

 $this->context->smarty->assign(array(
  'nb_products' => $nbProducts,
  'products' => $products,
  'path' => ($this->manufacturer->active ? Tools::safeOutput($this->manufacturer->name) : ''),
  'manufacturer' => $this->manufacturer,
  'comparator_max_item' => Configuration::get('PS_COMPARATOR_MAX_ITEM'))
  );

And of course add the same code as mentioned above, in product-list.tpl and in the css file.

shopbebe · March 1, 2013

And for pricedrop, should it be something like this?

'products' => Product::getPricesDrop($this->context->language->id, (int)$this->p - 1, (int)$this->n, false, $this->orderBy, $this->orderWay);

//START color picker

if (!empty($products)) {

$cookie = $this->context->cookie;

foreach ($products as $key => $product_item) {

$product = new Product($product_item['id_product'], false, $cookie->id_lang);

$colors = array();

$attributes_groups = $product->getAttributesGroups($cookie->id_lang);

if (is_array($attributes_groups) && $attributes_groups) {

foreach ($attributes_groups as $k => $row) {

// Color management

if ((isset($row['attribute_color']) && $row['attribute_color']) || (file_exists(_PS_COL_IMG_DIR_ . $row['id_attribute'] . '.jpg'))) {

$colors[$row['id_attribute']]['value'] = $row['attribute_color'];

$colors[$row['id_attribute']]['name'] = $row['attribute_name'];

}

$products[$key]['colors'] = $colors;

}

//END color picker

$this->context->smarty->assign(array(

'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),

'nbProducts' => $nbProducts,

'products' => $products,

'homeSize' => Image::getSize(ImageType::getFormatedName('home')),

'comparator_max_item' => Configuration::get('PS_COMPARATOR_MAX_ITEM')

));

Its not working, so I know its wrong

Edited March 1, 2013 by shopbebe (see edit history)

dpcdpc11 · March 4, 2013

For Price Drops Page

in controllers/front/PricesDropController.php

replace:

$this->context->smarty->assign(array(
'products' => Product::getPricesDrop($this->context->language->id, (int)$this->p - 1, (int)$this->n, false, $this->orderBy, $this->orderWay),
'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),
'nbProducts' => $nbProducts,
'homeSize' => Image::getSize(ImageType::getFormatedName('home')),
'comparator_max_item' => Configuration::get('PS_COMPARATOR_MAX_ITEM')
));

with:

$products =Product::getPricesDrop($this->context->language->id, (int)$this->p - 1, (int)$this->n, false, $this->orderBy, $this->orderWay);
//START color picker
 if (!empty($products)) {
  $cookie = $this->context->cookie;
  foreach ($products as $key => $product_item) {
   $product = new Product($product_item['id_product'], false, $cookie->id_lang);
   $colors = array();
   $attributes_groups = $product->getAttributesGroups($cookie->id_lang);
   if (is_array($attributes_groups) && $attributes_groups) {
	 foreach ($attributes_groups as $k => $row) {
// Color management
	  if ((isset($row['attribute_color']) && $row['attribute_color']) || (file_exists(_PS_COL_IMG_DIR_ . $row['id_attribute'] . '.jpg'))) {
	   $colors[$row['id_attribute']]['value'] = $row['attribute_color'];
	   $colors[$row['id_attribute']]['name'] = $row['attribute_name'];
	  }
	 }
	 $products[$key]['colors'] = $colors;
   }
  }
 }
//END color picker
 $this->context->smarty->assign(array(
  'products' => $products,
  'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),
  'nbProducts' => (int) ($nbProducts),
  'homeSize' => Image::getSize(ImageType::getFormatedName('home')),
  'comparator_max_item' => Configuration::get('PS_COMPARATOR_MAX_ITEM')
 ));

Edited March 4, 2013 by dpcdpc11 (see edit history)

shopbebe · March 4, 2013

Thank you so much! Rarely such great support...

costin.bors · March 6, 2013

What should be done to have the color picker on Featured Products (homefeatured)?

What has to be changed in homefeatured.php and homefeatured.tpl

Thanks

anrub · March 7, 2013

What should be done to have the color picker on Featured Products (homefeatured)?

What has to be changed in homefeatured.php and homefeatured.tpl

Thanks

I tried this:

http://www.prestashop.com/forums/topic/227686-ayuda-undefined-index-colors-en-local-funciona-online-no%C2%BF/page__p__1119327#entry1119327

but only works in localhost an d i don´t know why

costin.bors · March 8, 2013

Thanks for taking time to answer anrub.

Here is what I was able to do:

Following Radu and todpcdpc11 recommendations I've added

in module/homefeatured/homefeatured.php in "public function hookDisplayHome($params)" after

$products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 10));

the color picker code:

//START color picker
if (!empty($products)) {
 $cookie = $this->context->cookie;


 foreach ($products as $key => $product_item) {
  $product = new Product($product_item['id_product'], false, $cookie->id_lang);
  $colors = array();
  $attributes_groups = $product->getAttributesGroups($cookie->id_lang);
  if (is_array($attributes_groups) && $attributes_groups) {
 foreach ($attributes_groups as $k => $row) {
 // Color management
  if ((isset($row['attribute_color']) && $row['attribute_color']) || (file_exists(_PS_COL_IMG_DIR_ . $row['id_attribute'] . '.jpg'))) {
   $colors[$row['id_attribute']]['value'] = $row['attribute_color'];
   $colors[$row['id_attribute']]['name'] = $row['attribute_name'];
  }
 }
 $products[$key]['colors'] = $colors;
  }
 }
}
 //END color picker

then in

themes/default/modules/homefeatured/homefeatured.tpl

inside <div class="product_desc">

<!-- START color picker -->
 <div class="color_picker">

 {if isset($product.colors)}
 {foreach from=$product.colors item=v}
  <span style="background: {$v.value};" title="{$v.name}"> 
  </span>
 {/foreach}
 {/if}
 </div>
 <!-- END color picker -->

and this is the css style

.product_desc .color_picker span {
border: 1px solid #F8F8F8;
display: inline-block;
height: 15px;
width: 25px;
margin-right: 6px;
}

It's working online - I've attached a screenshot - but it's not interactive, it doesn't change the product.

What I need is to have the same functionality like in product page: when click on a color to change the

product image with it's correspondent color.

I suppose it's javascript / jQuery but for the time being it's over my knowledges.

Any help will be greatly appreciated

shopbebe · March 22, 2013

Thank you, it looks great! Indeed, it would be nice to have the option to click on the colour and the image to change...

rusteh · April 7, 2013

Hello, great job guys. I think i've made something wrong. The thing is... if a product has more attributes, not only the color, it brings that up as colors too... look in the pic attached at i9300, it has 1 more attribute with 2 values of capacity that increase/decrease the price. It should only show the color attribute. I've followed dpcdpc11's guide.

ossy · April 16, 2013

Thank you very much for this solution, but i have some problem, in product list all is ok,

but I don´t get out well in new products

and in price drop and in home slides css not work. and the css of "out of stock" works correctly in the sames slides.

Thanks.

tianka · April 17, 2013

Does somebody came to such a problem: I set color attribute vale for the russian language (english is also supplied). But when I open the product page and click the color to choose, I get nothing an the place for the value in the url: ...paper.html#/color-

correct url would be ...paper.html#/color-orchid (with english value or any other id).

PrestaShop 1.5

Edited April 17, 2013 by tianka (see edit history)

editorstefan · April 19, 2013

Does anyone have working for Prestashop 1.5?

With the feature that when choosing color the image changes (as in product page)?

remyessers · April 23, 2013

I use this code on my product list:

{foreach from=$product.colors key=id_attribute item=color}
							 <div style="background: {$color.value}; display: block; float: left; width: 10px; height: 10px; margin: 2px 2px 2px 2px; border: 1px solid #D0D3D8;"></div>
{/foreach}

Works like a charm. But I need the id_product_attribute, the one which corresponds to the specific price, quantities etc. How do I get that id?

My code in blocklayered.php, corresponding to the color picker is:

//START color picker
foreach ($products as $key => $product_item) {
$product = new Product($product_item['id_product'], false, $cookie->id_lang);
$colors = array();
$attributes_groups = $product->getAttributesGroups($cookie->id_lang);
if (is_array($attributes_groups) && $attributes_groups)
{
foreach ($attributes_groups as $k => $row)
{
// color management
if ((isset($row['attribute_color']) && $row['attribute_color']) || (file_exists(_PS_COL_IMG_DIR_.$row['id_attribute'].'.jpg')))
{
$colors[$row['id_attribute']]['value'] = $row['attribute_color'];
$colors[$row['id_attribute']]['name'] = $row['attribute_name'];				  
}
}
$products[$key]['colors'] = $colors;
}
}
//END color picker

Can anyone help me?

editorstefan · April 23, 2013

I use this code on my product list:
{foreach from=$product.colors key=id_attribute item=color}
							 <div style="background: {$color.value}; display: block; float: left; width: 10px; height: 10px; margin: 2px 2px 2px 2px; border: 1px solid #D0D3D8;"></div>
{/foreach}
Works like a charm. But I need the id_product_attribute, the one which corresponds to the specific price, quantities etc. How do I get that id?

Does that work for 1.5.4?

Does it have the future when someone clicks color it changes image?

remyessers · April 23, 2013

Does that work for 1.5.4?

Does it have the future when someone clicks color it changes image?

It works for 1.5.3, the version I'm using. But it shows all the available colors of a product, it doesn't changes the product cover image. That would be the best thing!

editorstefan · April 23, 2013

It works for 1.5.3, the version I'm using. But it shows all the available colors of a product, it doesn't changes the product cover image. That would be the best thing!

It doesnt work for me :'(

Im using 1.5.4

i should but this in product-list.tpl right?

remyessers · April 23, 2013

It doesnt work for me :'(

Im using 1.5.4

i should but this in product-list.tpl right?

Yes, but the other code I placed in blocklayered.php. So if you use layered navigation, you should place the other code right after

$products = Product::getProductsProperties((int)$cookie->id_lang, $products);

editorstefan · April 23, 2013

Yes, but the other code I placed in blocklayered.php. So if you use layered navigation, you should place the other code right after
$products = Product::getProductsProperties((int)$cookie->id_lang, $products);

Ok i added your second code now also but still nothing

My website:

http://www.pryllager.se

remyessers · April 23, 2013

Thanks Radu... but your solution only works if English is the main language. Here's for example the output for the Yellow color in Romanian:
<a style="background: Galben" title="Galben">    </a>
The Title is fine but the background value doesn't make any sens in CSS.

So after 4 hours (it's freaking 6 AM and I have to be up in 3 hours) here's my alternative solution:

1. blocklayered.php

after:
$products = Product::getProductsProperties((int)$cookie->id_lang, $products);
add:
//START color picker
foreach ($products as $key => $product_item) {
$product = new Product($product_item['id_product'], false, $cookie->id_lang);
$colors = array();
$attributes_groups = $product->getAttributesGroups($cookie->id_lang);
if (is_array($attributes_groups) && $attributes_groups)
{
foreach ($attributes_groups as $k => $row)
{
// Color management
if ((isset($row['attribute_color']) && $row['attribute_color']) || (file_exists(_PS_COL_IMG_DIR_.$row['id_attribute'].'.jpg')))
{
$colors[$row['id_attribute']]['value'] = $row['attribute_color'];
$colors[$row['id_attribute']]['name'] = $row['attribute_name'];
}
}
$products[$key]['colors'] = $colors;
}
}
//END color picker
2. product-list.tpl

inside:
<div class="center_block">
add:

<div class="color_picker">
{if isset($product.colors)}{foreach from=$product.colors item=v}
<span style="background: {$v.value};" title="{$v.name}"></span>{/foreach}
{/if}
</div>

3. product_list.css

add:
#product_list li .color_picker span {
border: 1px solid #F8F8F8;
display: inline-block;
height: 14px;
width: 8px;x;
}
IMPORTANT!!! For some reason this code only works if it's placed into blocklayered.php. I don't know why this isn't working if it's placed inside CategoryController.php like it should! And the downside of this is that the color picker will not show up on pages where the Layered Navigation isn't displayed like: New Products and Price Drop Products Page.

If someone has a better solution please share it with us!

How can you get the id_product_attribute for each product color? I mean the one which is related to quantity, specific price etc. How do I get this variable?

editorstefan · April 23, 2013

How can you get the id_product_attribute for each product color? I mean the one which is related to quantity, specific price etc. How do I get this variable?

Did exctly what is says there but still doesnt work, should i change some code beacuse i use Swedish?

I have grib view, does that effect anything?

cutecat · May 21, 2013

Hello, great job guys. I think i've made something wrong. The thing is... if a product has more attributes, not only the color, it brings that up as colors too... look in the pic attached at i9300, it has 1 more attribute with 2 values of capacity that increase/decrease the price. It should only show the color attribute. I've followed dpcdpc11's guide.

Hi Rusteh, which code did you follow? too many versions...

cutecat · May 22, 2013

i am using english version, but nothing has happened.

I am using 1.5.4

these are the steps I had done.

1. blocklayered.php

after:

$products = Product::getProductsProperties((int)$cookie->id_lang, $products);

add:

//START color picker

foreach ($products as $key => $product_item) {

$product = new Product($product_item['id_product'], false, $cookie->id_lang);

$colors = array();

$attributes_groups = $product->getAttributesGroups($cookie->id_lang);

if (is_array($attributes_groups) && $attributes_groups)

{

foreach ($attributes_groups as $k => $row)

{

// Color management

if ((isset($row['attribute_color']) && $row['attribute_color']) || (file_exists(_PS_COL_IMG_DIR_.$row['id_attribute'].'.jpg')))

{

$colors[$row['id_attribute']]['value'] = $row['attribute_color'];

$colors[$row['id_attribute']]['name'] = $row['attribute_name'];

}

$products[$key]['colors'] = $colors;

}

//END color picker

2. product-list.tpl

inside:

add:

{if isset($product.colors)}{foreach from=$product.colors item=v}

<span style="background: {$v.value};" title="{$v.name}"></span>{/foreach}

{/if}

</div>

3. product_list.css

add:

#product_list li .color_picker span {

border: 1px solid #F8F8F8;

display: inline-block;

height: 14px;

width: 8px;x;

}

Edited May 22, 2013 by cutecat (see edit history)

cutecat · May 22, 2013

does the Attribute type: need to change to color before the code can work?

can I don't enable that?

I am planning to use this code.

So it will just show that there are more color options and my customers would need to go into the product to see the rest of the color...

{if !empty($product.colors)}

More Colors

{/if}

Edited May 22, 2013 by cutecat (see edit history)

cutecat · May 22, 2013

Thanks Radu... but your solution only works if English is the main language. Here's for example the output for the Yellow color in Romanian:
<a style="background: Galben" title="Galben">    </a>
The Title is fine but the background value doesn't make any sens in CSS.

So after 4 hours (it's freaking 6 AM and I have to be up in 3 hours) here's my alternative solution:

1. blocklayered.php

after:
$products = Product::getProductsProperties((int)$cookie->id_lang, $products);
add:
//START color picker
foreach ($products as $key => $product_item) {
$product = new Product($product_item['id_product'], false, $cookie->id_lang);
$colors = array();
$attributes_groups = $product->getAttributesGroups($cookie->id_lang);
if (is_array($attributes_groups) && $attributes_groups)
{
foreach ($attributes_groups as $k => $row)
{
// Color management
if ((isset($row['attribute_color']) && $row['attribute_color']) || (file_exists(_PS_COL_IMG_DIR_.$row['id_attribute'].'.jpg')))
{
$colors[$row['id_attribute']]['value'] = $row['attribute_color'];
$colors[$row['id_attribute']]['name'] = $row['attribute_name'];
}
}
$products[$key]['colors'] = $colors;
}
}
//END color picker
2. product-list.tpl

inside:
<div class="center_block">
add:

<div class="color_picker">
{if isset($product.colors)}{foreach from=$product.colors item=v}
<span style="background: {$v.value};" title="{$v.name}"></span>{/foreach}
{/if}
</div>

3. product_list.css

add:
#product_list li .color_picker span {
border: 1px solid #F8F8F8;
display: inline-block;
height: 14px;
width: 8px;x;
}
IMPORTANT!!! For some reason this code only works if it's placed into blocklayered.php. I don't know why this isn't working if it's placed inside CategoryController.php like it should! And the downside of this is that the color picker will not show up on pages where the Layered Navigation isn't displayed like: New Products and Price Drop Products Page.

If someone has a better solution please share it with us!

After the edit, the color came out to be like this. instead of appearing as a circle, mine is a rectangle...

Edited May 22, 2013 by cutecat (see edit history)

editorstefan · May 22, 2013

Does anyone have any solution for this?!

I cant even get them to show on my website.

Using Prestashop 1.5.4.0

cutecat · May 22, 2013

Does anyone have any solution for this?!

I cant even get them to show on my website.

Using Prestashop 1.5.4.0

u need to enable your color pick 1st. n follow the script stated by dpcdpc11

editorstefan · June 5, 2013

u need to enable your color pick 1st. n follow the script stated by dpcdpc11

What you mean?

I have done all that dpcdpc11 says, still doesnt show anything up :S

Dzidzia_2 · July 28, 2013

Is there any option to implement this in searchcontroller and bestsalescontroller in presta 1.5.4.1? I can't find any solution

cutecat · September 7, 2013

just upgraded to 1.5.5 and looks like i am unable to have the more color options...

cutecat · September 7, 2013

these are the steps I have done. did I missed out anything?



/home/mysite/public_html/themes/new_theme/css/product_list.css
(any location of the file is ok.)

#product_list li .color_picker span {
	border: 1px solid #C0C0C0;
	display: inline-block;
	height: 14px;
	width: 8px;
}

/home/mysite/public_html/themes/new_theme/product-list.tpl
(it should be placed within <div class="center_block">, also I have placed it after the title of the product. I placed it after 
{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}</a>
)

						<!-- START color picker -->
						<div class="color_picker">
						<!-- disable color, will be using "more colors text"
						{if isset($product.colors)}{foreach from=$product.colors item=v}
						<span style="background: {$v.value};" title="{$v.name}"></span>{/foreach}
						{/if}
						-->
						{if !empty($product.colors)} 
							<font color="#9933ff">More Colors</font>
						{/if} 
						</div>
						<!-- END color picker -->

/home/mysite/public_html/modules/blocklayered/blocklayered.php
(Place the code after this
$products = Product::getProductsProperties((int)$cookie->id_lang, $products);
)

//START color picker
foreach ($products as $key => $product_item) {
$product = new Product($product_item['id_product'], false, $cookie->id_lang);
$colors = array();
$attributes_groups = $product->getAttributesGroups($cookie->id_lang);
if (is_array($attributes_groups) && $attributes_groups)
{
foreach ($attributes_groups as $k => $row)
{
// Color management
if ((isset($row['attribute_color']) && $row['attribute_color']) || (file_exists(_PS_COL_IMG_DIR_.$row['id_attribute'].'.jpg')))
{
$colors[$row['id_attribute']]['value'] = $row['attribute_color'];
$colors[$row['id_attribute']]['name'] = $row['attribute_name'];
}
}
$products[$key]['colors'] = $colors;
}
}
//END color picker

Edited September 7, 2013 by cutecat (see edit history)

cutecat · September 7, 2013

anyone tried it with 1.5.5?

I need to get this working, as most of my items has quite a lot of color...

this is my site

Colors on product-list.tpl

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment