von Stefan Müller
Jeder Shop ist individuell. Somit wünschen sich viele Shopbetreiber, den Einheitslook hinter sich zu bringen und Angebote und Produkte individuell zu präsentieren. Das Smartstore-Shopsystem bietet bereits viele Möglichkeiten.
Mit Content-Management-Werkzeugen wie Seiten, Widgets, Content Slidern, Menus, den Themes, Videostreaming und den wunderschönen Designs aus dem Page Builder können Shopbetreiber leicht und einfach großartige Inhalte erschaffen, die Kunden begeistern und zum Verkauf führen.
Auch für die Artikeldetailseiten, also dort, wo genau ein einziges Produkt oder Produktbündel angeboten und bestellt wird, gibt es Mittel und Wege, seine eigene, einfach aufs Produkt angepasste Präsentationen zu haben.
Ein einfaches Beispiel: der einzelne Artikel wird in der Grundeinstellung auf die stets gleiche Art präsentiert: links die Artikelbilder, rechts die Auswahlbox mit Preis und Varianten. Darunter dann der Langtext und weitere beschreibende Elemente. Das ist für 99 Prozent der Shops die beste Angebotspräsentation, viele Kunden kennen es so und das wichtigste, haben die Bestelltechnik so “gelernt” und verinnerlicht.
Was aber, wenn das für Ihr Angebot nicht reicht?
- Sie haben komplexe, variantenreiche Artikel, und die Variantauswahl muss dementsprechend prominent hervorgehoben sein?
- Die Staffelpreis-Tabelle ist essentiell und soll auffälliger, noch über dem Artikelbild, präsentiert werden?
- Sie benötigen eigene Eingabefelder, zum Beispiel für Kundenvorgaben zu individuell angefertigten Textilien oder Möbeln, die im Shop-Standard nicht vorgesehen sind?
Ein einfaches Beispiel: Elemente tauschen
Um die Flexibilität der Artikelpräsentation in Smartstore zu demonstrieren, hier ein kleines Beispiel. Ich möchte für einige ausgewählte Artikel die Platzierung der Elemente “Artikelbilder-Galerie” und “Produktbox” tauschen. Von links nach rechts und andersherum. Wie schaffe ich das?
Die Antwort: Design-Vorlagen!
Bauen Sie sich eine neue Design-Vorlage für die Produkt-Darstellung. Eine Design-Vorlage legt fest, wie das Produkt auf der Artikeldetailseite im Frontend-Bereich Ihres Shops angezeigt wird. Mit einer oder mehreren eigenen Vorlage sind Sie völlig frei, wie Ihre Artikelseite aussieht!
-
Für das erstmalige Anlegen von Design-Vorlagen gibt es keine Benutzeroberfläche im Shopsystem. Dies wird vom Shopbetreiber oder seinen Technikern in Handarbeit erledigt, indem sie neue Produkt-Vorlagen per
CSHTML-Datei(en) anlegen und dem Shopsystem per Datenbankeintrag bekanntgeben. -
Für die spätere Auswahl von Design-Vorlagen ist kein Techniker mehr nötig. Im Produkt-Adminbereich gibt es eine Auswahlbox für die Design-Vorlagen. Damit kommt jeder Endanwender zurecht.
Pro Produkt kann jeweils eine Design-Vorlage gewählt werden. Sie können also für beliebige Produkte entscheiden, ob sie standardmäßig oder mit Ihrer Vorlage A, B oder C präsentiert werden.
Ihre Auswahl der Design-Vorlage wird auch mit den restlichen Artikeldaten beim Artikeldatenexport mitgeliefert und beim Artikeldatenimport auch wieder eingelesen.
So wirds gemacht
Schritt 1a: Eine View erstellen
Eine View (deutsch “Ansicht”) ist die spezielle Datei Product.cshtml im Shopsystem-Ordner Views -> Product.
Am besten, Sie duplizieren sich im Datei-Explorer die Standard-Produkt-Vorlage “Product.cshtml” und benennen Ihre Kopie nach “ProductB.cshtml” um. Dieses Duplikat können Sie dann gefahrlos mit einem Texteditor wie Notepad++ bearbeiten.
- Ihre neue
ProductB.cshtmlenthält neben HTML-Formatcode für den Webbrowser auch aktive Anweisungen in sogenannten “Razor”-Codeblöcken. Eine Darstellung, wie Sie individuelle Razor-Anweisungen schreiben oder modifizieren, würde für diesen Artikel zu weit gehen. Vom Prinzip her läuft es bei Razor ähnlich wie beim sehr bekannten PHP aus der Linux-Welt. Razor-Anweisungen werden vergleichbar zu PHP-Anweisungen für jeden Shopkunden live und individuell in HTML übersetzt und seinem Webbrower gesendet. Das ist dann der Weg zum 1:1-Shoppingerlebnis.
Somit könnten Sie für sehr weitgehende Individualisierung auch selbst tief in die C#-Konstrukte eingreifen, modifizieren oder neuen Code hinzufügen. Bitte beachten Sie, dass es dann nicht nur um eine einzige cshtml-Datei geht. Viele Komponenten, wie etwa Anzeige der Artikelvarianten, werden von anderen Orten eingebunden, müssten entsprechend ausgetauscht oder dort modifiziert werden. Beachten Sie auch, dass diese Änderungen von Ihnen nach Shopsoftware-Updates nachgetragen und eventuell auf Gegebenheiten der neuen Smartstore-Version aktualisiert werden müssen.
Wenn es rein ums Verschieben von Blöcken links nach rechts geht, benötigen wir nur Basiskenntnisse von HTML-Struktur, etwas Geduld und sorgfältiges Arbeiten. Wir gehen in die ProductB.cshtml-Datei, finden den Bildergalerie-Block und den Produktbox-Block, wechseln den Code zwischen den <div>-Tags einfach aus.
Schritt 1b: Die neue View in den Shopdateien hinterlegen
Ihre angepasste Produktvorlage kann sich in einem der folgenden Ordner befinden:
- Themes/[Theme]/Views/Product
- Themes/[Theme]/Views/Shared
- Views/Product
- Views/Shared
Am einfachsten, sie liegt im gleichen Ordner wie die Standard-Vorlage Product.cshtml.
Themes in Smartstore regeln allgemeine Gestaltungen wie etwa Standardfarben und Schriften. Wenn Sie die Produktvorlage in einem Theme hinterlegen, ist sie logischerweise auch nur in genau diesem Theme verfügbar. Wenn Sie Ihren Shopkunden also mehrere Themes zur Auswahl anbieten, dann muss die Produktvorlage in jedem Theme, das Shopkunden verwenden können, hinterlegt sein. Oder eben global in Views/Products.
Hinweis: Bitte achten Sie darauf, dass auch in der neuen Datei die Datei-Berechtigungen korrekt gesetzt sind. Welche Berechtigungen zu setzen sind, ist je nach System unterschiedlich. Am besten, Sie orientieren sich an den Rechten der Standard-Design-Vorlage. Wenn die neue Datei nicht die benötigten Rechte erhält, kann der IIS-Webserver die Datei nicht einlesen und dann wird es nichts mit der Anzeige der neuen Seite.
Schritt 2: ProductTemplate-Tabelle ergänzen
Dann ist per Hand ein Datensatz in der Tabelle “ProductTemplate” mit ViewPath “ProductB” anzulegen. Das benötigt etwas Erfahrung mit SQL oder ein Tool: am besten funktioniert dieser Schritt mit dem Microsoft-Werkzeug “SQL Server Management Studio”. Verbinden Sie sich darin mit Ihrer Shop-Datenbank. Wählen Sie in der Smartstore-Datenbank die Tabelle “dbo.ProductTemplate”, ein Rechtsklick über dem Tabellenname, aus dem Kontextmenü dann “Oberste 200 Zeilen bearbeiten”.
Die Id wird automatisch gesetzt. Also in der Tabelle in die letzte Zeile in Spalte Name auf das NULL klicken, und einen Namen vergeben. Dieser dient nur der Information des Shopbetreuers. “Name” legt fest, wie die neue Designvorlage in der Auswahlbox heißt. Bitte stören Sie sich nicht an dem roten Kreis mit dem Ausrufezeichen. Dann daneben unter ViewPath das NULL mit dem reinen Dateinamen der cshtml-Design-Vorlage ersetzen, also ohne “.cshtml” sowie ohne Dateipfad. Schließlich eine Anzeigereihenfolge unter DisplayOrder eintragen. Mit Eingabetaste abschließen, das Datenbanksystem trägt dann selbständig die Id ein.
Schritt 3: Smartstore-Neustart
Das Shopsystem zur Sicherheit neustarten, damit die neue Design-Vorlage garantiert vom System berücksichtigt wird, dies über “Neustart”, zu finden im Admin-Bereich im Zahnrad-Menü rechts oben.
Schritt 4: Template testen
Im Admin-Bereich unter “Katalog” ein gewünschtes Produkt zum Bearbeiten aufrufen. Wenn alle Schritte 1 bis 3 ausgeführt wurden, ist jetzt eine neue Auswahlbox “Design-Vorlage” vorhanden und das neue Produkt-Template kann für diesen Artikel festgelegt werden.
Jetzt “Vorschau” auswählen und die Artikeldetailseite wird im neuen Design angezeigt.
Wenn nicht, ist entweder der Datenbankeintrag unter Schritt 2 nicht korrekt, zum Beispiel ein Vertipper im ViewPath für den Dateinamen. Oder der Vorlagendatei fehlen die nötigen Rechte, damit der Webserver auf sie zugreifen darf. Oder es gibt einen Fehler im Aufbau der ProductB.cshtml-Datei.
Weitere Möglichkeiten
Vorlagen gibt es auch für Warengruppen (Kategorien) und Hersteller, auch hierfür können Shopbetreiber eigene Vorlage(n) erstellen und dem Shopsystem hinzufügen. Dafür arbeitet man mit:
CategoryTemplate bzw. ManufacturerTemplate
In den entsprechenden Datenbanktabellen ist standardmäßig nur ein Eintrag mit der allgemeinen Standardvorlage eingetragen.
Wenn mehr als eine Kategorievorlage im Shopsystem vorhanden ist, sieht der Shopbetreuer auf der Seite zum Bearbeiten/Erstellen der Warengruppe eine Dropdown-Liste, mit der für diese Warengruppe dann eine der Vorlagen ausgewählt werden kann.
Vorlagen in allen Editionen
Und somit mehr Möglichkeiten, den Shop noch individueller anzupassen. Alle diese Möglichkeiten sind in jeder Smartstore-Version verfügbar, also bereits aber der kostenlosen Smartstore Community Edition.