Design & Anpassungen

Shopdarstellung


Frontend-Gestaltung

WS InfinityShop

Das Frontend Ihres WEBSALE-Shops ist zu 100% frei designbar. Durch die völlige Designfreiheit sind ein komplett individuelles User Interface (UI) und eine perfekt auf Ihre Zielgruppe abgestimmte Customer Experience (CX) möglich.
Ein bestmögliches Kauferlebnis ist die Voraussetzung für eine maximale Conversion Rate.

WS BestPractice-Shop

Alternativ zum WS InfinityShop ermöglicht unser BestPractice-Shop eine kostengünstige Umsetzung Ihres Shops auf Basis einer flexiblen Designvorlage. In diesen BestPractice-Shop sind über 25 Jahre WEBSALE-Erfahrung eingeflossen.
Auch mit vergleichsweise geringem Investment erhalten Sie eine verkaufsstarken Onlineshop.

Headless Commerce

Das Frontend von WEBSALE ist „headless“. Sie können flexibel und schnell Änderungen im Frontend vornehmen, ohne das Entwicklungen im Backend notwendig werden. Damit lassen sich auch viele Funktionalitäten bereits über das Frontend umsetzen.
Das ermöglicht schnellere Innovationszyklen, personalisierte Kundenerfahrungen und Einkaufserlebnisse sowie eine Vielzahl an Test- und Optimierungsmöglichkeiten.

Barrierefreiheit

Ihr WEBSALE-Shop kann selbstverständlich barrierefrei (verpflichtend ab Mitte 2025) umgesetzt werden.

Frontend-Technologien

Das Frontend Ihres Shops kann mit der WS Template Engine auf Basis von Smarty und Twig leicht angepasst werden. Kenntnisse in HTML, CSS und Javascript reichen aus, um Anpassungen durchführen zu können.
Durch den Einsatz von Standardtechnologien kann Ihr Shop bei entsprechenden Kenntnissen von Ihnen selbst oder einer E-Commerce-Agentur betreut werden - ohne auf die Designfreiheit verzichten zu müssen.

Automatische Anzeige von Datum/Uhrzeit der letzten Shopaktualisierung

Im Footer kann der Zeitpunkt der letzten Shopaktualisierung angezeigt werden.
Das zeugt von Professionalität und trägt zum Vertrauensaufbau zu Ihrem Shop bei.

Eigenen JavaScript-Code hinterlegen

Mit eigenem JavaScript-Code können Sie oder Frontend-Developer schnell und einfach kleinere Funktionen im Shop umsetzen.
Damit können Sie sich das Frontend des Shops zu Eigen machen und eine Vielzahl an Funktionen über JavaScript im Shop umsetzen (lassen).

Selbstständig CSS hinterlegen

Um optische Anpassungen an Ihrem Shop vorzunehmen, können Sie oder Ihre Design-Agentur eigene CSS-Regeln hinterlegen.
Sie profitieren von der freien Gestaltbarkeit und können kleine optische Anpassungen jederzeit vornehmen.

jQuery nutzen

Mit jQuery bieten wir eine JavaScript-Bibliothek an, die es Ihnen erleichtert, Java-Script-Code im Frontend-Development einzusetzen.
Mit jQuery müssen Sie JavaScript-Code nicht von Grund auf neu schreiben, sondern Sie oder Ihre Frontend-Developer greifen auf bereits bestehende Funktionen zurück und können diese etwas einfacher im Shop umsetzen.


Responsive Design

Responsive Design

Das WEBSALE Shopsystem ist von vornerein responsive gedacht, das heißt sowohl bei dem BestPractice-Shop als auch beim Infinity-Shop wurde ein responsive Design umgesetzt. Ihr Onlineshop passt sich also automatisch an verschiedene Bildschirmgrößen und Geräte an und die Inhalte und Layouts werden so umstrukturiert, dass sie auf allen Geräten nutzerfreundlich dargestellt werden.
Kunden, die Ihren Shop aufrufen profitieren von einer optimalen Nutzererfahrung, unabhängig vom Gerät, das sie verwenden und zufriedene Nutzer kaufen gerne und oft bei Ihnen ein.

Kompatibilität mit aktuellen Browserversionen

Mit dem repsonsive Design ist auch die Kompatibilität mit allen aktuellen Browserversionen sichergestellt.


Seiten und Inhalte darstellen

Produkt-Slider frei gestalten

Slider mit z.B. Angebotsprodukten können beliebig gestaltet und an beliebiger Stelle im Shop eingesetzt werden. z.B. auf der Startseite auf die gesamte Breite verteilt, um diese bestmöglich in den Fokus zu rücken.
Mit diesen Gestaltungsmöglichkeiten machen Sie Ihren Shop nicht nur hübsch, sondern nutzen ihn auch, um mehr Umsatz zu erzielen.

