How to Show Product Attribute Option in Product List

[jahyax]

I was just wondering if can we show the option in selecting the product attribute in the product list page?

is it possible that the customer can select attribute option in the product list without clicking the product itself?

 

Has anyone tried to do this?

 

Thanks,

Jah Yax

[gonebdg - webindoshop.com]

Yes it can, but you have to modify the related controller files and the products-list.tpl:

CategoryController.php, NewProductsController.php, BestSalesController.php and, PriceDropController.php

 

You can do something like this, create new function() to create an array for each products :

/* function to get all necessary data of products combinations
 * @param $products An array of products data
 * return array products combinations
 */
public function getProductAttributeCombinations($products) {
    $combinations = array();

    foreach($products as $product)
    {
        // load product object
        $product = new Product ($product['id_product'], $this->context->language->id);

        // get the product combinations data
        // create array combinations with key = id_product
        $combinations[$product->id] = $product->getAttributeCombinations($this->context->language->id);
    }

    return $combinations;
}


public function initContent()
{
    parent::initContent();
    $products = $this->category->getProducts($this->context->language->id, (int)$this->p, (int)$this->n, $this->orderBy, $this->orderWay);
    $combinations = $this->getProductAttributeCombinations($products);
    $this->context->smarty->assign('combinations', $combinations);
}

Then in your template file/theme file (products-list.tpl) you can do something like this :

{foreach from=$combinations key=k item=comb}
    {* because the array key are id_product, we can separate the product combinations in here 
       with if/else statement compared with the id_product from the foreach loop of products-list *}
    {if $k = $product.id_product}
        {* The attribute Group Name *}
        <p class="comb_title">{$comb.group_name}</p>
        {* List of attribute values inside the attribute Group for current product *}
        <select>
        {foreach from=$comb item=attr}
            <option value="{$attr.id_attribute}">{$attr.attribute_name} {l s=': +'} {convertPrice price=$attr.unit_price_impact}</option>
        {/foreach}
        </select>
    {/if}
{/foreach}

Note: this is just an example ...

I didn't take look to the classes files and the controller file to give you the exact script, so you should try it out by yourself.

I guess this won't be too complicated if you just wanna be able to display product combinations for each product in the products list page, but if you want customer to be able to select the product combination and then "Add to cart", then it will be more complicated

Edited October 4, 2013 by gonebdg - webindoshop.com (see edit history)

[jahyax]

Thanks gonebdg. I will play with this.

[Guest]

Not working od presta 1.5.6 - shows only blank page on all Product lists.

[vekia]

The best solution to create list of available product's variants on list of products:

 

product list attributes for prestashop

 

[sureshk2n]

Hi nice code for start up. I added and modified few files to be able to add the selected combination to the cart if we have a one attribute combination.

 

For ex,

I have 2 attributes named "Brand" and "weight". 

The "Brand" attribute has following values "Brand1, Brand2, Brand3, etc.,"

The "Weight" attribute has following values "100g, 250g, 500g , 1kg, etc .,"

 

Case1:

Few product have only "Brand" attribute. For that the dropdown list shows all generate combinations. And it is working fine.

 

Case2

But few product have both "Brand" and "weight" attribute combination like

{Brand1 , 100g},

{Brand1, 250g} ,

{Brand2, 500g}

 

In this case, the dropdown lists all values like below, ie., instead of showing 3 items it shows 6 items.

Brand1

100g

Brand1

250g

Brand2

500g

 

Can you please suggest me the code to get the combinations of all attribute as a single item to be displayed in a dropdown?

 

Thanks

[huko]

I had the same problem like Boguslaw, blank page after using idea of gonebdg.

 

There was error about rewriting initContent function, so I make some changes and in CategoryController.php I changed original initContent function like this (about line 98):

public function initContent()
	{
		parent::initContent();
		
		$this->setTemplate(_PS_THEME_DIR_.'category.tpl');
		
		if (!$this->customer_access)
			return;

		if (isset($this->context->cookie->id_compare))
			$this->context->smarty->assign('compareProducts', CompareProduct::getCompareProducts((int)$this->context->cookie->id_compare));

		$this->productSort(); // Product sort must be called before assignProductList()
		
		$this->assignScenes();
		$this->assignSubcategories();
		if ($this->category->id != 1)
			$this->assignProductList();
	 	
	 	$products = $this->category->getProducts($this->context->language->id, (int)$this->p, (int)$this->n, $this->orderBy, $this->orderWay);
	    $combinations = $this->getProductAttributeCombinations($products);
		
		$this->context->smarty->assign(array(
			'category' => $this->category,
			'combinations' => $combinations,
			'description_short' => Tools::truncateString($this->category->description),
			'products' => (isset($this->cat_products) && $this->cat_products) ? $this->cat_products : null,
			'id_category' => (int)$this->category->id,
			'id_category_parent' => (int)$this->category->id_parent,
			'return_category_name' => Tools::safeOutput($this->category->name),
			'path' => Tools::getPath($this->category->id),
			'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),
			'categorySize' => Image::getSize(ImageType::getFormatedName('category')),
			'mediumSize' => Image::getSize(ImageType::getFormatedName('medium')),
			'thumbSceneSize' => Image::getSize(ImageType::getFormatedName('m_scene')),
			'homeSize' => Image::getSize(ImageType::getFormatedName('home')),
			'allow_oosp' => (int)Configuration::get('PS_ORDER_OUT_OF_STOCK'),
			'comparator_max_item' => (int)Configuration::get('PS_COMPARATOR_MAX_ITEM'),
			'suppliers' => Supplier::getSuppliers()
		));
	}

before this code I put code of  public function getProductAttributeCombinations($products) what gonebdg mentioned. And in Productlist.tpl this code from gonebdg aswell:

{foreach from=$combinations key=k item=comb}
			    {if $k = $product.id_product}
			        <p class="comb_title">{$comb.group_name}</p>
			        <select>
			        {foreach from=$comb item=attr}
			            <option value="{$attr.id_attribute}">{$attr.attribute_name}</option>
			        {/foreach}
			        </select>
			    {/if}
			{/foreach}

Problems:

1. If I look to some category now I see in every article attributes of all articles. It dificult to explain so I'm attaching screenshot. 
2. Prestashop saying error about Undefinied index $comb.group_name
3. How can I show only sizes what are available (by quantity in stock)

Somebody have some idea how to solve it? The second point is not so important for me but the first one.

Edited January 10, 2014 by huko (see edit history)

[zoomwi]

Hi! First of all sorry for my English, because is very bad 

 

gonebdg thank you for the code!!! 

 

Problems:

1. If I look to some category now I see in every article attributes of all articles. It dificult to explain so I'm attaching screenshot. 
2. Prestashop saying error about Undefinied index $comb.group_name
3. How can I show only sizes what are available (by quantity in stock)

Somebody have some idea how to solve it? The second point is not so important for me but the first one.

 

 

huko, I think I can help you with your first problem. Just try to change this :

 {if $k = $product.id_product}

For this:

 {if $product.id_product == $k}

Tell me if it works for you please (it works for me). About the other 2 problems I'm like you and trying to solve them.

[zoomwi]

Problems:

1. If I look to some category now I see in every article attributes of all articles. It dificult to explain so I'm attaching screenshot. 
2. Prestashop saying error about Undefinied index $comb.group_name
3. How can I show only sizes what are available (by quantity in stock)

Somebody have some idea how to solve it? The second point is not so important for me but the first one.

 

About your second problem... I solved it doing this:

 

    {if $product.id_product == $k}
{foreach from=$comb item=attr}
{/foreach}
        <p>{$attr.group_name}</p>

 

Probably it isn't a good solution for our code.... but it works 

[jrmarins]

HI!
 

Just a doubt. 

Efetuei these changes in my shop and worked perfectly visualization. 

However, when I select the attribute and click on add to cart and search the default attribute. 

Is that right?

[xakep2000]

1. Prestashop saying error about Undefinied index $comb.group_name
2. How can I show only sizes what are available (by quantity in stock)

Somebody have some idea how to solve it? The second point is not so important for me but the first one.

I also interested in these questions.Have you decided to these problems?

 

and one more question!

 

how did you split the attributes??? (see my screen)

for example, I have two attr:    colour and size. I want to display only SIZE. plz help, how to do that?

Edited February 5, 2014 by xakep2000 (see edit history)

[imageproz]

Does anyone have a working set of files for PS 1.5.6.2. for the combinations on products page? This would be very helpful as I don't know where to begin to change code.

 

Thanks

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

[safa]

thanks for all great sharing.

i confiruged  like this. this topic very helpfull for my time. 

 

i showed atribute stocks and calculeded.

 

ps version 1.5.6.2

 

regards..

[editorstefan]

How can i create so that I'm able to  choose combination and then 'add to cart'.?

It should by that change the price (I have set some combinations to add +$2 on price etc..)

 

Prestashop 1.5.4.1 here.

[editorstefan]

Does anyone know how to do this??

 

How can i create so that I'm able to  choose combination and then 'add to cart'.?

It should by that change the price (I have set some combinations to add +$2 on price etc..)

 

Prestashop 1.5.4.1 here.

[safa]

Does anyone know how to do this??

 

How can i create so that I'm able to  choose combination and then 'add to cart'.?

It should by that change the price (I have set some combinations to add +$2 on price etc..)

 

Prestashop 1.5.4.1 here.

hi;

"add to cart " it will be more complicated, i not used add to cart button for my project. i used prestashop catalog mode .

i think add to cart button not reguared for this because costumer have to see product all pictures, product all information before bought.

Edited February 26, 2014 by safa (see edit history)

[editorstefan]

hi;

"add to cart " it will be more complicated, i not used add to cart button for my project. i used prestashop catalog mode .

i think add to cart button not reguared for this because costumer have to see product all pictures, product all information before bought.

It depends what products you sell. For mine products there is no need to see images and description. Customers want easier to att products to cart directly from category page. 

Do you have any idea how this could be done?

[ChrisMessina]

Really helpful topic, we have done a similiar change to the product page for showing all combinations and prices impact in a table.

