0

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:

Greyed out only

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.

options all hidden

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 :

default not-available selection result

0

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.

3
  • Hi Saurabh all options show only a grey stroke is put through the unavailable options and basket changed to state 'out of stock'. Sep 4 '16 at 14:22
  • @Vaishal Patel Could you please share the URL of your website ? I can check it and suggest accordingly. Sep 5 '16 at 8:47
  • Saurabh the site is on a local server Sep 5 '16 at 8:59
0

If you get some css class change then you can simply do display:none to that swatches which is not avliable. I think this is the quickest solution for your problem

For example

 li.swatch.disable{
  display:none;
 }
 li.swatch{
   display : block;
 }    

Class name should be change as per your class But I am definetly sure this will solve your problem

12
  • I thought this but I tried adding opt._e.li[method]('no-display'); Hides them, but issues when changing selection Sep 4 '16 at 14:49
  • for that you have to add two css if you see not-avliable then only add display:none otherwise it should bedisplay:block Sep 4 '16 at 14:51
  • But with display: none options below the option where unavailable selection is chosen will be all hidden. Sep 4 '16 at 14:56
  • can you give me link ? Sep 4 '16 at 15:03
  • It is on my local server sadly :( see update 2, iv'e added further detail Sep 4 '16 at 15:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.