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 ../ .
<img id="variimg" src="../__vBILDZOOM__" border="0">
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.
<!--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;
}
-->
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:
<script src="../js/jQuery.js" type="text/javascript"></script>
Nicht vergessen js/jQuery.js als zusätzliche Datei einzutragen, damit sie hochgeladen wird.