Getting configurable product options pre selected from the layered navigation

3
votes

I have several configurable products (with many simple products associated to them).

When browsing the super attributes through the layered navigation, you can filter down to all products that have (for instance) size= medium, Colour = Red.

I have set my simple products to not be visible and showing my configurable products, however, when you select the configurable product, the product options do not default to what has been filtered in the layered navigation.

Is there a way to get the relevant product options pre-selected on the product page?

suppose the user selected the filters from the listing page as size ="medium" colour ="red"

Now when user selects the configurable product from listing page after applying filter corresponding values must be pre selected on product detail page.

1
magentomagento-1.7

1 Answers

1
votes

There is no ready-made way to do this. When the request is made for the product that product knows nothing of the layered navigation state. In theory you could add in some server side code to do that however this might have a performance penalty as you might not be able to use cache effectively.

You could do something on the front end in javascript. Add an event listener to the links in the filtered navigation and store an object in local storage, e.g. with size and colour.

On the product page you could then set the configurable product according to those values by waiting for the configurable product options to be built, then load the options object from local storage and then update the configurable product accordingly. You will need to then fire off events so the product page knows that options have been selected and can do things like update the price accordingly.

Internally Magento uses attribute option values that have numerical ids. These can be a bit complicated to work with, so you may want to put some logic in to read the labels instead, e.g. 'Red' instead of e.g. '461'.

There is no prototype specific way of working with local storage and you don't need some layer of jquery, normal javascript should suffice when it comes to storing/retrieving your size/colour object.

I found the following article to be the head start needed for doing things with the configurable product drop-downs:

http://inchoo.net/ecommerce/magento/how-to-make-configurable-options-autoselected-on-configurable-product-view-page/