Shop zusammenstellen tricoma AG
Anleitungen Shopware 5
Anleitungen zu Shopware 5

Hier erfahren Sie alles zu Shopware 5

/modul.php?modul=tutorial&modulkat=bilder&ID=6&name=tut

Einkaufswelt in Shopware 5 erstellen

Inhaltsverzeichnis
  1. Die fertige Einkaufswelt

  2. Navigation zur Einkaufswelt

  3. Eine neue Einkaufswelt erstellen

  4. Der Designer

  5. Einstellungen

  6. Das Layout

  7. Die Elemente

  8. Einkaufswelt-Überschrift hinzufügen

  9. Der Artikelslider

  10. Blog Artikel hinzfügen und konfigurieren

  11. Newsletter Anmeldeformuar erstellen

  12. Die Vorschauansicht

  13. Shopwarecache leeren

  14. Einkaufswelt einer Kategorie zuordnen

  15. Den aktuellen Stand der Webseite begutachten

1. Die fertige Einkaufswelt, welche Sie in diesem Tutorial erstellen werden


Bild 00 -  Die erstellte Einkaufswelt

2. Navigation zur Einkaufswelt (Menüführung):

Um eine neue Einkaufswelt in Shopware 5 anzulegen, fahren Sie mit der Maus oben im Reiter über den Menüpunkt  Marketing.  Anschließend suchen Sie nach dem Eintrag  Einkaufswelten  und klicken dort anschließend darauf.  Siehe nachfolgendes Bild:


Navigation - Bild

3. Eine neue Einkaufswelt erstellen

Als Erstes müssen wir eine neue Einkaufswelt erstellen. Dafür klicken Sie in der  Mitte  Links auf den Button mit dem Plus auf dem Hinzufügen steht. Siehe unteres Bild.


Bild - Eine neue Einkaufswelt erstellen

4. Der Designer

Sie befinden Sich jetzt im Designer. Dort lassen sich viele Einstellungen zur Einkaufswelt treffen.
In diesem Tutorial werden wir allerdings nur auf die hier benötigten eingehen.

Was für Sie hier wichtig ist:

  1. Einstellungen >> Name der Einkaufswelt eintragen
  2. Layout >> Anzahl der Spalten / Zeilen-Abstand / Zeilen-Höhe
  3. Die einfügbaren Elemente >> Text / Artikel-Slider / Blog-Artikel
Siehe untere Bilder

5. Einstellungen

Tragen Sie unter Einstellungen bei Basis-Einstellungen beim Eingabefeld Name,
den Namen z. B. Demoeinkaufswelt ein.
Möchten Sie, dass alle weiteren Produkte dieser K
ategorie mit angezeigt werden, setzen Sie das Häkchen bei "Produkte unter Inhalte anzeigen".


Bild - Der Designer: Einstellungen

6. Layout

Stellen Sie wie im nachfolgenden Bild zu sehen, die

  • Anzahl der Spalten auf  >> 12
  • Zellen-Abstand auf >> 10
  • Zeilenhöhe auf >> 120

Bild - Der Designer: Layout

7. Elemente

Hier sehen Sie alle Elemente, die Sie in das Raster Links per einfachem ″Drag and Drop″ einfügen können.

Das Raster Links stellt die Oberfläche der Webseite da.
Das Raster stellt genauer, das Gridsystem oder die Grid Tabelle des Einkaufsweltcontents  da.
Dieses System ist wichtig um Ihre Einkaufswelt responsive zu machen. Das ist für dieses Tutorial allerdings nicht wichtig.
Den Begriff und was es bedeutet, sollten Sie mal gehört haben.

Die Elemente können auch in Ihrer Höhe und Breite angepasst werden

  • Möchten Sie ein Element z. B. über die komplette Breite (Nicht die komplette Breite der Webseite, nur der Contentteil) setzen, so ziehen Sie es so, dass das Element die ganze Zeile einnimmt.
  • Möchten Sie ein Element in der Höhe verändern, so ziehen Sie es über mehrere Zeilen nach unten oder oben.

Folgende Elemente sind in diesem Tutorial wichtig:

  • Text
  • Artikel
  • Artikel-Slider
  • Blog-Artikel


Bild -  Elemente

8. Einkaufswelt Überschrift hinzufügen

