multi option builder + uoms -- index.php

gistfile1.php

<?php
    $builders = array(
        //red small
        '1' => array(
            'product_id' => 1,
            'choices'    => array('100', '300'),
            'uoms'       => array(
                'ea_1' => array(
                    'uom_code' => 'EA',
                    'quantity' => '1',
                    'name'     => 'Each',
                    'full_uom' => '1:EA:1',
                ),
                'bx_10' => array(
                    'uom_code' => 'BX',
                    'quantity' => '10',
                    'name'     => 'Box of 10',
                    'full_uom' => '1:BX:10',
                ),
            ),
        ),
        //blue small
        '2' => array(
            'product_id' => 2,
            'choices'    => array('200', 300),
            'uoms'       => array(
                'ea_1' => array(
                    'uom_code' => 'EA',
                    'quantity' => '1',
                    'name'     => 'Each',
                    'full_uom' => '2:EA:1',
                ),
                'bx_50' => array(
                    'uom_code' => 'BX',
                    'quantity' => '50',
                    'name'     => 'Box of 50',
                    'full_uom' => '2:BX:50',
                ),
            ),
        ),
        //red large
        '3' => array(
            'product_id' => 3,
            'choices'    => array('100', '400'),
            'uoms'       => array(
                'ea_1' => array(
                    'uom_code' => 'EA',
                    'quantity' => '1',
                    'name'     => 'Each',
                    'full_uom' => '3:EA:1',
                ),
            ),
        ),
        //blue large
        '4' => array(
            'product_id' => 4,
            'choices'    => array('200', '400'),
            'uoms'       => array(
                'ea_1' => array(
                    'uom_code' => 'EA',
                    'quantity' => '1',
                    'name'     => 'Each',
                    'full_uom' => '4:EA:1',
                ),
            ),
        ),
    );
    $uoms = array();
    foreach ($builders as $builder) {
        foreach($builder['uoms'] as $key => $uom) {
            $uoms[$key] = $uom;
            unset($uoms[$key]['full_uom']);
        }
    }

    $builders_json = json_encode($builders);
    $uoms_json     = json_encode($uoms);
?>

<style>
    label.disabled{ color:#999 };
    div
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    var builders = <?php echo $builders_json; ?>;
    var uoms     = <?php echo $uoms_json; ?>;
</script>

<div id="configure-buy">
    <div class="option required builder">
        Color
        <div class="choices">
            <select name="color">
                <option value="">-- --</option>
                <option value="red" data-choice_id="100">red</option>
                <option value="blue" data-choice_id="200">blue</option>
            </select>
        </div>
    </div>
    <div class="option required builder">
        Size
        <div class="choices">
            <div>
                <label><input type="radio" name="size" value="sm"   data-choice_id="300">small</input></label>
            </div>
            <div>
                <label><input type="radio" name="size" value="lg"  data-choice_id="400">large</input></label>
            </div>
        </div>
    </div>
</div>

<div id="uom-to-cart">
    Unit Of Measure
    <div class="uoms">
        test - this is removed by js
    </div>
    <div id="disabled-uom" style="display:none">
        <div class="uom">
            <label class="disabled"><input name="uom" type="radio" disabled="disabled"></input></label>
        </div>
    </div>
    <div id="enabled-uom" style="display:none">
        <div class="uom">
            <label><input name="uom" type="radio"></input></label>
        </div>
    </div>
    <div class="quantity">
        <input type="text"></input>
        <input type="submit" value="add to cart"></input>
    </div>
</div>

<script type="text/javascript">

function($){

    function updateUoms()
    {
        selectedUom = getSelected($('div#uom-to-cart div.uoms'));
        if ($(selectedUom).length) {
            var uomString = selectedUom.data('uom_string');
        }
        ids = [];
        //if there is a selection for the builder, add its choice id
        $('div#configure-buy > div.builder').each(function(){
            id = getChoiceId(getSelected(this));
            if (id) { ids.push(id) } else { return }
        });

        showUoms(); //reset to all uoms as disabled

        //check choice ids against builders
        $.each(builders, function(i, builder) {
            if (builder.choices.sort().join(',') == ids.sort().join(',')) {
                showUoms(i);
            }
        });

        if (uomString) {
            selectUomString(uomString);
        }
    }

    function selectUomString(uomString)
    {
        el = $('div#uom-to-cart div.uoms input[data-uom_string="'+uomString+'"]');
        if ($(el).length) {
            $(el).attr('checked', 'checked');
            return true;
        }
        return false;
    }

    function showEnabledUom(uom)
    {
        var uomString = uom.uom_code+uom.quantity;
        el = $('#enabled-uom').find('div.uom').clone();
        $(el).attr('data-uom_qty', uom.quantity)
             .find('label').append(uom.name)
             .find('input').attr('data-uom_string', uomString).val(uomString);
        $('#uom-to-cart .uoms input[value="' + uomString + '"]').parents('div.uom').remove();
        $('#uom-to-cart .uoms').append(el);
    }

    function showDisabledUom(uom)
    {
        var uomString = uom.uom_code+uom.quantity;
        el = $('#disabled-uom').find('div.uom').clone();
        $(el).attr('data-uom_qty', uom.quantity)
             .find('label').append(uom.name)
             .find('input').val(uomString);
        $('#uom-to-cart .uoms').append(el);
    }

    function sortUoms()
    {
        var uoms = $('#uom-to-cart .uoms');

        uoms.find('div.uom').sort(function (a, b) {
            return +a.getAttribute('data-uom_qty') - +b.getAttribute('data-uom_qty');
        }).appendTo( uoms );
    }

    function showUoms(match)
    {
        if (match) {
            $.each(builders[match]['uoms'], function(i, uom) {
                showEnabledUom(uom);
            });
            sortUoms();
        } else {
            $('div#uom-to-cart div.uoms').empty();
            $.each(uoms, function(i, uom) {
                showDisabledUom(uom);
            });
        }
    }

    //takes any element
    //returns choice_id data, or false
    function getChoiceId(element)
    {
        if (!element.length) {
            return false
        }
        choiceId = $(element).data('choice_id');
        if (!choiceId) {
            return false;
        }
        return choiceId;
    }

    //takes any element that wraps all of the choices
    //returns element or false
    function getSelected(element)
    {
        radio = $(element).find('input[type="radio"]:checked');
        if ($(radio).length) {
            return radio;
        }
        select = $(element).find('select option:selected');
        if ($(select).length) {
            return select;
        }

        return false;
    }

    $(document).ready(function(){
        updateUoms();
        $('div#configure-buy div.builder').find('select, input').change(function(){
            updateUoms();
        });
    })

)(jQuery);

</script>