Color-Switcher für Simple Products

Erstellt von Johannes Teitge in Aktuelles, Featured Articles, jQuery am 06 3rd, 2009 | 23 Kommentare


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

  • Twitter
  • Webnews
  • Mister-Wong
  • Facebook
  • Digg
  • BlogMarks
  • Share/Save/Bookmark

23 Kommentare to “Color-Switcher für Simple Products”

  1. rack::SPEED rack::SPEED sagt:
    5. Juni 2009 um 22:12

    Wenn du jetzt beim Klick auf eine Farbe noch die Auswahl in die Select-Box übertragen könntest, würdest du ganz viele Magento-User unendlich glücklich machen… ;-)

    Da jQuery schon läuft müsste das relativ fix gehen…

    Zum Antworten anmelden
  2. andreas sagt:
    11. Juni 2009 um 18:44

    Hallo,

    [quote]Wenn du jetzt beim Klick auf eine Farbe noch die Auswahl in die Select-Box übertragen könntest, würdest du ganz viele Magento-User unendlich glücklich machen…[/quote]

    Das stimmt allerdings, wäre wirklich super wenn man das Script noch um diese Funktion erweitern könnte!

    Zum Antworten anmelden
    • Johannes Teitge Johannes Teitge sagt:
      11. Juni 2009 um 19:12

      Hallo,
      klar kann man das machen - aber im Moment schaffe ich das zeitlich nicht. Habe hier noch eine Menge anderer Tutorials und sonstige Arbeit liegen. Sobald ich wieder etwas mehr Zeit habe schau ich mir das nochmal an. Eventuell postet ja in der Zwischenzeit einer von Euch die Lösung :-)
      Viele Grüße
      Johannes Teitge

      Zum Antworten anmelden
  3. Alex Alex sagt:
    17. Juni 2009 um 10:53

    Hallo,
    läuft super :-)
    Hätte jetzt nur noch eine Frage.
    Wenn ich jetzt zwei Auswahlfelder habe, z.B. Größe und Farbe.
    Ich wähle als erstes die Größe aus dann wird ein Würfel in der bestimmten Größe angezeigt danach will ich die Farbe ändern.
    Da sollte dann der Würfel in der vorher ausgewählten Größe angezeigt werden und in der ausgewählten Farbe.
    Habe natürlich für jede Variation ein Bild.
    Kann ich mir irgendwo die vorher ausgewählte Größe zwischen speichern und die Farbe dann dort anhängen damit ich dann das Bild z.b. 10×10grün nennen kann.

    Gruß
    Alex

    Zum Antworten anmelden
    • Johannes Teitge Johannes Teitge sagt:
      17. Juni 2009 um 16:54

      So etwas geht natürlich nur, indem man eine Matrix aufbaut - aber dies macht man eh nicht mit Simple Products.
      Wäre machbar indem man einen Bildcode generiert und das Bild via Ajax/jQuery nachlädt.
      Beispiel: Bildname wäre dann: image_[id_größe]_[id_farbe].jpg

      Das erfordet dann schon etwas mehr Programmieraufwand udn “viele Bilder”.

      Viele Grüße
      Johannes Teitge

      Zum Antworten anmelden
  5. Brigitte sagt:
    19. Juli 2009 um 09:41

    Hallo Johannes,

    das modern theme besitzt den Ordner Options samt Inhalt nicht…. Kann ich den ohne weiteres hinzufügen???

    LG

    Brigitte

    Zum Antworten anmelden
    • Johannes Teitge Johannes Teitge sagt:
      19. Juli 2009 um 10:16

      Hallo Brigitte,

      ich selbst habe die Umsetzung im modern theme noch nicht gemacht, aber das modern theme greift in diesem Fall auf das default theme zurück. Da hast Du schon recht - dann muss Du die Files in Dein modern theme kopieren.

      Gib bitte Info wenn es klappt - dann können wir das hier evtl. noch mit integrieren. Wie ist eigentlich die URL Deines Shops? Es ist schön auch mal Live Shops zu sehen, bei denen unsere Tutorials Anwendung finden.

      Viele Grüße
      Johannes Teitge

      Zum Antworten anmelden
      • Brigitte sagt:
        19. Juli 2009 um 10:39

        Hi Johannes,

        auch hier vielen lieben Dank für´s Antworten. Ich werde es gleich noch testen, mein Shop läuft noch unter Virtuemart.
        Ich teste und bastele auf ne zusätzliche Domain “live”, diese Installation ist meine “Spielwiese” bzw. “Testwiese”, dort ist Magento mit Beispieldaten installiert, der Zugriff ist “geschützt”. Funktionieren meine Änderungen usw. dann geht´s an meiner zukünftigen “NeuInstallation”. Diese ist in einem Unterordner der Virtuemart Installation. AAAAAAAAAber, wenn das Ganze vernünftig aussieht und läuft, bist du einer der ersten, die mal schauen dürfen ;-)

        LG

        Brigitte

        Zum Antworten anmelden
  6. Brigitte sagt:
    19. Juli 2009 um 11:56

    so, es scheint nicht funktionieren zu wollen… warum auch immer :-(

    Habe den ganzen Ordner “options” in modern theme kopiert, die abgeänderte select.phtml auch.

    Gerade das eigentliche Herzstück, dem change Event will nicht funktionieren :-(.
    Den Preloader habe ich vorher in der media.phtml erstellt.

    LG Brigitte

    Zum Antworten anmelden
  7. Brigitte sagt:
    19. Juli 2009 um 12:50

    Hallo zusammen,

    nachdem ich die nötigen Dateien zusätzlich im Default Theme eingefügt habe, bzw. die alten aus dem Default theme mit den neuen überspielt habe, funktioniert es auch mit dem…. Ganzen ;-)

    Sorry für´s jeck machen…

    LG Brigitte

    Zum Antworten anmelden
  8. Johannes Teitge Johannes Teitge sagt:
    20. Juli 2009 um 13:54

    Hallo Brigitte,

    aber sehr lobenswert dass Du uns eine Rückmeldung gegeben hast. Toll dass es bei Dir geklappt hat.

    Viele Grüße
    Johannes Teitge

    Zum Antworten anmelden
  9. Ralph sagt:
    27. August 2009 um 19:28

    Hallo Johannes,

    vielen Dank für die tollen Anleitung.

    Ich hab nur mit der hier Problem. ;-(

    Den Preloader und die Sachen funktionieren, aber wenn ich die Farbe im Dropdown auswähle passiert nichts.

    In deinem Demoshop ist es das gleiche.

    Hab deine Dateien verwendet. Shopversion 1.3.2.3
    Jquery Version: 1.3.2

    Viele Grüße vom Bodensee und immer so weiter.
    Ralph

    Zum Antworten anmelden
    • Johannes Teitge Johannes Teitge sagt:
      28. August 2009 um 08:34

      Hallo Ralph,
      seit der Entwicklung von Mxperts jQuery-Base und jQuery-Tools hat sich in der vorgehensweise einiges verändert und ältere Tutorials muss man überarbeiten. Wenn die Integration von jQuery stimmt dann funktioniert auch alles. Unser Demoshop wird zur Zeit allerdings überarbeitet weshalb das Tutorial im Moment dort nicht aktiv ist. Ich versuche so schnell wie möglch das Tutorial in unserem neuen Testshop http://www.demo-store.de einzupflegen.

      Viele Grüße
      Johannes Teitge

      Zum Antworten anmelden
  11. roland sagt:
    11. Oktober 2009 um 00:12

    bei mir klappts irgendwie nicht mit dem color-switcher.
    ich habe eine angeänderte version von modern theme.

    “Mehr Ansichten” optimieren, hat wunderbar funktioniert.

    wie kann ich nun herausfinden warum das color switcher nicht funktioniert?

    hier den Link zu meinem test shop:

    http://shop.romblon.ch/kuche/almares-morser-gross.html

    danke
    cheers roland

    Zum Antworten anmelden
    • Johannes Teitge Johannes Teitge sagt:
      11. Oktober 2009 um 09:56

      Wir berücksichtigen für unsere Tutorials nur das default Theme, deshalb bitte Magenity verwenden. Dafür wurde extra ein Forum eingerichtet.

      Aber wie Dein Quellcode im Moment aussieht, hast Du Dein Template gar nicht angepasst. Zumindest ist der jQuery-Code nicht enthalten.

      Viele Grüße
      Johannes Teitge

      Zum Antworten anmelden
      • roland sagt:
        14. Oktober 2009 um 20:17

        hallo johannes,

        Danke für deine Antwort..

        hab grad herausgefunden dass der colorswitcher in meinem shop im IE funktioniert (default theme, modern theme) aber im Firefox und safari funktionierts nicht..

        gruss roland…

        Zum Antworten anmelden
  12. dsens24 sagt:
    10. November 2009 um 19:34

    Hallo Johannes,
    erstmal ein Lob an Deine tolle Informationsplattform.
    Ich frage mich ob es möglich ist via css (z-index) und diesem Tut und dem Tut “Mehr Ansichten optimieren” eine Überlagerung mehrer z.B. PNG Bilder möglich ist. In deinem Tut “Mehrere Ansichten optimieren” kann man ja auch onclick anwenden, steht da.

    Liebe Grüsse Deniz

    Zum Antworten anmelden
  13. derStefan sagt:
    3. Dezember 2009 um 16:22

    Liebes mxperts-Team,
    erst einmal ein riesiges Lob für eure ganze Arbeit. Ich baue derzeit an einem Magento-Shop und konnte durch euch schon sehr sehr viel dazulernen!
    Just der Color-Switcher macht mir aber große Sorge. ich habe ihn ein wenig modifiziert, weil er bei mir keine Bilder nachladen soll, sondern css-Klassen austauschen. Das funktioniert im FF und IE auch wunderbar. Nun wurde mein derzeitiger Arbeitsstand eher durch Zufall auch mit einem Opera-Browser “überprüft” und siehe da, nichts geht!
    Ich habe noch nie zuvor mit jQuery gearbeitet und auch generell um Javascript einen Bogen gemacht - Fehlerkonsolen geben mir nicht den geringsten Anhaltspunkt (es werden im FF oder im Opera keine Fehler angezeigt), kurz: ich weiß überhaupt nicht mehr weiter.
    Funktioniert der Color-Switcher grundsätzlich im Opera? Und wenn ja, wer mag mir mal helfen?

    Zum Antworten anmelden
    • derStefan sagt:
      4. Dezember 2009 um 18:36

      obenstehender Kommentar kann gelöscht werden - es ab nur Probleme wegen der Groß- und Kleinschreibung von html-Tags.
      Mit
      var text = jQuery(label).html().replace(/\<SPAN.*/i, “”);
      var text = jQuery(label).html().replace(/\<span.*/i, “”);
      haben die Browser kein Problem mehr, zu finden, was sie suchen sollen ;-)

      Zum Antworten anmelden
  14. Brigitte sagt:
    14. Januar 2010 um 12:26

    Hallo Johannes,

    wer nicht fragt bleibt dumm, daher traue ich mich mal.
    Wäre es theoretisch möglich auf diesem Weg mit Farb-thumbnails zu arbeiten, anstatt mit zusätzlichen Produktbilder (Platzbedarf…)

    Gruß

    Brigitte

    Zum Antworten anmelden

Kommentar erstellen

You must be logged in to post a comment.

Bitte beachten: Mxperts.de ist kein Supportforum sondern eine Informationsplattform, deshalb benutzt für Diskussionen das deutsche Forum von Magento. (Fragen/Kommentare zu den Tutorials ausgeschlossen). Außerdem gebe ich keinen kostenlosen Support zu Magento. Leider haben das einige Leser in letzter Zeit falsch Verstanden und ich bitte um Euer Verständnis. Ich denke diese Plattform ist von unserer Seite aus schon genügend Gratis-Leistung.

Kategorien

Letzte Artikel

Letzte Kommentare

 

August 2010
M D M D F S S
« Jul    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Links

Archiv

| Registrieren | Copyrights 2009 by TMEDIA cross communications | RSS |Powered by Wordpress