[英]Magento Custom Product Options
如果您查看我希望“从中获取灵感”的网站上的以下产品页面。
正如您所看到的,其中一个产品选项是选择产品的颜色,您可以选择“点击此处查看颜色图表”,然后会显示大量图片,显示产品的颜色。可用。
我知道如何使用我选择的选项添加下拉菜单的自定义选项,但我如何让它也显示这些图像。 (另外,单击imagesit会更改下拉菜单中的选项。
非常感谢任何帮助,即使是与优质资源的链接也可以。 如果我在同一时间弄清楚,我会在这里发布答案。 (虽然没有希望)。
提前致谢!
这个扩展会对你有用吗?
http://www.magentocommerce.com/magento-connect/temgra/extension/893/color-swatches
(注意;还有其他扩展可用)
一般方法是为每种可用颜色使用格式良好的URL( skin/images/hairsamples/jetsetblack.jpg
,然后为产品的每个选项回显可重复的URL。使用Javascript将onclick事件绑定到图像,从选择框中选择适当的选项。
将下拉/颜色图表组合到页面上实际上有点复杂。 您可以创建自定义选项类型,或者破解它,只需检测选项模板文件中的字段名称。
要支持基于制造商的颜色集,请修改上述颜色集,但请改用skin/images/hairsamples/$manufacturer/$color.jpg
。 问题解决了!
我最终使用以下内容为下拉列表中的每个选项提取文本和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 Deep Red”变成了“4522DeepRed.jpg”。
然后为每个样本提供followig函数,该函数根据您单击的值更改下拉值。
function changeOption(theId) {
$j('.input-box select').val(theId);
}
所有这些都只是在您的媒体文件中
只需加载显示无类的所有图像。 并在鼠标上使用jquery只显示添加的图像
$(".className").show();
并在mouseout上
$(".className").hide();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.