Question

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

我想要的是这样的，而不是默认的下拉菜单。

enter image description here

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

Answer 2

您应该为可配置产品创建模板。

<PRODUCT_TYPE_configurable translate="label" module="catalog">
    <reference name="product.info.options.wrapper">
        <reference name="product.info.options.wrapper"> 
             <action method="setTemplate">
                  <template>Your template file here</template>
         </action>
        </reference>
    </reference>
</PRODUCT_TYPE_configurable>

修改从原始模板文件中复制的代码

design/frontend/base/default/template/catalog/product/view/type/options/configurable.phtml

将这些代码更改为您需要的代码。

    <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
        <div class="input-box">
            <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
                <option><?php echo $this->__('Choose an Option...') ?></option>
              </select>
          </div>
    </dd>

Answer 3

我稍微改进了代码以将图像锁存器添加到选项中（您的选项图像需要具有属性选项名称，采用gif格式并放在/ magento / media / optionimage /中：

    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("<img>",{src:'/magento/media/optionimage/' + option.text() + ".gif"}).prependTo(
            jQuery("<div>", { 
                    text: option.text(),
                    href: '#',
                    class: 'product_attribute_option_link col-md-3',
                    '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();
})

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

3 个答案: