Template containers

This tutorial will introduce you to template containers. We will develop a small plugin that provides the data for displaying a placeholder image and text in a container of the template plugin. You will also learn about the plugin containers in Ceres and all options to integrate your own content in the template.

Step 1: Installing the template

If you haven't already set up a template in your plentymarkets system, do it before you start developing the template container plugin. In this way, you have your test environment ready and can directly check your coding output.

Step 2: Creating the plugin files

Our plugin is of the template type and integrates with the Ceres template, i.e. our plugin consists of core features saved in the src folder and design features saved in the resources folder. Our plugin also requires a plugin.json file and a config.json file.

Placeholder/
    ├── resources/
    │   ├── images/
    │   │   └── placeholder.png // placeholder image file
    │   │
    │   └── views/
    │       └── content/
    │           └── Placeholder.twig // template for the placeholder image and text
    ├── src/
    │   ├── Containers/
    │   │   └──PlaceholderContainer.php
    │   │
    │   └── Providers/
    │       └── PlaceholderServiceProvider.php
    │
    ├── config.json // admin's plugin options
    └── plugin.json // plugin information

Step 3: Filling the source files

Our plugin consists of 6 files in total. Two JSON files, the plugin.json and the config.json, two PHP files, a ServiceProvider and a Container with the source code of the plugin, as well as a Twig template and an image file. Create these files and copy the code examples.

Code for the plugin.json

Placeholder/plugin.json
{
    "name"                  :"Placeholder",
    "description"           :"Template container placeholder plugin",
    "namespace"             :"Placeholder",
    "author"                :"Your name",
    "keywords"              : ["container", "placeholder", "template"],
    "type"                  :"template",
    "require"               : [],
    "serviceProvider"       :"Placeholder\\Providers\\PlaceholderServiceProvider",
    "dataProviders"         :
    [
        {
            "key"           :"Placeholder\\Containers\\PlaceholderContainer",
            "name"          :"Placeholder",
            "description"   :"Display a placeholder image and text"
        }
    ]
}

Code for the config.json

Placeholder/config.json
[
    {
        "tab"                         : "Placeholder settings",
        "key"                         : "placeholder.text",
        "label"                       : "Placeholder text",
        "type"                        : "text",
        "default"                     : "This is a placeholder"
    }
]

Code for the ServiceProvider

Placeholder/src/Providers/PlaceholderServiceProvider.php
<?php

namespace Placeholder\Providers;

use Plenty\Plugin\ServiceProvider;

class PlaceholderServiceProvider extends ServiceProvider
{

	/**
	 * Register the service provider.
	 */
	public function register()
	{

	}
}

Code for the PlaceholderContainer

Placeholder/src/Containers/PlaceholderContainer.php
<?php

namespace Placeholder\Containers;

use Plenty\Plugin\Templates\Twig;

class PlaceholderContainer
{
    public function call(Twig $twig):string
    {
        return $twig->render('Placeholder::content.Placeholder');
    }
}

Code for the Placeholder.twig

Placeholder/resources/views/content/Placeholder.twig
{% set placeholderText = config("Placeholder.placeholder.text") %}

<img src="{{ plugin_path("Placeholder") }}/images/placeholder.png">
<h5>{{ placeholderText }}</h5>

Step 4: Entering the placeholder text

After creating the plugin, we have to add our new plugin to the plentymarkets inbox. Then, we enter the placeholder text in the plugin config.

  1. Go to Plugins » Plugin overview.
  2. In the list of plugins, click on Placeholder.
    → The plugin config file will open.
  3. Enter the Placeholder text.
  4. Save the settings.

Looking at the big picture

Now you simply have to link the content from our Placeholder plugin to one or multiple containers of the Ceres template plugin. This can be done in the plentymarkets back end.

  1. Go to the Plugins » Content menu.
    → A list of all plugins that provide data will be displayed.
  2. Activate a container in the Placeholder (Placeholder) area, e.g. the Certified container on the homepage.
  3. Save the settings.

After deploying the plugins, the content of our Placeholder plugin is displayed in the footer of our online store.