所以这就是我最终使用的。它不会更改可配置的.phtml 或 SCP 核心代码中的任何代码。相反,我只是调用 skin/frontend/base/default/js/scp_product_extension.js 来更新选项和价格。这必须发生在客户端,但大部分 SCP 逻辑显然也是如此。
var sizeselect = $(".catalog-product-view .input-box select").eq(0);
var materialselect = $(".catalog-product-view .input-box select").eq(1);
function optionsToRadios(element){
var select = element;
if (element == materialselect){
$(".radios").append("<div class='secondradiofield'></div>")
select.find('option').each(function(j, option){
var option = $(option);
var eachval = option.val();
$(".catalog-product-view .secondradiofield").append(
"<input type='radio' id='s1"+j+"' data-value='"+eachval+"' data-position='"+j+"'/><span><label for='s1"+j+"'>"+option.text()+"</label></span>"
);
}); // ende find each
} else{
select.find('option').each(function(j, option){
var option = $(option);
var eachval = option.val();
$(".catalog-product-view .radios").append(
"<input type='radio' id='s2"+j+"' data-value='"+eachval+"' data-position='"+j+"'/><span><label for='s2"+j+"'>"+option.text()+"</label></span>"
);
}); // end find each
}
};
// Make first <select> to radios
optionsToRadios(sizeselect);
/*
*
* @SCP - seems like the passed element cannot be a jQuery object!
* @SCP - spConfig.reloadPrice() is autmatically called by spConfig.configureElement(el).
*
*/
$(document).on("click", ".radios>input[type='radio']", function(){
var val = $(this).attr("data-value");
var index = $(this).attr("data-position");
var select = $(".catalog-product-view .input-box select").eq(0);
// deselect other options
select.prop("selected", false);
select.find("option").removeAttr("selected");
// synch options with <select>
var clickedOption = $(select.find("option")[index]);
clickedOption.attr("selected", "selected");
clickedOption.prop("selected", true); // IMPORTANT: Firefox need the prop to work!
// Make call to SCP to update
var el = document.getElementsByClassName("super-attribute-select")[0];
spConfig.configureElement(el);
spConfig.reloadPrice();
// Show second <select> as radios
if($("input[type='radio']").length < 5){
optionsToRadios(materialselect);
}
// Deselect other radio buttons
$(".radios>input[type='radio']").not($(this)).prop('checked', false);
});
第一个函数只是将默认<select>
元素变成单选按钮。<select>
元素被 CSS 隐藏,因为我们不希望选项出现两次。接下来只是监听单选按钮上的点击事件,并基本上将点击同步到<select>
元素。When the select element has changed, you just have to call the spConfig.configureElement(el);
function where el is the corresponding <select>
element.
如果有第二个<select>
元素依赖于第一个元素,那么当单击单选按钮时,这个元素也必须更新。
希望能给其他人一个线索,他们试图做同样的事情。