Product attributes in products-list

[ruslan1984]

Hi all, 

 

I went through all posts related to the topic, but none of the solutions provided worked for me. I got either blank screens or screwed up product list page. 

I want to show available clothes sizes in the product list like on this website http://www.archiduchesse.com/ and hide sold ones. 

 

I have 1.5.6.1 version. my domain is sweet5.kg

 

Please guys, help me with this. 

Thank you in advance. 

Cheers. 

[FonZ]

I don't know what you have tried, but in essence the easiest way to do this is to adjust the product controller to accept ajax and output the attributes in jsonData, so you can make ajax calls from the product-list and serve the same info as on the product page without adjusting much of the category controller.

 

So, in the product controller (controllers/front) you need to add the following function to the class

/**
* Run ajax process
* @see FrontController::displayAjax()
*/
public function displayAjax()
{
	$this->display();
}

Then go down to the assignAttributesGroups() function and go the bottom where the smarty output is and just before that add

			if ($this->ajax)
			{
				$return = array(
					'groups' => $groups,
					'combinations' => $combinations,
					'token' => Tools::getToken(false)
				);
				die(Tools::jsonEncode($return));
			}

So, now you go to the category controller to add one line to the media function so it loads a new JS script

$this->addJS(_THEME_JS_DIR_.'products-list.js');

Then off course you need to create a JS script with that name, put it in the JS dir of your theme and start putting some code there like:

$.ajax({
	type: 'POST',
	headers: { "cache-control": "no-cache" },
	url: baseUri + '?rand=' + new Date().getTime(),
	async: false,
	cache: false,
	dataType : "json",
	data: 'controller=product&ajax=true&id_product='+prodLink+'&token=' + static_token,
	success: function(jsonData)
	{
		// update
		static_token = jsonData.token;
		processProductData(jsonData);
	},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
		if (textStatus !== 'abort')
			alert("TECHNICAL ERROR: unable to send product informations \n\nDetails: " + XMLHttpRequest + "\nError thrown: " + errorThrown + "\nText status: " + textStatus);
	       }

        });
return false;

Now the above code is not complete!

A. you need to initiate it (on window load or whatever, mine is on click)

B. you need to grab the product id from the products displayed somehow. (Each product has an a href with the product id in it, so I extract that and pass it on click)

C. you need to process the return data off course and make it show up at the correct item, thus you need to know how to loop thru the jsonData which returns multi arrays.

 

Now I don't actually know if the stock amounts are being sent because I didn't focus on it for my project, but the return array holds a lot of data so it might just be there. If so, you can create what you have in mind, otherwise you need to adjust the assignAttributesGroups() function to put it into the array. 

 

I am new to PS and jQuery and it took me about 2 evenings to figure out how the arrays return data and what goes where and how to address it properly, but after that it took 1 hour to make it work and look properly (enough).

 

Hope that somehow helps!

[tomerg3]

This is quite a complex task, as not only do you need to have the attribute info for all the products, you also need to have corresponding Javascript code for real time calculation.

 

There are a few modules available for this functionality, you can see ours in http://www.presto-changeo.com/en/attribute-modules/59-product-list-attributes.html (which can work for any product on any page, like accessories on product page)