Element-Filter für Contao

Hi,

der liebe Kamil (Codefog) war so nett, mir eine kleine, ganz einfache Filter-Extension zu programmieren, die wir auch der Community zur Verfügung stellen möchten:
https://github.com/codefog/contao-elements-filter

Viele Worte braucht man darüber nicht verlieren, die Funktionsweise ist auch sauber auf GitHub dokumentiert. In den Artikeleinstellungen können über den MultiColumnWizard Filter gesetzt werden, die wiederum den im Artikel enthaltenen Inhaltselementen per Checkbox zugewiesen werden können.

Ich wünsche euch viel Spaß damit und bin mir sicher, dass das der ein oder andere ebenfalls gut gebrauchen kann :)

VG Kim

Gibts dafür einen Demolink? Hab es noch nicht ganz verstanden :D

Sprich ich kann in einem Artikel jedes Inhaltselement einer "kategorie" zuweisen und über diesen Filter dann ein-/ausblenden?

Werden die Elemente per Ajax nachgeladen, oder sind alle Elemente bereits im FE vorhanden? Wäre wichtig zu wissen, falls die Elemente sehr umfangreich sind (große Bilder...).

Zitat:

---

Zitat von Kahmoon

Gibts dafür einen Demolink? Hab es noch nicht ganz verstanden :D

---

Meine Seite für diesen Anwendungsfall ist leider noch nicht live, aber es handelt sich um sowas hier:
http://body-joy.de/trainer/

Theoretisch auch ein Portfolio-Filter, nur eben nicht mit News gebaut, sondern für Artikel.

Zitat:

---

Zitat von Andreas

Werden die Elemente per Ajax nachgeladen, oder sind alle Elemente bereits im FE vorhanden? Wäre wichtig zu wissen, falls die Elemente sehr umfangreich sind (große Bilder...).

---

Per Default sind erst mal alle Sichtbar, daher wird nichts nachgeladen, lediglich per JS gefiltert.

Hallo Kim,

hab das Modul gerade mit einer 3.5.25er Installation getestet und jetzt geht leider nix mehr.
Die Fehlermeldung lautet

Code:

---

Warning: in_array() expects parameter 2 to be array, null given in system/modules/core/library/Contao/System.php on line 140

---

Hast Du das schon gehabt?

Viele Grüße
Hella

Ist das die gesamte Fehlermeldung? Wie hast du die Extension installiert?

Hallo spooky,

ich hab sie komplett gelöscht und versuche es bei Gelegenheit noch mal. Heute wird das eher nichts mehr.

Gruß
Hella

Zitat:

---

Zitat von fusch

Hallo Kim,

hab das Modul gerade mit einer 3.5.25er Installation getestet und jetzt geht leider nix mehr.
Die Fehlermeldung lautet

Code:

---

Warning: in_array() expects parameter 2 to be array, null given in system/modules/core/library/Contao/System.php on line 140

---

Hast Du das schon gehabt?

Viele Grüße
Hella

---

Hallo,

hatte bei einem Test die selbe Fehlermeldung. Bei einer anderen Installation lief es ohne Probleme, dort war allerdings auch Changelanguage mit seinen diversen Abhängigkeiten ( _autoload, haste, NamespaceClassLoader ) installiert.

Nachdem Changelanguage auch auf der nicht funktionierenden Installation installiert wurde, funktionierte aus auch dort.

Ich denke, das es neben multicolumnwizard eine weitere Abhängigkeit für den elements-filter notwendig ist, ohne dem weiter auf dem Grund gegangen zu sein.

Ansonsten ganz nett, wäre vielleicht wünschenswert, wenn man den Filter auch an beliebiger Stelle als Modul oder Contentelement einfügen könnte, so wird er stehst am Anfang des Artikels eingefügt.

MfG


EDIT => Namespace Class Loader behebt das Problem -> https://contao.org/de/erweiterungsli...r/reldate.html