(Based on this : http://itinnovator.co/discussion/subject/prestashop-show-product-combination-attributes-with-prices-on-product-page )

 

It is for a PrestaShop in catalog mode for tools rental, so combinations are rental periods (1 day, 1 week, 1 month), the product base price is 0$ and the prices per rental period are set in the price impact of the combination.

 

So we have customized the provided code above for showing the prices of the rental periods also in the product-list.tpl in category page and it's working great.

 

Then, we taught, what if this combination has a specific price, how will it look?  So we made a specific price for a combination, and it is not showing on the product-list, not showing on the product page, the regular price is still on both pages.

 

Someone have a clue for the specific price situation?

 

Thanks!

[ukwyspa]

Hi

 

I have a problem with my product-list (in product pack), i want to show product attributes but if i edit productcontroler i have blank page, anyone know how to do this? 

 

[ChrisMessina]

Blank page is probably an error, look at the error_log file to see wich file and line the error is located.

[AZC]

Can't do it. Tried everything, can someone explain in a little more detail how to do this?

 

Just a question, if i want to do the above, do i have to change all the controllers or can i just change product controller?

Edited April 6, 2014 by AZC (see edit history)

[Caroline W]

I've used this code successfully on the product-list template + CategoryController file. I now need to move it into a module for the theme on the site. One of the things I tried was to use the same code as I successfully got working in the category view, by posting the 2 functions in the controller file for the module (extended from modulecontroller) and the foreach loop in the template file for the module. But nothing happens... What am I missing? I would really appreciate some pointers to get this working.

Edited August 12, 2014 by Caroline W (see edit history)

[lakhvinder]

not working

[gabriielalves]

Works on all controllers, but when I put the controller of the index shows nothing screen goes blank. I need to show the attributes of the products on the homepage

[effectdesign]

Yes it can, but you have to modify the related controller files and the products-list.tpl:

CategoryController.php, NewProductsController.php, BestSalesController.php and, PriceDropController.php

 

You can do something like this, create new function() to create an array for each products :

/* function to get all necessary data of products combinations
 * @param $products An array of products data
 * return array products combinations
 */
public function getProductAttributeCombinations($products) {
    $combinations = array();

    foreach($products as $product)
    {
        // load product object
        $product = new Product ($product['id_product'], $this->context->language->id);

        // get the product combinations data
        // create array combinations with key = id_product
        $combinations[$product->id] = $product->getAttributeCombinations($this->context->language->id);
    }

    return $combinations;
}


public function initContent()
{
    parent::initContent();
    $products = $this->category->getProducts($this->context->language->id, (int)$this->p, (int)$this->n, $this->orderBy, $this->orderWay);
    $combinations = $this->getProductAttributeCombinations($products);
    $this->context->smarty->assign('combinations', $combinations);
}

Then in your template file/theme file (products-list.tpl) you can do something like this :

{foreach from=$combinations key=k item=comb}
    {* because the array key are id_product, we can separate the product combinations in here 
       with if/else statement compared with the id_product from the foreach loop of products-list *}
    {if $k = $product.id_product}
        {* The attribute Group Name *}
        <p class="comb_title">{$comb.group_name}</p>
        {* List of attribute values inside the attribute Group for current product *}
        <select>
        {foreach from=$comb item=attr}
            <option value="{$attr.id_attribute}">{$attr.attribute_name} {l s=': +'} {convertPrice price=$attr.unit_price_impact}</option>
        {/foreach}
        </select>
    {/if}
{/foreach}

Note: this is just an example ...

I didn't take look to the classes files and the controller file to give you the exact script, so you should try it out by yourself.

I guess this won't be too complicated if you just wanna be able to display product combinations for each product in the products list page, but if you want customer to be able to select the product combination and then "Add to cart", then it will be more complicated

how to add to the list view items in a grid in prestashop 1.6.0.8? Did this someone? Thank you in advance

Edited September 23, 2014 by effectdesign (see edit history)

[bullet_tooth]

Here a module Product List Attributes 1.3.5

It works nice on presta 1.5, but on 1.6 doesn't work 'Add to cart' , maybe someone know what should be changed in module

Edited October 27, 2014 by vekia (see edit history)

[vekia]

it's a free module or paid one and you shared it for public ?

[safa]

it's a free module or paid one and you shared it for public ?

hello vekia;

it's paid module from Tomer. ,

please delete module links or delete post.

[vekia]

as i supposed

link removed

 

thank you

[fransjaeger]

Hi,

This is usefull, thanks for sharing

 

I managed to build bootstrap dropdown with combinations for each product on product list. Willing to share... Let me know if youre looking for it

Edited December 11, 2014 by michaelhjulskov (see edit history)

[leoknwme]

Hi,

This is usefull, thanks for sharing

 

I managed to build bootstrap dropdown with combinations for each product on product list. Willing to share... Let me know if youre looking for it

 

Hi i would like to know the steps l am using ps.1.6 and leo theme and i want to display like this

 

 

thanks in advance

Leo

Edited January 4, 2015 by leoknwme (see edit history)

[fransjaeger]

Hi i would like to know the steps l am using ps.1.6 and leo theme and i want to display like this

 

Screen shot 2015-01-04 at 11.47.42 PM.png

 

thanks in advance

Leo

Hi 

 

You can see what i managed to do here: Dyrefoder.dk

let me know if this is what youre looking for

 

 

 

 

Any particular skill to show to us? I am longing for the answers. 

Who are you writing to?

Edited January 5, 2015 by michaelhjulskov (see edit history)

[leoknwme]

 

Hi 

 

You can see what i managed to do here: Dyrefoder.dk

let me know if this is what youre looking for

 

 

 

 

Who are you writing to?

 

thanks for the reply

yes exactly i am looking for the same as per the link Dyrefoder.dk

[fransjaeger]

HI leo

Great
Im a very busy these days opening my new shop and warehouse etc. 

are you developer? cause if you arent, i think its gonna be very difficult/complex for you to do on you own

please contact me on skype michaelhjulskov, i need to know more about you shop to answer/see if my approach can be used for your shop. 

later i can find my code changes and put it on github for others to copy from - please understand its not perfect solution for all scenarios - its a hack, okay

[sarfaraz.r1406]

Hi,

I made these changes in my CategoryController.php, NewProductsController.php, BestSalesController.php files. 

I am able to see the combination drop down in the product category page properly.

But I am not able to see the drop down in the New Product, Best Seller and Popular tabs in home page. In which files do I need to make changes to reflect in these tabs on the homepage?

[sarfaraz.r1406]

Noone has any idea how to achieve this?

[TravisNet81]

Hello,

 

Thank you very much for the contribution, but now I have a problem, in the list of products by category works perfectly, but it does not work me when the product list is by Manufacture.

 

Anyone else happens?

 

I tried to change the Controller "ManufacturerController.php" but I can not make collect different options.

 

Thank you very much in advance!

[periyasamy]

not Working This code Friend Not thissSure Code This Bad Cod Not Try And Time Wate Try Another site

this iam Felling Friends !   .......................

[saul@dewenir]

Hi, this code works for me, I show combinations in my product list page but when I paging information, this information is null.

 

I think is because of ajax pagination, when URL change data is dropped and $combinations variable in product_list.tpl is not declared, only declared in first page list product.

 

 

In product_list.tpl i have this code:

{if isset($combinations)}
	<span class="product_combinations">
	<strong>{l s='Formats:'}</strong>
	{foreach from=$combinations[$product.id_product]|@sortby:"price" key=id_attribute_combination item=combination name="combination"}
		{if $combination|@count}
			{$combination.attribute_name|escape:'html':'UTF-8'}
			{if !$smarty.foreach.combination.last},{/if}
		{/if}
	{/foreach}
	</span>
{/if}

And in my CategoryController.php:

public function getProductAttributeCombinations($products) {
	$combinations = array();

	foreach($products as $product)
	{
		// load product object
		$product = new Product ($product['id_product'], $this->context->language->id);

		// get the product combinations data
		// create array combinations with key = id_product
		$combinations[$product->id] = $product->getAttributeCombinations($this->context->language->id);
	}

	return $combinations;
}

$this->products = $this->category->getProducts($this->context->language->id, (int)$this->p, 10000, $this->orderBy, $this->orderWay);
	$this->combinations = $this->getProductAttributeCombinations($this->products);
	
	$this->context->smarty->assign(array(
		'category' => $this->category,
		'combinations' => $this->combinations,
		'description_short' => Tools::truncateString($this->category->description, 350),
		'products' => (isset($this->cat_products) && $this->cat_products) ? $this->cat_products : null,
		'id_category' => (int)$this->category->id,
		'id_category_parent' => (int)$this->category->id_parent,
		'return_category_name' => Tools::safeOutput($this->category->name),
		'path' => Tools::getPath($this->category->id),
		'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),
		'categorySize' => Image::getSize(ImageType::getFormatedName('category')),
		'mediumSize' => Image::getSize(ImageType::getFormatedName('medium')),
		'thumbSceneSize' => Image::getSize(ImageType::getFormatedName('m_scene')),
		'homeSize' => Image::getSize(ImageType::getFormatedName('home')),
		'allow_oosp' => (int)Configuration::get('PS_ORDER_OUT_OF_STOCK'),
		'comparator_max_item' => (int)Configuration::get('PS_COMPARATOR_MAX_ITEM'),
		'suppliers' => Supplier::getSuppliers(),
		'body_classes' => array($this->php_self.'-'.$this->category->id, $this->php_self.'-'.$this->category->link_rewrite)
	));

Somebody could help me?

 

Sorry for my bad english :S

[Divyesh Prajapati]

Hi All,

 

I have tried to show attribute combinations on product listing page in prestashop 1.6.0.14 ( for defalut theme ) and adding products to cart from the same page it self and it worked for me ( See Attachment ). I am going to give brief steps here; Just follow the instruction given below.

 

1. First of all it is required to have list of combinations for all product and for that add following function in classes/Product.php file.

public static function getProductAttributeCombinations($id_product) {
	$combinations = array();
	$context = Context::getContext();
	$product = new Product ($id_product, $context->language->id);
	$attributes_groups = $product->getAttributesGroups($context->language->id);
	$att_grps = '';
	foreach ($attributes_groups as $k => $row)
	{
		$combinations[$row['id_product_attribute']]['attributes_values'][$row['id_attribute_group']] = $row['attribute_name'];
		$combinations[$row['id_product_attribute']]['attributes_group'][$row['id_attribute_group']] = $row['group_name'];

		$combinations[$row['id_product_attribute']]['attributes_groups'] = @implode(', ', $combinations[$row['id_product_attribute']]['attributes_group']);
		$att_grps = $combinations[$row['id_product_attribute']]['attributes_groups'];
		$combinations[$row['id_product_attribute']]['attributes_names'] = @implode(', ', $combinations[$row['id_product_attribute']]['attributes_values']);
		$combinations[$row['id_product_attribute']]['attributes'][] = (int)$row['id_attribute'];
		$combinations[$row['id_product_attribute']]['price'] = (float)$row['price'];

		// Call getPriceStatic in order to set $combination_specific_price
		if (!isset($combination_prices_set[(int)$row['id_product_attribute']]))
		{
			Product::getPriceStatic((int)$product->id, false, $row['id_product_attribute'], 6, null, false, true, 1, false, null, null, null, $combination_specific_price);
			$combination_prices_set[(int)$row['id_product_attribute']] = true;
			$combinations[$row['id_product_attribute']]['specific_price'] = $combination_specific_price;
		}
		$combinations[$row['id_product_attribute']]['ecotax'] = (float)$row['ecotax'];
		$combinations[$row['id_product_attribute']]['weight'] = (float)$row['weight'];
		$combinations[$row['id_product_attribute']]['quantity'] = (int)$row['quantity'];
		$combinations[$row['id_product_attribute']]['reference'] = $row['reference'];
		$combinations[$row['id_product_attribute']]['unit_impact'] = $row['unit_price_impact'];
		$combinations[$row['id_product_attribute']]['minimal_quantity'] = $row['minimal_quantity'];
		if ($row['available_date'] != '0000-00-00')
		{
			$combinations[$row['id_product_attribute']]['available_date'] = $row['available_date'];
			$combinations[$row['id_product_attribute']]['date_formatted'] = Tools::displayDate($row['available_date']);
		}
		else
			$combinations[$row['id_product_attribute']]['available_date'] = '';
		foreach ($combinations as $id_product_attribute => $comb)
		{
			$attribute_list = '';
			foreach ($comb['attributes'] as $id_attribute)
				$attribute_list .= '\''.(int)$id_attribute.'\',';
			$attribute_list = rtrim($attribute_list, ',');
			$combinations[$id_product_attribute]['list'] = $attribute_list;
		}
	}
	$comb = array(
		'attribute_groups' => $att_grps,
		'values' => $combinations
	);

	return $comb;
} 

 2. Now need to assign this combinations in controllers file like CategoryController.php, ManufacturerController.php, NewProductsController.php, PriceDropController.php, BestSalesController.php that is in controllers folder.

 

I am showing you here only for category page and for that need to call function that we have made in step#1 in CategoryController.php

 

Change function initContent() with following code

public function initContent()
{
	parent::initContent();

	$this->setTemplate(_PS_THEME_DIR_.'category.tpl');

	if (!$this->customer_access)
		return;

	if (isset($this->context->cookie->id_compare))
		$this->context->smarty->assign('compareProducts', CompareProduct::getCompareProducts((int)$this->context->cookie->id_compare));

	$this->productSort(); // Product sort must be called before assignProductList()

	$this->assignScenes();
	$this->assignSubcategories();
	$this->assignProductList();
	
	$products = (isset($this->cat_products) && $this->cat_products) ? $this->cat_products : null;
	foreach($products as &$pro)
	{	
		$pro['combinations'] = Product::getProductAttributeCombinations($pro['id_product']);
	}
	
	$this->context->smarty->assign(array(
		'category' => $this->category,
		'description_short' => Tools::truncateString($this->category->description, 350),
		'products' => $products,
		'combinations' => $combinations,
		'id_category' => (int)$this->category->id,
		'id_category_parent' => (int)$this->category->id_parent,
		'return_category_name' => Tools::safeOutput($this->category->name),
		'path' => Tools::getPath($this->category->id),
		'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),
		'categorySize' => Image::getSize(ImageType::getFormatedName('category')),
		'mediumSize' => Image::getSize(ImageType::getFormatedName('medium')),
		'thumbSceneSize' => Image::getSize(ImageType::getFormatedName('m_scene')),
		'homeSize' => Image::getSize(ImageType::getFormatedName('home')),
		'allow_oosp' => (int)Configuration::get('PS_ORDER_OUT_OF_STOCK'),
		'comparator_max_item' => (int)Configuration::get('PS_COMPARATOR_MAX_ITEM'),
		'suppliers' => Supplier::getSuppliers(),
		'body_classes' => array($this->php_self.'-'.$this->category->id, $this->php_self.'-'.$this->category->link_rewrite)
	));
}

3. Replace code in your product-list.tpl ( in folder /themes/default-bootstrap/ ) file of default theme with code in product-list.tpl.txt file ( File attached )

 

4. Replace code in your global.js ( in folder /themes/default-bootstrap/js ) file of default theme with code in global.js.txt file ( File attached )

 

5. Add this in global.css ( in folder /themes/default-bootstrap/css )

.att_list{padding:10px;}
.att_list .selector{margin: 0 auto;}

6. Replace code in your ajax-cart.js ( in folder /themes/default-bootstrap/modules/blockcart ) file of default theme with code in ajax-cart.js.txt file ( File attached )

 

That's It!

 

Please note that this is only working in default theme for now if you want to use in custom theme you need to make changes in tpl files accordingly.

global.js.txt

ajax-cart.js.txt

product-list.tpl.txt

Edited April 18, 2015 by Divyesh Prajapati (see edit history)

[geotargetplus]

Hi All,

 

I have tried to show attribute combinations on product listing page in prestashop 1.6.0.14 ( for defalut theme ) and adding products to cart from the same page it self and it worked for me ( See Attachment ). I am going to give brief steps here; Just follow the instruction given below.

 

1. First of all it is required to have list of combinations for all product and for that add following function in classes/Product.php file.

public static function getProductAttributeCombinations($id_product) {
	$combinations = array();
	$context = Context::getContext();
	$product = new Product ($id_product, $context->language->id);
	$attributes_groups = $product->getAttributesGroups($context->language->id);
	$att_grps = '';
	foreach ($attributes_groups as $k => $row)
	{
		$combinations[$row['id_product_attribute']]['attributes_values'][$row['id_attribute_group']] = $row['attribute_name'];
		$combinations[$row['id_product_attribute']]['attributes_group'][$row['id_attribute_group']] = $row['group_name'];

		$combinations[$row['id_product_attribute']]['attributes_groups'] = @implode(', ', $combinations[$row['id_product_attribute']]['attributes_group']);
		$att_grps = $combinations[$row['id_product_attribute']]['attributes_groups'];
		$combinations[$row['id_product_attribute']]['attributes_names'] = @implode(', ', $combinations[$row['id_product_attribute']]['attributes_values']);
		$combinations[$row['id_product_attribute']]['attributes'][] = (int)$row['id_attribute'];
		$combinations[$row['id_product_attribute']]['price'] = (float)$row['price'];

		// Call getPriceStatic in order to set $combination_specific_price
		if (!isset($combination_prices_set[(int)$row['id_product_attribute']]))
		{
			Product::getPriceStatic((int)$product->id, false, $row['id_product_attribute'], 6, null, false, true, 1, false, null, null, null, $combination_specific_price);
			$combination_prices_set[(int)$row['id_product_attribute']] = true;
			$combinations[$row['id_product_attribute']]['specific_price'] = $combination_specific_price;
		}
		$combinations[$row['id_product_attribute']]['ecotax'] = (float)$row['ecotax'];
		$combinations[$row['id_product_attribute']]['weight'] = (float)$row['weight'];
		$combinations[$row['id_product_attribute']]['quantity'] = (int)$row['quantity'];
		$combinations[$row['id_product_attribute']]['reference'] = $row['reference'];
		$combinations[$row['id_product_attribute']]['unit_impact'] = $row['unit_price_impact'];
		$combinations[$row['id_product_attribute']]['minimal_quantity'] = $row['minimal_quantity'];
		if ($row['available_date'] != '0000-00-00')
		{
			$combinations[$row['id_product_attribute']]['available_date'] = $row['available_date'];
			$combinations[$row['id_product_attribute']]['date_formatted'] = Tools::displayDate($row['available_date']);
		}
		else
			$combinations[$row['id_product_attribute']]['available_date'] = '';
		foreach ($combinations as $id_product_attribute => $comb)
		{
			$attribute_list = '';
			foreach ($comb['attributes'] as $id_attribute)
				$attribute_list .= '\''.(int)$id_attribute.'\',';
			$attribute_list = rtrim($attribute_list, ',');
			$combinations[$id_product_attribute]['list'] = $attribute_list;
		}
	}
	$comb = array(
		'attribute_groups' => $att_grps,
		'values' => $combinations
	);

	return $comb;
} 

 2. Now need to assign this combinations in controllers file like CategoryController.php, ManufacturerController.php, NewProductsController.php, PriceDropController.php, BestSalesController.php that is in controllers folder.

 

I am showing you here only for category page and for that need to call function that we have made in step#1 in CategoryController.php

 

Change function initContent() with following code

public function initContent()
{
	parent::initContent();

	$this->setTemplate(_PS_THEME_DIR_.'category.tpl');

	if (!$this->customer_access)
		return;

	if (isset($this->context->cookie->id_compare))
		$this->context->smarty->assign('compareProducts', CompareProduct::getCompareProducts((int)$this->context->cookie->id_compare));

	$this->productSort(); // Product sort must be called before assignProductList()

	$this->assignScenes();
	$this->assignSubcategories();
	$this->assignProductList();
	
	$products = (isset($this->cat_products) && $this->cat_products) ? $this->cat_products : null;
	foreach($products as &$pro)
	{	
		$pro['combinations'] = Product::getProductAttributeCombinations($pro['id_product']);
	}
	
	$this->context->smarty->assign(array(
		'category' => $this->category,
		'description_short' => Tools::truncateString($this->category->description, 350),
		'products' => $products,
		'combinations' => $combinations,
		'id_category' => (int)$this->category->id,
		'id_category_parent' => (int)$this->category->id_parent,
		'return_category_name' => Tools::safeOutput($this->category->name),
		'path' => Tools::getPath($this->category->id),
		'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),
		'categorySize' => Image::getSize(ImageType::getFormatedName('category')),
		'mediumSize' => Image::getSize(ImageType::getFormatedName('medium')),
		'thumbSceneSize' => Image::getSize(ImageType::getFormatedName('m_scene')),
		'homeSize' => Image::getSize(ImageType::getFormatedName('home')),
		'allow_oosp' => (int)Configuration::get('PS_ORDER_OUT_OF_STOCK'),
		'comparator_max_item' => (int)Configuration::get('PS_COMPARATOR_MAX_ITEM'),
		'suppliers' => Supplier::getSuppliers(),
		'body_classes' => array($this->php_self.'-'.$this->category->id, $this->php_self.'-'.$this->category->link_rewrite)
	));
}

3. Replace code in your product-list.tpl ( in folder /themes/default-bootstrap/ ) file of default theme with code in product-list.tpl.txt file ( File attached )

 

4. Replace code in your global.js ( in folder /themes/default-bootstrap/js ) file of default theme with code in global.js.txt file ( File attached )

 

5. Add this in global.css ( in folder /themes/default-bootstrap/css )

.att_list{padding:10px;}
.att_list .selector{margin: 0 auto;}

6. Replace code in your ajax-cart.js ( in folder /themes/default-bootstrap/modules/blockcart ) file of default theme with code in ajax-cart.js.txt file ( File attached )

 

That's It!

 

Please note that this is only working in default theme for now if you want to use in custom theme you need to make changes in tpl files accordingly.

 

I change it like you sad, and if i click Add to Cart add default size. It is possible to button Add to Card Add selected combinations?

[Divyesh Prajapati]

I have already done that. You might be missing something. Do you have your store's link?

[geotargetplus]

I have already done that. You might be missing something. Do you have your store's link?

 

[Broken_link] if i Chose size M then add always S. I change default theme files to from you attachment

Edited April 18, 2015 by geotargetplus (see edit history)

[geotargetplus]

[Broken_link] if i Chose size M then add always S. I change default theme files to from you attachment

 

Maybe you add solution to change price too ;-)

