기본 패키지 테마(또는 사용자 정의 테마)에서 Magento 1.9.1.0 구성 가능한 견본을 사용하는 방법은 무엇입니까?

https://magento.stackexchange.com//questions/45948

12-12-2019
|

문제

업데이트: 내 대답은 이제 견본 후 제품 기반 이미지의 자동 변경을 지원합니다.더 많은 이미지를 포함 하여이 작업을 수행하는 방법에 대한 자세한 자습서를 찾을 수도 있습니다. 여기.

Magento CE 1.9.1.0에는 매우 멋진 새 기능이 포함되어 있습니다.구성 가능한 견본.안타깝게도 이는 기본 Magento 설치와 함께 제공되는 RWD 패키지에서만 사용할 수 있습니다.이것은 기본 패키지에 Magento 구성 가능 견본을 사용할 수 있게 만드는 방법에 대한 자가 답변 질문입니다.구성 가능한 견본을 사용자 정의 테마로 통합하려는 사람이라면이 정보도 유용 할 수 있습니다.

참고 1: 이는 Magento의 기본 패키지에 구성 가능한 견본을 제공하는 방법에 대한 소개 가이드입니다.이는 모든 사용자 정의 테마에 대해 작동할 수 있지만 작동하지 않을 수도 있습니다.변경하기 전에 항상 원본 파일(및 데이터베이스)을 백업하십시오.

노트 2: 견본은 작동하지만(아래 스크린샷) 견본과 함께 자동으로 변경되는 제품 이미지를 아직 얻지 못했습니다.시간이 나면 이에 대해 조사해 보겠습니다.

enter image description here

댓글과 제안을 통해 자유롭게 참여해 주세요!

해결책

폴더 복사

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에서 테스트 한 솔루션을 추가합니다.

in : 앱 / 디자인 / 프론트 엔드 / 사용자 정의 테마 / 템플릿 / 카탈로그 / 제품 추가 list.phtml

1 - 먼저 목록보기에서 표시하려면이 (으)로, upde 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 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 줄을 중심으로 Gird View와 동일한 변경을하십시오.

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

또는 사용자 정의 테마

다음 새 스크립트를 포함하려면 앱 / 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 주위)에서 / * 제품 이미지 * / 섹션을 제거하고 rwd styles.css 파일에서 다음 CSS에 붙여 넣습니다. < / P>

* 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 블로그 , 내부 줌 또는 확대 / 축소 창의 오프셋 등 elevatezoom에 대한 더 많은 설정을 수정하고 활용할 수있었습니다. . 또한 이미지를 팝업 FancyBox를 사용하여 댓글의 블로그에서 위의 블로그에서 도움을받을 수있는 팝업 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 또는 테마의 다른 곳에서 jQuery 후에로드해야합니다
마지막으로, 이제 1232 행이 무엇인지 수정 (위에서부터 두 개의 붙여 넣기를 한 경우) :
image.elevateZoom();
.
to :
image.elevateZoom(settings);

모든 줌 설정에 대한 개요를 위해 elevatezoom 설정을 설명하는 공식 페이지를 확인하십시오
그리고 그것이 작동해야합니다. 사용자 정의 테마로 작업하는 경우 (제가 있었던 것처럼) 더 많은 할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 magento.stackexchange