Question

我希望在Magento上创建一个开关，允许人们通过产品列表页面上的“On the Model”或“Product Only”选择查看产品。

我已经能够将鼠标悬停在单个产品上，但我希望能够一次性替换所有产品图像。与网格/列表开关类似的功能，但这会将列表中的所有图像从小图像更改为缩略图。

Net a Porter有一个开关/按钮（http://www.net-a-porter.com/Shop/Clothing）。

我搜索了具有此功能的扩展程序，我查看了有关此主题的帖子，但我都没有成功。

Answer 1

如果您的翻转工作正常，我认为您大部分时间都在那里，因为您正在将两个产品图片加载到类别页面中。

通常你会给模特'他们自己的类'，例如class ='myshop-on-model'和'off the model'图像他们自己的不同的类，例如class ='myshop-off-model'。

然后您可以使用DOM选择一个类的所有图像并将样式设置为，例如opacity = 0并按类选择所有其他图像并使opacity = 1。

您熟悉这种JavaScript编码吗？ Magento可能已经加载了prototype.js，所以你可以使用

$$(".myshop-on-model") //returns an array of DOM elements

我从不使用prototype.js，但你的代码可能会像这样

$$(".myshop-on-model").each(function(element){
      element.setStyle({opacity:1});
});
$$(".myshop-off-model").each(function(element){
      element.setStyle({opacity:0});
});

反之亦然，切换回来。

（可以使用其他JavaScript库和其他样式修改来实现相同的效果。）

如何通过Magento中的按钮切换列表中的所有产品图像？

1 个答案: