Как использовать настраиваемые образцы Magento 1.9.1.0 в теме пакета по умолчанию (или в пользовательской теме)?

ОБНОВЛЕНИЕ: Мой ответ теперь поддерживает автоматическое изменение образа продукта после образца. Вы также можете найти более подробное руководство о том, как это сделать, включая дополнительные изображения здесь .

Magento CE 1.9.1.0 поставляется с очень приятной новой функцией: настраиваемые образцы. К сожалению, это доступно только для пакета 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.

В: app / design / frontend / CUSTOM-THEME / template / catalog / product добавьте следующую строку в 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. Чтобы включить эти новые сценарии, отредактируйте 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. Удалите / / Product Image * / раздел из вашего файла 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 Мишеля Сойко , я смог изменить и воспользоваться дополнительными настройками для 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 в вашем page.xml или в другом месте вашей темы.

   Наконец, измените то, что сейчас является строкой 1232 (если вы сделали обе вставки сверху) из:

   image.elevateZoom();

   чтобы:

   image.elevateZoom(settings);

Для обзора всех настроек Zoomer, проверьте официальную страницу с описанием настроек ElevateZoom

И это должно заставить его работать. Если вы работаете с пользовательской темой (как я), у вас может быть больше работы.