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

时间:2014-04-01 15:11:17

标签: php magento

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

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

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

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

1 个答案:

答案 0 :(得分:0)

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

通常你会给模特'他们自己的类',例如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库和其他样式修改来实现相同的效果。)