Wie verwende ich konfigurierbare Magento 1.9.1.0-Farbfelder im Standard-Paketdesign (oder einem benutzerdefinierten Design)?

UPDATE: Meine Antwort unterstützt jetzt die automatische Änderung des Produktbasisimages nach dem Farbfeld. Sie können auch eine ausführliche Anleitung finden , wie dies mehr Bilder einschließlich tun hier .

Magento CE 1.9.1.0 enthält eine sehr schöne neue Funktion: Konfigurierbare Farbfelder. Leider ist dies nur für das RWD-Paket verfügbar, das mit der Standard-Magento-Installation geliefert wird. Dies ist eine selbst beantwortete Frage, wie die konfigurierbaren Magento-Farbfelder für das Standardpaket verfügbar gemacht werden. Für alle, die die konfigurierbaren Farbfelder in ein benutzerdefiniertes Design integrieren möchten, sind diese Informationen möglicherweise ebenfalls hilfreich.

Hinweis 1: Dies ist eine Einführung in die Bereitstellung der konfigurierbaren Farbfelder für das Standardpaket von Magento. Dies könnte (kann aber nicht) für jedes benutzerdefinierte Thema funktionieren. Sichern Sie immer Ihre Originaldateien (und die Datenbank), bevor Sie Änderungen vornehmen.

Hinweis 2: Die Farbfelder funktionieren (Abbildung unten), aber ich habe noch nicht das Produktbild erhalten, das sich zusammen mit den Farbfeldern automatisch ändert. Ich werde versuchen, dies zu untersuchen, wenn ich etwas Zeit finde.

Fühlen Sie sich frei, durch Kommentare und Vorschläge beizutragen!

1. Kopieren Sie den Ordner

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

   und sein Inhalt zu

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

   (oder Ihren Paketvorlagenordner)

2. Kopieren Sie die Datei

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

   zu

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

   (oder Ihren Paketvorlagenordner)

3. Kopieren Sie die Datei

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

   zu

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

   (oder Ihren Paketvorlagenordner)

4. Kopieren Sie die Ordner

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

   und deren Inhalt an

   skin/frontend/DEFAULT/default/js/

   (oder Ihr Paket Skin-Ordner)

5. Kopieren Sie die Dateien

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

   zu

   skin/frontend/DEFAULT/default/js/

   (oder Ihr Paket Skin-Ordner)

6. Kopieren Sie die Datei

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

   zu

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

   (oder Ihr Paketlayoutordner)

7. Erstellen Sie die Datei

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

Wenn Ihr Paketlayoutordner bereits eine local.xmlDatei enthält , überschreiben Sie diese nicht. Sehen Sie sich die Änderungen im nächsten Schritt an und kopieren Sie sie in Ihre Version der local.xmlDatei.

8. Öffnen Sie local.xmlund fügen Sie den folgenden Code hinzu:

   <?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. Fügen Sie Ihrer styles.css- Datei das folgende CSS hinzu :

   /* ============================================ *
    * 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. Kopieren Sie die Datei

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

    zu

    skin/frontend/DEFAULT/default/images/

Ihre Lösung ist großartig, zeigt jedoch kein Farbmuster in der Kategorieliste oder im Raster an. Hier füge ich die auf Magento 1.9.2.4 getestete Lösung hinzu.

In: app / design / frontend / CUSTOM-THEME / template / catalog / product füge folgende Zeile in list.phtml hinzu

1 - zuerst in der Listenansicht anzeigen, prüfen, ob dies vorhanden ist, wenn nein, aktualisieren oder ändern (nach Zeile 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>

Alternativ kann dies verwendet werden:

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

Bildgröße anpassen.

2 - Nach "getRatingSummary" = php end if =, um Zeile 53, fügen Sie Folgendes hinzu:

                        <?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 - Nehmen Sie die gleiche Änderung in der Gürteldarstellung um die Linien 120 und 152 vor.

4 - am Ende der Datei Folgendes hinzufügen:

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

Das war sehr hilfreich! Ich habe einige zusätzliche Details, die ich durcharbeiten konnte, damit das Bild funktioniert.

1. Kopieren Sie die Datei

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

   zu

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

   oder Ihr benutzerdefiniertes Thema

2. Kopieren Sie die folgende Liste von Dateien:

   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)

   zu

   app/skin/frontend/DEFAULT/default/js

   oder Ihr benutzerdefiniertes Thema

3. Um diese neuen Skripte einzuschließen, bearbeiten Sie app / design / frontend / DEFAULT / default / layout / page.xml

   Fügen Sie nach Zeile 38 Folgendes hinzu:

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

   Fügen Sie nach Zeile 50 hinzu (Zeile 52, wenn Sie die beiden obigen Zeilen bereits hinzugefügt haben):

       <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. Entfernen Sie den Abschnitt / * Product Images * / aus Ihrer styles.css- Datei (um die Zeilen 783-803) und fügen Sie das folgende CSS aus der RWD styles.css-Datei ein:

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

Zu guter Letzt konnte ich dank Google und dem folgenden Beitrag von Mishel Soiko im BelVG-Blog einige Optimierungen am elevateZoom vornehmen und weitere Einstellungen für das elevateZoom wie den internen Zoom oder den Versatz des Zoomfensters nutzen usw. Außerdem wollte ich, dass das Bild beim Klicken eine Popup-Fancybox hat, die ich mit Hilfe des obigen Blogs in den Kommentaren aktiviert habe.

1. Öffnen Sie die Datei app.js , die Sie zuvor in Ihr Design kopiert haben

   var ProductMediaManager = {Fügen Sie über Zeile 1153 ( ) Folgendes ein (kopiert vom obigen BelVG-Blog-Link):

   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
   }

   Wenn Sie das Fancybox-Popup wünschen, fügen Sie über der aktuellen Zeile 1227 Folgendes ein:

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

   Beachten Sie, dass die fancybox js-Bibliothek nach jQuery in Ihrer page.xml oder an einer anderen Stelle in Ihrem Design geladen werden muss

   Ändern Sie abschließend die Zeile 1232 (wenn Sie beide Einfügungen von oben vorgenommen haben) von:

   image.elevateZoom();

   zu:

   image.elevateZoom(settings);

Eine Übersicht über alle Zoomeinstellungen finden Sie auf der offiziellen Seite, auf der die elevateZoom-Einstellungen beschrieben sind

Und das sollte funktionieren. Wenn Sie mit einem benutzerdefinierten Thema arbeiten (so wie ich), müssen Sie möglicherweise mehr tun.