- Sulu CMS 2.6+
- PHP 8.1+
- Composer
- Node.js & npm
composer require manuxi/sulu-content-types-bundle- Bundle-Verzeichnis erstellen:
mkdir -p packages/manuxi
cd packages/manuxi- Bundle-Dateien kopieren:
# Entpacke SuluContentTypesBundle.zip hier
# oder clone von GitHub:
git clone https://github.com/manuxi/SuluContentTypesBundle.git- Composer-Repository hinzufügen:
In der composer.json deines Projekts:
{
"repositories": [
{
"type": "path",
"url": "packages/manuxi/SuluContentTypesBundle"
}
],
"require": {
"manuxi/sulu-content-types-bundle": "@dev"
}
}- Bundle installieren:
composer installIn config/bundles.php:
<?php
return [
// ... andere Bundles
Manuxi\SuluContentTypesBundle\ManuxiSuluContentTypesBundle::class => ['all' => true],
];In assets/admin/packages.json:
{
"manuxi-content-types": {
"path": "../../vendor/manuxi/sulu-content-types-bundle/src/Resources/js/containers/Form/fields",
"main": "index.js"
}
}Für lokale Installation:
{
"manuxi-content-types": {
"path": "../../packages/manuxi/SuluContentTypesBundle/src/Resources/js/containers/Form/fields",
"main": "index.js"
}
}cd assets/admin
npm install
npm run buildbin/console cache:clearbin/console debug:container | grep manuxiErwartete Ausgabe:
manuxi.sulu_content_types.content.type.number_with_default
manuxi.sulu_content_types.content.type.color_select
manuxi.sulu_content_types.content.type.slider_range
bin/console debug:container --tag=sulu.content.type | grep -A2 "number_with_default\|color_select\|slider_range"Erstelle ein neues Template in config/templates/pages/:
<?xml version="1.0" ?>
<template xmlns="http://schemas.sulu.io/template/template"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd">
<key>test_content_types</key>
<view>pages/test</view>
<controller>Sulu\Bundle\WebsiteBundle\Controller\DefaultController::indexAction</controller>
<meta>
<title lang="de">Test: Content Types</title>
<title lang="en">Test: Content Types</title>
</meta>
<properties>
<property name="title" type="text_line" mandatory="true">
<meta>
<title lang="de">Titel</title>
<title lang="en">Title</title>
</meta>
</property>
<!-- Test NumberWithDefault -->
<property name="test_number" type="number_with_default">
<meta>
<title lang="de">Test Nummer</title>
<title lang="en">Test Number</title>
</meta>
<params>
<param name="default_value" value="42"/>
</params>
</property>
<!-- Test ColorSelect -->
<property name="test_color" type="color_select">
<meta>
<title lang="de">Test Farbe</title>
<title lang="en">Test Color</title>
</meta>
<params>
<param name="values" type="collection">
<param name="primary" value="primary:#0d6efd">
<meta>
<title lang="de">Primär</title>
<title lang="en">Primary</title>
</meta>
</param>
<param name="success" value="success:#198754">
<meta>
<title lang="de">Erfolg</title>
<title lang="en">Success</title>
</meta>
</param>
<param name="danger" value="danger:#dc3545">
<meta>
<title lang="de">Gefahr</title>
<title lang="en">Danger</title>
</meta>
</param>
</param>
</params>
</property>
<!-- Test ColorSelect with palette service -->
<property name="test_color" type="color_select">
<meta>
<title lang="de">Test Farbe</title>
<title lang="en">Test Color</title>
</meta>
<params>
<param name="values"
type="expression"
value="service('sulu_content_types.color_palette_provider').getValues('bootstrap')"
/>
<param name="default_value"
type="expression"
value="service('sulu_content_types.color_palette_provider').getDefaultValue('bootstrap')"
/>
</params>
</property>
<!-- Test SliderRange -->
<property name="test_slider" type="slider_range">
<meta>
<title lang="de">Test Slider</title>
<title lang="en">Test Slider</title>
</meta>
<params>
<param name="min" value="0"/>
<param name="max" value="100"/>
<param name="default_value" value="50"/>
</params>
</property>
</properties>
</template>Erstelle templates/pages/test.html.twig:
{% extends "base.html.twig" %}
{% block content %}
<h1>{{ content.title }}</h1>
<div class="test-results">
<p>Number: {{ content.test_number }}</p>
<p>Color: <span class="badge bg-{{ content.test_color }}">{{ content.test_color }}</span></p>
<p>Slider: {{ content.test_slider }}%</p>
</div>
{% endblock %}- Gehe zu Sulu Admin (
/admin) - Erstelle eine neue Seite
- Wähle Template "Test: Content Types"
- Teste die Content Types!
Wie im Beispiel oben zu sehen ist, kann eine eigene Farbpalette für den ColorSelector eingebunden werden. Vorhandene Paletten:
- bootstrap
- bootstrap_text
- bootstrap_bg
- bootstrap_emphasis
- custom
- statusEigene Paletten können erstellt werden:
Erstelle config/packages/sulu_content_types.yaml:
sulu_content_types:
color_palettes:
custom:
primary: '#0d6efd'In der xml dann einfach benutzen:
<param name="values"
type="expression"
value="service('sulu_content_types.color_palette_provider').getValues('custom')"
/>
<param name="default_value"
type="expression"
value="service('sulu_content_types.color_palette_provider').getDefaultValue('custom')"
/>Lösung:
bin/console cache:clear
bin/console debug:container | grep content.typeLösung:
cd assets/admin
npm run build
bin/console cache:clearÖffne Browser-Console (F12) und prüfe auf Fehler.
Lösung:
- Prüfe
config/bundles.php- Bundle registriert? - Prüfe Namespace in PHP-Dateien
composer dump-autoload- Cache leeren
Lösung:
- Prüfe
assets/admin/packages.json- Pfad korrekt? npm installinassets/adminnpm run build- Browser-Cache leeren (Ctrl+Shift+R)
Entferne den manuxi-content-types Eintrag.
cd assets/admin
npm run buildcomposer remove manuxi/sulu-content-types-bundlebin/console cache:clear- GitHub Issues: https://github.com/manuxi/SuluContentTypesBundle/issues
- Sulu Slack: https://sulu.io/en/community
- Documentation: Siehe README.md
- Siehe README.md für ausführliche Dokumentation
- Siehe docs/example_template.xml für mehr Beispiele
- Siehe docs/example.html.twig für Twig-Verwendung