Habt ihr über Composer oder manuell installiert? Falls es manuell war, habt ihr an alle Abhängigkeiten gedacht?

Fehlermeldungen und Feature-Wünsche könnt ihr gerne unter https://github.com/codefog/contao-el...-filter/issues einbriefen. Ich hab die Erweiterung selbst bezahlt und so konfiguriert, wie ich sie brauche, nämlich als reinen, kleinen Elementfilter. Wie sie sich weiterentwickelt, ist der Community überlassen.

Zitat:

---

Zitat von k-webdesign

Habt ihr über Composer oder manuell installiert? Falls es manuell war, habt ihr an alle Abhängigkeiten gedacht?.

---

Alles gut, man muss halt nur beachten, das das der Element-Filter nicht nur Multicolumnwizard, sondern auch NamespaceClassLoader als Abhängigkeit voraussetzt und diese Extension ebenfalls installiert wurde.

Ich hab manuell installiert in 3.5.25 und 4.3.7 managed, inwieweit das bei der Installation über Composer berücksichtigt wird, weiss ich nicht, nutze ich nicht.

Zitat:

---

Zitat von NetMediaWork

Ich hab manuell installiert in 3.5.25 und 4.3.7 managed, inwieweit das bei der Installation über Composer berücksichtigt wird, weiss ich nicht, nutze ich nicht.

---

Über Composer werden Abhängigkeiten natürlich automatisch mit installiert. Daher musst du dich auch immer selbst um alle Abhängigkeiten kümmern, wenn du eine Extension nicht über das Extension Repository oder die Paketverwaltung installierst.

Zitat:

---

Zitat von Spooky

Über Composer werden Abhängigkeiten natürlich automatisch mit installiert. Daher musst du dich auch immer selbst um alle Abhängigkeiten kümmern, wenn du eine Extension nicht über das Extension Repository oder die Paketverwaltung installierst.

---

Sorry, das ich mich zu dem Problem von fusch geäussert habe und lediglich nach der Github - Installation/Minimum requirements gegangen bin.

P.S. Natürlich konnte ich mir nicht verkneifen, das ganze auch noch mal über den Composer zu installieren ... *Über Composer werden Abhängigkeiten natürlich automatisch mit installiert*

Auch da gibt es die Fehlermeldung, weil eben der terminal42/contao-namespace-class-loader natürlich nicht mit installiert wird und auch als Abhängigkeit nicht aufgeführt ist und somit zuerst installiert werden sollte ... auf den Installationen wo es auf Anhieb funktioniert, wird bereits durch eine andere Extension dieser mitinstalliert worden sein bsw. Changelanguage.

Wenn du die Extension über Composer installierst wird die NamespaceClassLoader Extension auch nicht benötigt, da dann der Autoloader von Composer benutzt wird.

Dass da trotzdem eine Fehlermeldung kommt müsste genauer Analysiert werden.

Könnt ihr bitte testweise mal den develop-Branch installieren? Kamil hat was geändert, aber weder er noch ich haben gerade die Zeit um es wirklich zu testen :s

Beim aktuellen DEV Branch funktioniert die Installation - im Gegensatz zur 1.0.1 Version - problemlos.

Zwar werden bei der Installation vom DEV Branch immerhin die DB Tabellen eingerichtet (was bei der 1.0.1 Version nicht der Fall ist) aber bei Aufruf eines Artikels geht dann nichts mehr.

Code:

---