Edited April 18, 2015 by geotargetplus (see edit history)

[Divyesh Prajapati]

Hi,

Forget to close <script> tag in product-list.tpl file. I have uploaded updated product-list.tpl.txt file here. Replace code again and check it should work.  I haven't done code for changing price. Will do and update here.

Edited April 18, 2015 by Divyesh Prajapati (see edit history)

[geotargetplus]

Hi,

Forget to close <script> tag in product-list.tpl file. I have uploaded updated product-list.tpl.txt file here. Replace code again and check it should work.  I haven't done code for changing price. Will do and update here.

 

Thanks, now is working fine ;-)

[Divyesh Prajapati]

Thanks, now is working fine ;-)

Good to know that!! It worked

[Sam Minerve]

Hi,

 

Thank you for this thread. If I'm not mistaken, the purpose is to allow the selection of attributes from the quick view before adding the product to cart.

I've followed all the steps given by Divyesh Prajapati but it doesn't seem to work. For example, on the category page, when I click on an attribute, the page is loading before I can add to cart.

 

Thank you for your help.

[Sam Minerve]

So, I did the modifications once again and now it works well. But I would like to know if the attributes must necessarily be in a selection list? Isn't it possible to have the same thing with the "color list" option? In my case, the "sizes" attributes are presented in a "color list", just like the colours attributes, and I would like, if possible, to keep this presentation.

 

