Hinzufügen benutzerdefinierter Elemente
hostware bietet ein umfangreiches CMS (Content Management System), sodass Hosting-Anbieter ihre Website ganz einfach neben ihrem Kerngeschäft verwalten können.
Der standardmäßige hostware-Storefront, der mit bootstrap 5 erstellt wurde, bietet eine große Anzahl von Elements, mit denen sich beeindruckende Seiten erstellen lassen. Allerdings möchten Module und Themes möglicherweise benutzerdefinierte Elemente erstellen, um die Vielfalt zu erhöhen.
Ein CMS-Element benötigt vier Teile:
Die Elementklasse (PHP)
Das Element, das im Storefront gerendert wird (twig)
Die Elementvorschau, die in der Administration gerendert wird (blade)
Die Elementkonfiguration, die in der Administration gerendert wird (blade)
Die visuelle Darstellung von CMS-Elementen in der Administration muss nicht exakt sein, sollte aber dem entsprechen, was im Storefront gerendert wird.
Die Elementklasse erstellen
Die Elementklasse enthält Attribute wie das Label und den technischen Namen sowie die Standardkonfiguration, die geladen wird, wenn das Element von einem Administrator erstellt wird.
Die Klasse könnte so aussehen:
<?php
namespace custom\themes\hw\hostx\Cms\Elements;
use App\Framework\Core\Cms\CmsElementInterface;
class HostX_FeatureBoxes implements CmsElementInterface {
public function getName(): string {
return "hostx_feature_boxes"; // <--- The technical name of the element, usually the class name in lower camel case
}
public function getLabel(): string {
return "HostX Feature Boxen"; // <--- The label of the element, which gets displayed in the administration
}
public function getView(): string {
return "theme.hostx::cms/elements/hostx_feature_boxes"; // <--- The path to the storefront view
}
public function getPreview(): string {
return "theme.hostx::cms/elements/hostx_feature_boxes_preview"; // <--- The path to the administration view
}
public function getDefaultConfig(): array {
return [ // The default config
"title" => "Our operating systems.",
"subtitle" => "Your choice.",
"item1_icon" => '<img class="lazy img-fluid" alt="businessman" src="/themes/hostx/img/icons/businessman.svg" style="">',
"item1_title" => "Upgrade Management",
"item1_text" => "It’s hard to believe anyone would want to harm your website, but they do. Thankfully!",
"item2_icon" => '<img class="lazy img-fluid" alt="priority" src="/themes/hostx/img/icons/priority.svg" style="">',
"item2_title" => "Priority Support",
"item2_text" => "It’s hard to believe anyone would want to harm your website, but they do. Thankfully!",
"item3_icon" => '<img class="lazy img-fluid" alt="mission" src="/themes/hostx/img/icons/mission.svg" style="">',
"item3_title" => "Advanced Panel",
"item3_text" => "Host unlimited domains, create unlimited email addresses, databases, FTP accounts, & more.",
"item4_icon" => '<img class="lazy img-fluid" alt="hula hoop" src="/themes/hostx/img/icons/hula-hoop.svg" style="">',
"item4_title" => "Flexible Management",
"item4_text" => "Host unlimited domains, create unlimited email addresses, databases, FTP accounts, & more.",
];
}
public function provideData(array $config): array {
// Can be used to load data, when the element gets loaded in the storefront
return $config;
}
}Daten beim Rendern laden
Um benutzerdefinierte Daten zu laden, wenn das Element im Storefront gerendert wird, kannst Du in der Elementklasse die Funktion provideData() verwenden. Diese Funktion erhält das config-Array als Parameter und muss dieses Array zurückgeben. In der Zwischenzeit können dem Array beliebige Einträge hinzugefügt oder bestehende geändert werden.
Eine konkrete Implementierung könnte so aussehen:
public function provideData(array $config): array {
$categoryIds = explode(",", $config['categoryIds']);
// load category models from database
$config['categories'] = Category::findMany($categoryIds);
return $config;
}Die Antwort von provideData() wird automatisch zwischengespeichert
Diese Dokumentationsseite ist unvollständig.