Schritt-für-Schritt-Anleitung: So erstellen Sie eine Shopware-App mit AppServer

Shopware hat sich zum beliebten integrierten Tool zum Erstellen von Online-Shops und Apps entwickelt. Die Einfachheit von Shopware macht es auch für Benutzer ohne technische Vorkenntnisse zugänglich, sodass sie die Plattform einfach nutzen und beherrschen können, was die Liste der Vorteile noch weiter erweitert. In diesem Beitrag schauen wir uns an, wie man mit Symfony und dem Shopware App Bundle eine einfache Shopware-App erstellt und einen App-Server einrichtet. Wir gehen die Vorgehensweise zur Entwicklung einer Shopware-App durch.

Sie können Ihre eigene App mit Shopware erstellen und integrieren, indem Sie diesen Schritten folgen:

 

Schritt 1: Erstellen einer einfachen Shopware-App

 

• Erstellen Sie ein Shopware-App-Verzeichnis: Beginnen wir mit der Erstellung eines neuen Verzeichnisses für Ihre App im Verzeichnis „custom/apps“ Ihrer Shopware-Installation. Wählen Sie einen passenden Namen für Ihre App, z. B. „MyExampleApp“.

Beispielverzeichnisstruktur:

 

└── Benutzerdefiniert

└── Apps

└── MyExampleApp

└── manifest.xml

 

• Definieren Sie die Datei manifest.xml: Die Datei manifest.xml dient als Kern Ihrer App und definiert die Schnittstelle zwischen Ihrer App und der Shopware-Instanz. Es enthält wichtige Informationen zu Ihrer App. Öffnen Sie die Datei manifest.xml und fügen Sie den folgenden Code hinzu:

<?xml version="1.0" encoding="UTF-8"?>
<manifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/trunk/src/Core/Framework/App/Manifest/Schema/manifest-2.0.xsd">
    <meta>
        <name>MyExampleApp</name>
        <label>Label</label>
        <label lang="de-DE">Name</label>
        <description>A description</description>
        <description lang="de-DE">Eine Beschreibung</description>
        <author>Your Company Ltd.</author>
        <copyright>(c) by Your Company Ltd.</copyright>
        <version>1.0.0</version>
        <icon>Resources/config/plugin.png</icon>
        <license>MIT</license>
    </meta>
</manifest>

• Fügen Sie Ihr App-Logo hinzu: Erstellen Sie einen neuen Ordner mit dem Namen „Resources/config“ im Ordner „MyExampleApp“. Kopieren Sie Ihre App-Logodatei (z. B. „plugin.png“) in den Ordner „Resources/config“.
• Installieren und aktivieren Sie die App: Nutzen Sie die Shopware-CLI, um Ihre App zu installieren und zu aktivieren. Führen Sie im Stammverzeichnis Ihrer Shopware-Installation den folgenden Befehl aus.
• bin/console app:install –activate MyExampleApp

Schritt 2: Erstellen eines App-Servers mit Symfony und dem Shopware App Bundle

• Erstellen Sie ein neues Symfony-Projekt: Erstellen Sie zunächst ein neues Symfony-Projekt mit dem folgenden Befehl:

Composer Create-Project Symfony/Skeleton: „6.2.*“ My-App

• App Bundle installieren: Navigieren Sie in das Projektverzeichnis und installieren Sie das Shopware App Bundle mit Composer:

cd meine-app

Composer benötigen Shopware/App-Bundle

• Aktualisieren Sie die Datenbankdetails: Öffnen Sie die .env-Datei in Ihrem Symfony-Projekt und aktualisieren Sie den Parameter DATABASE_URL mit Ihren tatsächlichen Datenbankverbindungsdetails.
• Migrationsdateien generieren: Installieren Sie die erforderlichen Pakete, um Migrationsdateien zu generieren:

Komponist benötigt Symfony/Maker-Bundle –dev

Komponisten erfordern Migrationen

Generieren Sie die Migrationsdateien mit den folgenden Befehlen:

php bin/console make: Migration

php bin/console doctrine:migrations: migrieren

• Führen Sie den App-Server aus: Sie können den Symfony-App-Server mit dem folgenden Befehl starten:

Symfony-Server:Start

Dadurch wird Ihr App-Server standardmäßig unter http://127.0.0.1:8000 ausgeführt.

 

Schritt 3: Shopware und App-Server verbinden

• Öffnen Sie die Shopware-Datei manifest.xml: Suchen Sie die Datei manifest.xml in Ihrem Shopware-App-Projekt und fügen Sie den folgenden Code im Abschnitt <setup> hinzu:

<setup>

    <registrationUrl>http://127.0.0.1:8000/app/lifecycle/register</registrationUrl>

    <secret>TestSecretCode</secret>

</setup>

