In diesem Artikel erklären wir Ihnen, wie Sie Ihre App nach Belieben mit CSS gestalten können. Dazu stellen wir für die überwiegenden Komponenten unserer Apps eindeutige Klassen zur Verfügung, auf die Sie via CSS zugreifen und so das Styling der App im Rahmen der Möglichkeiten von CSS beliebig anpassen können.
Überblick
Um das CSS der App beeinflussen zu können, muss ihr Account zunächst freigeschaltet werden. Kontaktieren Sie uns dazu bitte via support-de@shopgate.com
Anschließend erhalten Sie in Ihrem Shopgate Händlerbereich eine neue Option:
Darüber gelangen Sie in den Bereich zur Konfiguration und dem Deployment von Extensions. Hierüber werden Extensions und die jeweiligen Einstellungen verwaltet.
Wählen Sie im Dropdown auf der rechten Seite die Extension @shopgate-project/content-styling
Hier können Sie Ihr Styling hinterlegen.
Um die dazu notwendigen CSS Klassen einsehen zu können, können Sie entweder Ihre Live App mithilfe der Google Chrome Dev-Tools untersuchen oder - sofern vorhanden - eine Developer Sandbox App verwenden.
Option 1: Live App
Bitte beachten Sie dass diese Option nur für die Android-App verfügbar ist. Wir können Ihnen bei Bedarf aber auch das iOS Theme auf Android zur Verfügung stellen. Führen Sie dazu folgende Schritte durch:
- Schließen Sie Ihr Android-Gerät mit an Ihrem Computer an und erlauben Sie USB Debugging. Je nach Gerät werden Sie beim Anschließen gefragt oder müssen die Option in den Geräte-Einstellungen aktivieren
- Öffnen Sie in Google Chrome chrome://inspect/#devices
- Öffnen Sie die App
- Unter "Remote Target" sehen Sie die Webview der App und können diese via "inspect" öffnen
- Hier können Sie nun die einzelnen Elemente der App anwählen und die notwendigen CSS Selektoren heraus suchen
Option 2: Sandbox App
Die Sandbox-App bietet den Vorteil, dass man auch die iOS-App einsehen kann und Änderungen sehr schnell testen kann. Für diese Option sind Entwickler-Kenntnisse notwendig.
Erstellen einer Sandbox App
Mithilfe der Sandbox App können Sie die App im Browser aufrufen und so die vorhandenen Komponenten über den Inspektor des Browsers einsehen und die entsprechenden CSS Klassen entnehmen.
Zum Einrichten einer Sandbox App, folgen Sie den Schritten in der Dokumentation.
https://developer.shopgate.com/introduction/getting-started/set-up-environment
Extension einrichten
Um das Styling in die App zu inkludieren wird eine Extension benötigt. Bitte klonen Sie dazu via Git die folgende Extension in den „extension“ Ordner Ihrer Sandbox App.
https://github.com/shopgate-professional-services/ext-content-styling
In der Extension finden Sie eine Datei namens „extension-config.json“. Über diese wird das neue Styling in die App inkludiert. Dazu muss im „configuration“ Abschnitt der Extension Config der "default" angepasst werden.
Konfiguration der Styling Extension
Um Ihr angepasstes Styling für Ihre Live-App verfügbar zu machen, muss dieses zunächst in der Extension Konfiguration hinterlegt werden. Verwenden Sie dazu das folgende Schema:
{
"styles": {
"<cssSelector>": "<glamorStyleObject>"
}
}
Der <cssSelector> kann jeder valide CC Selector und <glamorStyleObject> ein valides Glamor Style Object sein.
Deployment
Um die Änderungen für Ihre App anzuwenden, müssen diese deployed werden. Die Möglichkeit dazu haben Sie in der neuen Entwickler-Option Ihres Händlerbereichs:
Das Deployment dauert ca. 10 Minuten. Danach sehen Sie Ihre Änderungen sofort.
Beispiel
Starten Sie das Frontend der Sandbox App mit der „ext-content-styling“ Extension und rufen Sie es in Ihrem Browser auf. Sie können dort die Elemente über den Inspektor des Browsers im DOM (Document Object Model) anschauen. In diesem Beispiel wird die Klasse der Produktkarte im Slider "ui-shared__card" aufgezeigt. Verwenden Sie immer die eindeutig benannten Klassen für Ihren Selektor.
Der Selektor muss dann in ein "Glamour Objekt" umgewandelt und in der "extension-config.json" der "content-styling" Extension hinterlegt werden.
Ändern der Farbe der Produktkarte im Slider
Um die Farbe der Produktkarte im Produktslider zu ändern, erstellen wir einen CSS Selektor, wandeln diesen in ein Glamor Objekt um und hinterlegen ihn in der "extension-config.json".
In der Extension Config sieht dies folgendermaßen aus
{
"styles": {
".ui-shared__card": {
"color": "#fff",
"background": "#121212"
}
}
}
Vorher: Nachher:
Beispiele für Klassen:
- Bewertungssterne: ".rating-stars-filled"
- Discount-Badge: ".ui-shared__discount-badge > span"
- Preis: ".price.ui-shared__price"
- Streichpreis: ".price-striked.ui-shared__price-striked"
- iOS Theme - Aktives Tab in Navigation: ".tab-active"
- iOS Theme - Warenkorb-Indikator in Navigation unten: ".theme__tab-bar__cart-item-badge"
- iOS Theme - Merkliste-Indikator in Navigation unten: ".theme__tab-bar__favorites-icon-badge"
- iOS Theme - Warenkorb-Indikator auf Produktseiten: ".theme__app-bar__cart-button-badge"
FAQ
Was ist wenn eine Klasse fehlt?
Steht einmal keine eindeutige Klasse bei einer Komponente zu Verfügung, können Sie von der übergeordneten Komponente ausgehen und den Selektor von dort aus bauen um zur gewünschten Komponente zu gelangen.
Beispiel:
.parent > div
Kann ich nicht eindeutige Klassen nutzen?
Automatisch generierte Klassen wie "css-v9kuon" oder Test-Klassen wie "data-test-id="Navigator"", sollten nicht verwendet werden, da diese sich ohne Vorwarnung ändern können! Sollten für bestimmte Element keine Klassen zur Verfügung stehen kontaktieren Sie uns gerne, sodass wir diese zeitnah ergänzen können.