在目录/类别页面上,我希望图像在悬停时发生变化。就像 clubmonaco.com 我知道如何在 html/css 上做到这一点,但不知道如何在 magento 上做到这一点。有什么帮助吗?
您可以修改此目录中的文件:
app/design/frontend/base/default/template/catalog/product
for example (list/ and list.phtml)
或您的模板例如:
app/design/frontend/default/yourtemplate/template/directory with product files
CSS 文件可以在以下位置找到:
skin/frontend/
您还应该考虑第二张图像存储在哪里。对于这种情况,您可以使用“CSS-Sprites” - 包含两张照片的单个图像文件。缺点是,您必须自定义 magento 显示产品图像的每个页面。
或者,您必须定义确切的订单。第一张图片是前视图,第二张图片始终是后视图。
编程部分并不难。看看
app/design/frontend/base/default/template/catalog/product/list.phtml
用于目录视图。如果您有自定义模板,路径可能会有所不同。在Magento后端有一个功能可以显示真实路径(系统->配置->开发工具)。
您可以将 Javascript 直接写入 list.phtml。 Magento 还直接在 .phtml 文件中编写 JS 代码。当然它不是很漂亮,但是 Magento 太复杂了;如果其他人使用商店系统,会更容易找到。
请记住,list.phtml 包含两种布局:网格和列表视图。如果您进行更改并想知道为什么您在前端看不到更改;-)
这是 Magento 2 的扩展,增加了为每个产品配置悬停图像的可能性:https://github.com/MagestyApps/module-hover-image