Wenn Sie es noch nicht getan haben, klicken Sie auf den Reiter Elemente mittig am linken Bildschirmrand.
Fahren Sie nun mit der Maus über das Text-Element. Wenn der Kreuzpfeil erscheint, bedeutet es, dass Sie das Element per Drag and Drop in das Raster ziehen können.

  • Einfügen der H1 Überschrift
    1. Halten Sie jetzt die linke Maustaste gedrückt und ziehen Sie das Element nun in die erste obere Zeile
    2. Ziehen Sie anschließend das Element so, dass es über die ganze Zeile geht. Die Höhe bleibt bei einer Zeile
    3. Fahren Sie nun mit der Maus über das Element im Raster. Es erscheinen einige Symbole
    4. Klicken Sie nun auf das Stift Symbol um dem Element Inhalt zu geben und die Einstellungen anzupassen
    5. Da wir eine H1 Überschrift brauchen, klicken Sie nun auf das <> Symbol ganz rechts in der Editor- Leiste
    6. Nun öffnet sich ein weiteres Fenster, in diesem können wir nun HTML Code eintragen. 
    7. Schreiben Sie nun folgendes in das Textfeld und drücken Sie auf aktualisieren: Das h1 bedeutet, dass es sich um eine Headline also eine Überschrift der 1.Ordnung handelt.
      • <h1>Herzlich Willkommen im Demoshop 5 von tricoma solutions
    8. Haben Sie aktualisieren gedrückt, steht nun der obige Text Fett, nur ohne < h1> < /h1> im Editor. 
      Das < h1> Tag 
      hat den Text fettgedruckt und eine bestimmte Größe gegeben
    9. Stellen wir den Text nun Mittig, indem Sie den Text im Editor markieren und auf die Schaltfläche zentrieren drücken.
    10. Setzen Sie anschließend den Haken bei Kein Styling hinzufügen und drücken Sie auf Speichern

  • Einfügen der H2 Überschrift
    1. Fügen Sie wie bei der H1 Überschrift ein neues Text-Element ein und ziehen Sie es über die gesamte Breite in der zweiten Zeile
    2. Fügen Sie nun wie gezeigt mit der Hilfe des HTML Editors folgendes ein und drücken Sie auf aktualisieren
      • < h1> Kaufen Sie hier nichts, denn das ist nur ein Demoshop!
    3. Setzen Sie den Text nun wieder mittig und drücken Sie auf Speichern

  • Einfügen von normalen Lorem Ipsum Text
    1. Fügen Sie ein neues Text-Element wie gezeigt ein.
    2. Gehen Sie auf die Webseite https://www.loremipsum.de/, kopieren Sie sich den Text und fügen Sie diesen in den normalen Editor ein.
    3. Drücken Sie anschließend auf Speichern  

Bild 1 - Text Elemente hinzufügen
Bild 2 - Text Elemente hinzufügen
Bild 3 - Text Elemente hinzufügen
Bild 4 - Text Elemente hinzufügen
Bild 5 - Text Elemente hinzufügen
Bild 6 - Text Elemente hinzufügen
Bild 7 - Text Elemente hinzufügen
Bild 8 - Text Elemente hinzufügen
Bild 9 - Text Elemente hinzufügen

9. Artikel-Slider

Vorausgesetzt Sie haben bereits Artikel erstellt, können Sie mit dem Artikel-Slider verschiedene Artikel nebeneinander anzeigen.
Allerdings nicht wie beim normalen Artikelelement. Sie können so viele Artikel hinzufügen, wie sie möchten.
Ein Slider hat die Eigenschaft, dass er sich automatisch weiter bewegt und neue Artikel, wie in einem Karusell anzeigt. Mit den Pfeilen können die Artikel nach Links und Rechts navigiert werden.
Es gibt auch die Möglichkeit nur Produkte eines bestimmten Listentyps hinzuzufügen.

  • Ausgewählte Artikel
  • Ausgewählte Varianten
  • Newcomer Artikel
  • Topseller 
  • Preis (Aufsteigend)
  • Preis (Absteigend)
  • Product Stream
  • Zufällige Artikel
Für unsere beiden Slider nehmen wir folgende Listentypen
  1. Slider Topseller Artikel
  2. Slider Newcomer Artikel

  • Fügen Sie nun die Elemente in das Raster ein
  • Ziehen Sie sie über die ganze Breite und in der Höhe 2 Zeilen hoch
  • Gehen Sie anschließend in die Einstellungen der Slider und passen Sie diese nach den oben genannten Listentyp an
  • Setzen Sie anschließend bei beiden Slidern den Haken bei "kein Rahmen"
  • Klicken Sie anschließend auf Speichern

Bild  - Artikel-Slider hinzufügen und konfigurieren

10. Blog Artikel hinzufügen und konfigurieren

Um einen Blog-Artikel richtig anzulegen, muss vorher ein Blog erstellt und einer Kategorie hinzugefügt worden sein.

