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


28

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

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

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

참고 2 : 견본이 작동하지만 (아래 스크린 샷) 아직 견본과 함께 제품 이미지가 자동으로 변경되지 않았습니다. 나는 시간을 찾으면 이것을 조사 할 것이다.

여기에 이미지 설명을 입력하십시오

의견을 말하고 제안하여 자유롭게 의견을 보내십시오!


질문에 추가 한 링크가 작동하지 않습니다 : bemaged.com/en/blog/use-magento-swatches-in-custom-theme
Mukesh Chapagain

답변:


27
  1. 폴더를 복사

    app/design/frontend/RWD/default/template/configurableswatches/

    그 내용

    app/design/frontend/DEFAULT/default/template/

    (또는 패키지 템플릿 폴더)

  2. 파일을 복사

    app/design/frontend/RWD/default/template/catalog/product/view/type/options/configurable.phtml

    app/design/frontend/DEFAULT/default/template/catalog/product/view/type/options/

    (또는 패키지 템플릿 폴더)

  3. 파일을 복사

    app/design/frontend/RWD/default/template/catalog/product/view/media.phtml

    app/design/frontend/DEFAULT/default/template/catalog/product/view/

    (또는 패키지 템플릿 폴더)

  4. 폴더를 복사

    skin/frontend/RWD/default/js/configurableswatches/
    skin/frontend/RWD/default/js/lib/

    그리고 그들의 내용

    skin/frontend/DEFAULT/default/js/

    (또는 패키지 스킨 폴더)

  5. 파일을 복사

    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/

    (또는 패키지 스킨 폴더)

  6. 파일을 복사

    app/design/frontend/RWD/default/layout/configurableswatches.xml

    app/design/frontend/DEFAULT/default/layout/

    (또는 패키지 레이아웃 폴더)

  7. 파일 만들기

    app/design/frontend/DEFAULT/default/layout/local.xml

패키지 레이아웃 폴더에 local.xml파일이 이미 있으면 덮어 쓰지 마십시오. 다음 단계의 변경 사항을보고 local.xml파일 버전에 복사 하십시오.

  1. 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>
  2. 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%;
    }
  3. 파일을 복사

    skin/frontend/RWD/default/images/bg_x.png

    skin/frontend/DEFAULT/default/images/

1
카탈로그 / 제품 / 목록의 개별 제품에 견본을 어떻게 추가 하시겠습니까? 기본 RWD 내에서 제품을 클릭하지 않고도 여기에서 다른 견본을 직접 선택할 수 있습니다. 물론 백엔드에서 "제품 목록의 견본에 사용할 제품 속성"에서 설정을 활성화해야합니다.
Joe

또한 .product-image-zoom.zoom-available .gallery-image { display: none; } .product-image-zoom.zoom-available .gallery-image.visible { display: block; }CSS 끝에 추가 하는 것이 좋습니다. 없는 경우 제품을 방문 할 때 마지막으로 추가 한 제품 이미지가 표시되지만 마우스를 올리면 기본 이미지가 표시됩니다.
SebiF

1
견본 색상을 클릭해도 갤러리 이미지가 변경되지 않습니다. 어떻게 작동하는지 알려주세요.
Tahir Yasin

2

귀하의 솔루션은 훌륭하지만 카테고리 목록이나 그리드에 색상 견본을 표시하지는 않습니다. 여기에 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();
    }
}
?>

1

이것은 매우 도움이되었습니다! 이미지 전환이 작동하도록 추가 세부 정보가 있습니다.

  1. 파일을 복사

    app/design/frontend/RWD/default/template/catalog/product/view/media.phtml

    app/design/frontend/DEFAULT/default/template/catalog/product/view/

    또는 사용자 정의 테마

  2. 다음 파일 목록을 복사하십시오.

    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

    또는 사용자 정의 테마

  3. 이러한 새 스크립트를 포함 시키려면 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>
  4. 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를 갖기를 원했고 위의 블로그의 도움으로 댓글을 달았습니다.

  1. 열기는 것을 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 설정을 설명하는 공식 페이지를 확인하십시오.

그리고 그것은 그것을 작동시켜야합니다. 커스텀 테마로 작업하고 있다면 더 많은 것을 할 수 있습니다.


조금 다른 접근 방식으로 자동화 된 이미지 전환도 작동시킬 수있었습니다. 내 접근 방식에서는 페이지의 local.xml모든 .js파일 을로드 하는 데 사용하고 있습니다 head. 시간을 찾으면 답변을 업데이트하겠습니다. 그때까지이 작업을 수행하는 방법에 대한 자세한 자습서를 찾을 수 있습니다 .
ForMat

구성 견본 구성 제품의 사진을 변경 못해 투표를 아래로 0이를 확인하시기 바랍니다 ravichomal.blogspot.in/2015/12/...
라비 Chomal에게
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.