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

28

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

Magento CE 1.9.1.0 поставляется с очень приятной новой функцией: настраиваемые образцы. К сожалению, это доступно только для пакета RWD, который поставляется с установкой Magento по умолчанию. Это вопрос с самостоятельным ответом о том, как сделать настраиваемые образцы Magento доступными для пакета по умолчанию. Для тех, кто хочет интегрировать настраиваемые образцы в пользовательскую тему, эта информация также может пригодиться.

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

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

введите описание изображения здесь

Не стесняйтесь вносить комментарии и предложения!

Формат
источник
Ссылка, которую вы добавили в вопросе, не работает: bemaged.com/en/blog/use-magento-swatches-in-custom-theme
Мукеш Чапагейн

Ответы:

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. Добавьте следующий 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%;
    }
    
  3. Скопируйте файл

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

    в

    skin/frontend/DEFAULT/default/images/
Формат
источник
1
Как бы вы добавили образцы к отдельным продуктам в каталоге / продукте / списке? В RWD по умолчанию вы можете выбирать различные образцы прямо отсюда, не нажимая на продукт. Конечно, вы должны включить настройку в бэкэнде: «Атрибут продукта для использования для образцов в списке продуктов».
Джо
Кроме того, я бы порекомендовал добавить .product-image-zoom.zoom-available .gallery-image { display: none; } .product-image-zoom.zoom-available .gallery-image.visible { display: block; }в конец CSS, так как без него вы увидите последнее добавленное изображение продукта при посещении продукта, но при наведении курсора вы увидите основное изображение.
SebiF
1
Изображение галереи не меняется при нажатии цвета образца. Подскажите, пожалуйста, как это сделать?
Тахир Ясин
2

Ваше решение отлично, но не показывает образец цвета в списке категорий или сетки. Здесь я добавляю решение, чтобы показать его, протестировано на 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();
    }
}
?>
Joso
источник
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. Удалите / / 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

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

Майк
источник
С немного другим подходом я смог заставить работать автоматическое переключение изображений. В моем подходе я использую local.xmlдля загрузки всех .jsфайлов на headстранице. Я обновлю свой ответ, когда найду время. До этого вы можете найти подробное руководство, которое я написал о том, как это сделать, здесь .
ForMat
0 голосов вниз Настраиваемые образцы не изменят картину настраиваемого продукта. Проверьте это, ravichomal.blogspot.in/2015/12/…
Рави Чомаль,