[28-May-2017 08:54:48 Europe/Berlin]
PHP Warning: in_array() expects parameter 2 to be array, null given in /var/www/clients/client1/web24/web/system/modules/core/library/Contao/System.php on line 140
#0 [internal function]: __error(2, 'in_array() expe...', '/var/www/client...', 140, Array)
#1 /var/www/clients/client1/web24/web/system/modules/core/library/Contao/System.php(140): in_array('getInstance', NULL)
#2 /var/www/clients/client1/web24/web/system/modules/core/drivers/DC_Table.php(206): Contao\System->import('ElementsFilter\\...')
#3 /var/www/clients/client1/web24/web/system/modules/core/classes/Backend.php(408): Contao\DC_Table->__construct('tl_content', Array)
#4 /var/www/clients/client1/web24/web/system/modules/core/controllers/BackendMain.php(131): Contao\Backend->getBackendModule('article')
#5 /var/www/clients/client1/web24/web/contao/main.php(20): Contao\BackendMain->run()
#6 {main}

[28-May-2017 08:54:48 Europe/Berlin] PHP Fatal error:  Class 'ElementsFilter\EventListener\ContentDataContainer' not found in /var/www/clients/client1/web24/web/system/modules/core/library/Contao/System.php on line 140
[28-May-2017 08:54:50 Europe/Berlin]
PHP Warning: in_array() expects parameter 2 to be array, null given in /var/www/clients/client1/web24/web/system/modules/core/library/Contao/System.php on line 140
#0 [internal function]: __error(2, 'in_array() expe...', '/var/www/client...', 140, Array)
#1 /var/www/clients/client1/web24/web/system/modules/core/library/Contao/System.php(140): in_array('getInstance', NULL)
#2 /var/www/clients/client1/web24/web/system/modules/core/drivers/DC_Table.php(206): Contao\System->import('ElementsFilter\\...')
#3 /var/www/clients/client1/web24/web/system/modules/core/classes/Backend.php(408): Contao\DC_Table->__construct('tl_content', Array)
#4 /var/www/clients/client1/web24/web/system/modules/core/controllers/BackendMain.php(131): Contao\Backend->getBackendModule('article')
#5 /var/www/clients/client1/web24/web/contao/main.php(20): Contao\BackendMain->run()
#6 {main}

---

Zudem werden bei der Deinstallation der Erweiterung die DB Tabellen nicht gelöscht, sodass man dies manuell übernehmen müsste.

Aktuell ist vom Einsatz der Erweiterung daher leider nur abzuraten.

Hat dies schon jemand mit der aktuellen Contao Version getestet?

Habe darüber hinaus gerade eine GitHub Anfrage zwecks Unterstützung von filterizr (Open Source) gesetzt.

Ansonsten:
Ich würde gerne diese Open Source Lösung einsetzen. Würde generell ja auch ohne Erweiterung möglich sein.
Allerdings benötigt man halt hierzu wieder die HTML5 Data Attribute.

Bis dato hatte ich diesbezüglich dies mit RegEx Abfragen im Template gelöst siehe:
https://community.contao.org/de/show...l=1#post501098
Blöd hierbei ist, das man dann f. versch. Inhalselemente die Templates anpassen muß.

Gerade gefunden auch: https://extensions.contao.org/?q=con...ributes-bundle

Evtl. habt Ihr diesbezüglich noch weitere, elegante Lösungen ...?

@Franko wir haben die Erweiterung von Kamil erfolgreich in eine 4.9er im Einsatz: https://sportreisebuero.de/familien-...ientoerns.html


Gesendet von iPhone mit Tapatalk

Sorry, hatte diese Antwort schon heute mittag geschrieben und vergessen abzuschicken :o

Zitat:

---

Zitat von Franko

Hat dies schon jemand mit der aktuellen Contao Version getestet? ...

---

Kamil sollte das getestet haben, denn er hat Contao ~4.1 als Anforderung angegeben und das deckt diese Versionen ab https://semver.mwl.be/#!?package=con...ability=stable

Wenn nicht, sollte man es einfach bei Github melden.

Zitat:

---

Zitat von Franko

... Evtl. habt Ihr diesbezüglich noch weitere, elegante Lösungen ...?

---

