Overview
In this guide, you’ll learn how to create a Shopware App using the App Server, enabling seamless integration with Shopware’s ecosystem. We’ll walk you through setting up your Shopware App, configuring it to communicate with an external backend server, and ensuring smooth data exchange.
Prerequisites
If you are not familiar with the app system, take a look at the App concept first.
Step-by-Step Process of Shopware App Creation
Step: 1 Creating a Basic Shopware App
Create a Shopware App Directory: Start by creating a new directory for your app within the custom/apps directory of your Shopware installation. Give your app a suitable name, such as “MyExampleApp”.
└── custom
├── apps
│ └── MyExampleApp
│ └── manifest.xml
└── plugins
Manifest file:
The manifest file is the core component of your app. It defines the interface between your app and the Shopware instance and provides all the essential information about your app, as illustrated in the minimal version below:
// manifest.xml
<?xml version=”1.0″ encoding=”UTF-8″?>
<manifest xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”https://raw.githubusercontent.com/shopware/shopware/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>
Add Your App Logo:
Create a new folder named Resources/config within the MyExampleApp directory. Then, copy your app logo file (e.g., plugin.png) into the Resources/config folder.
Install and Activate the App: Use the Shopware CLI to install and activate your app. From the root directory of your Shopware installation, run the following command:
Step: 2 Creating an App Server with Symfony and the Shopware App Bundle
Create a New Symfony Project: Begin by creating a new Symfony project with the following command:
composer create-project symfony/skeleton:”6.6.*” my-app
Install the App Bundle in your Symfony Project: Navigate to the project directory and install the Shopware App Bundle using Composer.
composer requires shopware/app-bundle
- Update the Database Details: Open the .env file in your Symfony project and update the DATABASE_URL parameter with your actual database connection details.
- Generate Migration Files: Install the necessary packages to generate migration files:
composer requires symfony/maker-bundle –dev
composer requires migrations
Generate the migration files using the following commands:
php bin/console make: migration
php bin/console doctrine:migrations: migrate
- Run the App Server: You can start the Symfony app server using the following command:
symfony server:start
This will run your app server at http://127.0.0.1:8000 by default.
Step: 3 Connecting Shopware and the App Server
Open the Shopware manifest.xml file: Locate the manifest.xml file in your Shopware app project and add the following code inside the <setup> section:
<setup>
<registrationUrl>http://127.0.0.1:8000/app/lifecycle/register</registrationUrl>
<secret>TestSecretCode</secret>
</setup>
- Update the App Server Environment File: Open the environment file (usually .env) of your app server (Symfony project). Update the following lines: ###> shopware/app-bundle ###
SHOPWARE_APP_NAME=ICTAPP
SHOPWARE_APP_SECRET=ICTSecretCode
- Reinstall the Shopware App or Clear Cache: After making the changes, reinstall your Shopware app or clear the cache to apply the updates.
- Verify the Shop Table in the Database: Once the app is reinstalled, check the shop table in your app server’s database to ensure that the Shopware app’s details are correctly inserted.
By following these steps, you will successfully set up the app server and connect Shopware with your app server. You can now begin developing and integrating your app with Shopware.
Step: 4 Creating a Custom Page in the App Server (Symfony) and Connecting it to Shopware
- Create a Controller: Generate a new controller file by running the following command in your terminal:
- symfony console make:controller HomeController
- Define a Custom Function in the Controller: Open the HomeController file and add a custom function. For example, let’s add a function named home:
<?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('/homepage', name: 'home_app')]
public function home(): Response
{
$data = 'Hello,This is a custom home page!';
return new Response($data);
}
}<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>
Open your browser and navigate to {BASEURL}/home, where {BASEURL} is the base URL of your app server (e.g., http://127.0.0.1:8000). You should see the output of your custom page.
- Install the Twig Bundle: Run the following command to install the necessary dependencies and configure Twig for your Symfony project:
bash
Copy code
composer requires symfony/twig-bundle - Create the Twig Template: Inside the templates folder (located in the src directory), create a new Twig template file named index.twig.html. Customize the content of the template according to your requirements. For example:
<!DOCTYPE html>
<html>
<body>
<h2>New Home</h2>
</body>
</html>
- Update your HomeController: Open the HomeController file and update the home function to render the Twig template we created earlier. Here’s an example:
public function home(): Response
{
return $this->render(‘index.html.twig’);
}
Step:5 Connect the Interface to Shopware
Open the manifest.xml file of your Shopware app (MyExampleApp).
Inside the <admin> section, add the following code:
<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>
- Clear the Cache or Reinstall Your App: To ensure that the changes in the manifest.xml file take effect, clear the cache or reinstall your app.
- Verify the Interface Integration: After clearing the cache or reinstalling your app, a new menu item should appear in the admin sidebar under the specified parent menu. It should be labeled as “New Menu” (or the corresponding label in the specified language.
If the iframe template does not load, make sure the following script tag is present in your app server’s index file (usually src/templates/index.html.twig):
Conclusion
In this guide, you’ve completed the Shopware App Development process, from Shopware installation to integrating with an external backend via App Server. By setting up your app, configuring the manifest, and connecting it to Symfony, you’ve created a seamless integration.
Bhavya Shah
Bhavya Shah is a Business Analyst at iCreative Technologies. He specializes in the eCommerce consulting for all business domains. He is working hand-in-hand with developers and clients to produce requirements and specifications that accurately reflect business needs and are technologically achievable.
