Magento 自定义产品选项答案

【问题标题】：Magento Custom Product OptionsMagento 自定义产品选项
【发布时间】：2010-12-30 00:31:22
【问题描述】：

如果您查看我想“从中获取灵感”的网站上的以下产品页面。

http://www.pauls-hair-world.co.uk/best-sellers/beauty-works-celebrity-choice-100-remy-hair-extensions

如您所见，产品选项之一是选择产品的颜色，您可以单击“单击此处查看颜色图表”选项，然后您会看到很多显示颜色的图片可用的产品。

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

非常感谢您提供任何帮助，即使是指向重要资源的链接也可以。如果我同时弄清楚，我会在这里发布答案。（虽然没有希望）。

提前致谢！

【问题讨论】：

标签： php magento magento-1.4

【解决方案1】：

这个扩展对你有用吗？
http://www.magentocommerce.com/magento-connect/temgra/extension/893/color-swatches

（注意；还有其他可用的扩展）

【讨论】：

【解决方案2】：

一般的方法是为每种可用颜色使用格式正确的 url (skin/images/hairsamples/jetsetblack.jpg，然后为产品具有的每个选项回显可重复的 URL。使用 Javascript 将 onclick 事件绑定到图像，选择选择框中的相应选项。

将下拉/彩色图表组合放到页面上实际上要复杂一些。您可以创建自定义选项类型，或者破解它，只需检测选项模板文件中的字段名称。

要支持基于制造商的颜色集，请修改上述内容，但改用 skin/images/hairsamples/$manufacturer/$color.jpg。问题解决了！

【讨论】：

【解决方案3】：

我最终使用以下内容提取下拉列表中每个选项的文本和 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”。

然后，每个样本都会被赋予跟随函数，该函数会根据您单击的样本更改下拉值。

function changeOption(theId) {
    $j('.input-box select').val(theId);
}

【讨论】：

【解决方案4】：

只需在您的媒体文件中就可以轻松完成

只需加载所有显示无类的图像。并在鼠标上使用 jquery 只显示添加的图像

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

鼠标悬停

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

【讨论】：