如何在默认包主题(或自定义主题)中使用Magento1.9.1.0可配置色板?
-
12-12-2019 - |
题
更新资料: 我的答案现在支持自动更改产品基础 色板后的图像。您还可以找到有关如何更详细的教程 要做到这一点,包括更多的图像 这里.
Magento CE1.9.1.0带有一个非常好的新功能:可配置色板。不幸的是,这仅适用于默认Magento安装附带的RWD软件包。这是一个关于如何使Magento可配置色板可用于默认包的自我回答的问题。对于任何想要集成可配置色板的人 在自定义主题中,此信息也可能会派上用场。
注1: 这是一个关于如何使可配置的样本可用于Magento的默认包的介绍性指南。这可能(但可能不会)适用于每个自定义主题。在进行任何更改之前,请始终备份原始文件(和数据库)。
注2: 色板确实工作(下面的屏幕截图),但我还没有得到产品图像与色板一起自动更改。等我有时间,我会试着调查一下的.
随时通过评论和提出建议作出贡献!
解决方案
复制文件夹
app/design/frontend/RWD/default/template/configurableswatches/
及其内容
app/design/frontend/DEFAULT/default/template/
(或您的包模板文件夹)
复制文件
app/design/frontend/RWD/default/template/catalog/product/view/type/options/configurable.phtml
到
app/design/frontend/DEFAULT/default/template/catalog/product/view/type/options/
(或您的包模板文件夹)
复制文件
app/design/frontend/RWD/default/template/catalog/product/view/media.phtml
到
app/design/frontend/DEFAULT/default/template/catalog/product/view/
(或您的包模板文件夹)
复制文件夹
skin/frontend/RWD/default/js/configurableswatches/ skin/frontend/RWD/default/js/lib/
及其内容
skin/frontend/DEFAULT/default/js/
(或您的包皮肤文件夹)
复制文件
skin/frontend/RWD/default/js/app.js skin/frontend/RWD/default/js/minicart.js skin/frontend/RWD/default/js/slideshow.js
到
skin/frontend/DEFAULT/default/js/
(或您的包皮肤文件夹)
复制文件
app/design/frontend/RWD/default/layout/configurableswatches.xml
到
app/design/frontend/DEFAULT/default/layout/
(或您的包布局文件夹)
创建文件
app/design/frontend/DEFAULT/default/layout/local.xml
如果您的包布局文件夹已包含
local.xml
档案, 然后不要复盖它。看看下一步的变化 并将它们复制到您的版本local.xml
档案。
开门
local.xml
并添加以下代码:<?xml version="1.0"?> <layout> <default> <reference name="head"> <action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action> <action method="addJs"><script>lib/jquery/noconflict.js</script></action> <action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action> <action method="addItem"><type>skin_js</type><name>js/lib/selectivizr.js</name></action> <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.js</name></action> <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.addListener.js</name></action> <action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action> <action method="addItem"><type>skin_js</type><name>js/app.js</name></action> <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action> <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action> <action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action> <action method="addItem"><type>skin_js</type><name>js/lib/imagesloaded.js</name></action> <action method="addItem"><type>skin_js</type><name>js/minicart.js</name></action> </reference> </default> <catalog_product_view> <reference name="head"> <action method="addItem"><type>skin_js</type><script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script></action> </reference> <reference name="product.info.media"> <block type="core/text_list" name="product.info.media.after" as="after" /> </reference> </catalog_product_view> <PRODUCT_TYPE_configurable> <reference name="product.info.options.configurable"> <block type="core/text_list" name="product.info.options.configurable.renderers" as="attr_renderers"> <block type="configurableswatches/catalog_product_view_type_configurable_swatches" template="configurableswatches/catalog/product/view/type/options/configurable/swatches.phtml" /> </block> <block type="core/text_list" name="product.info.options.configurable.after" as="after"> <block type="core/template" template="configurableswatches/catalog/product/view/type/configurable/swatch-js.phtml" /> </block> </reference> </PRODUCT_TYPE_configurable> </layout>
将以下css添加到您的 风格。css 档案:
/* ============================================ * * Configurable Swatches * ============================================ */ /* Clears */ .clearfix:after, .configurable-swatch-list:after, .product-view .product-options .swatch-attr:after { content: ''; display: table; clear: both; } /* General Swatch Styling */ .swatch-link, .swatch-label { display: block; border-radius: 3px; font-size: 14px; text-align: center; color: #636363; text-decoration: none; box-sizing: content-box; } .swatch-link { border: 1px solid #cccccc; margin: 0 0 3px; } .swatch-link img { border-radius: 2px; } .swatch-link:hover { cursor: pointer; text-decoration: none; } .swatch-link .x { display: none; text-indent: -999em; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(../images/bg_x.png) center no-repeat transparent; z-index: 10; } .swatch-link.has-image .swatch-label { position: relative; } .swatch-link.has-image img { position: absolute; top: 0; left: 0; } .swatch-label { border: 1px solid #fff; margin: 0; white-space: nowrap; background: #f4f4f4; } .configurable-swatch-list { margin-left: -3px; zoom: 1; clear: both; -webkit-transform: translateZ(0px); } .configurable-swatch-list li { float: left; zoom: 1; margin: 0 0 0 3px; } .products-grid .configurable-swatch-list li { display: inline-block; float: none; margin: 0; vertical-align: top; } .configurable-swatch-list .not-available .x { display: block; } .configurable-swatch-list .not-available .swatch-link { border-color: #ededed; position: relative; } .configurable-swatch-list .not-available .swatch-link.has-image img { opacity: 0.4; filter: alpha(opacity=40); } .configurable-swatch-list .not-available .swatch-label { color: #aaa; background: #fff; } .configurable-swatch-list .wide-swatch .swatch-label { padding: 0 6px; } .configurable-swatch-list .not-available a:focus { outline: 0; } #narrow-by-list dd .configurable-swatch-list li { margin: 0 0 0 3px; width: 47%; } #narrow-by-list dd .swatch-link { border: none; line-height: 25px; margin-right: 2px; text-align: left; } #narrow-by-list dd .swatch-link.has-image { line-height: inherit; } #narrow-by-list dd .swatch-link:hover .swatch-label { border-color: #3399cc; } #narrow-by-list dd .swatch-label { background: #f4f4f4; border: 1px solid #cccccc; border-radius: 3px; display: block; float: left; line-height: 1.5em; margin: 0 5px 0 0; padding: 1px 5px; white-space: nowrap; } #narrow-by-list dd .swatch-label img { border: 1px solid #fff; border-radius: 3px; box-sizing: content-box; } #narrow-by-list dd .has-image .swatch-label { padding: 0; } @media only screen and (max-width: 770px) { #narrow-by-list dd .configurable-swatch-list li:nth-child(odd) { clear: left; } } .currently .swatch-current { position: relative; } .currently .swatch-current .btn-remove { margin-top: -10px; position: absolute; right: 0; top: 50%; } .currently .swatch-current span { display: block; float: left; } .currently .swatch-link { display: inline-block; margin: 0 0 0 3px; } .currently .swatch-link:hover { border-color: #cccccc; cursor: default; } /* Other Swatch States */ .configurable-swatch-list .hover .swatch-link, .configurable-swatch-list .selected .swatch-link, .swatch-link:hover { border-color: #3399cc; } .configurable-swatch-box { background: none !important; } .configurable-swatch-box select.swatch-select { display: none; } .configurable-swatch-box .validation-advice { margin: 0 0 5px; background: #df280a; padding: 2px 5px !important; font-weight: bold; color: #fff !important; float: left; display: block; border-radius: 3px; } .product-view .product-img-box .product-image img { max-width: 100%; max-height: 750px; margin: 0px auto; } .product-view .product-img-box .product-image-zoom { z-index: 0; } .product-view .product-image-thumbs img { max-width: 100%; max-height: 100%; }
复制文件
skin/frontend/RWD/default/images/bg_x.png
到
skin/frontend/DEFAULT/default/images/
其他提示
您的解决方案很棒,但没有在类别列表或网格中显示颜色样本。在这里,我添加解决方案来显示它,在Magento 1.9.2.4上测试。
:应用程序/设计/前端/自定义主题/模板/目录/产品添加后跟 list.phtml
1 - 首先显示在列表视图中,检查是否存在,如果没有,更新O更改(Aroud Line 39):
.
<?php $_imgSize = 300; ?>
<img id="product-collection-image-<?php echo $_product->getId(); ?>"
src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize); ?>"
alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>
替代可以使用这个:
.
<img id="product-collection-image-<?php echo $_product->getId(); ?>"
src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(230,279); ?>" class="small-image"
alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>
调整调整大小图像。
2 - 在“getRatingsummary”= PHP结束if=,围绕第53行,添加以下:
.
<?php
// Provides extra blocks on which to hang some features for products in the list
// Features providing UI elements targeting this block will display directly below the product name
if ($this->getChild('name.after')) {
$_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
foreach ($_nameAfterChildren as $_nameAfterChildName) {
$_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
$_nameAfterChild->setProduct($_product);
echo $_nameAfterChild->toHtml();
}
}
?>
3 - 使与线120和152围绕线条视图相同的变化。
4 - 在文件的末尾添加以下:
. <?php
// Provides a block where additional page components may be attached, primarily good for in-page JavaScript
if ($this->getChild('after')) {
$_afterChildren = $this->getChild('after')->getSortedChildren();
foreach ($_afterChildren as $_afterChildName) {
$_afterChild = $this->getChild('after')->getChild($_afterChildName);
//set product collection on after blocks
$_afterChild->setProductCollection($_productCollection);
echo $_afterChild->toHtml();
}
}
?>
这非常有帮助!我有一些额外的细节,我能够通过才能让图像切换到工作。
-
复制文件
.app/design/frontend/RWD/default/template/catalog/product/view/media.phtml
.app/design/frontend/DEFAULT/default/template/catalog/product/view/
或您的自定义主题
-
复制以下文件列表:
.app/skin/frontend/RWD/default/js/app.js app/skin/frontend/RWD/default/js/slideshow.js app/skin/frontend/RWD/default/js/lib/* (all files and the elevatezoom folder)
.app/skin/frontend/DEFAULT/default/js
或您的自定义主题
-
要包含这些新脚本,编辑app / design / frontend / default / default / layout / page.xml(首先备份此文件,如果您作为默认主题执行更新,请确保合并更改将被覆盖)
在第38行后添加:
.<action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action> <action method="addJs"><script>lib/jquery/noconflict.js</script></action>
在第50行之后添加(第52行如果您已经添加了上述两行):
<action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action> <action method="addItem"><type>skin_js</type><name>js/lib/selectivizr.js</name></action> <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.js</name></action> <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.addListener.js</name></action> <action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action> <action method="addItem"><type>skin_js</type><name>js/app.js</name></action> <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action> <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action> <action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action> <action method="addItem"><type>skin_js</type><name>js/lib/imagesloaded.js</name></action>
-
从 styles.css 文件(围绕第783-803行)中的
* Product Images */ .product-img-box { width: 50%; float: left; } .product-img-box .product-name h1 { border: 0; } .product-img-box .product-image { margin-bottom: 10px; } .product-img-box .product-image img { max-width: 100%; max-height: 750px; margin: 0px auto; } @media only screen and (max-width: 479px) { .product-img-box .product-image img { max-height: 450px; } } .product-image-gallery { position: relative; } .product-image-gallery .gallery-image { display: none; } .product-image-gallery .gallery-image.visible { display: block; } .product-image-gallery .gallery-image.visible.hidden { visibility: hidden; } .product-image-gallery:before, .product-image-gallery:after { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none; } .product-image-gallery:before { background-color: white; opacity: 0.8; z-index: 2; } .product-image-gallery:after { background-image: url("../images/opc-ajax-loader.gif"); background-repeat: no-repeat; background-position: center; z-index: 3; } .product-image-gallery.loading { position: relative; } .product-image-gallery.loading:before, .product-image-gallery.loading:after { display: block; } .product-image-thumbs li { display: inline-block; } .product-image-thumbs li:first-child { margin-left: -1px; } .product-image-thumbs a { display: inline-block; border: 1px solid transparent; } .no-touch .product-image-thumbs a:hover { border-color: #c7c7c7; }
最后,但并非最不重要的是,通过谷歌和在 belvg blog by Mishel Soiko ,我能够修改并利用Zoom窗口的内部缩放或偏移量的升降泽或偏移量的更多设置。另外,我希望在点击时,我有一个弹出的FancyBox,其中我在注释中从上面的博客中启用了一个帮助。
-
打开 app.js 文件,您将早期复制到主题
在线1153(
var ProductMediaManager = {
),粘贴(从上面的belvg博客链接复制):
.var settings = { // set tint background tint:true, tintColour:'#F90', tintOpacity:0.5, // Size zoomWindowHeight: 300, zoomWindowWidth: 400, borderSize: 0, // Position zoomWindowOffetx: 10, zoomWindowOffety: 0, // Additional settings for Zoomer positioning. // zoomWindowPosition: 1, // zoomType: "inner", // Fade-in speed settings zoomWindowFadeIn: 500, zoomWindowFadeOut: 500, lensFadeIn: 500, lensFadeOut: 500, // Ability to zoom by using the mouse scroll. scrollZoom : true, // inertia - my favorite one easing: true }
如果您想要FancyBox弹出窗口,在上面的INT IND 1227,请粘贴:
.$j(".product-image-gallery").on("click", function(e) { var src = $j('.product-image img.visible').attr('src'); $j.fancybox(src); });
注意,您需要在Page.xml中的jQuery或主题中的其他位置jQuery后加载FancyBox JS库加载
最后,修改现在的行1232(如果您从上面做过的粘贴),请从:
.image.elevateZoom();
到:
image.elevateZoom(settings);
要概述所有缩放器设置,请查看描述 ethatezoom设置
并且应该让它工作。如果您正在使用自定义主题(如我),您可能有更多才能做到。
-