M-OnlineShop

Aus einem eigenständigen Prototyp entstand eine zusammenhängende Gestaltung für einen bestehenden Shop mit sehr unterschiedlichen Produktbereichen.

• Entwicklung einer ruhigen Farbwelt und einer abgestimmten Typografie mit Manrope und Fraunces. Die rote M-Marke und die tatsächlichen Produktfotos bleiben Teil des Auftritts.
• Neue Startseite mit einem hervorgehobenen Produkt, manuell bedienbarer Auswahl, Themenwelten und weiteren Sortimentseinstiegen. Die Auswahl verwendet reale Shop-Artikel.
• Eigene atmosphärische Bilder für Kategorieeinstiege. Diese Illustrationen dienen der Orientierung und ersetzen keine tatsächlichen Produktabbildungen.
• Gemeinsame Gestaltung für Navigation, Karten, Produktdetail, Formulare und Footer sowie Anpassungen an schmale Bildschirme.

Die Umsetzung erfolgt als eigene MOnlineShop-Child-Theme auf Basis von NOVA. Das vorhandene Shopsystem wird gezielt erweitert.

• Anpassungen in Smarty-Templates, eigenen CSS- und JavaScript-Modulen sowie PHP-Hooks der Theme-Bootstrap. Eltern-Theme und JTL-Kern wurden bei der Umstellung nicht überschrieben.
• Gemeinsame Module für Schrift, Farben, Navigation, Kategorien, Suche, Produktdarstellung, Bestandskennzeichnung, Beschreibungen, Consent und Formulare.
• Vorhandene JTL-Logik bleibt für Artikel, Preise, Varianten, Galerie, Warenkorb und Seiteninhalte zuständig. Es entsteht kein zweiter, losgelöster Produktkatalog.
• Lokale Hilfsfunktionen und Arbeitsdateien wurden aus dem Produktionspaket ausgeschlossen. Die Konfiguration der Testumgebung wurde nicht in den laufenden Shop kopiert.

Die Wege zum Sortiment wurden nicht nur neu gestaltet, sondern an die vorhandenen Shop-Daten und Interaktionen angebunden.

• Eine fixierte Menüleiste bündelt Kategorien, Suche, Konto, Wunschliste und Warenkorb. Beim Scrollen wechselt die große Marke zu einem kompakteren Zeichen mit reserviertem Platz.
• Die Suche öffnet sich innerhalb der Navigation. Desktop-Untermenüs zeigen Bilder und vollständige Kategorienamen; vorhandene Kategorien und Zieladressen werden weiterverwendet.
• Produktempfehlungen werden aus dem realen Sortiment zusammengestellt. Die native JTL-Produktfilterung berücksichtigt die vorgesehenen Regeln für Sichtbarkeit, Verfügbarkeit und Preise.
• Die Produktauswahl lässt sich manuell mit Maus, Tastatur und nativer horizontaler Bewegung bedienen. Auf ein automatisches Durchschalten wurde verzichtet.

Die Produktseite wurde neu geordnet, ohne die bewährten Abläufe durch eine Attrappe zu ersetzen.

• Vertikale Vorschaubilder auf Desktop, eine große Hauptansicht und ein eigenständiger Kaufbereich. Auf Mobilgeräten werden die Bildvorschauen horizontal angeordnet.
• Die native Slick-Galerie und die Vollbildansicht bleiben erhalten. Funktionale Bildwechsel-Buttons erscheinen bei mehreren Fotos; die hier gezeigte Damen-Skijacke besitzt sechs Aufnahmen.
• Die zusätzliche Vergrößerung orientiert sich an den verfügbaren Bildabmessungen. Kleine Ausgangsdateien werden nicht als beliebig hochauflösende Bilder ausgegeben.
• Farbe und Größe sind kompakt angeordnet und bleiben mit den nativen JTL-Varianten verknüpft. Vorhandene Preis-, Verfügbarkeits- und Warenkorbabläufe werden weiterverwendet.
• Bestandskennzeichnungen ergänzen vorhandene native Hinweise. Variantenverfügbarkeit und tatsächlicher Lagerbestand werden nicht pauschal gleichgesetzt.