And as I'm not very good in coding, can someone show me how to modify the ManufacturerController.php, NewProductsController.php, PriceDropController.php, BestSalesController.php files?

 

Thanks in advance.

[bhaskey]

Hi Divyesh Prajapati

I think you meant (theme/default-bootstrap/js/module/blockcart/ajax-cart.js) in your step 6

 

And I am also facing the same problem it is adding the same thing which i add first time. Also is it supposed to change the price while selecting option from dropdown. Please help!!!!

[Divyesh Prajapati]

@Bhaskey: its not adding same attribute. Its adding the one you have selected. It's tested 100%. You may be missing something.

@Sam: it's advisable to show attribute combination rather than showing each attribute separately to keep it simple silly. Will show you to add attributes later for other controllers.

Edited April 21, 2015 by Divyesh Prajapati (see edit history)

[Divyesh Prajapati]

@Bhaskey: if i will find something with price will update you guys.

[Divyesh Prajapati]

Hi Divyesh Prajapati

I think you meant (theme/default-bootstrap/js/module/blockcart/ajax-cart.js) in your step 6

 

And I am also facing the same problem it is adding the same thing which i add first time. Also is it supposed to change the price while selecting option from dropdown. Please help!!!!

 

If you are not using default theme then path will be theme/YOUR_THEME/js/module/blockcart/ajax-cart.js

