variants

variants

<script type="text/javascript">
<!--

    
    var variant_map = {"TAMANHO:P":{"price":"R$ 79,00","id":"30","quantity":"4"},"TAMANHO:M":{"price":"R$ 79,00","id":"31","quantity":"8"},"TAMANHO:G":{"price":"R$ 79,00","id":"32","quantity":"8"},"TAMANHO:GG":{"price":"R$ 79,00","id":"33","quantity":"4"}};
    
    $(document).ready(function() {
        variants.toggle_variant_form();
        $('.buy-btn').click(function(e){
            if ($(this).hasClass('buy-btn-disabled')) {
                e.preventDefault();
                alert('Por favor selecione uma opção.');
            }
        });
        $('.prod-variant-btn').on('click', function(e){
            var self = $(this);
            var radios = self.parent().find('input[type="radio"]');
            if(radios.is(':checked') === false){
                radios.prop('checked', true);
                variants.toggle_variant_form();
                self.addClass('active').parent().siblings().find('.prod-variant-btn').removeClass('active');
            }
            return false;
        });
    });
    
    var variants = {
        toggle_variant_form: function(){
            var selected = new Array();
    
            $('.product_option:checked').each(function(){
                selected.push($(this).data('name') + ':' + $(this).val());
            });
    
            var selected_key = selected.sort().join('_');
            if(variant_map[selected_key]) {
                $('.buy-btn').removeClass('buy-btn-disabled');
                $('input[name=variant_id]').val(variant_map[selected_key].id);
            } else {
                $('.buy-btn').addClass('buy-btn-disabled');
                $('input[name=variant_id]').val('');
            }
    
        }
    };

//-->
</script>

.....

<li>    
    <input type="radio" name="option[52]" value="P" data-name="TAMANHO" class="product_option hide" />
    <button class="btn btn-default prod-variant-btn" data-name="TAMANHO">P</button>
</li>
<li>    
    <input type="radio" name="option[52]" value="P" data-name="TAMANHO" class="product_option hide" />
    <button class="btn btn-default prod-variant-btn" data-name="TAMANHO">S</button>
</li>