Ein Teil der sichtbaren Unruhe kam aus mitgelieferten Formatierungen der Produktbeschreibungen. Die Lösung setzt in der Darstellung an.

• Eine eigene Aufbereitung entfernt fremde Inline-Stile, Schriftgrößen, Ausrichtungen und Layout-Markup aus den übernommenen Beschreibungstexten.
• Die erste nichtleere Zeile wird als Überschrift ausgegeben, folgende Textblöcke als normale Absätze. Die Darstellung folgt dadurch der Typografie des Shops.
• Die Ausgabe wird in mehreren Shop-Ansichten wiederverwendet. Gleichlautende Kurz- und Vollbeschreibungen werden im Produktdetail nicht unnötig doppelt gezeigt.
• Die gespeicherten Wawi-Texte und der bestehende Wawi-Anschluss wurden dafür nicht umgeschrieben. Produktgalerie und separat geführte Produktdaten bleiben eigene Bestandteile.
• Rechtliche Seitentexte werden nicht durch diese Produkttext-Aufbereitung verarbeitet.

Auch die Funktionen hinter den Formularfeldern wurden berücksichtigt. Die Anpassung beschränkt sich nicht auf abgerundete Eingaben.

• Neue native Kontakt-Themen für Produktfragen, Bestellungen, Versand, Zahlung, Rückgabe, Reklamation, technische Probleme und Sonstiges. Das vorhandene Thema Barrierefreiheit bleibt erhalten.
• Kontakt und Produktanfrage verwenden eine verpflichtende, anfangs nicht ausgewählte Bestätigung mit Link zur vorhandenen Datenschutzerklärung. Die Pflichtprüfung wird auch serverseitig berücksichtigt.
• Produktanfragen werden vor dem Erzeugen der Nachricht um produktbezogene Angaben wie Artikelnummer und Produktadresse ergänzt. Die Daten stammen aus dem serverseitigen Produktobjekt.
• Eingaben, Auswahlfelder und Buttons der Kontakt- und Widerrufsformulare folgen der gemeinsamen Gestaltung. Die native Verarbeitung bleibt bestehen.
• Dem Widerrufsformular wurde ein Datenschutzhinweis ergänzt, ohne eine zusätzliche Pflicht-Checkbox als Zugangshürde zum Widerruf einzuführen.

Die Gestaltung ist an den vorhandenen JTL Consent Manager angebunden. Es wurde kein paralleles Einwilligungssystem eingeführt.

• Anpassung des nativen Dialogs an die neue Oberfläche und Ergänzung eines erreichbaren Einstiegs zu den Cookie-Einstellungen im Footer.
• Ablehnen und erneutes Öffnen der Einstellungen wurden im veröffentlichten Shop über die tatsächliche Oberfläche geprüft. Nach der Ablehnung blieben die optionalen Auswahlfelder deaktiviert.
• Vorhandene Zahlungs-, Versand- und Plugin-Konfigurationen wurden bei der Designumstellung beibehalten. Es wurden keine neuen Zahlungsleistungen als Teil des Redesigns versprochen.
• Die Funktionsprüfung des Consent-Dialogs ist kein vollständiger Netzwerk- oder Tracking-Audit aller eingebundenen Dienste.

Zur Umstellung gehörte die Abstimmung der öffentlichen Inhalte mit den unterschiedlichen nativen Speicherorten des Shops.

