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

magento.stackexchange https://magento.stackexchange.com//questions/45948

Frage

AKTUALISIEREN: Meine Antwort unterstützt jetzt die automatisierte Änderung des Produktbasisbildes nach dem Swatch.Sie können auch ein detaillierteres Tutorial finden Hier.

Magento CE 1.9.1.0 kommt mit einer sehr schönen neuen Funktion:Konfigurierbare Farbfelder.Leider ist dies nur für das RWD-Paket verfügbar, das in der Standardinstallation von Magento enthalten ist.Dies ist eine selbst beantwortete Frage, wie man die konfigurierbaren Magento-Farbfelder für das Standardpaket verfügbar macht.Für alle, die die konfigurierbaren Farbfelder in ein benutzerdefiniertes Thema integrieren möchten, können diese Informationen ebenfalls nützlich sein.

Anmerkung 1: Dies soll eine Einführungsanleitung sein, wie man die konfigurierbaren Farbfelder für das Standardpaket von Magento verfügbar macht.Dies könnte (aber möglicherweise nicht) für jedes benutzerdefinierte Theme funktionieren.Sichern Sie immer Ihre Originaldateien (und Datenbank), bevor Sie Änderungen vornehmen.

Anmerkung 2: Die Farbfelder funktionieren zwar (Screenshot unten), aber ich habe es noch nicht geschafft, dass sich das Produktbild zusammen mit den Farbfeldern automatisch ändert.Ich werde versuchen, mich damit zu befassen, wenn ich etwas Zeit finde.

enter image description here

Fühlen Sie sich frei, einen Beitrag zu leisten, indem Sie kommentieren und Vorschläge machen!

War es hilfreich?

Lösung

  1. Kopieren Sie den Ordner

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

    und dessen Inhalt 

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

    (oder Ihr 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 Ihr 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 Ihr Paketvorlagenordner)

  4. Kopieren Sie die Ordner

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

    und deren Inhalt zu

    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 Paketlayout-Ordner)

  7. Erstellen Sie die Datei

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

Wenn Ihr Paketlayout-Ordner bereits eine enthält local.xml Datei, dann nicht überschreiben.Schauen Sie sich die Änderungen im nächsten Schritt an und kopieren Sie sie in Ihre Version der local.xml Datei.

  1. Aufmachen local.xml und 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 das folgende CSS zu Ihrem hinzu Styles.css Datei:

    /* ============================================ *
 * 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/

Andere Tipps

Ihre Lösung ist großartig, aber keine Farbstapel in der Kategorieliste oder im Raster anzeigen.Hier füge ich die Lösung hinzu, um es zu zeigen, getestet auf Magento 1.9.2.4.

in: app / design / frontend / custom-theme / vorlage / katalog / produkt hinzufügen Gefolgt von der Zeile list.phtml

1 - Zuerst, um in der Listenansicht anzuzeigen, prüfen Sie, ob diese, wenn dies kein, update O-Änderung (AROUD-Zeile 39): generasacodicetagpre.

Alternative kann dies verwenden: generasacodicetagpre.

Ändern Sie das Ändern der Änderung des Bildes.

2 - Nach "GetRatingsummary"= PHP-Ende IF=, um Zeile 53, fügen Sie Folgendes hinzu: generasacodicetagpre.

3 - Machen Sie die gleiche Änderung in der Gird-Ansicht um die Linie 120 und 152.

4 - Am Ende der Datei fügen Sie Folgendes hinzu: generasacodicetagpre.

Das war sehr hilfsbereit! Ich habe einige zusätzliche Details, die ich durcharbeiten konnte, um das Bild zur Arbeit umzusetzen.

    .

  1. Kopieren Sie die Datei generasacodicetagpre.

    bis generasacodicetagpre.

    oder Ihr benutzerdefiniertes Thema

  2. Kopieren Sie die folgende Liste von Dateien: generasacodicetagpre.

    bis generasacodicetagpre.

    oder Ihr benutzerdefiniertes Thema

  3. Um diese neuen Skripts aufzunehmen, App / Design / Frontend / Default / Default / Layout / Page.xml bearbeiten (Erstellen Sie zuerst eine Sicherung dieser Datei und stellen Sie sicher, dass Sie Änderungen zusammenführen, wenn Sie als Standardthema aktualisiert werden würde überschrieben werden)

    Add After Line 38: generasacodicetagpre.

    addieren nach Zeile 50 (Zeile 52, wenn Sie bereits die obigen zwei Zeilen hinzugefügt haben): 

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

  4. Entfernen Sie die / * -Produktbilder * / -abschnitt von Ihrer styles.css Datei (um Zeilen 783-803) und fügen Sie in den folgenden CSS aus der RWD-Styles.css-Datei ein: < / p> 

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

    zuletzt, aber nicht zuletzt einige Optimierungen an der ElevatZoom dank Google und der Suche nach dem folgenden Beitrag bei Belvg Blog von Mishel Soiko , ich konnte mehr Einstellungen für den ElevatZoom wie den internen Zoom oder den Offset des Zoomfensters usw. nutzen, usw. . Ich wollte auch, dass das Bild eine Popup-FancyBox hat, wenn Sie auf klicken, die ich mit Hilfe des obigen Blogs in den Kommentaren aktiviert habe.

      .

    1. Öffnen Sie diese app.js -Datei, die Sie zu Ihrem Thema kopiert haben

      über der Zeile 1153 (var ProductMediaManager = {), einfügen (kopiert aus dem obigen BelVG Blog Link): generasacodicetagpre.

      Wenn Sie das Fancybox-Popup an der obigen, was jetzt Zeile 1227 ist, einfügen, einfügen in: generasacodicetagpre.

      Hinweis, Sie müssen die FancyBox-JS-Bibliothek nach jQuery in Ihrer Seite in Ihrer Seite laden.XML oder anderswo in Ihrem Thema

      Ändern Sie schließlich, was jetzt Linie 1232 ist (wenn Sie beide eingeben, von oben) von: generasacodicetagpre.

      an: 

      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)

      Übersicht über alle Zoomer-Einstellungen, überprüfen Sie die offizielle Seite, die den ElevateZoom-Einstellungen beschreibt

      und das sollte es funktionieren. Wenn Sie mit einem benutzerdefinierten Thema arbeiten (wie ich), haben Sie möglicherweise mehr zu tun.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit magento.stackexchange
scroll top