Liste der Anhänge anzeigen (Anzahl: 1)
Frontend Filter für Events
Liebe Community
Ich sollte für eine Webseite einen Filter haben Events im Frontend filtern zu können. Entweder nach Kategorien oder nach unterschiedlichen Kalendern. Die Filterung/Sortierung sollte dynamisch stattfinden, sprich es soll keine neue Seite geladen werden. Kennt jemand eine bestehende Lösung dafür.
Wie es etwa aussehen sollte und der Funktionsumfang findet ihr in der Beilage im Gestaltungsvorschlag. Falls mir jemand etwas entwickeln kann, so bin ich auch für ein Preisangebot dankbar.
Liste der Anhänge anzeigen (Anzahl: 2)
Leider kann ich Filtrizer nicht davon abhalten die Elemente position absolute zu setzen ,weshalb es mir den Kalender zerschießt. Er hebt die Elemente dadurch aus der Tabelle. Siehe Anhang.
Auch mit den Options kann ich keine Option sehen das zu verhindern.
Liste der Anhänge anzeigen (Anzahl: 3)
Ist ein interner Bereich, deshalb leider lkein Link möglich. Aber ich habe jetzt dein Custom Element mit meiner Filterversion von der anderen Seite kombiniert.
Ist in meinem Fall auch etwas besonders weil ich einen Kalender UND eine Liste auf einer Seite habe und dort die Filter auf beides gehen müssen. Deshalb auch die zusätzlichen Zeilen JS für den zweiten Selektor. Das ganze funktioniert ohne zusätzliches JS. Also mit Core jQuery.
Ich denke davon kann man es für seine Zwecke ganz gut ableiten.
rsce_filtrizer.html5
HTML-Code:
<?php if ($this->headline): ?>
<<?php echo $this->hl ?>>
<?php echo $this->headline ?>
</<?php echo $this->hl ?>>
<?php endif ?>
<div class="<?= $this->class ?>" <?= $this->cssID ?>>
<div class="row no-gutters mb-2 d-none d-md-flex" id="legende">
<?php foreach (deserialize($this->filters, true) as $filter): ?>
<span data-filter="<?php echo $filter['elementsFilter_filters_value'] ?>" class="<?php echo $filter['elementsFilter_filters_value'] ?> <?php echo $filter['elementsFilter_filters_class'] ?>">
<?php echo $filter['elementsFilter_filters_label'] ?>
</span>
<?php endforeach ?>
</div>
</div>
<?php if ($this->filtersClassLegend): ?>
<div class="d-none d-lg-block"><?php echo $this->filtersClassLegend; ?></div>
<?php endif ?>
</div>
<script>
$(document).ready(function() {
$('#filterOptions span').click(function() {
// fetch the class of the clicked item
var ourClass = $(this).data("filter");
// reset the active class on all the buttons
$('#filterOptions span').removeClass('active');
// update the active state on our clicked button
$(this).addClass('active');
if(ourClass == 'all') {
// show all our items (List + Calendar)
$('.<?php echo $this->filtersclassItemContainer; ?>').children('div.layout_upcoming').show();
$('.<?php echo $this->filtersclassItemContainer; ?> table td').children('div.event').show();
}
else {
// hide all elements that don't share ourClass (List + Calendar)
$('.<?php echo $this->filtersclassItemContainer; ?>').children('div:not(.' + ourClass + ')').hide();
$('.<?php echo $this->filtersclassItemContainer; ?> table td').children('div.event:not(.' + ourClass + ')').hide();
// show all elements that do share ourClass (List + Calendar)
$('.<?php echo $this->filtersclassItemContainer; ?>').children('div.' + ourClass).show();
$('.<?php echo $this->filtersclassItemContainer; ?> table td').children('div.event.' + ourClass).show();
}
return false;
});
});
</script>
rsce_filtrizer_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 | CSS Klasse','Geben Sie hier Wert und Bezeichnung ein. (Wert = data-filter, Bezeichnung = Frontenddarstellung, CSS Klasse).'],
],
'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',
],
'elementsFilter_filters_class' => [
'label' => [
'de' => ['CSS Klasse','CSS Klasse'],
],
'inputType' => 'text',
'eval' => [
],
'default' => '',
],
],
],
],
'filtersclassItemContainer' => [
'label' => [
'de' => ['Filter Container','Vergeben Sie eine Klasse des Containers in dem gesucht werden soll.'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50 clr',
],
],
'filtersClassLegend' => [
'label' => [
'de' => ['Legende','Fügen Sie hier den Inhalt ein. z.B. als Inserttag oder als HTML.'],
],
'inputType' => 'textarea',
'eval' => array('rte' => 'tinyMCE', 'mandatory' => true,'tl_class' => 'w100 clr' ),
],
],
);
Und siehe Anhänge
Liste der Anhänge anzeigen (Anzahl: 2)
Blöde Frage noch mal dazu. Wenn ich in den Feldern für die Filter ein Inserttag von https://github.com/netzmacht/contao-...some-inserttag verwende, wird dieses nicht geparsed. Muss bei der Feldkonfiguration evtl. etwas anderes eingestellt werden?
Code:
{{fas::graduation-cap}} Offizielles
Das erzeugt das Icon im Frontend nicht. Setze ich das in ein beliebiges Textelement geht es.
Edit:
Es lag wirklich an der PHP Ausgabe
PHP-Code:
<?php foreach (deserialize($this->filters, true) as $filter): ?>
PHP-Code:
<?php foreach ($this->filters as $filter): ?>
Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:
Zitat von
Franko
So, der Code ist nun definitiv abrufbar. Ich habe diesen neu abgelegt: https://www.webneu.ita-wegman-campus...pe.pkgd.min.js
Leider tut sich bei der Filterung aber immer noch nichts:
https://www.webneu.ita-wegman-campus...gen-kopie.html
Was ich nicht ganz verstehe, ist diese Anleitung. Muss ich das auch noch einbinden?:
Anhang 24910
Vielen Dank für die weitere Hilfe. Ich muss das doch irgendwie lernen und zum Laufen bringen. Ich hoffe, dass sich das dann auch mit den Events filtern lässt.
Viele Grüsse
