Magento SCP Extension & radio buttons for configurable products

Question

I am using the extension Simple Configurable Products (SCP) for Magento version 1.8.1.0

What I am trying to achieve is have a configurable product (using SCP!) that displays the different options as radio buttons instead of a dropdown (default). Eventhough this does sound quite easy, I couldn't find a proper solution so far (there are a LOT of suggestions out there, none of which seems to work). I would love to solve this on the backend, even though I will at this point appreciate working front-end solutions just as much.

What does work in the configurable.phtml is spitting out the different custom options, set for the product, which looks something like this:

$attribute = Mage::getModel('eav/config')->getAttribute('catalog_product', '#ATTRIBUTENAME#'); 
            foreach ($attribute->getSource()->getAllOptions(true) as $option) {
                echo /*$option['value'] . ' ' .*/ $option['label'] . "\n";
            }

I could imagine this to be a starting point, even though I haven't thought it through.

What I can confirm as not-working, plugin-wise are those two:

• Inchoo's plugin conflicts with SCP
• Attribute Icons is in beta state and does't work either
• Magento-Configurable-Products-Radio-Select does also not keep SCP-Funcionality

I know this is a very specific question and that it is a possible duplicate of this, however there might even be working solutions for v1.7 that are not working anymore in v1.8 and I have a feeling that this might be highly interesting for many others.

Edit: Just to elaborate on what SCP does a little more: It allows you to have a configurable product that can have dependencies between options. This works by having a single product for every possible option. This way you can for example have the price go up, depending on material and size of a product. So one size can have different prices depending on the material and then a new price range if the size goes up. The GitHub site also gives a better understanding, just in case this was way confusing.

If you want to install SCP, make sure to install the fixes that are provided in the pull requests of the repo.

Answer 1

Try this one Magento-Configurable-Products-Radio-Select

Answer 2

So this is what I ended up using. It does not change any code in the configurable.phtml or SCP core code. Instead I just make a call to skin/frontend/base/default/js/scp_product_extension.js to update the options and prices. This has to happen clientside, but so does most of the SCP logic apparently.

   var sizeselect = $(".catalog-product-view .input-box select").eq(0);
   var materialselect = $(".catalog-product-view .input-box select").eq(1);


      function optionsToRadios(element){
        var select = element;

        if (element == materialselect){
            $(".radios").append("<div class='secondradiofield'></div>")
            select.find('option').each(function(j, option){
                var option = $(option);
                var eachval = option.val();

                $(".catalog-product-view .secondradiofield").append(
                    "<input type='radio' id='s1"+j+"' data-value='"+eachval+"' data-position='"+j+"'/><span><label for='s1"+j+"'>"+option.text()+"</label></span>"
                );

            }); // ende find each

        } else{

            select.find('option').each(function(j, option){
                var option = $(option);
                var eachval = option.val();

                $(".catalog-product-view .radios").append(
                    "<input type='radio' id='s2"+j+"' data-value='"+eachval+"' data-position='"+j+"'/><span><label for='s2"+j+"'>"+option.text()+"</label></span>"
                );

            }); // end find each
        }   
    };

    // Make first <select> to radios
    optionsToRadios(sizeselect);




        /*
        *
        * @SCP - seems like the passed element cannot be a jQuery object!
        * @SCP - spConfig.reloadPrice() is autmatically called by spConfig.configureElement(el).
        *
        */

        $(document).on("click", ".radios>input[type='radio']", function(){

            var val = $(this).attr("data-value");
            var index = $(this).attr("data-position");
            var select = $(".catalog-product-view .input-box select").eq(0);

            // deselect other options
            select.prop("selected", false);
            select.find("option").removeAttr("selected"); 

            // synch options with <select>
            var clickedOption = $(select.find("option")[index]);
            clickedOption.attr("selected", "selected");
            clickedOption.prop("selected", true); // IMPORTANT: Firefox need the prop to work!

            // Make call to SCP to update
            var el = document.getElementsByClassName("super-attribute-select")[0];
            spConfig.configureElement(el);
            spConfig.reloadPrice();

            // Show second <select> as radios
            if($("input[type='radio']").length < 5){
                optionsToRadios(materialselect);
            }

            // Deselect other radio buttons
            $(".radios>input[type='radio']").not($(this)).prop('checked', false);
        });

First function just turns the default <select> elements into radio buttons. <select> elements are hidden with CSS as we don't want the options to appear twice. Next is just listening for the click events on the radio-buttons and basically synch the clicks to the <select> elements. When the select element has changed, you just have to call the spConfig.configureElement(el); function where el is the corresponding <select> element.

If there is a second <select> element with dependencies to the first, this one will have to update as well when a radio-button is clicked.

Hope that gives others a clue, who attempt to do the same.