Darstellung der Kategorien

Bei der Darstellung Ihrer Produktkategorien haben Sie völlige Freiheit. In der Navigation im Header können Sie bspw. neben den einfachen Kategorie Bezeichnungen auch kurze Beschreibungen und Kategorie Bilder einfügen oder zusätzliche Kategorie Ebenen aufklappen. Dabei müssen Sie sich nicht für eine Variante entscheiden, sondern können auch je Kategorie eine andere Darstellung wählen.
Der Shop passt sich damit Ihnen und Ihren Kategorien an, sodass diese bestmöglich präsentiert werden und sich Nutzer bestens zurecht finden.

Darkmode über den Footer aktivieren

Sie können im Footer einen Schalter für den Darkmode einbinden. Bei Klick darauf, wird der gesamte Shop im Darkmode angezeigt, dabei jedoch natürlich auf Usability und Barrierefreiheit geachtet.
Viele Nutzer bevorzugen heutzutage den Darkmode, sowohl wegen der Bequemlichkeit als auch wegen der Barrierefreiheit. Bieten Sie diesen für Ihren Shop an, gibt dieser einen modern Eindruck ab und Sie steigern die Kundenzufriedenheit und erreichen so potenziell mehr Nutzer.

Frei designbare Filter- und Sortierfunktionen

Im WEBSALE-Shop stehen Ihnen umfangreiche, frei designbare Filter- und Sortierfunktionen zur Verfügung, z.B. RadioButtons, Schieberegler oder Grafiken (für unterschiedliche Farben bspw.). Diese können auch je Kategorie individuell verwendet und damit an jede einzelne Kategorie angepasst werden.
Sie können die Filter- und Sortierfunktionen passend zur Kategorie unterschiedlich gestalten und sind nicht in einem Theme "gefangen", das sich durch den gesamten Shop zieht.

Templates & Inhalte


Template Engine

Templates kompilieren

Der Template Compiler setzt die verschiedenen Elemente (HTML-Templates, HTML-Snippets, Textbausteine, Variablen etc.), aus denen eine Onlineshop-Seite besteht zu einer vollständigen HTML-Struktur zusammen, die anschließend im Browser des Nutzers korrekt angezeigt wird. Wurde ein Vorgang gestartet, zeigt Ihnen ein Ladebalken den Fortschritt des Prozesses an.
Mit der Nutzung des Compilers können Fehler im Template frühzeitig erkannt und rechtzeitig behoben werden.

Erfolgsmeldungen bei Kompilierungen

Nach einem erfolgreichen Kompilierungsvorgang werden neben einer entsprechenden Erfolgsmeldung auch die kompilierten Subshops aufgelistet und Sie haben die Möglichkeit, die Änderungen gleich im entsprechenden Subshop anzuschauen.

Fehlermeldungen bei Kompilierungen

Kam es zu einem fehlerhaften Kompilierungsvorgang, wird dem Nutzer, der den Prozess gestartet hat, eine Fehlermeldung angezeigt. Diese enthält eine Tabelle mit allen aufgetretenen Fehlern und listet alle Templatenamen inklusive betroffener Codezeile und Art des Fehler auf. Im Template Manager können die Fehler anschließend behoben werden.
Es muss nicht selbstständig nach den Fehlern gesucht werden, bevor sie korrigiert werden.

Auf Templates zugreifen und anzeigen

Wird ein Shop aufgerufen, greift er auf die zuvor erstellten (kompilierten) Templates zu und zeigt die aufgerufene Seite entsprechend der HTML-Struktur an.
Mit dem Zugreifen auf vorkompilierte Templates werden Ladezeiten verkürzt und die Performance gesteigert - es wirkt sich also auch positiv auf Ihr SEO-Rankiung aus.

Übersicht der Kompilierungsvorgänge

Rufen Sie im Admin Interface den Kompilierungsservice auf, kommen Sie auf eine Übersicht der vergangenen Kompilierungsvorgänge. Diese dient der Protokollierung, weshalb einzelne Einträge nicht bearbeitet werden können.
Alle Kompilierungsvorgänge im Überblick zu haben bedeutet, dass Sie Änderungen jederzeit nachvollziehen und fehlerhafte Vorgänge genauer nachverfolgen können.

REST-API-Integration für Frontend-Tools

Die REST-API unseres Template Compilers ermöglicht Entwicklern eine effizientere Automatisierung, flexible Anpassbarkeit und eine nahtlose Integration in bestehende Workflows für optimierte Zusammenarbeit.

Spalten der Kompilierungs-Übersicht konfigurieren

