In this tutorial, we will develop a basic plugin to display a view in our plentymarkets 7 back end.
Only basic knowledge of creating and editing files in your IDE as well as using plentymarkets is necessary to develop this plugin.
Follow the steps and learn how to create your first view that displays Hello World! in the plentymarkets back end.
In our previous tutorials, you learned how to set up the folder structure for template and payment plugins. Our new plugin has a slightly different structure. You still find the src folder containing the plugin source code. One new piece of the plugin puzzle is the ui folder. Another imperative part for back end plugins is the ui.json
file.
MyFirstView/ ├── src/ │ └── Providers/ │ └── MyFirstViewServiceProvider.php │ ├── ui/ │ └── index.html │ ├── plugin.json // plugin information └── ui.json // back end information
We start by creating the plugin.json
file. We will also need a ui.json
, as well as a ServiceProvider in the src folder of our plugin and a index.html
file in the ui folder. Create these files and copy the code examples.
MyFirstView/plugin.json
{ "name": "MyFirstView", "description": "My first back end view", "namespace": "MyFirstView", "author": "Your name", "type": "backend", "serviceProvider": "MyFirstView\\Providers\\MyFirstViewServiceProvider" }
plugin.json
of this plugin is similar to the other plugins. The code has worked for the other plugins and will work for this plugin, too.
MyFirstView/ui.json
{ "defaultEntryPoint": "index.html", "namespace": "MyFirstView", "menuEntries": [ { "label": "Hello World", "menu": "start", "urlKey": "hello-world", "entryPoint": "index.html" } ] }
ui.json
file.urlKey
sets the route for the view in our plentymarkets back end, e.g. http://your-plentystore.co.uk/plenty/ui-backend/start/hello-world
.entryPoint
, i.e. the plugin file with the content of our view. A simple HTML file will do the job.
MyFirstView/src/Providers/MyFirstViewServiceProvider.php
<?php namespace MyFirstView\Providers; use Plenty\Plugin\ServiceProvider; class MyFirstViewServiceProvider extends ServiceProvider { public function register() { } }
MyFirstView/ui/index.html
<h1>Hello World!</h1>
Saying Hello to the world is nice, but let's take it a step further. We will create a resources folder and add a GIF file that will be linked and shown in our view.
YOUR-FAVOURITE.gif
.
index.html
file.
<img src="../images/YOUR-FAVOURITE.gif">
.
After creating the plugin, we have to add our new plugin to the plentymarkets inbox. Then, we deploy the plugin in a plugin set. Finally, after reloading the plentymarkets back end, go to the Start menu and click on Hello World. Your plugin view will open.