How To Create a Shopware App – Newsletter Subscriber App Example

Before we start with the steps to create a Shopware app, you need to know what are Shopware app and plugin. Moreover, it’s important to understand the difference between a Shopware app and a plugin. 

You can get the entire relevant detail about the Shopware app and plugins in our last blog. 

First, let’s understand the file structure for developing an app.

File Structure:

Like plugins we can created an app using these steps:

1)  We need to put our apps in the custom -> apps folder

2) Create a folder for app name (The name of the folder must be the name of the app, we have to give it in manifest.xml file).

3) Create a manifest.xml file in our app folder which is like a composer.json file for our app we need to define everything in our manifest.xml file.

Now we will discuss about our app’s manifest file.

Manifest.xml

<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-1.0.xsd">
<meta>
<name>EmizenTech_Newsletter</name>
<label>Emizentech Newsletter</label>
<label lang="de-DE">Häufig gestellte Fragen zu Emizentech</label>
<description>A description</description>
<description lang="de-DE">Eine Beschreibung</description>
<author>Emizentech Private Ltd.</author>
<copyright>(c) by Emizentech Private Ltd.</copyright>
<version>1.0.1</version>
<license>MIT</license>
</meta>
<setup>
<!--  This URL will be fired on app installation. -->
<registrationUrl>https://emizentechapp-example.com/registration</registrationUrl>
<!--  Secret key for app setup -->
<secret>a00e013e-f168-4bad-b603-ddb1dbd43be1</secret>
</setup>
<permissions>
<!--  request each permission your app needs  -->
<read>product</read>
<create>product</create>
<update>product</update>
<read>newsletter_recipient</read>
<create>newsletter_recipient</create>
<update>newsletter_recipient</update>
<read>sales_channel_domain</read>
<create>sales_channel_domain</create>
<update>sales_channel_domain</update>
<read>sales_channel</read>
<create>sales_channel</create>
<update>sales_channel</update>
</permissions>
<!-- webhooks URL will be fired on events -->
<webhooks>
<webhook name="newsletter-register" url="https://emizentechapp-example.com/api/register-newsletter" event="newsletter.register"/><!-- This event will be fired on when user will register for our newsletter -->
<webhook name="newsletter-unsubscribe" url="https://emizentechapp-example.com/api/unsubscribe-newsletter" event="newsletter.unsubscribe"/> <!-- This event will be fired on when user will unsubscribe from our newsletter -->
<webhook name="app-deactivated" url="https://emizentechapp-example.com/api/app-deleted" event="app.deactivated"/><!--  This event will be fired when user will deactivate our app -->
<webhook name="app-activated" url="https://emizentechapp-example.com/api/app-installed" event="app.activated"/> <!--  This event will be fired when user will activate our app -->
</webhooks>
<admin>
<!--  replace local  urls with real ones  -->


//Admin Module will be created using module tag
<module name="List" source="https://emizentechapp-example.com/iframe/subscriberslist">
<label>Newsletter list</label>
<label lang="de-DE">Newsletter-Liste
</label>
</module>
<main-module source="https://emizentechapp-example.com/iframe/subscriberslist"/>
</admin>
</manifest>

In the above example we have covered all massive pieces of our app, now will discuss these pieces one by one to understand our app:

meta tag: In this tag, our app’s meta information will be given like app name, app label, description, author, copyright, version, license.

Setup tag: In this tag, we will define our registration URL to which we want to connect our app and on the installation of our app this URL will be fired and our app will connect.

For example:  “https://emizentechapp-example.com/registration” this is our registration URL and on installation URL will be fired “https://emizentechapp-example.com/registration?shop-id=KIPf0Fz6BUkN&shop-url=http%3A%2F%2Fmy.shop.com×tamp=159239728”.

Also, In the setup tag one more tag is important which is “secret” this will be given by the Shopware merchant account as when we will try to publish our app we will need this secret key so that Shopware will know this is our app and secret that is used to sign the registration request.

Permissions: In the permissions tag, we need to define the entities which we need to access and also how we will need it like create, update, delete or read. i.e, our app is based on a newsletter so we will need  the newsletter entity update or insert a new record or fetch all newsletters

Webhooks: With webhooks, you are able to subscribe to events occurring in Shopware. Whenever such an event occurs a POST request will be send to the specified URL.

Every time a Shopware event is fired and you want to add your custom logic on that event you can easily add a webhook on that event and add your logic on that webhook api.

For example:  “https://emizentechapp-example.com/api/register-newsletter” this is our webhook URL which will be fired on this event “newsletter.register” and there are much more events in Shopware you can read about it in detail here

Note: “app.activated” and  “app.deactivated” are App Lifecycle Methods, you can read it in detail here  

Admin: If you want to add a custom module or extend an existing one in admin using the app, you can add the admin tag but this is the optional case in our example we have added a new module that showed our newsletter listing using an iframe in (main-module source).

Conclusion 

We hope you are clear with the steps to develop a Shopware app for your online business. So, follow these and build a Shopware app meeting your business objectives. 

If you have any relevant queries regarding Shopware development services, you can connect with us. Our team will be more than happy to serve you the best.