Als Nutzer des Admin Interfaces können Sie die angezeigten Spalten nach Ihren Bedürfnissen konfigurieren und bspw. Status, Datum, Fehleranzahl, Dauer des Vorgangs etc. ein- und ausblenden.

Kompilierungsvorgänge durchsuchen

Die Liste der Kompilierungsvorgänge können Sie nach benötigten Infos durchsuchen.

Kompilierungsvorgänge sortieren und filtern

Standardmäßig werden die jüngsten Kompilierungsvorgänge an oberster Stelle angezeigt, Sie können die Einträge aber auch alphabetisch oder numerisch sortiert anzeigen lassen. Alternativ können Sie auch nach relevanten Einträgen filtern.

Kompilierungsvorgänge durchblättern

Die Liste der Kompilierungsvorgänge können Sie nach benötigten Infos durchsuchen.

Übersicht der Fehler bei Kompilierungsvorgängen

Kam es beim Kompilieren zu Fehlern werden die betroffenen Vorgänge in der Übersicht hervorgehoben. Sie können diese aufklappen und bekommen Informationen zu den Fehlern.


Templatesprache

Dynamische Konkatenierung von Strings, Maps und Listen

Damit können Textbausteine (Strings), Datenstrukturen wie Wörterbücher (Maps) und Listen flexibel miteinander verbunden oder kombiniert werden. Dynamisch bedeutet, dass diese Verknüpfungen zur Laufzeit vorgenommen werden.
Praktisches Beispiel: Sie möchten eine Nachricht erstellen, die aus verschiedenen Textbausteinen besteht und bestimmte Informationen enthält, die sich ändern können (wie Namen, Datum oder Preise). Mit dynamischer Konkatenierung kann das Programm diese Bausteine automatisch zu einer vollständigen Nachricht zusammenfügen, basierend auf den aktuellen Daten.


strapi CMS

Anbindung von strapi an den Shop

Das Content Managementsystem Strapi wurde zur Inhaltspflege an den Shop angebunden. Die Benutzeroberfläche ist nahtlos in das Admin Interface eingebunden, weshalb die Nutzerdaten des Admin Interfaces automatisch auch für Strapi gültig sind und Nutzer über Single Sign On automatisch eingeloggt werden - vorausgesetzt der Benutzer wurde im Admin Interface für Strapi freigeschaltet.

Strapi im Standardumfang enthalten

Strapi ist für Sie bei der Bereitstellung des Shops von Beginn an bereits aktiviert. (Für den Fall, dass Sie ein anderes CMS verwenden, kann Strapi einfach deaktiviert werden und der Dienst wird im Admin Interface ausgegraut.)
Die Arbeit an den statischen Inhaltsseiten (z.B. Impressum, Über uns etc.) kann also direkt beginnen und es muss nicht erst noch etwas manuell freigeschaltet oder angebunden werden.

Strapi-Funktionen abhängig von Berechtigungen

Je nachdem, welche Rollen einem Nutzer im Admin Interface (Autor, Bearbeiter, Admin) zugewiesen wurden, werden ihm auch dazu passende Funktionen in der Benutzeroberfläche angezeigt.
Damit können Sie genau steuern, welche Nutzer Inhalte bearbeiten oder veröffentlichen können und welche Nutzer Zugriff auf weitere Funktionen und Einstellungen haben.

URL-Struktur für Inhaltsseiten

Wie auch bei allen anderen Arten von Shopseiten können Sie im Admin Interface auch über die URL-Struktur der Inhaltsseiten, die mit Strapi erstellt wurden, bestimmen. Standardmäßig ist die URL vorgegeben, kann von Ihnen jedoch beliebig angepasst werden, wobei das System auch darauf achtet, dass es nicht zu Duplikaten kommt.

Darstellung der Inhalte im Shop-Frontend

Alle in Strapi erstellen Inhalte werden als JSON-Datei über die Template-Engine in die gewünschten Shop-Templates integriert. Über die Templates kann das Design der Inhalte völlig flexibel gestaltet werden und damit ganz nach Ihren Vorstellungen im Shop angezeigt werden.
Sie können Texte und andere Inhalte in Ihrem Shop ganz einfach selbst ändern- das Design wird über Templates gesteuert, weshalb Sie sich darum keine Gedanken machen müssen.

Standardmäßig enthaltene Inhaltskomponenten

Direkt zu Beginn sind in Strapi bereits bestimmte Inhaltskomponenten enthalten, die auch schon in den standardmäßig ausgelieferten Shop-Templates integriert sind. Pflegen Sie also eigene Texte und Inhalte in diese Standard-Komponenten ein, werden diese automatisch im Shop ausgespielt.
Ohne Mehraufwand können Sie bereits mit den Standard-Komponenten viel erreichen und Ihren Shop schnell mit Content befüllen.