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

28

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.

Bildbeschreibung hier eingeben

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

Format
quelle
Der Link, den Sie in der Frage hinzugefügt haben, funktioniert nicht: bemaged.com/de/blog/use-magento-swatches-in-custom-theme
Mukesh Chapagain

Antworten:

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

  1. Ö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>
  2. 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%;
    }
  3. Kopieren Sie die Datei

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

    zu

    skin/frontend/DEFAULT/default/images/
Format
quelle
1
Wie würden Sie die Farbfelder zu den einzelnen Produkten in Katalog / Produkt / Liste hinzufügen? Innerhalb der Standard-RWD können Sie die verschiedenen Farbfelder direkt von hier aus auswählen, ohne auf das Produkt klicken zu müssen. Natürlich muss die Einstellung im Backend aktiviert sein: "Zu verwendendes Produktattribut für Farbfelder in der Produktliste".
Joe
Außerdem würde ich empfehlen .product-image-zoom.zoom-available .gallery-image { display: none; } .product-image-zoom.zoom-available .gallery-image.visible { display: block; }, das CSS zu ergänzen, da Sie ohne das CSS das zuletzt hinzugefügte Produktbild sehen, wenn Sie ein Produkt besuchen, aber wenn Sie mit der Maus darüber fahren, sehen Sie das Hauptbild.
SebiF
1
Das Bild in der Galerie ändert sich beim Klicken auf die Farbe des Farbfelds nicht. Können Sie mir bitte sagen, wie es funktioniert?
Tahir Yasin
2

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

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.

Mike
quelle
Mit einem etwas anderen Ansatz konnte ich auch die automatische Bildumschaltung zum Laufen bringen. In meinem Ansatz verwende ich local.xml, um alle .jsDateien auf headder Seite zu laden . Ich werde meine Antwort aktualisieren, wenn ich etwas Zeit finde. Bis dahin können Sie eine ausführliche Anleitung finden Ich schrieb auf , wie dies zu tun hier .
ForMat
0 down vote Konfigurierbare Farbfelder werden das Bild auf dem konfigurierbaren Produkt nicht ändern Bitte überprüfen Sie dies, ravichomal.blogspot.in/2015/12/…
Ravi Chomal