ShopPilot > ShopPilot Enterprise

Wechselnde Artikelbilder bei Varianten

(1/2) > >>

parimo:
Hallo,

wahrscheinlich ist es wieder mal ganz simpel - ich finde es nur gerade nicht:
Ich möchte bei den Artikelvarianten, dass das zur jeweiligen Variante passende Bild angezeigt wird. Also, wenn man den Strumpf in blau wählt, sollte auf der Detailseite auch der blaue Strumpf erscheinen. Wie bekommt man das hin?

Viele Grüße
parimo

Linkback: https://www.shoppilot.net/pf/index.php?topic=1612.0

dobra:
Hallo parimo,

guck mal da
http://www.shoppilot.net/pf/aktuelle-faq-haufige-fragen/produktbilder-in-einer-lightbox-auf-shopseiten-darstellen/msg4661/#msg4661

Das ist z.B. eine (relativ einfache) Möglichkeit.
(die [roadtrip] - Variante)

parimo:
Hallo dobra,

danke, das werde ich mal ausprobieren. Mir ist noch nicht klar, ob das jeweilige Bild automatisch angezeigt wird, wenn die entsprechende Variante ausgewählt wird.

Viele Grüße
parimo

parimo:
Ich greife das Thema noch einmal auf, weil ich damit noch nicht weitergekommen bin.

Gewünscht ist, dass - wenn der Kunde auf der Detailseite eine Farbvariante auswählt -, das Detailbild automatisch wechselt.
Ich habe ein benutzerdef. Datenfeld angelegt namens __BILDZOOM__ und habe dabei auch das Kästchen für "auch für Varianten anlegen" angeklickt.
Somit habe ich jetzt die Möglichkeit, jeder Variante das entsprechende Farbbild zuzuweisen. So weit - so gut.

Nur wie bekomme ich es hin, dass der Kunde auch das entsprechende Farbbild sieht?

Viele Grüße
parimo

admin:
Also hier mal eine Anleitung.
Voraussetzungen. Die Auswahl der Variante geschieht mit einer Listbox, also mit dem Identifier __listvar__.  Die Varianten haben das benutzerdefinierte Feld BILDZOOM, das für alle Varianten gefüllt ist (gibt es kein Bild, sollte dort ein Dummybild hinterlegt werden). Wenn über die Listbox eine Variante ausgewählt wird, soll sich das Bild entsprechend ändern. Ist noch keine Variante ausgewählt, wird das Bild der ersten Variante angezeigt.

Wir brauchen in der Seite eine Stelle, wo das Bild ausgegeben wird. Dieses img-Tag bekommt eine eindeutige id, damit wir damit das Bild ändern können. Der Identifier __vBILDZOOM__ wird benutzt, um das erste Bild darzustellen. Weil der Bildpfad in BILDZOOM relativ zum Hauptverzeichnis ist, die Ausgabe aber im Verzeichnis der Vorlage (html_de) erfolgt, müssen wir für den korrekten Pfad noch eine Ebene hoch, deshalb ../ .


--- Code: ---<img id="variimg" src="../__vBILDZOOM__" border="0">

--- End code ---

Um den Wechsel der Auswahl in der Listbox zu erkenne benötigen wir Javascript. Diesen Code schreiben wir jedoch nicht fest in die Seite, da er für jeden Artikel anders wäre, sondern generieren ihn per ssp-Funktion. Wir machen also ein Modul mit einem Identifier.
Da wir den Code nur an dieser Stelle benötigen können wir das Modul auch in der HTML-Datei der Detailvorlage für Artikel mit Varianten  (z.B. im Header) definieren.


--- Code: ---<!--spmacro:module(vari)

sub img_selection {
   my $anzahl = $_[3];

   # Anfang des JS Codes
   my $out= qq|<script>
     variants = {
   |;
  
   # Ein Array bilden, das sie Artnr und den Bildpfad enthält
   for (my $i=0; $i<=$anzahl; $i++) {
      my $itemid = ssp::get_var_varticle('itemid', $i);
      my $bild = ssp::get_var_varticle('VARIBILD', $i);
      $out .= qq{$itemid : "../$bild"};
      if ($i < $anzahl) { # beim letzten keine Komma
         $out .= ",\n";
      } else {
         $out .= "\n};";
      }
   };

   my $mid = ssp::get_var_article('itemid',0);
   my $selector =  qq{select[name="v__$mid"]};
   # Bei Änderung der Auswahl, wird der Bidpfad dem Array entnommen
   # und als src für img-Tag gesetzt.
   $out .= qq{
            jQuery('$selector').change(function() {
               var id = jQuery(this).val();
               document.getElementById("variimg").src= variants[id];
            });
      </script>
   };
    
   main::mprint $out;
}
-->

--- End code ---

Wir haben somit den  Identifier __vari::img_selection__ zur verfügung, der den JS-Code einfügt. Wichtig ist, dass dieser Identifer nach __listvar__ eingefügt wird.
Am besten fügt man ihn vor dem schließenden body-Tag ganz am Ende ein.


PS: Vergessen habe ich, dass wir noch die Javascript Bibliothek jQuery einbinden müssen. Die Datei jQuery.js  kann aus einem der Demoshops kopiert werden.
Dies kann im Header z.B. so passieren:

--- Code: ---<script src="../js/jQuery.js" type="text/javascript"></script>

--- End code ---
Nicht vergessen js/jQuery.js als zusätzliche Datei einzutragen, damit sie hochgeladen wird.

Navigation

[0] Themen-Index

[#] Nächste Seite