Php Magento定制产品选项

如果你看一下我想“汲取灵感”的网站上的以下产品页面

如您所见，其中一个产品选项是选择产品的颜色，有一个选项供您单击“单击此处查看颜色图表”，您将看到大量显示可用产品颜色的图片

我知道如何添加带有我选择的选项的下拉菜单的自定义选项，但如何让它也显示这些图像。（此外，单击图像时，还会更改下拉菜单中的选项

任何帮助都是非常感谢的，即使是一个链接到一个伟大的资源都可以。如果我在同一时间找到它，我会把答案贴在这里。（虽然不抱希望）

---

提前感谢！

通常的方法是为每种可用颜色使用格式良好的url（

skin/images/hairsamples/jetsetblack.jpg

然后为产品的每个选项回显可重复的URL。使用Javascript将onclick事件绑定到图像，从选择框中选择适当的选项

将下拉/颜色图表组合添加到页面上实际上有点复杂。您可以创建一个自定义选项类型，或者只需在选项模板文件中检测字段的名称即可对其进行破解

---

---

要支持基于制造商的颜色集，请修改上述内容，但改用

skin/images/hairsamples/$manufacturer/$color.jpg

。问题已解决！

一般方法是为每种可用颜色使用格式良好的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));

});

---

最后，我使用下面的命令来提取下拉列表中每个选项的文本和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));

});

---

这真是太容易了，就在你的媒体文件里

只需使用displaynone类加载所有图像，并在鼠标上方使用jquery只需使用添加的

$(".className").show();

还有老鼠屎

$(".className").hide();

---

这真是太容易了，就在你的媒体文件里

只需使用displaynone类加载所有图像，并在鼠标上方使用jquery只需使用添加的

$(".className").show();

还有老鼠屎

$(".className").hide();