Magento自定义产品选项
如果你看了下面的产品页面，我想从这个网站上“获取灵感”。
http://www.pauls-hair-world.co.uk/best-sellers/beauty-works-celebrity-choice-100-remy-hair-extensions
如您所见，其中一个产品选项是选择产品的颜色，有一个选项可供您单击“单击此处查看颜色图表”，然后您将看到许多图片，其中显示了可用产品的颜色。
我知道如何添加带有我选择的选项的下拉菜单的自定义选项，但我如何让它也显示这些图像。(此外，当您单击图像时，会更改下拉菜单中的选项。
任何帮助都是非常感谢的，即使是一个很棒的资源的链接也可以。如果我在同一时间找到答案，我会把答案贴在这里。(虽然不太乐观)。
提前感谢！
回答 4
Stack Overflow用户
发布于 2011-01-02 00:14:01
最后，我使用下面的代码提取下拉列表中每个选项的文本和id，然后使用它创建单独的色板作为div，其中包含每种颜色的图像。
function createColourSwatch(theid, filename) {
if(theid != "" && filename != "NotSureSendMeSomeSamplesFirst" && filename != "PleaseSelect"){
newSwatch = "<div class='swatchPanel' onClick='changeOption(\""+theid+"\")'><img src='"+imgLocation+filename+".jpg' /></div>";
return newSwatch;
} else {
return "";
}
}
$j('.input-box:eq(0) option').each(function() {
klass = $j(this).text().replace(/[^a-zA-Z 0-9]+/g,'');
klass = klass.replace(/\s/gi,"");
itsId = $j(this).val();
$j('.colour-swatch:eq(0)').html($j('.colour-swatch:eq(0)').html()+createColourSwatch(itsId, klass));
});然后使用不带空格或非字母数字字符的下拉文本值显示图像。例如，"45/22深红“变成了"4522DeepRed.jpg”。
然后，每个样例都会被赋予followig函数，该函数会根据您所单击的值来更改下拉值。
function changeOption(theId) {
$j('.input-box select').val(theId);
}Stack Overflow用户
发布于 2010-12-30 20:00:17
这个扩展对你有用吗？
http://www.magentocommerce.com/magento-connect/temgra/extension/893/color-swatches
(注意；还有其他可用的扩展)
Stack Overflow用户
发布于 2010-12-30 10:32:24
一般的方法是对每种可用的颜色使用格式良好的url (skin/images/hairsamples/jetsetblack.jpg )，然后对产品拥有的每个选项回显可重复的URL。使用Javascript将onclick事件绑定到图像，这将从选择框中选择适当的选项。
将下拉/颜色图表组合放到页面上实际上要复杂一些。您可以创建自定义选项类型，或者破解它，只需检测选项模板文件中字段的名称。
要支持基于制造商的颜色集，请修改以上设置，但使用skin/images/hairsamples/$manufacturer/$color.jpg。问题解决了！
https://stackoverflow.com/questions/4559090
复制相似问题
腾讯云开发者