Edited April 21, 2015 by Divyesh Prajapati (see edit history)

[Sam Minerve]

Thank you Divyesh Prajapati for your kind reply.

Sorry, there are 2 other issues I forgot to mention:

 

1. I notice that we can add the products to cart without selecting the attributes. Is there a mean to force the customer to select the attributes before he can add to cart?

 

2. It would be great to have the same functionnality for the blockwishlist module. Thus, when the customer selects the attributes and clicks on the "Add to my wishlist" link, the product is added in the wishlist with the selected attributes (currently, it is added with the attributes by default).

 

Looking forward for your comments.

[Divyesh Prajapati]

Thank you Divyesh Prajapati for your kind reply.

Sorry, there are 2 other issues I forgot to mention:

 

1. I notice that we can add the products to cart without selecting the attributes. Is there a mean to force the customer to select the attributes before he can add to cart?

 

2. It would be great to have the same functionnality for the blockwishlist module. Thus, when the customer selects the attributes and clicks on the "Add to my wishlist" link, the product is added in the wishlist with the selected attributes (currently, it is added with the attributes by default).

 

Looking forward for your comments.

can you please provide link ?

[onkstudio]

Hi Divyesh,

 

Thank your for your code, it really is helpful. I just wondered if it works well with pagination because with my implementation once I click on "next page" or a page number link, the attributes list does not appear anymore. it seems that the $product.combinations is no longer available to the product-list.tpl file, I assume it is because the ajax script "reloads" the new products, so the modifications in the "init_content()" function are not applied...

 