Ich habe schon ein paar mal isotope.js manuell eingesetzt. Hier z.B. auf einem Auflistungsmodul https://potsdam-guide.de/de/suche.html. Tabelle ist dabei tl_member. Bei solchen strukturellen Sachen muss man ja sowieso das Auflistungstemplate anpassen. Ich würde diese 48 Items nicht als Contentelemente aufsetzen wollen. Das Verwalten, hier über die Mitglieder im Be, ist dabei wesentlich einfacher.

Das funzt ned zufällig auch bei Events auf der Seite mit den entsprechenden CSS Klassen!?

Edit: Leider nein weil das Content Element selbst CSS Klassen bekommt. Schade!

Zitat:

---

Zitat von Kahmoon

Das funzt ned zufällig auch bei Events auf der Seite mit den entsprechenden CSS Klassen!?

---

Hm, sollte es wohl. Man benötigt aber nicht nur die CSS Klasse "filtr-item" sondern auch das Attribut "data-category". Siehe:
https://yiotis.net/filterizr/#/tutorials/quickstart

So wie es aussieht geht das leider nicht denn man muss den Inhaltselementen im Artikel selbst diese Klassen zuweisen. Im habe einen Kalender dessen Termine die CSS Klassen mitbringen. Schade!

Ich habe jetzt mal dem Kalender Reader die Klasse "filter-container" in die umschließende Tabelle gepackt

Code:

---

<table class="table table-sm table-bordered table-md-responsive filter-container">

---

Dann bei jedem Event die Klasse "filtr-item" und "data-category"

Code:

---

<div class="filtr-item event cal_<?= $event['parent'] ?> <?= $event['class'] ?>" data-category="<?= str_replace(' ', ',',$event['class']) ?>">

---

Dort wird dann z.B. die Klasse "theorie" ausgegeben.

Code:

---

<div class="filtr-item event cal_154  theorie current rsfh-event-6240" data-category="theorie,current,rsfh-event-6240" itemscope="" itemtype="http://schema.org/Event"></div>

---

In den Einstellungen vom Artikel habe ich die Filter entsprechend eingestellt. Folgende Ausgabe erfolgt

Code:

---

<div class="filters" data-elements-filter="" data-elements="#elements-filter-417" data-handler="isotope">
<ul>
<li>
<a href="#" data-filter="" class="">Alle</a>
</li>
<li class="btn-theorie">
<a href="#" data-filter="theorie" class="active">Theorie</a>
</li>
</ul>
</div>

---

Edit: Klicke ich auf einen der Filterlink wird korrekt noch die Klasse "active" gesetzt. Es passiert also was...nur die Elemente unterhalb werden nicht gefiltert. Separate Inhaltselemente mit den entsprechenden Einstellungen hingegen schon.

Temporärer Testlink hier

Evtl. brauchen die Einträge in data-category jeweils Leerzeichen?

Hm die Texte unter dem Kalender reagieren doch auf den Filter?

Inzwischen ja. Wenn man das Modul verwendet muss man die Klassen "elements-filter" und "elments-filter-xxx" verwenden. Allerdings werden hier auch die Elemente neu platziert. Eigentlich sind alle 4 Termine an unterschiedlichen Tagen. Irgendwie schiebt er je zwei am selben Tag, also quasi sortiert er es nach den Klassen.

PHP-Code:

---

<div class="event cal_<?= $event['parent'] ?> <?= $event['class'] ?> elements-filter                 
<?php 
$teile = explode(' ',$event['class']);
echo 'elements-filter-'.$teile[1];
?>"
....

---

Ursache hierfür scheint das Element "elements-filter" zu sein.

Verstehe gerade die Verwendung von "elements-filter" nicht.
In der Doku https://yiotis.net/filterizr/#/tutorials/quickstart steht:

Zitat:

---

Add to your items the class: filtr-item
Give your items a data-category attribute.
Multiple categories must be separated with a comma (",")

---

Ich find in deinem Beispiel gerade weder die CSS Klasse filtr-item noch das Attribut data-category?

Oder benutzt du hier codefog/contao-elements-filter ...

Zitat:

