Da ist er – unser streng geheimer Shopware 6 Cheatsheet. Hier sammeln wir alle möglichen Code-Schnipsel, die man höchstwahrscheinlich mehr als einmal in seinem Leben verwenden wird. Hier findet man etwas für jeden Geschmack, wenn man sich für Shopware 6, Shopware Plugin Entwicklung und / oder Shopware 6 Theme Entwicklung interessiert.

Diesen Beitrag werden wir ständig erweitern, sodass wir gefundenes Geheimwissen nicht jedes Mal erneut suchen müssen. Wer sich mehr für den Shopware 5 Cheatsheet interessiert kann auf den Link klicken und wird dort fündig werden. Die Liste ist noch relativ leer? Schreib uns ein paar deiner Tipps in die Kommentare, um gemeinsam den besten Shopware 6 Cheatsheet der Welt zu erstellen.

Übersicht – Shopware 6 Cheatsheet

1. In Plugins nach internen Einstellungen abfragen:


So wird beim Super Mega Slider abgefragt, ob bei der Slide Navigation ausgewählt wurde, dass die Navigationspfeile außerhalb der Slides angezeigt werden sollen:

{% if sliderConfig.navigationArrows.value == "outside" %} is-nav-next-outside{% endif %}

Es wird also für die Variable navigationArrows geprüft ob die Option outside gewählt wurden. (Anmerkung vom 28.07.2021: Aktuell ist der Slider noch in der Prüfungsphase)

Und so könnte eine DOPPEL-Abfrage aussehen, in der wir gleich 2 Dinge prüfen, trifft die eine ODER die ANDERE zu – dann wird etwas ausgegeben, wie in diesem Beispiel eine CSS-Klasse:

{% if ( sliderConfig.navigationArrows.value == "outside" ) or ( sliderConfig.navigationArrows.value == "inside" ) %} is-double-cool {% endif %}

2. SCSS Viewport Größen


// AB 576px = SM / SMALL
@include media-breakpoint-down(sm) {}
// AB 768 = MD / MEDIUM
@include media-breakpoint-down(md) {}
// AB 992 = LG / LARGE
@include media-breakpoint-down(lg) {}
// AB 1200 = XL / XTRA LARGE
@include media-breakpoint-down(xl) {}

3. Lighthouse Audit Optimierungen – Accessibility:

Ein wichtiger Teil der Plugin-Erstellung, insbesondere wenn es darum geht sein Plugin in den Community-Store zu bekommen, sind die Werte bei der Prüfung mit dem Lighthouse Audit-Tool. Hier gibt es unterschiedliche Bereiche, unter anderem Accessibility.

3.1 Aria Label

Für Slider Pfeile zum vor und zurücknavigieren:
EN: aria-label="Previous slide"
aria-label="Next slide"
DE: aria-label="Vorheriger Slide"
aria-label="Nächster Slide"

Für Slider Punkte / Zahlen navigation
EN: aria-label="Go to slide {Variable?!}"
DE: aria-label="Gehe zu Seite (oder Slide)"

Für das Pausieren und Starten der Auto-Slide Funktion:
EN: aria-label="Start autoplay"
aria-label="Pause autoplay"
DE: aria-label="Automatisches Rotieren starten"
aria-label="Automatisches Rotieren pausieren"

4. Terminal Cheat-Sheet

Lange habe ich mir vor ihr gesträubt, langsam werden wir aber Freunde... Wer viel lokal mit Shopware arbeitet kommt nicht an diesem prähistorischen Tool vorbei.

KOMPILIEREN

Kompiliert, z.B. die LESS-Dateien (Muss im richtigen Verzeichnis ausgeführt werden)
$ grunt less
Kompiliert die Dateien automatisch nach jeder Änderung
$ grunt watch

VERZEICHNIS-BEFEHLE

Das zeigt an, in welchem Ordner man sich gerade befindet
$ pwd
So wechselt man ins Root Verzeichnis
$ cd
So wechselt man eine Ebene nach oben
$ cd ..
So wechselt man in den Ordner namens stefan (sofern auf der Ebene vorhanden)
$ cd stefan
Zeigt alle Ordner und Verzeichnisse an:
$ ls
Zeigt alle Ordner und Verzeichnisse an + versteckte Dateien
$ ls -a

SOFTWARE SUCHEN

Das zeigt an ob und wenn ja, welche Node.js Version installiert ist.
$ node -v
Das zeigt an ob und wenn ja, welche NPM Version installiert ist.
$ npm -v

SERVER VERBINDUNGEN, BACKUPS, ENTPACKEN & CO.

SSH Zugang mit fiktivem Login bei Hosteurope, mit WP User:
$ ssh wp1071115@wp1071115.server-he.de
SSH Zugang mit fiktivem Login bei Hosteurope, mit FTP User:
$ ssh ftp1071115@ftp1071115.server-he.de
Mit diesem Befehl packt man den Ordner test und kann ihn dann per FTP runterladen:
$ tar cfzv backup.tar.gz test/
Mit diesem Befehl kopiert man die Dateien aus dem Ordner test in den Ordner shop/testumgebung:
$ cp -r test/ shop/testumgebung
Mit diesem Befehl verschiebt / bewegt man die Dateien aus dem Ordner shop/testumgebung in den Ordner /testumgebung:
$ mv shop/testumgebung /testumgebung
Eine Verbindung beenden.
$ exit
Einen Ordner rekursiv löschen
$ rm -r muell
Zip Dateien entpacken
unzip Test.zip
Tar Dateien entpacken
tar xfv Test.tar
Gzip Dateien entpacken
gunzip Test.gz
Bz2 Dateien entpacken
bunzip2 Test.bz2

5. Weiterführende Links

Shopware 6 Cheatsheet [Codebase]
Mehr SCSS, Mixins und Verwendung [Medium]
Backend Formular-Felder Varianten [Shopware Component Library]
Das Wichtigste zur CLI Konsole [Shopware Docs]

Du brauchst Hilfe bei der Umsetzung mit Shopware? Dann setze dich jetzt mit uns in Verbindung.

great2gether Digital Agentur mit Spezialisierung auf Shopware & Marketing Automatisierung. Anonym hat 4,95 von 5 Sternen 40 Bewertungen auf ProvenExpert.com