Same problem with the layered navigation module...

 

I am trying to find a solution to that but if it worked on your website, I wouldn't understand why it doesn't on mine...

Edited April 22, 2015 by onkstudio (see edit history)

[Divyesh Prajapati]

Hi Divyesh,

 

Thank your for your code, it really is helpful. I just wondered if it works well with pagination because with my implementation once I click on "next page" or a page number link, the attributes list does not appear anymore. it seems that the $product.combinations is no longer available to the product-list.tpl file, I assume it is because the ajax script "reloads" the new products, so the modifications in the "init_content()" function are not applied...

 

I am trying to find a solution to that but if it worked on your website, I wouldn't understand why it doesn't on mine...

May be you are using block layered navigation module. If yes than you need to add some short of code in blocklayered.php file.

 

In blocklayered.php file there is a function ajaxCall() and in that just before $smarty->assign add below code.

foreach($products as &$pro)
{	
	$pro['combinations'] = Product::getProductAttributeCombinations($pro['id_product']);
}

Edited April 22, 2015 by Divyesh Prajapati (see edit history)

[onkstudio]

Thank you very much for your answer.

I did not realize the link with the block layered module, after you gave me the hint I went and modified the "getProducts()" function in the blocklayered.php file with the following code (around line 3137) :

foreach ($products as &$product)
{
	if ($product['id_product_attribute'] && isset($product['product_attribute_minimal_quantity']))
		$product['minimal_quantity'] = $product['product_attribute_minimal_quantity'];

	$product['combinations'] = Product::getProductAttributeCombinations($product['id_product']);
}

And it worked. Your modification is similar since the ajaxCall() function uses the getProducts() one.

 

Thanks again !

[Sam Minerve]

Hi Divyesh,

 

I sent you a PM, don't know if you've received it. Anyway, I'm using the default theme of Prestashop 1.6.014 with very minor changes (especially in colours).

Just need to know how we can apply the same thing to the blockwishlist module, in other words, how to select the attributes before adding to wishlist (when we are on category page).

And if it's possible to display an alert message in case the customer has not selected attributes before adding to cart or to wishlist.

 

Thank you.

[Divyesh Prajapati]

Hi Divyesh,

 

I sent you a PM, don't know if you've received it. Anyway, I'm using the default theme of Prestashop 1.6.014 with very minor changes (especially in colours).

Just need to know how we can apply the same thing to the blockwishlist module, in other words, how to select the attributes before adding to wishlist (when we are on category page).

And if it's possible to display an alert message in case the customer has not selected attributes before adding to cart or to wishlist.

 

Thank you.

 

 

Yes, It's possible to have selection of attributes for wishlist module.

 

open ajax-wishlist.js file from folder themes/YOUR_THEME/js/modules/blockwishlist/js

add code given below in staring of function WishlistCart

if($('#attribute_combination_'+id_product).length > 0)
{
	id_product_attribute = $('#attribute_combination_'+id_product).val();
}
if(!id_product_attribute)
{
	alert('Please select attributes!');
	return false;
}

Edited April 28, 2015 by Divyesh Prajapati (see edit history)

[Sam Minerve]

Thanks a lot Divyesh!

The selection of attributes works well but if I add a product to wishlist without selecting any attribute, there is no alert message. Hope I copied your code in the right place. Here is how I modified the js file in WishlistCart function :

 