Das Einfügen und Konfigurieren in das Raster funktioniert genau wie bei den anderen Artikeln.
  • Erstellen Sie nun also ein Blog-Element
  • Passen Sie die Einstellungen an, in dem Sie es einer Kategorie zuordnen
  • Tragen Sie die Anzahl an Blogeinträgen ein, die maximal angezeigt werden sollen

Bild - Blog Artikel hinzufügen und konfigurieren

11. Newsletter Anmeldeformular erstellen

Es gibt kein Newsletter oder Formular Element, deshalb brauchen wir hier wieder HTML Code.

  • Erstellen Sie zwei Text Elemente
  • Ziehen Sie das erste bis zur Hälfte und das andere ebenfalls bis zur Hälfte groß, so dass die zwei Text Elemente symetrisch nebeneinaufer auf einer Zeile liegen.
  • Schreiben Sie in das Erste Textelement in den HTML Editor folgendes:
    • < p style="text-align: right;">< input type="email" / >
  • Schreiben Sie in das zweite Text Element
    • < button style="text-align: right;" >Newsletter abonnieren< /button>
  • Am Ende sollte es so aussehen:

Bild-  Newsletter Anmeldeformular erstellen

12. Die Vorschau Ansicht

Über die Vorschau Ansicht bekommt man einen ungefähren Eindruck vom Aussehen der erstellten Einkaufswelt

  • Klicken Sie oben mittig links über dem Raster auf den Schieberegler neben der Vorschau und schauen Sie sich das Ergebnis an

Bild -  Vorschau AnsichtWenn Ihnen die Vorschau gefällt, dann drücken Sie unten Rechts auf den blauen Button "Einkaufswelt speichern".

Bevor Sie jetzt den Shop auf der richtigen Webseite anschauen, leeren wir vorher noch den Shop Cache.

13. Shop Cache leeren

Um Fehler zu vermeiden, sollten wir immer mal den Shop Cache leeren.
Dies geht folgendermaßen

  • Fahren Sie mit der Maus über den Reiter Einstellungen oben Links
  • Anschließend über Caches / Performance
  • klicken Sie nun auf Shop Cache leeren
  • Es dauert nun einen kleinen Moment, dann sollte Rechts oben eine Meldung in einem schwarzen Kasten erscheinen: "Shopware" und Shop Cache wurde geleert

Als Nächstes schauen wir uns den aktuellen Stand der Startseite an

.


Bild - Shop Cache leeren

14. Einkaufswelt einer Kategorie zuordnen

Sie können eine bestimmten Einkaufswelt einer Kategorie zuordnen.

  • Dafür gehen Sie in die Einkaufswelt, die Sie einer Kategorie hinzufügen möchten.
  • Gehen Sie auf den Reiter Einstellungen und zum Abschnitt Anzeige-Einstellungen.
  • Dort klicken Sie auf das erste Eingabefeld.
  • Wenn Sie bereits mehrere Kategorien angelegt haben, werden diese nun untereinander angezeigt.
  • z. B. Deutsch>Hardware bedeutet, dass die Kategorie "Hardware" das Kindelement von "Deutsch" ist.
  • Wählen Sie nun die Kategorie aus, in der Sie diese Einkaufswelt angezeigt bekommen möchten.


Diese Einkaufswelt wird so nicht auf der Startseite angezeigt, sondern nur auf der jeweiligen Kategorie Seite.
Um das zu verstehen muss man wissen, dass die angelegten Kategorien nicht nur Ordner sind, in welchem man die angelegten Artikel einsortieren kann um diese leichter wiederzufinden.
Jede erstellte Kategorie ist eine eigene Unterseite der Startseite. Auf Kategorien und wie man diese anlegt, gehen wir an anderer Stelle genauer ein.


Bild - Einkaufswelt einer Kategorie zuordnen

15. Den aktuellen Stand der Startseite begutachten

Um nun die aktuelle Einkaufswelt Startseite auf der Webseite anzusehen, kopieren Sie die URL und fügen Sie diese in einen Text Editor ihrer Wahl ein.
Anschließend löschen sie den hinteren Teil der URL /backend/.

z.B.
https://demoshop/backend/
https://demoshop.net

Die veränderte URL fügen Sie jetzt in die Adresszeile Ihres Browsers ein und drücken Enter.
Jetzt sollten Sie die fertige Einkaufswelt sehen.

Jetzt sollten Sie die fertige Einkaufswelt sehen.

Glückwunsch, damit haben Sie dieses Tutorial erfolgreich beendet und können nun eigene kleine rein optische Einkaufswelten in Shopware 5 realisieren.

Sven Büttner
Sven Büttner
Link für externe Aufrufe: https://tricoma.de/modul.php?modul=tricoma&modulkat=tutlink&ID=6
© 2020 tricoma solutions