Construction

Creating an add-on

To create an add-on, follow these steps:

1. Create directory structure: Create a new directory for your add-on in the /vendor/<myname>/<myaddon> directory.
2. Add files: Add the necessary files (PHP, JavaScript, CSS, etc.) to implement the desired functionality.
3. Configuration: Create a configuration file for your add-on to register it with the CMS.
4. Activation: Enable the add-on through the PingoJS configuration files or the backend.

Download: Add-on Template

Example of a simple add-on

Here is a simple example of the structure of an add-on:

+ my_addon
├── add-on.json
├── add-onConf.php
├── classes
│   └── exampleClass.php
├── src
│   ├── js
│   │   └── index.js
│   └── css
│       └── style.css
├── icon.svg
└── main.php

add-on.json

The add-on.json file is a configuration file where you can specify the add-on_key, display name, category, description, and whether the add-on should be shown in the menu.

/add-on.json

{
    "name": "<add-on-name>",
    "displayName": "<add-on-display-Name>",
    "category": "<category>",
    "description": "<description>",
    "nav": <show-in-nav-true-or-false>
}

add-onConf.php

Unlike the add-on.json file, which is mainly used for general configuration and description of the add-on, the add-onConf.php file is more technical. Here you can specify which JavaScript or CSS files should be loaded when the add-on is called. Public scripts can also be defined here.

/add-onConf.php

return [
    "addonName" => "<add-on-name>",
    "BE" => [
        "style" => [
            [
                "/wac/ad/<add-on-name>/src/css/style.css"
            ]
        ],
        "javaScript" => [
            [
                "/wac/ad/<add-on-name>/src/js/index.js"
                "defer" // "" or "defer"
            ]
        ],
    ],
        "PUB" => [ // <- Add-on Public Scripts
            "example/*"
            "api"
        ]
];

main.php

The main.php file is the root file of the add-on and is the first file that gets executed when the add-on is called. This file typically contains the main logic and initialization code for the add-on. It serves as the entry point for the add-on's functionality and can include or require other files as needed.

Here is an example of what the main.php file might look like:

/main.php

<?php
// Initialization code
require_once 'classes/exampleClass.php';

// Main logic
$example = new ExampleClass();
$example->run();

tip

You can also access the main file of the add-on via the URL /add-on/main/<add-on-name>. For more information, refer to the documentation.

icon.svg

The icon.svg file defines the icon for the add-on. It is recommended to use a 16x16 pixel size for the icon to ensure it displays correctly in the user interface.