Grundlagenwissen zum VisualProductConfigurator (VPC)

Dieser Beitrag liefert ein paar Information zum Visual-Product-Configurator. Der VPC ist eine von uns programmierte VirtueMart-Erweiterung die es dem Shopbesucher erlaubt, Produkte selbst zu konfigurieren und das Ergebnis sofort per Ajax aktualisiert angezeigt zu bekommen. Mit jeder vorgenommenen Konfigurationseinstellung wird die Produktgrafik aktualisiert. Am Beispiel: Ein Pokal wird in Grundform, Farbe, Ausstattung, Beschriftung durch den Nutzer konfiguriert.

 

  1. Der VisualProductConfigurator ist derzeit noch keine typische Joomla- oder VirtueMart-Erweiterungen, sondern nur eine kleine Scriptsammlung die als Template-Overrides eingebunden sind. Das wichtigste Override-Script ist dabei default_images.php. Dieses Script liegt regulär im VM-Componenten-Verzeichnis /components/com_virtuemart/views/productdetails/tmpl/ und sein Override nach dem üblichen Joomla-Prinzip dann im Pfad des aktuellen Joomla-Template unter /templates/gantry/html/com_virtuemart/productdetails/. Dieses Script weicht von seinem Origininal nur minimal ab. Das Script hat folgende zusätzliche Aufgaben:
    1. Es prüft zunächst anhand der Bildereigenschaften, ob der VPC zur Bilddarstellung zu verwenden ist.
    2. Davon abhängig lädt es dann das wichtiges Ajax/jQuery-Script vmvisualconfigurator.js und die Style-Datei vmvisualconfigurator.css in das Haupttemplate
    3. und einen DIV-Container, der statt des normalen Bildes die Visual-Configurator-Bilder aufnehmen soll.
    4. Der übliche Bild-Block wird in diesem Fall übersprungen, ist aber für "Nicht-VPC-Produkte" nach wie vor relevant (Else-Zweig).
  2. Dieses o.g. Template-Script nutzt als Controller ein neues Controllerscript productdetailsconfigurator.php, welches die Ausgabe der Produktgrafiken die durch das Image-Template-Script anzuzeigen sind vorbereitet. Es liegt im üblichen VM-Controller-Script-Verzeichnis /components/com_virtuemart/controllers/. Dies ist kein Override, sondern es wird einfach die Fähigkeit von Joomla genutzt um über den URL-view-Parameter statt des productdetails.php das productdetailsconfigurator.php-Script für die Ausgabe der Produktdetails per Ajax-Aufruf zu verwenden. Der Ajax-Aufruf erfolgt in/durch o.g. JavaScript.
  3. Das genannte JavaScript vmvisualconfigurator.js überschreibt bzw. erweitert das Virtuemart.setproducttype-Methode als Override der gleichnamigen VM-Original-Methode aus vmprice.js.
  4. Für das Grundverständnis ist wichtig, die Funktion von "Selbsterstellten Feldern" in VirtueMart zu kennen. Jedes Produktmerkmal, welches man dem Kunden zur Auswahl anbieten möchte, muss mit seinen verschiedenen Optionen angelegt sein. Diese Funktion und Herangehensweise ist eine Standardfeature von VM und wird beim VPC lediglich erweitert. S.u. Erstellung von Benutzerfeldern und deren Konfiguration. Das Produktmerkmal z.B. die Bauteilfarbe wird als Selbsterstelltes Feld angelegt. Die verschiedenen Optionen dieses Merkmals (z.B. die verfügbaren Farben) sind üblich üblich produktabhängig, und müssen deshalb auch beim Produkt gepflegt werden. Üblicherweise genügt es in VM einmal das Merkmal "Bauteilfarbe" als Selbsterst. Feld anzulegen und verschiedene Produkte, die alle das Merkmal Bauteilfarbe haben gemeinsam zu verwenden. Das geht jedoch nur bei verbalen Optionen. Will man das jedoch wie bei unserem VPC bildlich darstellen, Muss mitunter jedes Produkt ein eigenes nur dafür verwendbares Merkmal per Selbsterstellten Feld erhalten - also jedes Produkt z.B. seine eigene Farbauswahl.
  5. Das Besondere an diesem VM-Feature ist im übrigen, dass jede Änderung einer selektierten Merkmaloption auch zu einem anderen Produktendpreis führen kann. Genau das realisiert die Ajax-Funktion in den oben genannten Scripten als Hauptfunktion. Das Aktualisieren der Produktabbildungen ist quasi nur ein dazu drangeklebtes Zusatzfeature. Jede Merkmaloption kann also ein Preisauswirkung haben. Deshalb sprechen wird bei diesem Typ eines Selbsterstellten Feldes auch von einer Warenkorb-Variante (s.u.).
  6. Es sei darauf hingewiesen, dass es durchaus Merkmale geben kann, die in Kombination der Merkmaloptionen zu einem Bild resultierten. Beispiel: Ein Sockel für eine Figur kann sowohl in unterschiedlicher Höhe und Materialart angeboten werden. Folglich muss es den Sockel in der Höhe 20cm im Material Marmor Schwarz geben und in Höhe 30 Marmor Weiss etc. Entweder man fasst hierzu gleich Höhe und Material als ein Merkmal (=Kombinationsmerkmal) zusammen oder man hat zwei getrennte sich aber ergänzende Merkmale. Beide Varianten können mit dem VPC abgebildet werden. Ersteres ist immer dann notw. wenn es nicht zu jedem Merkmal A auch alle Optionen zu Merkmal B gibt. Z.B. gibt es einen 20er, 30er und 40er Marmorsockel, aber in Holz gibt es den nur in der 40er und 50er Höhe. Entspr. ist Variante 2 nur möglich (muss aber nicht), wenn es, um beim Beispiel zu bleiben, jede Sockelhöhe immer auch für alle Materialien gibt. Wird das nicht berücksichtigt, und Variante 2 angewendet obwohl nicht regelgerecht, kann es sein, dass der Kunde erst Höhe 20 auswählt und dann Holz auswählt und damit eine Kombination aus zwei Merkmaloptionen "erschafft" für das es kein Produktbild gibt weil auch keine Produktvariante!

 



 

 

