Làm cách nào để sử dụng Magatch 1.9.1.0 Swatches có thể cấu hình trong chủ đề gói Mặc định (hoặc chủ đề tùy chỉnh)?

CẬP NHẬT: Câu trả lời của tôi hiện hỗ trợ thay đổi tự động hình ảnh cơ sở sản phẩm sau khi swatch. Bạn cũng có thể tìm thấy một hướng dẫn chi tiết hơn về cách làm điều này bao gồm nhiều hình ảnh hơn ở đây .

Magento CE 1.9.1.0 đi kèm với một tính năng mới rất hay: Swatches có thể cấu hình. Thật không may, điều này chỉ có sẵn cho gói RWD, đi kèm với cài đặt Magento mặc định. Đây là một câu hỏi tự trả lời về cách làm cho các Swatch có thể cấu hình Magento có sẵn cho gói Mặc định. Đối với bất kỳ ai muốn tích hợp Swatches có thể cấu hình vào một chủ đề tùy chỉnh, thông tin này cũng có thể có ích.

Lưu ý 1: Đây có nghĩa là một hướng dẫn giới thiệu về cách làm cho các Swatch có thể cấu hình có sẵn cho gói Mặc định của Magento. Điều này có thể (nhưng có thể không) hoạt động cho mọi chủ đề tùy chỉnh. Luôn sao lưu các tệp gốc (và cơ sở dữ liệu) trước khi thực hiện bất kỳ thay đổi nào.

Lưu ý 2: Các mẫu màu hoạt động (ảnh chụp màn hình bên dưới), nhưng tôi chưa làm cho hình ảnh sản phẩm tự động thay đổi cùng với các mẫu màu. Tôi sẽ cố gắng và xem xét điều này khi tôi tìm thấy một chút thời gian.

Hãy đóng góp bằng cách bình luận và đưa ra gợi ý!

1. Sao chép thư mục

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

   và nội dung của nó để

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

   (hoặc thư mục mẫu gói của bạn)

2. Sao chép tập tin

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

   đến

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

   (hoặc thư mục mẫu gói của bạn)

3. Sao chép tập tin

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

   đến

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

   (hoặc thư mục mẫu gói của bạn)

4. Sao chép các thư mục

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

   và nội dung của họ để

   skin/frontend/DEFAULT/default/js/

   (hoặc thư mục gói da của bạn)

5. Sao chép các tập tin

   skin/frontend/RWD/default/js/app.js
   skin/frontend/RWD/default/js/minicart.js
   skin/frontend/RWD/default/js/slideshow.js

   đến

   skin/frontend/DEFAULT/default/js/

   (hoặc thư mục gói da của bạn)

6. Sao chép tập tin

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

   đến

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

   (hoặc thư mục bố trí gói của bạn)

7. Tạo tập tin

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

Nếu thư mục bố trí gói của bạn đã chứa một local.xmltệp, thì đừng ghi đè lên nó. Hãy xem các thay đổi trong bước tiếp theo và sao chép chúng vào phiên bản local.xmltệp của bạn.

8. Mở local.xmlvà thêm mã sau đây:

   <?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>

9. Thêm css sau vào tệp Styles.css của bạn :

   /* ============================================ *
    * 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%;
   }

10. Sao chép tập tin

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

    đến

    skin/frontend/DEFAULT/default/images/

giải pháp của bạn là tuyệt vời nhưng không hiển thị mẫu màu trong danh sách danh mục hoặc lưới. Ở đây tôi thêm giải pháp để hiển thị nó, đã thử nghiệm trên magento 1.9.2.4.

Trong: ứng dụng / thiết kế / frontend / TÙY CHỈNH / mẫu / danh mục / sản phẩm thêm dòng tiếp theo trong list.phtml

1 - đầu tiên để hiển thị trong chế độ xem danh sách, kiểm tra xem có cái này không, nếu không, cập nhật o thay đổi (dòng aroud 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>

Thay thế có thể sử dụng này:

            <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>

điều chỉnh thay đổi kích thước hình ảnh.

2 - sau "getRatingSummary" = php end if =, xung quanh dòng 53, thêm phần này:

                        <?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 - thực hiện thay đổi tương tự với chế độ xem gird xung quanh dòng 120 và 152.

4 - vào cuối tập tin thêm vào đây:

 <?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();
    }
}
?>

Điều này rất hữu ích! Tôi có một số chi tiết bổ sung mà tôi đã có thể làm việc để chuyển đổi hình ảnh hoạt động.

1. Sao chép tập tin

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

   đến

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

   hoặc chủ đề tùy chỉnh của bạn

2. Sao chép danh sách các tập tin sau:

   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)

   đến

   app/skin/frontend/DEFAULT/default/js

   hoặc chủ đề tùy chỉnh của bạn

3. Để bao gồm các tập lệnh mới này, hãy chỉnh sửa ứng dụng / thiết kế / frontend / DEFAULT / default / layout / page.xml (tạo bản sao lưu của tệp này trước và đảm bảo hợp nhất các thay đổi nếu bạn cập nhật vì chủ đề mặc định sẽ bị ghi đè)

   Thêm sau dòng 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>

   Thêm sau dòng 50 (dòng 52 nếu bạn đã thêm hai dòng trên):

       <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. Xóa / * Hình ảnh sản phẩm * / phần khỏi tệp style.css của bạn (xung quanh các dòng 783-804) và dán CSS sau đây từ tệp RWD Styles.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;
   }

Cuối cùng, nhưng không kém phần quan trọng, một số tối ưu hóa cho elevateZoom nhờ Google và tìm thấy bài đăng sau tại Blog BelVG của Mishel Soiko , tôi đã có thể sửa đổi và tận dụng nhiều cài đặt hơn cho elevateZoom như zoom nội bộ hoặc offset của cửa sổ thu phóng , v.v. Ngoài ra, tôi muốn hình ảnh có một hộp ưa thích bật lên khi nhấp vào, mà tôi đã bật với sự trợ giúp từ blog trên trong phần bình luận.

1. Mở tệp app.js mà bạn đã sao chép sang chủ đề của mình trước đó

   Trên dòng 1153 ( var ProductMediaManager = {), dán vào (được sao chép từ liên kết blog BelVG ở trên):

   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
   }

   Nếu bạn muốn cửa sổ bật lên Fancybox, ở trên dòng 1227, hãy dán vào:

   $j(".product-image-gallery").on("click", function(e) {
       var src = $j('.product-image img.visible').attr('src');
   $j.fancybox(src);
   });

   Lưu ý, bạn sẽ cần tải thư viện js Fancybox sau jQuery trong tệp pageDB của bạn hoặc ở nơi khác trong chủ đề của bạn

   Cuối cùng, sửa đổi dòng 1232 hiện tại (nếu bạn đã thực hiện cả hai lần dán từ phía trên) từ:

   image.elevateZoom();

   đến:

   image.elevateZoom(settings);

Để biết tổng quan về tất cả các cài đặt của trình thu phóng, hãy xem trang chính thức mô tả Cài đặt elevateZoom

Và điều đó sẽ làm cho nó hoạt động. Nếu bạn đang làm việc với một chủ đề tùy chỉnh (như tôi), bạn có thể có nhiều việc phải làm.