function WishlistCart(id, action, id_product, id_product_attribute, quantity, id_wishlist)
{
    if($('#attribute_combination_'+id_product).length > 0)
    {
        id_product_attribute = $('#attribute_combination_'+id_product).val();
    }
    if(!id_product_attribute)
    {
        alert('Please select attributes!');
        return false;
    }
    
    $.ajax({ // etc.

[Divyesh Prajapati]

Thanks a lot Divyesh!

The selection of attributes works well but if I add a product to wishlist without selecting any attribute, there is no alert message. Hope I copied your code in the right place. Here is how I modified the js file in WishlistCart function :

 

function WishlistCart(id, action, id_product, id_product_attribute, quantity, id_wishlist)

{

    if($('#attribute_combination_'+id_product).length > 0)

    {

        id_product_attribute = $('#attribute_combination_'+id_product).val();

    }

    if(!id_product_attribute)

    {

        alert('Please select attributes!');

        return false;

    }

    

    $.ajax({ // etc.

 

It's working fine, If you notice you aleardy have selected attributes in category page and product with selected attributes is being added to wishlist. So it seems all good.

[Sam Minerve]

Sorry, I may not express myself well. The problem is that we have default selected attributes. I would like the customer to select the attributes by himself because sometimes they just don't pay attention to these details. And it's important that they select the right attributes before adding to wishlist.

If possible, it would be great to have also an alert message with the "add to cart" button.

[Divyesh Prajapati]

Sorry, I may not express myself well. The problem is that we have default selected attributes. I would like the customer to select the attributes by himself because sometimes they just don't pay attention to these details. And it's important that they select the right attributes before adding to wishlist.

If possible, it would be great to have also an alert message with the "add to cart" button.

you need to change product-list.tpl file and add first option as "Select your choice" or something like that.

[Sam Minerve]

Ok, so, in "product-list.tpl" file, I added the following line :

 

 <option value="choose" selected="selected" title="--choose--">{l s='-- Please Select --'}</option>

 

as follows :

 

<select name="attribute_combination_{$product.id_product}" id="attribute_combination_{$product.id_product}" class="form-control attribute_select" ref="{$product.id_product}">
        <option value="choose" selected="selected" title="--choose--">{l s='-- Please Select --'}</option>
        {foreach from=$product.combinations.values key=id_product_attribute item=combination}
            <option value="{$id_product_attribute|intval}" title="{$combination.attributes_names|escape:'html':'UTF-8'}">{$combination.attributes_names|escape:'html':'UTF-8'}</option>
        {/foreach}
    </select>

 

But, it doesn't seem to work. I've been searching on the forums. This kind of question has already been asked but unfortunately, it seems there is no solution. Too bad...

 

Thank you anyway.

[Divyesh Prajapati]

Ok, so, in "product-list.tpl" file, I added the following line :

 

 <option value="choose" selected="selected" title="--choose--">{l s='-- Please Select --'}</option>

 

as follows :

 

<select name="attribute_combination_{$product.id_product}" id="attribute_combination_{$product.id_product}" class="form-control attribute_select" ref="{$product.id_product}">

        <option value="choose" selected="selected" title="--choose--">{l s='-- Please Select --'}</option>

        {foreach from=$product.combinations.values key=id_product_attribute item=combination}

            <option value="{$id_product_attribute|intval}" title="{$combination.attributes_names|escape:'html':'UTF-8'}">{$combination.attributes_names|escape:'html':'UTF-8'}</option>

        {/foreach}

    </select>

 

But, it doesn't seem to work. I've been searching on the forums. This kind of question has already been asked but unfortunately, it seems there is no solution. Too bad...

 

Thank you anyway.

Update with this code

<select name="attribute_combination_{$product.id_product}" id="attribute_combination_{$product.id_product}" class="form-control attribute_select" ref="{$product.id_product}">
        <option value="" selected="selected" title="--choose--">{l s='-- Please Select --'}</option>
        {foreach from=$product.combinations.values key=id_product_attribute item=combination}
            <option value="{$id_product_attribute|intval}" title="{$combination.attributes_names|escape:'html':'UTF-8'}">{$combination.attributes_names|escape:'html':'UTF-8'}</option>
        {/foreach}
    </select>

[Sam Minerve]

Thank you so much Divyesh, you are great!

Now, it's working fine.

I have just two last questions (I promise I won't bother you again after that ^^) :

 

1) Is it possible to have an alert message for the 'add to cart' button as well?

 

2) I notice that when a combination of attributes is out of stock (for instance, "S, orange"), then the "add to cart" button is unactivated and it's not possible to select other combinations. How can we fix this issue?

 

Thanks in advance.

[bhaskey]

Hi Divyesh Prajapati,

Sorry for bothering you

 

I just want to show "More Sizes Available" on product-list along with product. (For which product have combinations available)

 

I have tried following conditions in product-list.tpl, but nothing gave the desired result:

{if !empty($product.combinations)}

or

{if (isset($product.combinations) && is_array($product.combinations) && count($product.combinations) > 0)}

But no luck, I am sure you can help me something out. How to achieve it.

 

Thanks a lot for helping.

[shri]

thanks for the reply

yes exactly i am looking for the same as per the link Dyrefoder.dk

 

Were you able to get a solution for this. I am looking for something similar

[webadherhone]

Hello, i have an issue with product attribute in product list.

 

In the product list, on product hover i had the color picker and the name of the product who apeared, but know it doesn't work anymore. I only have the price product who work.

 

It appears that the right block in product list don't show.

 

I think i 've done something wrong but i didn't modify the product-list.tpl unless it's a bug ?

[vijju]

Hi

this code  displaying the following errors:

 

Notice: Undefined index: combinations in /opt/lampp/htdocs/thekiranaboy_onclick/tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code on line 226

Notice: Trying to get property of non-object in /opt/lampp/htdocs/thekiranaboy_onclick/tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code on line 226

 

Please solve it

Edited May 27, 2015 by vijju (see edit history)