Liste der Anhänge anzeigen (Anzahl: 4)
[Rocksolid Custom Elements] - Filter mit filterizr
[Rocksolid Custom Elements] - Filter mit filterizr
https://github.com/giotiskl/filterizr
https://rocksolidthemes.com/de/conta...ntent-elements
rsce_filterizr.html5
PHP-Code:
<!--
https://github.com/giotiskl/filterizr
-->
<?php
$filterClasses = array(
$this->filtersclass,
);
$filterContainer = ('filtr_container_' . $this->id);
?>
<?php if ($this->headline): ?>
<<?php echo $this->hl ?>>
<?php echo $this->headline ?>
</<?php echo $this->hl ?>>
<?php endif ?>
<div class="filtr-wrapper <?php echo $this->class ?>"<?php echo $this->cssID ?>>
<ul class="<?php echo implode(' ',$filterClasses) ?>">
<?php foreach (deserialize($this->filters, true) as $filter): ?>
<li data-filter="<?php echo $filter['elementsFilter_filters_value'] ?>">
<?php echo $filter['elementsFilter_filters_label'] ?>
</li>
<?php endforeach ?>
</ul>
<div class="filtr-container <?php echo $filterContainer ?> <?php if ($this->filtersclassContainer): echo $this->filtersclassContainer; endif; ?>">
<div class="filtr-item-container <?php if ($this->filtersclassItemContainer): echo $this->filtersclassItemContainer; endif; ?>">
<?php foreach($this->items as $item): ?>
<div class="filtr-item <?php if ($item->dataClass): echo $item->dataClass; endif; ?>" data-category="<?php echo $item->dataCategory ?>" data-sort="value"><?php echo $item->dataContent ?></div>
<?php endforeach ?>
</div>
</div>
</div>
<script src="files/bulma/js/vanilla.filterizr.min.js"></script>
<script>
var filterizr = new Filterizr('.<?php echo $filterContainer ?>');
</script>
rsce_filterizr_config.php
PHP-Code:
<?php
return array(
'label' => [
'de' => ['Filterliste','Erzeugt einen Filter im Frontend'],
],
'types' => ['content'],
'standardFields' => ['cssID','headline'],
'fields' => [
'filters' => [
'label' => [
'de' => ['Filterliste [data-filter] - Wert | Bezeichnung','Geben Sie hier Wert und Bezeichnung ein. (Wert = data-filter, Bezeichnung = Frontenddarstellung). Der Wert für ALLE = all.'],
],
'inputType' => 'multiColumnWizard',
'eval' => [
'mandatory' => true,
'tl_class' => 'w50 clr',
'columnFields' => [
'elementsFilter_filters_value' => [
'label' => [
'de' => ['Wert','Wert'],
],
'inputType' => 'text',
'eval' => [
],
'default' => 'all',
],
'elementsFilter_filters_label' => [
'label' => [
'de' => ['Bezeichnung','Bezeichnung'],
],
'inputType' => 'text',
'eval' => [
],
'default' => 'Alle',
],
],
],
],
'filtersclass' => [
'label' => [
'de' => ['eigene Klasse - Filterliste','Vergeben Sie eine Klasse.'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50 clr',
],
],
'filtersclassContainer' => [
'label' => [
'de' => ['eigene Klasse - Filteritems Container','Vergeben Sie eine Klasse.'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50 clr',
],
],
'filtersclassItemContainer' => [
'label' => [
'de' => ['eigene Klasse - Filteritems ItemContainer','Vergeben Sie eine Klasse.'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50 clr',
],
],
'items' => [
'label' => [
'de' => ['Filteritems [data-category]',''],
],
'elementLabel' => '%s. filtr-item',
'inputType' => 'list',
'minItems' => 1,
'fields' => [
'dataCategory' => [
'label' => [
'de' => ['[data-category]','Geben Sie den Wert für das Item ein. Mehrfachauswahl mit Komma getrennt.'],
],
'inputType' => 'text',[ATTACH=CONFIG]23981[/ATTACH]
[ATTACH=CONFIG]23982[/ATTACH]
'eval' => [
'tl_class' => 'w50',
],
],
'dataClass' => [
'label' => [
'de' => ['eigene Klasse','Vergeben Sie zusätzlich eigene Klassen.'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
'dataContent' => [
'label' => [
'de' => ['Inhalt','Fügen Sie hier den zu sortierenden Inhalt ein. z.B. als Inserttag oder als HTML.'],
],
'inputType' => 'textarea',
'eval' => [
'allowHtml' => true,
'class' => 'monospace',
'rte' => 'ace|html',
'tl_class' => 'clr',
],
],
],
],
],
);
https://community.contao.org/de/atta...0&d=1604146083
https://community.contao.org/de/atta...1&d=1604146105
https://community.contao.org/de/atta...2&d=1604146118
Im Frontend wird eine Liste für die Filternavigation und ein filterbarer Inhaltswrapper mit den eingefügten Inhalten erzeugt.
https://community.contao.org/de/atta...3&d=1604146670
Eigene CSS Klassen im Backend als auch im Template sind möglich.
Die Optionsmöglichkeiten von Filterizr werden über eine Templateanpassung eingefügt
Anhang 23980
Anhang 23981
Anhang 23982
Anhang 23983
