in magento RWD theme, I would like to alter the way the swatches function so that subsequent swatches are dependant on the previous selection, and unavailable swatches to be removed.
For example,
a product has three options: design, colour, and size.
design 1 is available in colours white and pink and in size large. whereas, say design 2 is available in colours black, white, pink and yellow; and sizes medium and large.
so, if I were to first choose design 1, the below swatches wouldn't have options black and yellow for colour and size medium.
But if I chose design 2 it would have swatches available for colours black, white, pink and yellow; and sizes medium and large.
I believe the code that handles the swatches is in
/skin/rwd/default/js/configurableswatches/swatches-product.js
But, sadly I am struggling to identify how I can correctly amend this code to get what I'm after.
Update:
As this image shows, Menus are not available in size 'A5 double sided'. Ideally it would remove this option when Menus is chosen and add it when booking form selected. Same for others.
Update 2:
opt._e.li[method]('no-display');
Will toggle the hiding of below 'not-available' options. But, if selection made below and then above option is changed, and below selection is not available with the new above option all other options are no longer visible.
As image above illustrates:
Menu was first selected. Then the option a4 long fold was chosen. Then option above was changed to booking form. Consequently, as the option a4 long fold isn't available with booking form, a 'not-available' option is selected. Resulting in the pack size option having all of it's options hidden, as by default when this occurs Magento does this :
Best Answer
The swatches do work like that only by default provided the products are setup correctly. I believe you're using Configurable Products on your website.
So, as per the example given : design 1 is available in colours white and pink and in size large. whereas, say design 2 is available in colours black, white, pink and yellow; and sizes medium and large.
Now, ideally, you should have a Configurable Product with Simple Associated Products as under :
a. Design 1 + White + Large b. Design 1 + Pink + Large c. Design 2 + Black + Medium d. Design 2 + Black + Large and so on...
Thus, as the user select Design 1, only the colors White & Pink shall show. You need not modify any code in Magento in order to achieve this.