Die Reihenfolge der Erstellung von Produkten für den VPC

Bei der Erstellung von VPC-Produkte sollte man sich halbweges an eine sinnvolle Reihenfolge halten, um zielgerichtet zum gewünschten Ergebnis zu gelangen. Diese soll hier zusammengefasst vorgeschlagen werden. Zu den einzelnen Schritten sind dann im fortlaufenden Text detailierte Beschreibungen vorhanden. Gehen Sie produktweise, damit Sie sich nicht verrennen. Es ist kompliziert genug bei einem Produkt den Durchblick zu bewahren.

  1. Ganz wichtig! Machen Sie sich zunächst gründlich Gedanken über die Struktur des Produktes welches Sie konfigurierbar machen wollen. Welche Produkteigenschaften sind auswählbar, welche haben Einfluss auf den Preis und das Aussehen. Gibt es Eigenschaften die in der Darstellung voneinander abhänigig sind (z.B. Schnitt und Farbe eine Shirts). Dazu sollte man sich sinnvoll als Arbeitshilfe eine Exceltabelle aufbauen, welche auch für die weitere Arbeit, z.B. für die verwendeten Bezeichner der Eigenschaften und deren Optionen sowie Grafikdateinamen Sinn macht. Mit der Exceltabelle haben Sie immer einen schnellen Überblick über alle Bezeichner und müssen nicht wie im Shop notw. ständig zw. den Pflegemasken wechseln.
  2. Erstellen Sie die Produktbilder, zum einen ein Vorschaubild und die einzelnen Bildelemente für die "Patchwork-Layer". Hier ist schon zu beachten welche Produkteigenschaften ggf. als ein Bildelement zus.gefasst werden müssen (s. view). [Detailinfos: Erstellung von Produktgrafiken]
  3. Erstellen Sie ein Feldgruppe unter "selbsterstellte Felder" des Produktemenüs. Dieses dient dann später dazu die selbsterstellten Felder, von denen es im Shop dann eine ganz Menge geben könnte, systematisiert zus.zufassen und z.B. durch Nutzung des Filter "Feldgruppe" in der Liste der selbsterstellten Felder schnell die ein Produkt betreffenden Felder separiert anzuzeigen.
  4. Erstellen Sie die selbsterstellten Felder, die Sie für Ihr Produkt benötigen werden. Wichtig hier die Verwendung der Titel. Diese sollten sich zu anderen Produkten unterscheiden. Arbeiten Sie hier mit o.g. Exceltabelle. [Detailinfos: Erstellen von selbsterstellten Feldern]
  5. Erst jetzt erstellen Sie ein neues Produkt oder gehen in das Produkt, welches Sie für den VPC scharf machen wollen. Pflegen Sie zunächst alle üblichen Produktoptionen bevor wir mit den VPC-relevanten beginnen und speichern diese.
  6. Danach erst gehen Sie in den Produkt-Registerreiter "Selbsterstellte Felder". Hier müssen Sie für alle gewünschten Produkteigenschaften die Optionen anlegen. Die in der Spalte "Wert" für die Optionen eingetragenen Werte wieder in die Exceltabelle übertragen. Sortierne Sie wieder per Drag-n-Drop nach Eigenschaften und deren Optionen. In der Reihenfolge wie hier abgespeichert, werden die Eigenschaften und ihnen deren Auswahloptionen dann in der Produktdetailseite dargestellt. [Detailinfos: Erstellen von Optionen für Produktmerkmale]
  7. Nun laden Sie alle Bildelemente hoch, die für die Anzeige des Patchwork-Bildes des VPC notwendig sind. Sortieren Sie die Bilder per Drag-n-Drop, beginnend mit dem Produkthauptbild und fortschreitend mit den Overlaybildern in der Reihenfolge, wie die Bilder beim eigenschaftsabhängigen Zusammensetzen dann als Layer übereinandergelegt das korrekte dargestellte VPC-Gesamtbild ergeben. [Detailinfos: Hochladen und Konfiguration von Produktgrafiken]
  8. Entweder bildweise oder im Nachgang wenn alle Bilder hochgeladen wurden, wird damit begonnen die Steuerparameter mit die VPC-Bilder einzutragen unter strikter Verwendung der Bezeichner aus den Eigenschaften und Optionen so wie in der Exceltabelle zusammengetragen. [Detailinfos: Konfiguration der VPC-Bilder per Steuerparameter]
  9. Erste nach diesem Schritt macht es eigentlich Sinn sich sein VPC-Ergebnis auf der Produktdetailseite anzuschauen. Sollten hier die Anzeige nicht wie gewünscht erfolgen, noch einmal alle verwendeten Bezeichner, die korrekte Syntax und die Steuerparameter in den Bild-Metatags überprüfen.
  10. Nun können Sie die Produktdetailseite optional noch durch zusätzliche ImageSelect-Boxen ergänzen. D.h. optional kann für die wählbaren Produkteigenschaften statt oder neben der textbasierten Drop-Down-Listen ein Button zur Anzeige von grafischen Auswahlboxen erzeugt werden. Dort wo das erfolgen soll erfolgt die Initialisierung dieses Feature zunächst dadurch, dass im "Selbsterstellten Feld" für diese Eigenschaft der Schalter {ImgSelect ...} ggf. mit zusätzlichen Designparametern im Beschreibungsfeld hinzugefügt werden muss. [Detailinfos: ImgSelect - grafische Auswahlboxen]
  11. Wenn durch diesen Schritt die Initialisierung ansich erfolgte, ist es notw. zunächst die benötigten Auswahlgrafiken zu erstellen
  12. und dann über den Produkt-Register "Produktabbildungen" diese Auswahlgrafiken hochzuladen.
  13. Abschließend werden diese Auswahlgrafiken konfiguriert in dem die Felder "Angezeigter Titel" und "Angezeigte Beschreibung" nach den Konfigurationsregeln ausgefüllt werden. [Detailinfos: Image-Selectbox-Bilder]

 

