Magento 1.9.1.0 Varsayılan paket temasında (veya özel bir temada) Konfigüre Edilebilir Renk Örnekleri nasıl kullanılır?

GÜNCELLEME: Cevabım şimdi renk örneğinden sonra ürün temel görüntüsünün otomatik olarak değiştirilmesini destekliyor. Ayrıca burada daha fazla resim içeren bunun nasıl yapılacağı hakkında daha ayrıntılı bir rehber bulabilirsiniz .

Magento CE 1.9.1.0 çok yeni özelliklerle geliyor: Konfigüre Edilebilir Renk Örnekleri. Ne yazık ki, bu yalnızca varsayılan Magento kurulumuyla birlikte gelen RWD paketi için geçerlidir. Bu, Magento Yapılandırılabilir Renk Örgülerinin Varsayılan paket için nasıl kullanılabilir hale getirileceğine dair kendi kendine cevaplanan bir sorudur. Yapılandırılabilir Renk Örneklerini özel bir temaya entegre etmek isteyen herkes için bu bilgi de kullanışlı olabilir.

Not 1: Bu, Magento'nun Varsayılan paketi için Yapılandırılabilir Renk Örneklerinin nasıl kullanılabilir olacağı hakkında tanıtım amaçlı bir rehber olması içindir. Bu, her özel tema için işe yarayabilir (ancak çalışmayabilir). Herhangi bir değişiklik yapmadan önce daima orijinal dosyalarınızı (ve veritabanınızı) yedekleyin.

Not 2: Renk örnekleri çalışıyor (aşağıdaki ekran görüntüsü), ancak ürün resmiyle birlikte ürün resminin otomatik olarak değişmesini almadım. Biraz zaman bulduğumda buna çalışacağım.

Yorum yaparak katkıda bulunmaktan çekinmeyin ve önerilerde bulunun!

1. Klasörü kopyala

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

   ve içeriği

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

   (veya paket şablon klasörünüz)

2. Dosyayı kopyala

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

   için

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

   (veya paket şablon klasörünüz)

3. Dosyayı kopyala

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

   için

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

   (veya paket şablon klasörünüz)

4. Klasörleri kopyala

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

   ve içeriği

   skin/frontend/DEFAULT/default/js/

   (veya paketin cilt klasörünü)

5. Dosyaları kopyala

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

   için

   skin/frontend/DEFAULT/default/js/

   (veya paketin cilt klasörünü)

6. Dosyayı kopyala

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

   için

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

   (veya paket düzen klasörünüz)

7. Dosyayı oluşturun

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

Paket düzen klasörünüz zaten bir local.xmldosya içeriyorsa , üzerine yazmayın. Bir sonraki adımdaki değişikliklere bir göz atın ve bunları local.xmldosya sürümünüze kopyalayın .

8. Aç local.xmlve aşağıdaki kodu ekle:

   <?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. Styles.css dosyanıza aşağıdaki css'i ekleyin :

   /* ============================================ *
    * 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. Dosyayı kopyala

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

    için

    skin/frontend/DEFAULT/default/images/

çözümünüz harika ancak kategori listesinde veya ızgarada renk örneğini göstermiyor. Buraya göstermek için çözümü ekledim, magento 1.9.2.4'te test edildi.

In: app / design / frontend / CUSTOM-THEME / template / catalog / ürün list.phtml’de izlenen satırı ekle

1 - ilk önce liste görünümünde gösterilsin, varsa o değişiklik olup olmadığını kontrol et (değişiklik satır 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>

Alternatif olarak bunu kullanabilirsiniz:

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

resize resmini ayarlayın.

2 - "getRatingSummary" = php sonundan sonra = 53 satırına şunu ekleyin:

                        <?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 - aynı değişikliği 120 ve 152 çizgisi boyunca gird görünümünde yapın.

4 - Dosyanın sonuna şunu ekleyin:

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

Bu çok yardımcı oldu! Görüntünün işe yaramasını sağlamak için üzerinde çalışabileceğim bazı ayrıntılar var.

1. Dosyayı kopyala

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

   için

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

   veya özel temanız

2. Aşağıdaki dosya listesini kopyalayın:

   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)

   için

   app/skin/frontend/DEFAULT/default/js

   veya özel temanız

3. Bu yeni komutları eklemek için, app / design / frontend / DEFAULT / default / layout / page.xml dosyasını düzenleyin (önce bu dosyanın yedeğini alın ve varsayılan temanın üzerine yazılacaksa güncellemeleri yaparsanız değişiklikleri birleştirdiğinizden emin olun)

   38. satırdan sonra ekle:

   <action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action>
   <action method="addJs"><script>lib/jquery/noconflict.js</script></action>

   Satır 50’den sonra ekleyin (eğer yukarıdaki iki satırı zaten eklediyseniz, satır 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 Images * / bölümünü styles.css dosyanızdan çıkarın (yaklaşık 783-803 arası) ve aşağıdaki CSS'ye RWD styles.css dosyasından yapıştırın:

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

Son fakat en az değil, Google sayesinde elevateZoom için bazı optimizasyonlar ve aşağıdaki yazıyı bulma yazıyı BelVG Blog’da Mishel Soiko tarafından buldum ; Ayrıca, yorumda yukarıdaki blogdan gelen yardımı kullanarak görüntünün tıklandığında açılır bir fantazi kutusu olmasını istedim.

1. Aç onu app.js Temanızın üzerine kopyalanır dosya daha erken

   1153 ( var ProductMediaManager = {) satırının üstüne yapıştırın (yukarıdaki BelVG blog bağlantısından kopyalandı):

   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
   }

   Fantezi kutu açılır penceresini görmek istiyorsanız, yukarıdaki satır olan 1227 neyin üstünde, yapıştırın:

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

   Unutmayın, fancybox js kütüphanesinin page.xml'nizde veya temanızın başka bir yerinde jQuery'den sonra yüklenmesi gerekir.

   Son olarak, şu an 1232 nolu satırı değiştirin (her iki macunu da yukarıdan yaptıysanız):

   image.elevateZoom();

   için:

   image.elevateZoom(settings);

Tüm yakınlaştırma ayarlarına genel bakış için, elevateZoom Ayarlarını tanımlayan resmi sayfaya bakın.

Ve bu çalışmasını sağlamalıdır. Özel bir tema ile çalışıyorsanız (benim yaptığım gibi) daha fazlasını yapmanız gerekebilir.