업데이트 : 내 대답은 이제 견본 후 제품 기본 이미지의 자동 변경을 지원합니다. 여기에서 더 많은 이미지를 포함하여이 작업을 수행하는 방법에 대한 자세한 자습서를 찾을 수도
있습니다 .
Magento CE 1.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>
-
styles.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에서 테스트 한 솔루션을 추가했습니다.
에서 : app / design / frontend / CUSTOM-THEME / template / catalog / product add list 다음 행을 list.phtml
1-먼저 목록보기에 표시하려면 변경 사항이 없는지 확인하십시오 (아니면 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 end 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 * / 섹션을 제거하고 RWD styles.css 파일에서 다음 CSS를 붙여 넣습니다.
* 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; }
마지막으로 Google 덕분에 elevateZoom에 대한 일부 최적화와 Mishel Soiko의 BelVG Blog 에서 다음 게시물을 찾은 후 확대 / 축소 창의 내부 확대 / 축소 또는 오프셋과 같은 elevateZoom에 대한 더 많은 설정을 수정하고 활용할 수있었습니다. 또한 클릭 할 때 이미지에 팝업 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 팝업을 원한다면, 현재 1227 행 위에 붙여 넣기 :
$j(".product-image-gallery").on("click", function(e) { var src = $j('.product-image img.visible').attr('src'); $j.fancybox(src); });
참고로, page.xml 또는 테마의 다른 곳에서 jQuery를 실행 한 후 fancybox js 라이브러리를로드해야합니다.
마지막으로, 현재 1232 행을 수정하십시오 (위에서 두 개의 붙여 넣기를 모두 수행 한 경우).
image.elevateZoom();
에:
image.elevateZoom(settings);
모든 확대 / 축소 설정에 대한 개요는 elevateZoom 설정을 설명하는 공식 페이지를 확인하십시오.
그리고 그것은 그것을 작동시켜야합니다. 커스텀 테마로 작업하고 있다면 더 많은 것을 할 수 있습니다.