Як використовувати Magento 1.9.1.0 налаштовані зразки в темі пакета за замовчуванням (або спеціальній темі)?

ОНОВЛЕННЯ: Тепер моя відповідь підтримує автоматизовану зміну базового зображення продукту після пробірки. Ви також можете знайти більш детальний підручник, як це зробити, включаючи більше зображень тут .

Magento CE 1.9.1.0 поставляється з дуже приємною новою функцією: Налаштовані Swatch. На жаль, це доступно лише для пакету RWD, який поставляється із встановленням Magento за замовчуванням. Це запитання, на яке я відповів самостійно, як зробити доступні для Magento настроювані зразки для пакету за замовчуванням. Для всіх, хто хоче інтегрувати налаштовані зразки у власну тему, ця інформація також може стати в нагоді.

Примітка 1: Це призначене для ознайомлення з посібником щодо того, як зробити доступні для налаштування пакети за замовчуванням Magento. Це може (але може не працювати) для кожної власної теми. Завжди створюйте резервну копію своїх оригінальних файлів (та бази даних), перш ніж вносити будь-які зміни.

Примітка 2: Зразки працюють (знімок екрана внизу), але я ще не змусив зображення продукту автоматично змінюватися разом із зразками. Я спробую розглянути це, коли знайду деякий час.

Не соромтеся брати участь у коментарях та робити пропозиції!

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файлу.

8. Відкрийте 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>

9. Додайте наступний файл css до файлу styles.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%;
   }

10. Скопіюйте файл

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

    до

    skin/frontend/DEFAULT/default/images/

ваше рішення чудове, але не показуйте кольоровий зразок у списку категорій чи сітці. Тут я додаю рішення, щоб показати його, перевірене на magento 1.9.2.4.

У: додаток / дизайн / frontend / CUSTOM-THEME / шаблон / каталог / продукт додайте наступний рядок у 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. Скопіюйте файл

   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. Щоб включити ці нові сценарії, відредагуйте додаток / дизайн / 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) та вставте наступний CSS з файлу 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;
   }

І останнє, але не менш важливе, деякі оптимізації elevateZoom завдяки Google та знайшовши наступний пост у BelVG Blog від Мішеля Сойко , я зміг змінити та скористатись додатковими налаштуваннями для elevateZoom, такими як внутрішнє збільшення чи зміщення вікна збільшення і т. д. Крім того, я хотів, щоб на зображенні з'явилося спливаюче віяло, коли я клацнув, що я включив за допомогою наведеного вище блогу в коментарях.

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

   Зауважте, вам потрібно буде завантажити бібліотеку fancybox js після jQuery на своїй сторінці.xml або в іншому місці вашої теми

   Нарешті, змініть те, що зараз є рядком 1232 (якщо ви робили обидва вставлення зверху):

   image.elevateZoom();

   до:

   image.elevateZoom(settings);

Для огляду всіх параметрів масштабування перегляньте офіційну сторінку, що описує налаштування elevateZoom

І це повинно спрацювати. Якщо ви працюєте з власною темою (як я), можливо, вам доведеться зробити більше.