Dein erstes Theme im Community Store in 4 Schritten

Dein erstes Theme im Community Store in 4 Schritten

Alexander Wolf 05. September 2015 2

Wochenlange Arbeit, Blut und Schweiß, eure ganze Energie. Alles gegeben für eine einzige Sache: Das erste Theme im Community Store!

So viel Energie und Leidenschaft reingepumpt.

Wochenlang an eurem Theme gearbeitet.

Es wird Zeit sich zu verabschieden.

Ganz so dramatisch ist es nicht.

Wir sollten uns sogar freuen.

Das Theme erblickt sozusagen das erste Mal das Licht der Welt oder in diesem Fall den Community Store.

Wie läuft das nun ab?

Schwer ist es nicht. Ihr merkt schon: Shopware ist ein geniales und super einfaches System.

Es sind nur 4 Schritte:

Lasset die Spiele beginnen.

1. Theme erstellen

Zuerst müssen wir das Theme bauen. Wochenlang daran arbeiten.

Ihr habt noch nicht angefangen und wisst gar nicht wie? Schaut bei http://8mylez.com/blog/shopware-5-theme-erstellen/ vorbei.

Unsere ganze freie Zeit investieren.

Es hegen und pflegen.

Pure Leidenschaft.

2. Vertrag mit Shopware

Wenn wir im Community Store etwas verkaufen wollen, müssen wir mit Shopware einen Vertrag abschließen und werden somit Community Store Partner.

Als erstes erstellt ihr einen Account (oder habt es wahrscheinlich schon). Einloggen auf https://account.shopware.com

In der linken Navigation klickt ihr auf "Plugin-Verwaltung". Da könnt ihr dann den Vertrag runterladen, ausdrucken, unterschreiben, einscannen und wegschicken.

Sobald Shopware eine unterschriebene Kopie zurück schickt, seid ihr dabei!

Yippie!

So I Guess You Can Say Things Are Getting Pretty Serious

3. Plugin erstellen

Es wird wieder technisch.

Das Theme ist ein Plugin, welches installiert wird und dann das Theme ins System einbindet.

Wir bauen uns ganz einfach ein Plugin mit allen nötigen Daten.

Plugin Aufbau

So ein Plugin hat einen bestimmten Aufbau, sonst kann Shopware damit nicht umgehen.

Frontend
 └── 8mzFlatResponsiveTheme
      ├── Themes
      │   └── Frontend
      │       └── FlatResponsive
      │            ├── preview.png
      │            ├── Theme.php
      │            └── frontend
      ├── Bootstrap.php
      └── plugin.png

Jeder Entwickler hat ein Kürzel, sodass keine Konflikte mit den Namen entstehen.

In diesem Fall ist unser Entwicklerprefix "8mz" und das Plugin heißt "FlatResponsiveTheme".

Die Datei "plugin.png" ist das icon welches im Backend zu sehen sein wird (wenn das Plugin installiert wird).

In dem Ordner "FlatResponsive" ist alles für unser Theme drin, sowie auch die Theme.php.

Bootstrap.php

Wir haben unser exklusives Flat Responsive Theme in den Community Store gepackt.

So schaut unsere "Bootstrap.php" aus:

class Shopware_Plugins_Frontend_8mzFlatResponsiveTheme_Bootstrap extends Shopware_Components_Plugin_Bootstrap
{
    public function getLabel()
    {
        return 'FlatResponsive Theme';
    }
    public function getVersion()
    {
        return "1.0.0";
    }
    public function getInfo()
    {
        return array(
            'version' => $this->getVersion(),
            'label' => $this->getLabel(),
            'supplier' => '8mylez',
            'description' => 'Flat Style Theme mit dem Responsive Theme als Basis',
            'support' => 's@8mylez.com',
            'link' => 'http://8mylez.com'
        );
    }
}

Wichtig ist, dass der Plugin Name mit dem Ordnernamen zusammenpasst, d.h. der Klassenname sieht bei uns "Shopware_Plugins_Frontend_8mzFlatResponsiveTheme_Bootstrap".

Und der dazugehörige Ordnername für das Plugin ist dann "8mzFlatResponsiveTheme".

Macht irgendwie Sinn, oder?

4. Hochladen und Freuen

Als letztes noch ganz einfach hochladen im Community Store unter eurem Account.

Das Plugin müsst ihr dann noch in eine Zip Datei packen. Dabei bitte auf dem Mac nicht den mitgelieferten Komprimierer nutzen. Wieso?

Wir haben Keka benutzt und alles funktioniert einwandfrei.

Links in der Navigation auf "Plugin-Verwaltung" und "Plugin-Übersicht" und auf den fetten Button "Neues Plugin hochladen".

Jetzt nur noch alles eintragen (müsst euch da durchklicken) und die Freigabe beantragen.

Euer Theme wird von einem netten Shopware Mitarbeiter überprüft und dann freigegeben.

Mit diesen 4 einfachen Schritten bekommt ihr euer Theme in den Community Store.

Zusammenfassung

Wir haben uns angeschaut wie wir unser geliebtes Theme in den Community Store bekommen. Dabei haben wir einen Vertrag mit Shopware abgeschlossen, das Plugin für unser Theme entwickelt und dieses anschließend im Community Store hochgeladen.

Troubleshooting

.DS_Store

Auf dem Mac findet ihr öfter mal solche lustigen Dateien. Da stehen Informationen zum Ordner drin. Die dürfen/sollen nicht mit ins Plugin.

Einfach mit einem Editor (Atom.io oder Sublime) per Hand rauslöschen oder komplett abschalten: http://osxdaily.com/2009/12/31/what-is-a-ds_store-file/

__MACOSX

Wenn ihr die Zip Datei auf dem Mac mit dem mitgelieferten Komprimierer (Rechtsklick > komprimieren) erstellt, dann kann es zu einer Fehlermeldung beim Review Prozess seitens Shopware kommen. Es wird ein Order "__MACOSX" erstellt, was gar nicht gut ankommt.

Ist super spannend und könnt ihr euch hier nochmal genauer anschauen.

Wir haben Keka benutzt und alles funktioniert einwandfrei.

Weitere Links

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

2 Kommentare

  • Hello Alexander,
    I know your tutorials are in german but I have learnt from them with the help of google translate :)
    I am new to the world of shopware. I am writing a google tag manager plugin code, but the problem is that the google javascript has to be immediately after the body tag and cannot be inside any other html elements. I am wondering how i can insert it in the frontend/index/index.tpl because there are no blocks between the body tag and the . Please help. Thanks :)
  • Hello Fred,

    thank you! We are planning to start with some english content, too :)

    What about the {block name="frontend_index_header_javascript"} block?

    Or maybe {block name='frontend_index_after_body'} block?

    I think this is exactly what you are looking for!

    Best,
    Alexander

Was denkst du?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Logo Größe anpassen mit Less für Shopware 5
Plugin Theme anpassen
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Theme: Eigenes Listing Layout erstellen
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Staging Umgebung – Was ist das und warum brauchst du eine?
© 2017 by 8mylez. Powered by Goltfisch GmbH.