Struttura e creazione di un nuovo addon

Struttura degli addon

Gli addon custom utilizzati nel sito si trovano all’interno del tema utilizzato, nella cartella sppagebuilder -> addons.

All’interno della cartella ci sono tante cartelle quanti addon custom.

Ogni cartella contiene:

• Cartella assets: con al suo interno una cartella images che contiene l’icona dell’addon che verrà visualizzata nel pagebuilder.
• File admin.php: contiene il nome dell’addon e tutti gli input che verranno visualizzati durante l’inserimento dei contenuti dell’addon, nel pagebuilder.
• File site.php: contiene la struttura HTML che ospiterà i dati inseriti da pagebuilder, oltre a javascript, se serve.

Creare un nuovo addon

Per aggiungere un addon, conviene copiare la struttura di un addon custom già esistente e poi modificarla. Quindi:

1. Copiare la cartella di un addon custom.
2. Incollarla all’interno della cartella addons.
3. Cambiare il nome della cartella.

I nomi delle cartelle degli addons custom devono essere in minuscolo ed eventuali spazi devono essere convertiti in underscore (esempio: “test_addon”).

4. Fatto questo, aprire i file admin.php e site.php.

File admin.php #

Questo è il codice di base che deve essere presente in tutti gli addon:

<?php
/**
 * @package SP Page Builder
 * @author JoomShaper https://www.joomshaper.com
 * @copyright Copyright (c) 2010 - 2025 JoomShaper
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
 */
//no direct access
defined('_JEXEC') or die('Restricted access');


use Joomla\CMS\Language\Text;
use Joomla\Plugin\System\Xtemplate\Helper\XtemplateAddonsPBHelper;


$before_field = ['title', 'description', 'button'];


$addon = new XtemplateAddonsPBHelper();
$addon->setDirectory(__DIR__);
$addon->setType('content');
$addon->setTitle(Text::_('Test addon'));
$addon->setName('test_addon');
$addon->setDesc(Text::_('Test addon'));
$settings = [


];


$addon->setSettings($settings,$before_field);
SpAddonsConfig::addonConfig($addon->toArray());

Le righe da modificare quando si copia un addon per crearne uno nuovo sono le seguenti:

$addon->setTitle(Text::_('Test addon'));

setTitle imposta il titolo dell’addon che viene visualizzato nel pagebuilder.

$addon->setName('test_addon');

setName imposta il nome dell’addon, deve essere UGUALE al nome impostato precedentemente nella cartella.

$addon->setDesc(Text::_('Test addon'));

setDesc imposta la descrizione dell’addon, è visibile solo in alcune schermate del pagebuilder. Di solito ci si mette lo stesso testo presente nella funzione ‘setTitle’.

$settings = [
];

Dentro questo array vengono inseriti i campi che saranno visualizzati nel pagebuilder, ad esempio titoli, immagini, testi, checkbox ecc. I diversi campi che possono essere inseriti li vedremo successivamente.

File site.php #

Questo è il codice di base che deve essere presente in tutti gli addon:

<?php

/**
 * @package SP Page Builder
 * @author JoomShaper http://www.joomshaper.com
 * @copyright Copyright (c) 2010 - 2025 JoomShaper
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
 */
//no direct access
defined('_JEXEC') or die('Restricted access');

use Joomla\CMS\Factory;
use Joomla\CMS\Uri\Uri;
use Joomla\Plugin\System\Sef\Extension\Sef;
use Joomla\Plugin\System\Xtemplate\Trait\TraitPagebuilder;

class SppagebuilderAddonTest_addon extends SppagebuilderAddons
{
    use TraitPagebuilder;

    /**
     * The addon frontend render method.
     * The returned HTML string will render to the frontend page.
     *
     * @return  string  The HTML string.
     * @since   1.0.0
     */
    public function render()
    {
        $this->includeAssets(__DIR__);

        // Usa callback per evitare calcoli inutili
        return $this->rememberHtml('test_addon-'.$this->addon->id, function() {
            $render_content = $this->renderContent();
            return $this->openAddon("addon-test_addon") . $render_content . $this->closeAddon();
        });
    }

    public function renderContent()
    {
        $settings = $this->addon->settings;
        ob_start(); ?>

        /*CODICE ADDON*/
<?php
        return ob_get_clean();
    }

    public static function getTemplate()
    {
        $output = '<div style="background-color: red;">Nome addon</div>';
        return $output;
    }
}

le righe da modificare sono le seguenti:

class SppagebuilderAddonShortcode

La classe dell’addon va modificata sostituendo l’ultima parte con il nome dell’addon, quindi diventa:

class SppagebuilderAddonTest_addon

Il nome dell’addon, quindi, va messo dopo “SppagebuilderAddon” capitalizzando la prima lettera del nome e, come prima, sostituendo gli spazi con underscore.

Anche queste due righe dentro la funzione render() vanno modificate:

return $this->rememberHtml('anteprima_con_link-'.$this->addon->id, function() {
return $this->openAddon("addon-anteprima_con_link") . $render_content . $this->closeAddon();

In entrambe le righe va sostituito il nome dell’addon, così:

return $this->rememberHtml('test_addon-'.$this->addon->id, function() {
return $this->openAddon("addon-test_addon") . $render_content . $this->closeAddon();

A questo punto, salvando i file modificati, l’addon verrà aggiunto alla lista di addon disponibili nel pagebuilder e potrà essere utilizzato.