Color-Switcher/Produktoptionen mit automatischem Bildwechsel ist in der Community von Magento ein großes Thema. In meinem Fall benötigte ich einen Color-Switcher für Simple Products und in den Foren habe ich leider keine akzeptable Lösung gefunden. Mein Ergebnis möchte ich Euch nun im folgenden Tutorial vorstellen.

Dieses Tutorial benötigt das Tutorial “Mehr Ansichten” optimieren, da wir auch einen Preloader für die Bilder der Farbvarianten benötigen.

Bevor wir mit der Programmierung beginnen möchte ich die Richtlinien für das Erfassen der Produkte erklären. Nur wenn man sich genau daran hält funktioniert die hier vorgestellte Methode.

Produkte anlegen im Backend:
1. Anlegen eines Simple Products
2. Alle Bilder für die Farbvarianten hochladen und mit der entsprechenden Farbe benennen
3. Die Farboptionen anlegen und wie die Bilder benennen
Damit ich nicht so viel schreiben muss hier ein Video: video/color_switcher

Umsetzung jQuery/Template:
Für die Umsetzung müssen wir die Datei app/design/frontend/default/[ihr theme]/template/catalog/product/view/options/type/select.phtml bearbeiten. Vor meiner Umsetzung hatte ich mir die Lösung von http://inchoo.net/ecommerce/magento/create-a-color-switcher-in-magento/ angesehen. Diese Funktioniert allerdings nur für eine Options-ID und war für meine Anforderungen nicht optimal.

Die Produktoptionen sehen im HTML-Code wie folgt aus:
<fieldset class=”product-options” id=”product-options-wrapper“>

…
<dt>
<label>Gehäusefarbe<span class=”required”>&nbsp;*</span></label>
</dt>
<dd>
<select name=”options[5]” id=”select_5” class=” required-entry product-custom-option” title=”" onchange=”opConfig.reloadPrice()”>
<option value=”">– Bitte wählen –</option>
<option value=”12″>blau + 5,50€ </option>
<option value=”13″>dunkelblau </option>
<option value=”14″>gruen </option>
<option value=”15″>rot </option>
<option value=”16″>schwarz </option>
</select>
</dd>
…


Mit dem JQuery-Code jQuery(“#select_5“).colorChanged könnte man auf eine bestimmte Listbox zugreifen. Allerdings ändert sich die Zahl nach select_ je nach ID der Produktoption. Also müssen wir einen anderen Weg finden. Meine Idee – alle DD-Elemente durchlaufen und über eine Gültigkeitsprüfung für die Listbox ein change Event zuweisen. Für die Gültigkeitsprüfung verwenden wir eine Javascript-Variable. Durch Komma getrennt können Sie die Headline der Listboxen eintragen, die für die Farbumschaltung gültig sind.
Beispiel: var allowedListboxes = ‘Gehäusefarbe, Muster, Lackierung, Oberfläche‘;

Die Initialisierung unseres jQuery-Codes sieht dann wie folgt aus:

      jQuery(document).ready(function(){
        jQuery(function() {
         jQuery("#product-options-wrapper dd").each(function(i){
           jQuery(this).find('select').colorChanged(allowedListboxes); // Übergabe der erlaubten Listbox(en)
         }); // END: each(function(i)
        }); // END: jQuery(function()
      }); // END: jQuery(document).ready(function()

Via each durchlaufen wir alle DD-Elemente innerhalb des Fieldsets product-options-wrapper und rufen für das select-Element (Listbox) unsere jQuery Funktion colorChanged (mit den erlaubten Listboxen) auf.

Hier das Grundgerüst:

<script type="Text/javascript">

      var allowedListboxes = 'Gehäusefarbe'; // Hier die Labels der Listboxen mit Farbumschaltung eintragen

      jQuery.fn.colorChanged=function(labeltxt){

      // HIER FOLGT UNSER CODE

      } // END: jQuery.fn.colorChanged=function(labeltxt)

      jQuery(document).ready(function(){
        jQuery(function() {
         jQuery("#product-options-wrapper dd").each(function(i){
           jQuery(this).find('select').colorChanged(allowedListboxes); // Übergabe der erlaubten Listbox(en)
         }); // END: each(function(i)
        }); // END: jQuery(function()
      }); // END: jQuery(document).ready(function()

</script>

Zuerst wird der übergebene Parameter ausgewertet, dann geprüft ob die Listbox überhaupt Farbwerte enthält. Über die Javascript-Funktion split erzeugen wir ein Array und vergleichen so alle Werte mit der Bezeichnung der aktuellen Listbox. Ist die Bezeichnung zulässig wird die Variable addChange auf true gesetzt und das change event kann zugewiesen werden. Besondere Beachtung muss man Pflichteingaben widmen und den entsprechenden HTML-Code entfernen.
Das sieht im Code dann wie folgt aus.

        var allowedValues = labeltxt.split(",");
        var label = jQuery(this).parent().prev().find('label');
        var addchange = false; // Kriterium zur Vergabe des Events
        if (label.length > 0) {
          var text = jQuery(label).html().replace(/\<SPAN.*/i, ""); // Nur bei Pflichtfeldern
          // Erlaubte Labels abfragen
          var counter = allowedValues.length;
          while (counter > 0) { // (for-schleife produziert Fehler)
            if (allowedValues[counter-1] == text) {
              addchange = true;
              break;
            }
            counter--;
          }
        }

Nun kommen wir zum eigentlichem Herzstück, dem change Event. Wir ermitteln die ausgewählte Farbe, die z.B die Werte rot, blau +39,50 €, rot(red) annehmen kann. Wir können allerdings nur einfache Farbbezeichnung auswerten und müssen deswegen die Preise und Falscheingaben filtern. Dies geschieht über die replace Funktion von Javascript mittels regulärer Ausdrücke. Unseren Preloader haben wir bereits im Tutorial “Mehr Ansichten” optimieren erstellt. Falls Sie das noch nicht gemacht haben, sollten Sie sich das Tutorial ansehen und zumindest den Preloader in der Datei media.phtml erstellen.
In dem Preloader befinden sich alle Bilder mit der zugewiesenen ID color_bildname. Somit können wir sehr einfach auf das IMG-Element und dessen SRC-Attribut zugreifen. Danach müssen wir nur noch das Bild austauschen.

        // Falls ein Wert aus einer gültigen Listbox ausgewählt wurde change Event zuweisen
        if (addchange == true) {
          jQuery(this).change(
            function()
            {
              var color = jQuery.trim(this.options[this.selectedIndex].text); // Text der Auswahl auslese
              color = color.replace(/\+.*/ ,""); // Preis entfernen (alles nach +)
              color = color.replace(/\(|\)| /g  ,""); // Unerlaubte Zeichen entfernen, "(",")"," "
              var scr = jQuery("#color_"+color).attr('src'); // Source aus Bild auslesen
              if (scr != '') { // Falls nicht leer Bild austauschen
                jQuery('.product-image-zoom #image').attr('src',scr); // Bild für Farbvariante tauschen
              }

            } // END: function ()
          ) // END: jQuery(this).change(
        } // END: if (addchange == true)

In unserem Testshop unter http://shop.mxperts.de/test/stempel2.html zu finden. Hier zeige ich auch den Einsatz von zwei Farboptionen, wobei nur für die eine zusätzliche Bilder existieren. Genau aus diesem Grund habe ich die Abfrage mit den Bezeichnungen gemacht. Andernfalls würde die Funktion bei der Verwendung von identischen Optionwerten immer das Bild mit der Farbe tauschen.

Download des angepassten Templates: select.phtml