我希望在Magento上创建一个开关,允许人们通过产品列表页面上的“On the Model”或“Product Only”选择查看产品。
我已经能够将鼠标悬停在单个产品上,但我希望能够一次性替换所有产品图像。与网格/列表开关类似的功能,但这会将列表中的所有图像从小图像更改为缩略图。
Net a Porter有一个开关/按钮(http://www.net-a-porter.com/Shop/Clothing)。
我搜索了具有此功能的扩展程序,我查看了有关此主题的帖子,但我都没有成功。
答案 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库和其他样式修改来实现相同的效果。)