Design

Gestalten Sie Ihren mobilen Auftritt mithilfe von Widgets.

Styling Anpassungen (CSS)

Verfügbar für folgende Plattformen:
Shopgate Connect Shopgate Go

 

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.

 

Die Änderungen erfolgen auf eigene Verantwortung und sollten nur von Personen mit technischen Kenntnissen und nach einer Einführung durch Shopgate durchgeführt werden. Wir bitten um Verständnis, dass wir keine Änderungen und ggf. daraus resultierende Probleme supporten 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:

Bildschirmfoto_2021-05-10_um_12.03.34.png

Darüber gelangen Sie in den Bereich zur Konfiguration und dem Deployment von Extensions. Hierüber werden Extensions und die jeweiligen Einstellungen verwaltet.

Bildschirmfoto_2021-05-10_um_12.09.19.png

Wählen Sie im Dropdown auf der rechten Seite die Extension @shopgate-project/content-styling

Hier können Sie Ihr Styling hinterlegen.

Bildschirmfoto_2021-05-10_um_12.11.08.png

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:

  1. 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
  2. Öffnen Sie in Google Chrome chrome://inspect/#devices
  3. Öffnen Sie die App
  4. Unter "Remote Target" sehen Sie die Webview der App und können diese via "inspect" öffnen
  5. Hier können Sie nun die einzelnen Elemente der App anwählen und die notwendigen CSS Selektoren heraus suchen

Bildschirmfoto_2021-05-10_um_13.50.39.png

 

Bildschirmfoto_2021-05-10_um_13.51.11.png

 

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.

Bildschirmfoto_2021-05-10_um_14.02.53.png

 

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:

Bildschirmfoto_2021-05-10_um_14.03.00.png

 

 

Bildschirmfoto_2021-05-10_um_14.03.14.png

Wichtig: Ändern Sie hier keine Einstellungen! Änderungen hier können direkte Auswirkungen auf Ihre Live-App haben. Drücken Sie nur "DEPLOY"

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.

 

Capture_2021-05-10_at_10.59.37.png

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:

Capture_2021-05-10_at_11.11.25.png                                    Capture_2021-05-10_at_11.10.33.png

 

 

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.

War dieser Beitrag hilfreich?
Sie finden nicht, was Sie suchen?
Wir helfen Ihnen gerne — erstellen Sie ein Support-Ticket.
Kontaktieren Sie den Support