• Aktualisieren Sie die App-Server-Umgebungsdatei: Öffnen Sie die Umgebungsdatei (normalerweise .env) Ihres App-Servers (Symfony-Projekt). Aktualisieren Sie die folgenden Zeilen:
• ###> Shopware/App-Bundle ###SHOPWARE_APP_NAME=MeineBeispielAppSHOPWARE_APP_SECRET=TestSecretCode###< Shopware/App-Bundle ###
  • Installieren Sie die Shopware-App neu oder leeren Sie den Cache: Nachdem Sie die Änderungen vorgenommen haben, installieren Sie Ihre Shopware-App neu oder leeren Sie den Cache, um die Updates anzuwenden.
  • Überprüfen Sie die Shop-Tabelle in der App-Server-Datenbank: Nach der Neuinstallation der App können Sie überprüfen, ob die Details der Shopware-App in die Shop-Tabelle der Datenbank Ihres App-Servers eingefügt werden

  Mit diesen Schritten haben Sie den App-Server erfolgreich eingerichtet und Shopware mit Ihrem App-Server verbunden. Jetzt können Sie mit der Entwicklung und Integration Ihrer App mit Shopware beginnen.

 

Schritt 4: Erstellen einer benutzerdefinierten Seite im App Server (Symfony) und Verbinden mit Shopware 

• Erstellen Sie einen Controller: Erstellen Sie eine neue Controller-Datei, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

Symfony-Konsole make:controller HomeController

• Definieren Sie eine benutzerdefinierte Funktion im Controller: Öffnen Sie die HomeController-Datei und fügen Sie eine benutzerdefinierte Funktion hinzu. Fügen wir zum Beispiel eine Funktion namens home hinzu:

 

• <?php
  
  namespace App\Controller;
  
  use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
  
  use Symfony\Component\HttpFoundation\Response;
  
  use Symfony\Component\Routing\Annotation\Route;
  
  
  
  class HomeController extends AbstractController
  
  {
  
      #[Route('/home', name: 'home_app')]
  
      public function home(): Response
  
      {
  
          $data = 'Hello, this is my custom page!';
  
          return new Response($data);
  
      }
  
  }<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>

  • Greifen Sie auf die benutzerdefinierte Seite zu: Öffnen Sie Ihren Browser und besuchen Sie {BASEURL}/home, wobei {BASEURL} die Basis-URL Ihres App-Servers ist (z. B. http://127.0.0.1:8000). Sie sollten die Ausgabe Ihrer benutzerdefinierten Seite sehen.
  • Erstellen einer Twig-Datei: Installieren Sie das Twig-Bundle, indem Sie den folgenden Befehl ausführen

  Komponist benötigt Symfony/Twig-Bundle

  Dadurch werden die erforderlichen Abhängigkeiten installiert und Twig für Ihr Symfony-Projekt konfiguriert.

  • Erstellen Sie die Twig-Vorlage: Erstellen Sie im Ordner templates (im src-Verzeichnis) eine neue Twig-Vorlagendatei mit dem Namen index.twig.html. Passen Sie den Inhalt der Vorlage Ihren Anforderungen entsprechend an. Zum Beispiel:

<!DOCTYPE html>

<html>

<body>

    <h3>My new page</h3>

</body>

</html>

• Aktualisieren Sie Ihren HomeController: Öffnen Sie die HomeController-Datei und aktualisieren Sie die Home-Funktion, um die zuvor erstellte Twig-Vorlage zu rendern. Hier ist ein Beispiel:
• öffentliche Funktion home(): Antwort{    return $this->render(‘index.html.twig’);}

Schritt 5: Schnittstelle mit Shopware verbinden

• Öffnen Sie die Datei manifest.xml Ihrer Shopware-App (MyExampleApp).
• Fügen Sie im Abschnitt <admin> den folgenden Code hinzu:

<admin>

    <module name="MyExampleApp" source="http://127.0.0.1:8000/home" parent="sw-marketing" position="50">

        <label>New Menu</label>

        <label lang="de-DE">Neues Menü</label>

    </module>

</admin>

• Leeren Sie den Cache oder installieren Sie Ihre App neu: Um sicherzustellen, dass die Änderungen in der Datei manifest.xml wirksam werden, leeren Sie den Cache oder installieren Sie Ihre App neu.
• Überprüfen Sie die Schnittstellenintegration: Nachdem Sie den Cache geleert oder Ihre App neu installiert haben, sollte in der Admin-Seitenleiste unter dem angegebenen übergeordneten Menü ein neuer Menüpunkt erscheinen. Es sollte als „Neues Menü“ gekennzeichnet sein (oder die entsprechende Bezeichnung in der angegebenen Sprache).
• Wenn die Iframe-Vorlage nicht geladen wird, stellen Sie sicher, dass das folgende Skript-Tag in der Indexdatei Ihres App-Servers vorhanden ist (normalerweise src/templates/index.html.twig):

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20window.onload%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20window.parent.postMessage(%22sw-app-loaded%22%2C%20%22*%22)%3B%0A%20%20%20%20%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

Jetzt können Sie eine benutzerdefinierte Seite in Ihrem App-Server (Symfony) erstellen und diese einfach mit Ihrem Shopware verbinden, um die Integration und Funktionalität innerhalb der Shopware-Verwaltungsoberfläche zu ermöglichen .