Aneesh . 5 minutes

Step-by-Step Guide: How to create a Shopware app using AppServer

Shopware has emerged as the popular integrated tool for creating online stores and apps. The simplicity of Shopware makes it accessible to users without a technical background, allowing them to easily use and master the platform, further enhancing its list of benefits. In this post, we’ll look at how to use Symfony and the Shopware App Bundle to build a simple Shopware app and set up an app server. We’ll go over the procedures for developing a Shopware app.

You can create and integrate your own app with Shopware by following these steps:

Step 1: Creating a Basic Shopware App

Create a Shopware App Directory: Let us begin with creating a new directory for your app inside the custom/apps directory of your Shopware installation. Choose a suitable name for your app, such as “MyExampleApp”.

Example directory structure:

 

└── custom

   └── apps

      └── MyExampleApp

         └── manifest.xml

 

Define the manifest.xml File: The manifest.xml file serves as the core of your app, defining the interface between your app and the Shopware instance. It contains important information about your app. Open the manifest.xml file and add the following code:

Add Your App Logo: Create a new folder named Resources/config inside the MyExampleApp folder. Copy your app logo file (e.g., plugin.png) into the Resources/config folder.

Install and Activate the App: Utilize the Shopware CLI to install and activate your app. From the root directory of your Shopware installation, run the following command.

bin/console app:install –activate MyExampleApp

Step 2: Creating an App Server using Symfony and the Shopware App Bundle

Create a New Symfony Project: Start by creating a new Symfony project using the following command:

Install the App Bundle: Navigate to the project directory and install the Shopware App Bundle using Composer:

cd my-app

composer require 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:
Generate the migration files using the following commands:
  • 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:

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=MyExampleApp

SHOPWARE_APP_SECRET=TestSecretCode

###< shopware/app-bundle ###

  • Reinstall the Shopware App or Clear Cache: After making the changes, reinstall your Shopware app or clear the cache to apply the updates.
  • Check the Shop Table in the App Server Database: After reinstalling the app, you can verify that the Shopware app’s details are inserted into the shop table of your app server’s database

By following these steps, you will have successfully set up the app server and connected Shopware with your app server. You can now start developing and integrating your app with Shopware.

Step 4: Creating a Custom Page in 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:

  • Access the Custom Page: Open your browser and visit {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.

Creating a Twig File: Install the Twig bundle by running the following command

composer require symfony/twig-bundle

This will install the necessary dependencies and configure Twig for your Symfony project.

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:

Update your HomeController: Open the HomeController file and update the home function to render the Twig template we created earlier. Here’s an example:

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:

  • 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):

Now you can create a custom page in your app server (Symfony) and easily connect it to your Shopware, enabling integration and functionality within the Shopware administration interface.

FAQ

What is AppServer in the context of Shopware app development?

AppServer is a powerful development tool provided by Shopware that allows developers to create custom applications, plugins, or extensions for the Shopware e-commerce platform. It serves as the backbone for app development, enabling seamless integration with Shopware's architecture and functionalities.

What programming languages can I use to create a Shopware app with AppServer?

AppServer primarily supports PHP for backend development and JavaScript (including frameworks like Vue.js) for frontend development. Developers can utilize PHP to create backend logic and process data, while JavaScript is used for building interactive user interfaces and enhancing the app's frontend experience.

Can I integrate custom databases or external APIs into my Shopware app using AppServer?

Yes, AppServer allows seamless integration of custom databases and external APIs into your Shopware app. You can connect your app to external data sources, fetch data, and use it within your application to offer enhanced functionalities to users.

Is it necessary to have prior experience with Shopware development to create an app using AppServer?

While prior experience with Shopware development can be beneficial, it is not a strict requirement. Basic knowledge of PHP, JavaScript, and web development concepts is recommended, as it will help you grasp the Shopware app development process more effectively. The Shopware documentation and community resources can also be valuable learning tools for beginners.

blog
Greetings! I'm Aneesh Sreedharan, CEO of 2Hats Logic Solutions. At 2Hats Logic Solutions, we are dedicated to providing technical expertise and resolving your concerns in the world of technology. Our blog page serves as a resource where we share insights and experiences, offering valuable perspectives on your queries.
Aneesh ceo
Aneesh Sreedharan
Founder & CEO, 2Hats Logic Solutions
Subscribe to our Newsletter
Arsha Contact

    Stay In The Loop!

    Subscribe to our newsletter and learn about the latest digital trends.