将magento可配置产品选项下拉列表转换为可选链接或单选按钮

Question

我需要将magento可配置产品选项下拉列表转换为可选择的链接或类似可选链接的单选按钮..有一些付费主题提供它,但如何做到这一点我的购物者主题是不可用的任何地方..

我想要的是这样的东西,而不是默认的下拉菜单..

Answer 1

正如我所说,我已经编写了简单的JavaScript来将下拉列表转换为链接.下面的脚本将下拉列表转换为链接并显示所选组合.

function replaceDropDowns() {
    jQuery('.product_attribute_option_link').remove();
    jQuery('#selected_combination').text('');
    jQuery(".super-attribute-select").each(function() {
        var drop_down = jQuery(this);
        drop_down.hide();
        drop_down.find("option[value!='']").each(function() {
            var option = jQuery(this);
            jQuery("<a>", { 
                    text: option.text(),
                    href: '#',
                    class: 'product_attribute_option_link',
                    'data-id': drop_down.attr('id'),
                    'data-name': drop_down.attr('name'),
                    'data-value': option.val(),
                    'data-label': option.text(),
                    click: function() { 
                        drop_down.val(option.val());
                        var obj = drop_down.get();
                        Event.observe(obj[0],'change',function(){});
                        fireEvent(obj[0],'change');
                        replaceDropDowns();
                        var selected_combination = [];
                        jQuery(".super-attribute-select").each(function() {
                            if(jQuery(this).val()) {
                                jQuery(".product_attribute_option_link[data-value="+jQuery(this).val()+"]").addClass('product_attribute_option_link_selected');
                                selected_combination.push(jQuery(this).find("option:selected").text());
                            }
                        });
                        jQuery.each(selected_combination, function(index, selection) {
                            jQuery('#selected_combination').append(selection);
                            if(index+1 < selected_combination.length)
                                jQuery('#selected_combination').append(" - ");
                        })
                        return false;
                    }
            }).appendTo(drop_down.parent());
        })
    });
}

jQuery(function() {
    replaceDropDowns();
})