html - 将 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();
})