---

Zitat von Franko

Oder benutzt du hier codefog/contao-elements-filter ...

---

Servus, ja...ich verwende das Modul um das es hier im Thread ging. Sorry! Vielleicht wäre es besser es manuell mit deinem Link zu bauen?

Zitat:

---

Zitat von Kahmoon

Servus, ja...ich verwende das Modul um das es hier im Thread ging. Sorry! Vielleicht wäre es besser es manuell mit deinem Link zu bauen?

---

Hi, Sorry ist nicht mein Tag :-). Ob es damit für deine Anforderung im Calendar funktioniert - must du ausprobieren...

Zitat:

---

Zitat von k-webdesign

Per Default sind erst mal alle Sichtbar, daher wird nichts nachgeladen, lediglich per JS gefiltert.

---

Gibt es eine Möglichkeit, die Erweiterung dazu zu bringen, dass nur ein spezifisches Element angezeigt wird beim Öffnen der Seite und eben nicht alle?

Illustration:
In einem Projekt möchte ich nämlich mit dem Filter Gallerien als Elemente auswählen. Grundsätzlich wäre es kein Problem, dass dann anfänglich sämtliche Gallerien gezeigt werden, mit wenig CSS kann sogar der Eindruck erweckt werden, dass nur eine Gallerie angezeigt wird. Wenn ich aber mit Klick auf ein Bild die Lightbox öffne, werden jeweils nur die Fotos der einzelnen Gallerie in den Loop aufgenommen.
Als Abhilfe kann ich eine zusätzliche Gallerie mit den Bildern sämtlicher Gallerien erstellen, dann funktioniert dies problemlos. Aber hier stört es dann, dass nicht nur diese Gallerie als Default-Gallerie gewählt werden kann, so dass nebst dieser Total-Gallerie nochmals alle Bilder in den eigentlichen Gallerien dargestellt werden, also alles doppelt.

Zitat:

---

Zitat von Toubibe

Gibt es eine Möglichkeit, die Erweiterung dazu zu bringen, dass nur ein spezifisches Element angezeigt wird beim Öffnen der Seite und eben nicht alle?

---

Das könnte aber verwirren, wenn nur ein Element angezeigt würde, ist ja ein Filter. Sinn machen würde eher, wenn eine Filteroption beim Start bereits automatisch ausgewählt würde. Dies würde z.B. so gehen:

PHP-Code:

---

<!-- templates\j_trigger-first-filter.html5 -->

<script>
  jQuery(function($) {

    $('.filters li:nth-child(2) a').trigger('click');

  });
</script> 


---

templates\j_trigger-first-filter.html5 dann im Layout einbinden.

Zitat:

---

Zitat von Toubibe

... Wenn ich aber mit Klick auf ein Bild die Lightbox öffne, werden jeweils nur die Fotos der einzelnen Gallerie in den Loop aufgenommen. ...

---

Das macht ja auch Sinn, denn wenn ich mir EINE Galerie ansehen möchte, wäre ich sehr verwirrt, wenn beim Durchblättern Bilder anderer Galerien angezeigt würden.

Wenn du mit dem Filter Galerien präsentieren möchtest, dann kannst du es so machen, dass von jeder Galerie nur das erste Bild (quasi ein Vorschaubild auf die Galerie) sichtbar ist, man beim Klick auf dieses Bild dann aber durch die ganze Galerie blättern kann. Somit braucht der Browser dann die Vorschaubilder der Galerien nicht zu laden, sondern nur jeweils 1 Bild je Galerie.

Das kannst du mit einer einfachen Anpassung des Templates gallery_default erreichen:

PHP-Code:

---

<!-- templates\gallery_one-image-only.html5 -->