Erstellung von Produktgrafiken

Wichtig ist es zu verstehen, dass der VisualProductConfigurator bei der Produktgrafik aus verschiedenen Layer/Ebenen-Grafikelemente das fertige Produktbild abhängig von den gewählten Produktmerkmalen zusammenfügt. Bei der Erstellung der Grafikelemente müssen folglich schon Dinge berücksichtig werden wie Transparenz (Alphakanal/Freistellmaske), Offset- oder Bildränder und Bildgrößen. Die Erstellung dieser Grafiken sollten unbedingt mit einem professionellem Grafikprogramm wie z.B. Photoshop gemacht werden. Diese Programme beherrschen Layer/Ebenen und Freistellmasken.

Die grobe Vorgehensweise ist dabei wie folgt (hier soll kein Grundkurs in Bildbearbeitung erfolgen):

  1. Das Produkt z.B. fotografieren - in seinen verschiedenen Ausführungsformen. Nicht alles muss man wirklich fotografieren. Manchen Dinge, wie z.B. Farben lassen sich auch aus einem Bild durch Anwendung von Farbfiltern des Grafikprogrammes erzeugen. Das Bild möglichst aus großem Abstand aber formatfüllend herangezoomt, gut ausgeleuchtet, evtl. möglichst schattenfrei aufnehmen. Auch die Auflösung sollte großzügig gewählt werden, weil man so nach den Freistellungen immer noch eine gute Kantenschärfe auf Produkt erhält.
  2. Dieses Bild holen wir uns nun ins Grafikprogramm. Jedes Produktelement, welches auch als Produktmerkmal ausgewählbar sein soll, muss nun auf einer separaten Ebene landen. Dazu die Ebenen mit dem Hauptbild dublizieren und durch Maskieren das betreffende Bildelement freistellen. Das praktiziert man mit jedem Merkmal und mit jeder dafür gewünschten Option. Wenn es z.B. ein Produktelement in Gold, Silber und Bronce geben soll, dann habe ich in meinem Ebenenbild also je eine Ebene wo dieses Bauteil in Gold, Silber und Bronze freigestellt vorhanden ist.
  3. Am Ende werden alle diese Ebenen einzeln gespeichert, bevorzugt im PNG-Format, denn nur dieses Format ist in der Lage unsere Freistellmasken als Alphakanal sauber und webkonform auszugeben.
    Bei Speichern hat man nun zwei Möglichkeiten:
    1. Entweder werden die Ebenenbilder alle in der gleichen Ausdehnung gespeichert, also so wie sie im Format liegen, mit dem "Fleisch" (i.d.R. ja freigestellt) bis zum Bildrand. Da alle Bilder dann die gleiche Größe haben, passen sie auch hervorragend aufeinander um dann wieder ein Gesamtproduktbild zu ergeben.
    2. Diese Verfahrensweise ist jedoch nicht immer zielführend. Es kann durchaus sein, dass man Produktvarianten hat, bei der die Lage eines Bildelementes abhängig ist von z.B. der Höhe oder Breite eines anderen Bildelementes. Z.B. kann eine Figur auf einem Sockel stehen. Den Sockel gibt es in verschiedenen Höhen als Merkmal zur Auswahl. In Konsequenz muss dann also die Figur im Bild an unterschiedlichen vertikalen Positionen plaziert werden, eben auf dem Sockel und nicht irgendwo. Die Figur wird dazu über einen vertikalen Offsetwert an die korrekte Position gebracht. Für diesen Fall ist es besser die Figur speziell in der Höhe freistellend zu beschneiden, den Bildschnitt oben und evtl. auch unten an der Figur angrenzen zu lassen.
  4. Bei der Benennung der Bilder sollte man sich ganz strikt an eine klar strukturierende Systematik halten, um nicht den Überblick zu verlieren. Denn bei vielen Produkten mit unterschiedlichsten Merkmalen können schnell eine gewaltige Menge an Bildern entstehen, die man dann den Produkten zuweisen muss. Das Erleichtert das Suchen beim Hochladen. Zu empfehlen wäre ein Benennungsregel nach z.B. folgendem Prinzip: Zunächst ein verkürzter Produktname oder die ArtNr. (SKU), dann das Merkmal und dann die Option für dieses Merkmal (evtl. auch kombinierte Merkmale berücksichtigen. Z.B. nach obigen Beispiel könnte ein Bildname so aussehen: sockelfigur_sockel_marmor schwar_30_250x250.png. Hier ist zusätzlich noch die Bildgröße kodiert.

 

Erstellen von "Selbsterstellten Feldern" und deren Konfiguration

Die Begriffe "Benutzerfelder", "Benutzerdefinierte Felder" und "Selbsterstellte Felder" bezeichnen in VM gemeinsam die definierbaren Produktmerkmale - sind also austauschbare Begriff für die gleiche Sache.

Nun kommt der zweite vorbereitende Schritt in Richtung unseres funktionierenden VPC. Wie oben bei den Grundlagen schon erwähnt müssen wir für unsere Produkte so genannte "Selbsterstellte Felder" erstellen. Das sind unserer Produktmerkmale.

Dazu gehen wir im ins VM-Menü > Produkte > Selbsterstellte Felder > Button oben rechts (Neu).

In diesem Dialog wählen wir als erstes unter Benutzerdefinierter Feld-Typ: den Typ Warenkorb Variante aus, geben dann einen aussagekräftigen gut strukturierten Titel ein und speichern dann sofort den Dialog. Das sofortige Speichern ist notw. weil abhängig vom gewählten Typ manche Eingabefelder im Formular überhaupt erst zur Verfügung gestellt werden!

Die meisten Optionen in diesem Dialog können wir auf den Standardwerten belassen. Wichtig sind folgende Eintragungen:

  • Titel: Dieses Feld hatten wir oben schon besprochen. Dieser hier eingegebene Text ist unser Label für unser Produktmerkmal-Optionsfeld.
  • veröffentlicht: ja (sobald wir damit auch online gehen wollen, oder auch zum Testen)
  • Warenkorb Attribut: ja
  • Beschreibung: Dies ist unser wichtigstes Feld für die Ansteuerung des VPC. Prinzipiell kommt hier die Beschreibung oder für unser Optionsfeld rein. Im Produkttemplate selbst wird es aber nicht angezeigt, aber wir verenden den Text (ohne die Steuerangaben) als Titel für die Modalbox.
  • Standard: dieses Feld sollte den Wert/Value für die Option enthalten, der als Standard beim Aufruf des Produktes als voreingestellt (checked) gesetzt wird. Wird hier nichts eingetragen wird ersatzweise immer der erste Wert eingestellt werden.
  • Im Feld Kurzinfo kommt zusätzlicher Text rein, der ruhig auch etwas ausführlicher beschreibt, was es mit dem Merkmalfeld auf sich hat, denn der Text wird bei Mouseover über eine kleinen Icon in einem Tooltipp angezeigt. Hier kann dem Kunden also Hilfestellung gegeben werden.

 

ImgSelect - Grafische Auswahlboxen

Bitte beachten: Der VPC funktioniert auch ohne grafische Auswahlboxen aber umgekehrt Grafische Auswahlboxen nicht ohne den VPC. D.h. ehe man grafische Auswahlboxen erstellt und konfiguriert sollte das Produkt selbst schon als visuell konfigurierbares Produkt erstellt worden sein! Mit der ersten VPC-Eigenschaft wird der VPC überhaupt als Template aktiviert und damit auch die Möglichkeit ImgSelect-Boxen zu verwenden.

Nun im Detail zu unserer Steueranweisung im Feld Beschreibung. Eine Steueranweisung muss in geschweifte Klammern hinter dem eigentlichen Beschreibungstext gesetzt werden! Daran erkennt unser Script

  1. dass hier etwas interpretiert werden soll und
  2. dass das darin enthaltene inkl. die geschweiften Klammern nicht mit als Beschreibungstext ausgegeben werden sollen.

Innerhalb der geschweiften Klammern folgt dann ohne Leerzeichen sofort unser Erkennungsstring ImgSelect gefolgt von ein paar optionalen Parametern.

Der Erkennungsstring bewirkt, dass wir für das Optionspulldownfeld einen grafischen Selektor anbieten wollen. I.d.R. wird neben dem Pulldownfeld, wo die verschiedenen Merkmalsoptionen als Text zur Auswahl stehen ein kleines Icon angezeigt. Wenn man auf das Icon klickt, dann wird ein Modaler Dialog (fancybox) eingeblendet der Bildelemente zur Klickauswahl anbietet.

Die möglichen Parameter sind jeweils durch Semikolon getrennt. Der Parametername wird gefolgt von einem Doppelpunkt und seinem Wert. Die Parameter sind ggf. noch nicht wählbar programmiert (folgt später). D.h. es funktioniert immer nur der Standardwert automatisch (jeweils fett+unterstrichen), unabhängig von den gewählten Optionen. Folgende Parameter wären dann nutzbar zur Steuerung der BildSelect-Box:

  • type: after | replace
    Über diesen Parameter lässt sich festlegen, wie der Icon-Button für den aufruf der Select-Image-Box eingebunden wird. Dieser Parameter hat also Einfluss auf das Layout. Standardmäßig wird er einfach fließend hinter der Selectliste eingebunden. Alternativ kann er auch die Selectliste ersetzen (noch nicht umgesetzt).
  • on: mouseclick | mouseover
    Hierrüber wird definiert welches Ereignis die Select-Image-Box aufrufen soll. Standard ist mouseclick. Die Bezeichner entspr. den Maus-Ereignissen in JavaScript. (MouseOver ist noch nicht umgesetzt).
  • use: thumb | full
    Mit diesem Parameter wird definiert welche Bildertypen in der Select-Image-Box verwendet werden sollen, entweder die Thumbnail-Version oder die Fullsize-Version. Standard ist thumb.

Nachdem diese Felder befüllt wurden, wird gespeichert und wird setzen damit mit nachfolgendem Schritt fort.

Weiter unten wird beschrieben, wie für diese ImgSelect-Boxen die notwendigen, anzuzeigenden Bilder administriert werden.

 

Beachte reservierte Zeichen:

Bei der Vergabe der Titel / Beschreibung dürfen keine Zeichen verwendet werden, die durch den VPC als z.B. Trennzeichen genutzt werden, dazu gehören der Punkt und das Semikolon. Zusätzlich sollten auch geschweift Klammern vermieden werden. Anderenfalls könnte es zu Fehlinterpretationen kommen.

 

Erstellen von Optionen für Produktmerkmale in Verbindung mit dem VPC

Abgrenzung / Besonderheiten bei VPC bei Produktmerkmalen und deren Optionen

Oben ist beschrieben, wie man Selbstdefinierte Felder erstellt. Nun sollen zu diesen Selbsterstellten Feldern die Optionen erstellt werden. Dazu vorweg noch mal zum klaren Verständnis und Abgrenzung der Begrifflichkeiten, auch wenn es eine Wiederholung zu obigen Ausführungen ist, folgendes:

  • Mit den Selbsterstellten Feldern treffen wir eine Vordefinition eines Produktmerkmales, beispielsweise Stofffarbe. Die Optionen für dieses Merkmal wären dann z.B. Rot, Grün, Blau etc.
  • Prinzipiell ist es von Virtuemart angedacht, dass ein Merkmal einmal vordefiniert wird und dann bei verschiedenen Produkte zur Anwendung kommt. Verkauft man verschiedenen T-Shirts, wird es vermutlich sogar für alle T-Shirt immer die Auswahlmöglichkeit für die Stofffarbe geben.
  • Sehr wohl jedoch ist davon auszugehen, dass zwar alle das Merkmal Stofffarbe brauchen, aber in welchen Farben ein T-Shirt dann angeboten werden soll, doch sehr speziell von dem konkreten Produkt z.B. T-Shirt abhängt.

Aus diesen Sachverhalten folgt auch die Logik, wie Merkmale und deren Optionen in VirtueMart gepflegt werden: Die Merkmale sind global im Shop zu pflegen, auf mehrere Produkte anwendbar und haben deshalb einen eigenen Menüeintrag. Die Optionen sind produktabhängig und werden deshalb beim konkreten Produkt gepflegt.

Von dieser generellen Verfahrensweise gibt es eine Besonderheit im Umgang von Merkmalen und Optionen mit dem VPC, was ebenfalls schon in obigem Einleitungstext beschrieben wurde. Diese Besonderheit resultiert aus der Fähigkeit des VPC für jede Änderung einer Merkmaloption (Auswahl durch den Nutzer) nicht nur den Preis anzupassen, sondern auch die Produktabbildung. Am beispiel unserer T-Shirt soll die Relevanz verdeutlicht werden: Wenn ein Nutzer nun eine Stofffarbe Rot auswählt, dürfen wird das nicht mehr nur als verbale Produkteigenschaft verstehen, sondern auch als visuell umzusetzende. Unser T-Shirt-Bild würde sich also in die Farbe Rot ändern müssen. Aber da dieses T-Shirt natürlichen einen anderen Schnitt hat als andere Shirts können wir nicht einfach ein gemeinsames Rot-Bild für alle T-Shirts nutzen. Jedes T-Shirt braucht seine eigene Rot-Varianten-Abbildung. Bei unserer Produktpflege bedeutet das dann folglich, dass alles was sich bei ansich gleichen verbalen Produktmerkmalen bildlich unterscheidet, dann auch als unterschiedliche Produktmerkmale/Optionen zu pflegen sind. In Konsequenz am Beispiel unserer Shirts könnte damit für jedes Produkt ein eigenens Merkmal angelegt werden müssen.

 

Klären und beschreiben: Wie unterscheiden sich gleich zu benennende Produktmerkmale obwohl unterschiedlich zu verwenden - in Bezug auf die notw. Unterschiedlichekeit der VIEWs? (Bsp. Stofffarbe des einen Produkte und Stofffarbe des anderen Produktes)

 

Zur Pflege der Optionen für Produktmerkmale

Voraussetzung ist dass zunächst Produktmerkmale angelegt wurden.

Hier nun der Ablauf:

  1. Wir rufen in der VM-Administration das Produkt auf, für welches wir die Merkmale mit Optionen versehen wollen.
  2. Wir wechseln im Produkt in das Register Selbsterstellte Felder.
  3. Hier finden wir eine Gruppe Benutzerdefinierter Felder-Typ: in der als erstes eine Selektionsliste steht in der wir den Typ eines selbsterstellten Feldes auswählen können. Diese Liste enthält exakt die selbsterst. Felder, die wir wie oben beschrieben angelegt haben, als Listeneintragstext wird der Titel des selbsterstellten Feldes verwendet.
  4. Sobald ein Typ ausgewählt wurde, erscheint unter in der Liste eine neue Zeile. Wie genau die Zeile speziell in der Spalte Wert aussieht, hängt vom Typ des Selbsterstellten Feldes ab. Im Fall unseres "Warenkorb Variante"-Types (s.o) steht hier nur ein Eingabefeld für den Wert. Das Feld Wert bekommt nun als Eintrag unsere 1. Option für das Merkmal.
  5. Das 2. wichtige Feld ist das in der Spalte Preis. Hier kommt ein abweichender Preis, als Aufpreis für den Standard-Produktpreis hinein.
  6. Nun wird das Produkt gespeichert. Unsere erste Option für dieses Merkmal wurde angelegt.
  7. Nun wieder holen wir obige Schritte für ggf. weitere Optionen oder soagar weitere Merkmale mit seinem Optionssatz.

Dieser Vorgang ist, wie gesagt, noch der Virtuemart-Standard. Im Zus.hg. mit dem VPC gibt es jedoch eine Besonderheit, die wichtig zu beachten ist:
Die Eingaben in den Feldern der Wert-Spalte sind exakt in der gleichen Benennung inkl. Schreibweise bei unseren VPC-Produktgrafiken zu verwenden. Darüber und in Verbindung mit der Bezeichnung der Merkmale(selbsterst. Felder) werden Optionsauswahlen und VPC-Bildelemente verknüpft!

 

Hinweise zur Sortierung der Optionen: Wenn Sie die Reihenfolge beeinflussen wollen, über die die Optionen in den Merkmal-Selektionslisten aufgeführt werden, dann kann das einfach per Drug-n-Drop der Optionszeilen in der Liste vorgenommen werden.

 

Hochladen und Konfiguration von Produktgrafiken

Bisher war fast alles (bis auf ImgSelect-Konfiguration) noch weitgehend Standardablauf bei der Pflege von Virtuemart-Produkten. Da es sich um einen VisualProductConfigurator handelt, ist sicher nachvollziehbar, dass der Schwerpunkt bei der Konfiguration bei den Bildelemente liegt. Dem soll sich hier nur zugewendet werden.

Die Bildelement für den VPC werden so wie alle Produktabbildungen in Virtuemart im Register Produktabbildungen gepflegt. Auch hierfür gilt: Bis auf 2 Felder, die zusätzliche Steuerparameter erhalten können, ist alles andere VM-Standard. Es wurde nichts am Dialog geändert.

In der Liste der Abbildungen unterscheiden wir 3 verschiedenen Typen:

  1. Hauptbild: Das erste Produktbild in der Thumbnailliste wird immer als Hauptbild verwendet. Das Hauptbild wird als generelles Produktbild auf den Produktauswahlseiten (browse-pages) verwendet. Normalerweise wird dieses Bild bei Nicht-VPC-Produkten auch als erstes anzuzeigendes Bild auf der Produktdetailseite verwendet. Bei VPC-Produkten jedoch setzt sich schon beim Aufruf der Produktdetailseiten die Produktabbildung abhängig von den Standardwerten der Warenkorb-Varianten-Optionen (vorselektierte Optionen unserer Merkmale) zusammen - ist ja logisch und sinnvoll. Folglich wird das Hauptbild bei VCP-Produkten auf den Detailseiten gar nicht verwendet. Trotzdem muss es da sein und es enthält sogar die ersten notw. Steuerparameter. Dazu untern mehr.
  2. VPC-Bilder: Das ist unsere wichtige Gruppe der Bilder, die als Bestandteile / Ebenen / Overlays, abhängig von den gewählten Merkmalsoptionen, in Summe die Produktabbildung ergeben. Im Feld Meta-Tags werden diverse Steuerparameter untergebracht.
  3. ImgSelect-Bilder: Das ist die Gruppe von Bildern, die für die Auswahlisten als Auswahlgrafiken verwendet werden.

Für alle nachfolgenden Beschreibungen gilt immer, dass zunächst wie für VM-üblich, die Bilder hochgeladen werden und dabei auch automatisch die Thumbnailversionen der Produktabbildungen erstellt werden. Erst wenn ein Bild hochgeladen wurde steht es in unserer Bilderliste zur Verfügung und kann dann über die Parameter konfiguriert werden.

Jedes Bild hat einen Löschen-Button, und einen Button zum Aufruf der Bild-Parameter. Die Bildparameter erscheinen für das betroffene Bild immer unterhalb des Bildertableaus.

 

Konfiguration der VPC-Bilder per Steuerparameter

Das Hauptbild

Für die Konfiguration des VPC müssen wir dem Hauptbild eine Steuerinformation übergeben. Das erfolgt im Feld Angezeigte Beschreibung. Konkret wird hier die Größenangabe in Pixel für das Produktbild übergeben. Die Angaben sind in runden Klammern zu machen, zuerst die Breite gefolgt von * dann die Bildhöhe. So könnte z.B. ein Feldinhalt aussehen: Shirtfarbe (270*500).

Zudem gibt es eine variable Form der Dimensionierung, für den Fall, dass man Produkteigenschaften hat, die auf die Bildgesamtgröße einfluss haben. Z.B. kann für eine Figur auf einem Socken die Auswahl unterschiedlicher Sockelhöhen die Höhe des Gesamtbildes ändern. Für solche Fälle übergibt man keinen starren Höhenwert, sondern quasi ein Formel für die Breite und/oder Höhe berechnet werden. Bsp: Säulenpokal Produktbild (270*{620+var->height}). var->height ist unser Variablenbezeichner. Der Wert der hierin übergeben wird, wird über einen Optionsparameter befüllt (s.u). Im Beispielfall wird zur Standbildhöhe (für den Fall der Option kleinster Sockel 10cm) von 620px bei höheren Sockeloptionen (15cm, 20cm etc.) jeweils ein Pixelwerte addiert (50px, 100px ect.). Damit wächst dann also das Bild dynamisch in der Höhe abhängig von der Sockelhöhe.

 

VPC-Bilder

Das wohl wichtigste Bestandteil zur Konfiguration des VCP. Hier soll nun beschrieben werden, wie die Anzeige von Bildelemente abhängig von gewählten Merkmalsoptionen angesteuert werden.

Alle Steuerparameter werden im Feld MetaTags eingetragen. Das Feld MetaTags macht für Bildelemente eh keinen Sinn, weil diese Information viel zu spezifisch wäre um sich die Mühe der Pflege zumachen und von Suchmaschinen eh nicht ausgewertet würden für Seitenbestandteile, die sowieseo nur per Ajax in die Seite geladen werden. Deshalb ist es legitim das Feld dafür zu "mißbrauchen". Außer den Steuerparametern sollten für diese Art Produktbilder keine weiteren Informationen in diesem Feld stehen.

Zunächst eine Übersicht über die möglichen Steuerparameter.

  • view[integer] = Kriterium-Zeichenkette, die die Anzeiges des Bildes erzeugt; ist direkt abhängig von der ausgewählten Merkmalsoption (möglichen Werten der selbsterstellten Felder). Hierüber wird also die Beziehung zw. Bildelementanzeige und Merkmal des konf. Produktes hergestellt. view wird immer als Array verstanden/definiert, beginnend mit dem Index 0. Die Verwendung eines Arrays ermöglicht uns die Anzeige eines Bildes abhängig von mehreren Merkmalen zu machen, z.B: Säulenhöhe.20 und Säulenfarbe.blau, was ja für die Umsetzungspraxis üblich auftreten kann. Die verschiedenen view-Items werden mit ; voneinander getrennt. Der view-Wert setzt sich immer zusammen aus dem Title für die Selbsterstellten Felder und dem Wert für die Selektionsoption, beides voneinander getrennt mit einem Punkt. Ein View-Anweisungskonstrukt könnte beispielhaft so aussehen: view[0]:Säulenfarbe.silber;view[1]:Säulenhöhe.35;.
    Wird für view[0] nur der Wert Y oder 1 übergeben, dann wird dieses Bildelement unabhängig von Selbsterstellten Feldern immer anzeigt. Damit ist es möglich Bildelemente anzuzeigen, die sich nie ändern sollen. Das können z.B. Hintergrundgrafiken sein, oder Zusatzinfos oder was auch immer sich aus der Praxis an Aufgabenstellungen ergeben sollte (Bsp: view[0]:Y;).
  • top = Ausrichtung in Pixel vom oberen Viewerrand - ist Standard und nur erforderlich wenn von 0 abweichend (wenn dann Angabe von 0 oder Wert notwendig, ohne 'px')
  • left = Ausrichtung in Pixel vom linken Viewerrand - ist Standard und nur erforderlich wenn von 0 abweichend (wenn dann Angabe von 0 oder Wert notwendig, ohne 'px')
  • right = Ausrichtung in Pixel vom rechten Viewerrand (Angabe von 0 oder Wert notwendig, ohne 'px')
  • bottom = Ausrichtung in Pixel vom unteren Viewerrand (Angabe von 0 notwendig, ohne 'px)
  • mod = Mitunter sind Eigenschaften eines Bildelementes von Eigenschaften anderer Bildelemente abhängig, z.B. die Position eine Bildelementes von der Höhe eines anderen. Bilder, die Einfluss auf andere Bilder haben, können diesen Parameter mod verwenden, um Variablen zu definieren die dann auf Parameter von dynamischen Bilder Einfluss haben. Parametern dynamischer Bilder, können diese Variablen dann verwenden. Ein Variablenname wird als solche erkannt, indem vor dem beliegigen Variablennamen ein var-> gesetzt wird. So wird z.B. eine Höhenvariable definiert und mit einem Wert belegt: mod:var->height=130. Beachten, wenn es mehrere Anweisungen geben sollte sind diese mit | zu trennen.
  • {Anweisung} Wie für mod beschrieben, können Bildeigenschaften wie z.B. die Positionierungen variabel sein. Hierfür können z.B. Rechenregeln hinterlegt werden anstatt eines fixen Wertes. Um dem Script zu vermitteln, dass die angabe kein Wert ist, sondern eine Rechenregel, muss die Regel in geschweiften Klammern {...} angegeben werden. Dies steuert z.B. die Position von Bildelementen in Abhängigkeit von z.B. einer Höhenvariablen, die in einem mod-Parameter definiert wurde: bottom:{50+var->height}.

 

Nachfolgend ein paar Beispiele von Parametersätzen und deren VPC-Interpretation:

Der besseren Lesbarkeit wegen wurde jeder Steuerparameter in den Beispielen auf eine neue Zeile gesetzt. In den Feldern wird ohne Zeilenumbruch oder trennenden Leerzeichen geschrieben.

Steuerparameter Interpretation: Produktbildelement wird angezeigt ...
view[0]:Säulenfarbe.silber;
view[1]:Säulenhöhe.35;
wenn die im Merkmal Säulenfarbe die Option silber und im Merkmal Säulenhöhe die Option 35 ausgewählt wurde.
   
view[0]:Y unabhängig von den gewählten Merkmalen, also immer.
   
view[0]:Figurfarbe.gold;
bottom:{260+var->height} 
wenn im Merkmal Figurfarbe gold gewählt wurde. Das Bild wird vom unteren Bildrand gerechnet am Offset 260px zzgl. der variablen Höhe welche über den Variablenbezeichner var->height definiert wurde positioniert. Die geschweifte Klammer macht dem VPC klar, er soll den Ausdruck als Formel interpretieren.
   
view[0]:Säulenfarbe.silber;
view[1]:Säulenhöhe.35;
mod:var->height=62;
bottom:20;
left:0
wie oben - wenn beide Merkmalsoptionen (Säulenfarbe silber und Säulenhöhe 35cm) zutreffen.
Der Offset ist links (left) unten (bottom) orientiert und um 20px angehoben.
Zusätzlich wird hier veranlasst durch den Parameterbezeichner mod der Inhalt einer Variable var->height mit dem Wert 62 (pixel) beschrieben, so dass andere Bild-Steuerparameter diesen verwenden können.

 

Image-Selectbox-Bilder

Bereits weiter oben wurde dargestellt, wie ImgSelect-Boxen erzeugt und konfiguriert werden. Für den Inhalt dieser Auswahlboxen benötigen wir pro Merkmaloption ein Auswahlbild. Diese Bilder sind ebenfalls im Produktbildertableau einzufügen und zu verwalten. Nach dem Hochladen dieser Bilder müssen diese den jeweiligen Auswahlboxen oder gleichgesetzt den jeweiligen Produktmerkmalen und Optionen zugewiesen werden:

Im Bild-Parameterfeld Angezeigte Beschreibung, wird zunächst dem VCP mit dem Schlüsselwort SelectImage klar gemacht, dass dieses Produktbild ein Bild ist, welches in einer ImgSelectBox verwendet werden soll. Nach einem Leerzeichen folgt dann die Benennung des Merkmales und nach einem verbindenden Punkt die betreffende Option für die dieses Bildelement steht. Eine solche Steueranweisung kann beispielsweise so aussehen: SelectImage Säulenfarbe.blau.
Wichtig ist die korrekte Schreibweise des Schlüsselwortes (vorne beginnend) und der Bezeichner für Merkmal und Option, sowie das Leerzeichen nach SelectImage und der Trennpunkt.

 

Einschränkung: Derzeit ist es noch nicht mgl. ein Bild für eine Option mehrer Merkmale und/oder Produkte zu verwenden. Was bedeutet das? Erklärt am Beispiel: Wenn ein T-Shirt die Kragenfarbe rot, grün und blau hat und es auch den Body in rot, grün und gelb gibt ... etc. dann muss für jede Kombination aus den Merkmalen (Kragenfarbe, Bodyfarbe, ...) sowie den möglichen Optionen (rot, grün, blau, gelb ...) jeweils eine Select-Image zum Produkt hochgeladen und konfiguriert werden. Die Bilder sind nicht mehrfach verwendbar, obwohl evtl. gleich.

TODO: Eine mgl. Option zur Lösung dieses Mißstandes, wenn auch etwas tricky in der Umsetzung, wäre eine semikolon-separierte Liste aus Merkmalen und deren Optionen dem Produktbild zu übergeben. Damit könnten dann mehrere Merkmalsoptionen zumindest innerhalb eines Produktes diese Grafik gemeinsam nutzen SelectImage Pokalfabe:gold;Figurfarbe:gold;Zierborte:gold(Umsetzbarkeit in dieser Form prüfen!)


 

Umsortieren der Reihenfolge

von Produktbildern 

Durch Ändern der Bildreihenfolge wird gleichzeitig bestimmt in welcher Ebenen-Reihenfolge (Overlay - z-index) die einzelnen Produktgrafiken aufeinander gelegt werden. Das Hauptbild wird hierfür nicht berücksichtigt, statt dessen wird mit dem 2. Bild oben-links begonnen - es liegt im Bildstapel ganz unten. Hiermit kann man z.B. auch ein Hintergrundbild produktabhängig definieren oder sogar durch den Nutzer über Selbstdef. Feld ändern lassen.

Produktabbildungen können recht einfach per Drag-n-Drop verschoben und damit neu sortiert werden. Die neue Sortierung wird erst nach dem Speichern des Produktes übernommen und wirksam.

von selbsterstellen Feldern

Die Reihenfolge in der Produktmerkmale auf der Produktdetailseiten nacheinander aufgelistet werden, ist abhängig von der Reichfolge wie die selbsterstellten Felder und deren Optionen(!) auf dem Registerblatt "Selbsterstellte Felder" des Produktes aufgereiht werden. Auch hier kann nach dem Anlegen von Feldoptionen per Drag-n-Drop recht einfach die Reihenfolge nachträglich korrigiert werden.

Die Reihenfolge der selbsterstellten Felder in der Liste des AdminMenüpunktes Produkte > selbsterstellte Felder hat keinen Einfluss auf die Reihenfolge der Merkmale auf der Produktdetailseite!

 

Umsetzung der Mehrsprachigkeit für die Produktmerkmale und Optionen

Anmerkung: Die Verwendung der Sprachfunktion und die damit in Zus.hg. stehende Nutzung von Sprach-konstantenbezeichnern, ist eine gute Möglichkeit die Titel von selbsterstellten Feldern wie für VPC-Produkte notw. unterschiedlich zu benennen, aber durch die Sprachentsprechung gleiche Texte anzuzeigen, ohne dabei in Namenskonflikte zu geraten. Jedoch bedeutet die dann auch eine zugelassene Redundanz.