• Übernahme und Abgleich von sieben Informations- und Serviceseiten, öffentlichen Unternehmensangaben und Kontakt-Themen. Veraltete Kontaktdaten wurden in den geprüften öffentlichen Ansichten korrigiert.
• Bei AGB, Datenschutz und Widerruf wurden die nativen Textquellen berücksichtigt und doppelte Inhaltsausgaben bereinigt. Dadurch wird nicht nur ein optisch bearbeitetes Duplikat über den eigentlichen Dokumentinhalt gelegt.
• Im Footer bleiben die maßgeblichen Informations- und Service-Links erreichbar. Steuer- und Versandhinweise sowie die native JTL-Kennzeichnung werden unter ihren bestehenden Bedingungen ausgegeben.
• Der Seitentitel der Widerrufsrechts-Seite wurde separat korrigiert. Die technische Inhaltsübernahme ist keine anwaltliche Prüfung oder Zertifizierung der Dokumente.

Vor der Aktivierung wurde mit einer getrennten Kopie gearbeitet. Diese Vorarbeit ist auf einem Vorher / Nachher-Bild nicht sichtbar.

• Aufbau einer isolierten JTL-Testumgebung, in der Bestellungen, Zahlungen, E-Mails und der produktive Wawi-Austausch nicht versehentlich ausgelöst werden sollten.
• Abgleich von Datenbankstruktur und Indizes der importierten Testkopie mit dem Referenzschema. Fehlende Strukturinformationen wurden in der Testumgebung wiederhergestellt und die Suche erneut geprüft.
• Korrektur der Sitzungskonfiguration in der Testumgebung und getrennte Sitzungsdateien, damit Variantenauswahl und Warenkorb dort zuverlässig geprüft werden konnten.
• Diese Reparaturen und Testschutz-Einstellungen waren Arbeiten an der vorbereitenden Umgebung. Sie wurden nicht pauschal als Datenbank- oder Konfigurationsersatz auf Produktion übertragen.

Die Veröffentlichung war ein eigener technischer Schritt mit Sicherung, Prüfung und klarer Trennung von Design- und Geschäftsdaten.

• Vollständige Datei- und Datenbanksicherung vor der Umstellung; Integrität und Lesbarkeit der Sicherungsarchive wurden geprüft. Rücksetzpunkte für Theme und Inhalte wurden getrennt vorbereitet.
• Registrierung und Prüfung der neuen Theme zunächst über den nativen Testmechanismus des Shops. Erst danach erfolgte die reguläre Aktivierung für den öffentlichen Auftritt.
• Das Theme-Paket wurde auf den bestehenden Produktionskatalog angewendet. Artikel, Preise, Zahlungsarten, Versand, Plugin-Einstellungen und Wawi-Verbindungsdaten wurden über Kontrollsummen auf unveränderten Stand abgeglichen.
• Bestehende Kunden- und Bestelldaten wurden erhalten. Die Testdatenbank wurde nicht über die produktive Datenbank geschrieben.
• Für einen Design-Rollback ist die Rückschaltung der Theme vorgesehen; eine vollständige Datenbankrücksicherung über neu eingehende Bestellungen ist dafür nicht erforderlich.

Die dokumentierten Prüfungen verbinden technische Kontrollen mit tatsächlichen Abläufen im Browser.

• Produktvarianten auswählen, korrekte Variante und Preis im Warenkorb prüfen, einen Testartikel wieder entfernen und den Einstieg in den Checkout öffnen. Es wurde dabei kein Auftrag oder Zahlungsvorgang abgeschlossen.
• Suche nach einem bestehenden Artikel, Wechsel innerhalb einer Galerie mit sechs Fotos, Öffnen und Schließen der Vollbildansicht. Die neue Veröffentlichung ist unter der öffentlichen Hauptadresse erreichbar.
• Kategorieabbildungen, Kontakt-Themen, Pflichtfelder, Footer-Links und die Bedienung der Cookie-Einstellungen wurden in den dokumentierten Ansichten kontrolliert.
• Ausgewählte Desktop- und schmale Browserbreiten wurden auf Darstellung und horizontales Überlaufen geprüft. Das ersetzt keine umfassende Prüfung auf allen physischen Mobilgeräten.
• Ein echter Zahlungsvorgang, der abschließende Bestellversand, die tatsächliche E-Mail-Zustellung und ein vollständiger Wawi-Austausch waren nicht Teil dieser dokumentierten Prüfung.