Maak een aangepast veldtype voor mijn Craft CMS-website
description
Het ontwikkelen van een aangepast veldtype verhoogt de flexibiliteit in inhoudsbeheer, waardoor maatwerkgegevensinvoer mogelijk is die aan specifieke projectvereisten voldoet. Dit kan leiden tot een verbeterde gebruikerservaring en betere gegevensorganisatie.
prompt
try_prompt
Help me een aangepast veldtype te maken voor mijn Craft CMS-website dat gebruikers toestaat gegevens in een specifiek formaat in te voeren. Ik wil dat het veld de volgende functies bevat: {{veldkenmerken ... more
generate_helper
...
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier zijn stapsgewijze instructies om een aangepast veldtype te maken voor Craft CMS dat gebruikers alleen numerieke invoer toestaat:
**1. Maak een nieuw veldtype aan door een plugin te ontwikkelen**
Omdat Craft CMS geen standaard veldtype biedt dat uitsluitend numerieke invoer afdwingt, is het beste om een aangepaste veldtype plugin te maken.
**2. Plugin structuur opzetten**
- Maak een map voor je plugin, bijvoorbeeld `numeriekveld`.
- In deze map, maak de standaard mappenstructuur:
```
/plugins
/numeriekveld
/src
/fields
NumericField.php
Plugin.php
```
**3. Plugin hoofdklasse (`Plugin.php`)**
```php
<?php
namespace craft\numeriekveld;
use Craft;
use craft\base\Plugin;
class Plugin extends Plugin
{
public static $plugin;
public function init()
{
parent::init();
self::$plugin = $this;
}
}
```
**4. Aangepast veldtype class (`NumericField.php`)**
```php
<?php
namespace craft\numeriekveld\fields;
use craft\base\Field;
use craft\helpers\Html;
class NumericField extends Field
{
public static function displayName(): string
{
return 'Numeriek veld';
}
public function getInputHtml($value, ?\craft\base\ElementInterface $element = null): string
{
// HTML invoer met numerieke validatie
return Html::textInput(
$this->handle,
$value,
[
'type' => 'text',
'pattern' => '[0-9]*',
'inputmode' => 'numeric',
'class' => 'numeric-input',
'data-handle' => $this->handle,
]
);
}
public function getInputValidationRules(): array
{
return [
[
'rule' => 'regex',
'pattern' => '/^\d+$/',
'message' => 'Voer alleen numerieke waarden in.',
],
];
}
}
```
**5. JavaScript toevoegen voor client-side validatie**
Maak een map `resources` in je plugin en voeg een JS-bestand toe, bijvoorbeeld `js/numeric-validation.js`:
```js
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.numeric-input').forEach(input => {
input.addEventListener('input', () => {
input.value = input.value.replace(/\D/g, '');
});
});
});
```
**6. Register de JavaScript in je veld**
In je `NumericField.php`, voeg toe:
```php
public function getInputHtml($value, ?\craft\base\ElementInterface $element = null): string
{
$html = Html::textInput(
$this->handle,
$value,
[
'type' => 'text',
'pattern' => '[0-9]*',
'inputmode' => 'numeric',
'class' => 'numeric-input',
]
);
// Voeg de JS toe
Craft::$app->view->registerJsFile('/path/to/your/plugin/resources/js/numeric-validation.js');
return $html;
}
```
**7. Installatie en gebruik**
- Installeer je plugin via de Craft CMS plugin beheer.
- Voeg het nieuwe veld toe via je veldsets, kies 'Numeriek veld'.
- Gebruik dit veld in je secties en entries.
**8. Beste praktijken**
- Gebruik zowel client-side (JavaScript) als server-side (PHP) validatie voor maximale betrouwbaarheid.
- Voeg duidelijke foutmeldingen toe bij invalid input.
- Overweeg het gebruik van `type="number"` voor een eenvoudigere invoer, maar houd rekening met browserondersteuning en validatie.
---
Met deze aanpak kun je een op maat gemaakt numeriek veldtype maken dat gebruikers alleen numerieke gegevens kunnen invoeren. Mocht je verdere hulp nodig hebben met de code of implementatie, laat het gerust weten!
provider: deepseek
model: deepseek-chat
Zeker, ik help je graag een aangepast veldtype te maken voor Craft CMS dat alleen numerieke invoer toestaat. Hier is een complete implementatiegids:
## Stap 1: Bestandsstructuur aanmaken
Maak eerst de benodigde mappen en bestanden aan in je Craft CMS project:
```
config/
└── fields/
└── NumericField.php
```
## Stap 2: Het aangepaste veldtype maken
**Bestand: `config/fields/NumericField.php`**
```php
<?php
namespace craft\fields;
use Craft;
use craft\base\ElementInterface;
use craft\base\Field;
use craft\helpers\Html;
use yii\db\Schema;
class NumericField extends Field
{
public static function displayName(): string
{
return Craft::t('app', 'Numeriek Veld');
}
public function getContentColumnType(): string
{
return Schema::TYPE_DECIMAL . '(10,2)';
}
protected function inputHtml($value, ElementInterface $element = null): string
{
return Html::tag('div',
Html::input('number', $this->handle, $value, [
'class' => 'text fullwidth',
'step' => 'any',
'min' => 0, // Optioneel: minimum waarde instellen
'placeholder' => 'Voer een numerieke waarde in...',
]) .
Html::tag('div', $this->getInstructions(), [
'class' => 'instructions',
'style' => 'margin-top: 5px; color: #8f98a3;'
]),
['class' => 'input']
);
}
public function getSettingsHtml(): string
{
return Craft::$app->getView()->renderTemplateMacro('_includes/forms', 'textField', [
[
'label' => Craft::t('app', 'Minimum waarde'),
'instructions' => 'Laat leeg voor geen minimum',
'id' => 'minValue',
'name' => 'minValue',
'value' => $this->minValue ?? '',
'type' => 'number',
'step' => 'any'
]
]) .
Craft::$app->getView()->renderTemplateMacro('_includes/forms', 'textField', [
[
'label' => Craft::t('app', 'Maximum waarde'),
'instructions' => 'Laat leeg voor geen maximum',
'id' => 'maxValue',
'name' => 'maxValue',
'value' => $this->maxValue ?? '',
'type' => 'number',
'step' => 'any'
]
]);
}
public function normalizeValue($value, ElementInterface $element = null)
{
if ($value === null || $value === '') {
return null;
}
// Verwijder eventuele niet-numerieke karakters behalve punten en mintekens
$value = preg_replace('/[^\d.-]/', '', $value);
// Converteer naar float
$numericValue = (float) $value;
// Valideer minimum waarde
if (isset($this->minValue) && $numericValue < $this->minValue) {
$this->addError('value', "Waarde moet minimaal {$this->minValue} zijn");
return null;
}
// Valideer maximum waarde
if (isset($this->maxValue) && $numericValue > $this->maxValue) {
$this->addError('value', "Waarde mag maximaal {$this->maxValue} zijn");
return null;
}
return $numericValue;
}
public function getInstructions(): string
{
$instructions = [];
if (isset($this->minValue)) {
$instructions[] = "Minimum: {$this->minValue}";
}
if (isset($this->maxValue)) {
$instructions[] = "Maximum: {$this->maxValue}";
}
$instructions[] = "Alleen numerieke waarden toegestaan";
return implode(' • ', $instructions);
}
public function rules(): array
{
$rules = parent::rules();
$rules[] = [['minValue', 'maxValue'], 'number', 'skipOnEmpty' => true];
return $rules;
}
}
```
## Stap 3: Het veldtype registreren
Voeg toe aan je `config/app.php`:
```php
return [
'components' => [
'fields' => [
'class' => craft\services\Fields::class,
'fieldTypes' => [
\craft\fields\NumericField::class,
],
],
],
];
```
## Stap 4: Veld toevoegen aan je sectie
1. Ga naar **Instellingen** → **Velden**
2. Klik op **Nieuw veld**
3. Selecteer **Numeriek Veld** als veldtype
4. Configureer de instellingen:
- **Veldnaam**: Bijv. "Prijs", "Gewicht", "Aantal"
- **Handle**: Bijv. `price`, `weight`, `quantity`
- Stel eventueel minimum en maximum waarden in
## Stap 5: Gebruik in templates
**In Twig templates:**
```twig
{# Basis weergave #}
<p>Prijs: {{ entry.price ?? 'Niet ingevuld' }}</p>
{# Met valuta formatting #}
<p>Prijs: € {{ entry.price|number_format(2, ',', '.') }}</p>
{# Voorwaardelijke weergave #}
{% if entry.price %}
<div class="price">€ {{ entry.price }}</div>
{% endif %}
{# In berekeningen #}
{% set totaal = entry.price * entry.quantity %}
<p>Totaal: € {{ totaal|number_format(2, ',', '.') }}</p>
```
## Stap 6: Geavanceerde validatie (optioneel)
Voor extra validatie kun je een custom validator toevoegen:
```php
// Voeg toe aan je NumericField class
public function validate($attributeNames = null, $clearErrors = true)
{
parent::validate($attributeNames, $clearErrors);
if ($this->minValue !== null && $this->maxValue !== null && $this->minValue > $this->maxValue) {
$this->addError('minValue', 'Minimum waarde kan niet groter zijn dan maximum waarde');
}
return !$this->hasErrors();
}
```
## Beste praktijken:
1. **Consistente naamgeving**: Gebruik duidelijke handles zoals `productPrice`, `itemWeight`
2. **Instructies**: Gebruik het instructions veld om gebruikers te begeleiden
3. **Validatie**: Stel realistische min/max waarden in waar mogelijk
4. **Fallbacks**: Gebruik de `??` operator in templates voor lege waarden
5. **Backup**: Maak regelmatig backups van je veldconfiguraties
## Gebruiksvoorbeelden:
- **Product catalogus**: Prijzen, gewichten, voorraad
- **Statistieken**: Metingen, scores, percentages
- **Formulieren**: Leeftijd, aantal personen, budget
Dit aangepaste veldtype zorgt voor een gebruiksvriendelijke ervaring met automatische validatie en duidelijke feedback voor content editors.