3

I'm looking for a solution to show my configurable options as radio buttons instead of select field on a product page for a configurable product.

  • show the options
  • add class="disabled" for options out of stock
  • add class="selected" for chosen option

There are a couple of extensions that solve my issue... partly solve my issue... and most of all provide lot of extra unneeded code. example: http://www.bullsandbirds.com/sneaker-internationalist-leather-blue-195944

1

You can use something like this if you use jQuery. It would go in yourtemplate/template/catalog/product/view/type/options/configurable.phtml.

Sorry I did not test this but it should get you on the right track.

here's a fiddle with the jquery

    if ($_product->getStockStatus() == "out of stock"){

    echo "jQuery('select option').each(function () {

    var optValue = jQuery(this).attr('value');
    jQuery('select').before(optValue + ': <input type="radio" name="' + optValue + '" value="' + optValue + '" class="disabled"></br>');

}); //end;"

    }else{

    echo "jQuery('select option').each(function () {

    var optValue = jQuery(this).attr('value');
    jQuery('select').before(optValue + ': <input type="radio" name="' + optValue + '" value="' + optValue + '" class="selected"></br>');

}); //end"

    }
  • There is no problem to do this with prototype also :-) – Fabian Blechschmidt Feb 22 '15 at 22:33

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.