Styling Anpassungen (CSS)

In diesem Artikel erklären wir Ihnen, wie Sie Ihre App nach Belieben mit CSS gestalten können.

Überblick

Viele Styling-Anpassungen für Ihre App können Sie ohne tiefgreifende Code-Anpassungen durchführen. Dafür 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.

Anschließend erhalten Sie in Ihrem Shopgate Händlerbereich die neue Option "Deployment":

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

Wählen Sie im in der Extension-Liste 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 oder Safari Dev-Tools untersuchen oder - sofern vorhanden - eine Developer Sandbox App verwenden.

Option 1: Live App

Um Ihre Live-App einzusehen, führen Sie abhängig von Ihrem Endgerät folgende Schritte durch:

Android-App:

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

iOS-App:

1. Zunächst müssen Sie auf Ihrem iOS-Gerät erlauben, dass Webinformationen von Ihrem Desktop-Safari ausgelesen werden können. Gehen Sie dazu in Ihre Einstellungen > Safari > Erweitert und aktivieren Sie "Webinformationen".
2. Schließen Sie das Gerät per Kabel an Ihr MacOS-Gerät an, öffnen Sie Safari und klicken Sie in der oberen Navigationsleiste auf "Entwickler". Hier sollte ihr gekoppeltes Gerät erscheinen.
   
3. Öffnen Sie Ihre App auf Ihrem iOS Gerät. Diese sollte nun als Debugging-Option erscheinen.
   
4. Nun können Sie im Safari durch die Elemente der App navigieren
   

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 ermöglichen, wird eine bestimmte 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.

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 auch Klassen nutzen, die nicht eindeutig sind?

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 für Sie ergänzen können.