<ul class="cols_<?= $this->perRow ?>" itemscope itemtype="http://schema.org/ImageGallery">
  <?php foreach ($this->body as $class => $row): ?>
    <?php $i=0; foreach ($row as $col): $i++; ?> <!-- mod -->
      <?php if ($col->addImage): ?>
        <li class="<?= $class ?> <?= $col->class ?>">
          <?php if ($i === 1): ?> <!-- ++ -->
            <figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
              <?php if ($col->href): ?>
                <a href="<?= $col->href ?>"<?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>"<?php endif; ?>><?php $this->insert('picture_default', $col->picture); ?></a>
              <?php else: ?>
                <?php $this->insert('picture_default', $col->picture); ?>
              <?php endif; ?>
              <?php if ($col->caption): ?>
                <figcaption class="caption"><?= $col->caption ?></figcaption>
              <?php endif; ?>
            </figure>
          <?php else: ?> <!-- ++ -->
            <a class="invisible" href="<?= $col->href ?>"<?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>"<?php endif; ?>>click for image</a> <!-- ++ -->
          <?php endif; ?> <!-- ++ -->
        </li>
      <?php endif; ?>
    <?php endforeach; ?>
  <?php endforeach; ?>
</ul>

---

An den vom Original abweichenden Zeilen habe ich HTML-Kommentar hinten angehängt. Hier nochmal nur die geänderten/ergänzten Zeilen:

PHP-Code:

---

...
<?php $i=0; foreach ($row as $col): $i++; ?> <!-- mod -->
...
<?php if ($i === 1): ?> <!-- ++ -->
...
<?php else: ?> <!-- ++ -->
  <a class="invisible" href="<?= $col->href ?>"<?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>"<?php endif; ?>>click for image</a> <!-- ++ -->
<?php endif; ?> <!-- ++ -->
...

---

Das Template templates\gallery_one-image-only.html5 dann den gewünschten Galerien zuweisen.

Danke.
Die Idee im zweiten Teil Deiner Antwort konnte ich erfolgreich übernehmen.

Für die den ersten Teil des Problems habe ich inzwischen eine etwas basale Lösung gefunden, indem ich nebst Galerie 1, Galerie 2 und Galerie 3 auch noch eine zusätzliche Gallerie "alle" mit allen Bildern anlegte, den Gallerien 1-3 die Klasse .teilgalerie gab und der Gallerie "alle" .gesamtgalerie. Mit dem folgenden jquery script lasse ich die richtige Auswahl öffnen. Bin kein jquery-Hirsch, aber es klappt ;-)

Code:

---

<script>
        $( document).ready(function() {
 $(".teilgalerie").css({"position": "absolute", "left": "-23000px"})
    });
 
</script>
<script>
        $( document).ready(function() {
                $(".filters a").click(function() {
$(".gesamtgalerie").css({"position": "absolute", "left": "-23000px"}),
$(".teilgalerie").css({"position": "static", "left": "inherit"})
    });
        });
</script>

<script>
        $( document).ready(function() {
                $(".filters > ul:nth-child(1) > li:nth-child(1) > a:nth-child(1)").click(function() {
$(".teilgalerie").css({"position": "absolute", "left": "-23000px"}),
$(".gesamtgalerie").css({"position": "static", "left": "inherit"})
    });
        });
</script>

---

Das kannst du leicht vereinfachen. Zuerst mal, du brauchst nicht jedesmal ein <script> zu öffnen und zu schließen. Eins reicht.

Zweitens brauchst du kein CSS zu setzen. Bei sowas arbeitet man mit CSS-Klassen. Hier mal ein schematisches Beispiel. CSS setzt du dann in deiner CSS-Datei.

PHP-Code:

---

<script>
  (function($) {
    $(document).ready(function() {

      $('.filters a').on('click', function(event) {
        // zum Debuggen
        console.log(event.target); // mit den Dev-Tools im Browser in der Konsole ansehen
        console.log($(this));      // mit den Dev-Tools im Browser in der Konsole ansehen

        allElements.removeClass('filter-active');
        someElement.addClass('filter-active');
      });

    });
  })(jQuery);
</script> 


---