Contao-Camp 2024
Ergebnis 1 bis 19 von 19

Thema: Frontend Filter für Events

  1. #1
    Contao-Nutzer
    Registriert seit
    15.03.2010.
    Beiträge
    28

    Standard 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.
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    Ich habe sowas hier mit JS gebaut. Der blendet quasi nur aus. Die Events haben eine CSS Klasse. Die Eventliste hat die ID "termine". Drauf bezieht sich die Suche im JS

    HTML Element
    Code:
    <div id="category-nav" class="clearfix m2">
        <ul id="filterOptions">
            <li class="active "><a href="#" data-filter="all" class="btn btn-visible">Alle</a></li>
            <li><a href="#" data-filter="enduro-andalusien" class="btn btn-visible">Enduro Action Andalusien</a></li>
            <li><a href="#" data-filter="enduro-andalusien-wandern" class="btn btn-visible">Enduro Wandern Andalusien</a></li>
            <li><a href="#" data-filter="enduro-andalusien-einsteiger" class="btn btn-visible">Enduro Andalusien Einsteiger</a></li>
            <li><a href="#" data-filter="enduro-marokko" class="btn btn-visible">Enduro Marokko</a></li>
            <li><a href="#" data-filter="enduro-portugal" class="btn btn-visible">Enduro Portugal</a></li>
            <li><a href="#" data-filter="supermoto" class="btn btn-visible">Supermoto</a></li>
         </ul>
    </div>
    Der Filter ist aktuell etwas statisch weil er alle möglichen Events zeigt. Nicht nur die eine Auswahl der vorhandenen.



    Eigenes Contao jQuery Template j_frontend_filter.html5 via Layout eingebunden
    Code:
    <script>
    $(document).ready(function() {
      $('#filterOptions li a').click(function() {
        // fetch the class of the clicked item
        var ourClass = $(this).data("filter");
    
    
        // reset the active class on all the buttons
        $('#filterOptions li').removeClass('active');
        
        // update the active state on our clicked button
        $(this).parent().addClass('active');
        
        if(ourClass == 'all') {
          // show all our items
          $('#termine').children('div.layout_teaser').show();
       
        }
        else {
          // hide all elements that don't share ourClass
          $('#termine').children('div:not(.' + ourClass + ')').hide();
          // show all elements that do share ourClass
          $('#termine').children('div.' + ourClass).show();
        }
        return false;
      });
    });
    </script>
    Geändert von Kahmoon (08.09.2021 um 11:29 Uhr)

  3. #3
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Eine allgemeine Übersicht zum Einstieg findest du hier: https://docs.contao.org/manual/de/guides/filter/
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  4. #4
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    Ahhh danke für die Liste. Hat jemand zufällig ein Beispiel für die Umsetzung mit Rocksolid Custom Elements? Das wäre mir eigentlich am liebsten. Aber so wie ich das lese kann ich so im Frontend nur nach Inhaltselementen filtern!?
    Geändert von Kahmoon (08.09.2021 um 11:27 Uhr)

  5. #5
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Kahmoon Beitrag anzeigen
    Hat jemand zufällig ein Beispiel für die Umsetzung mit Rocksolid Custom Elements?
    eine mögliche Umsetzung findest du hier.
    Grüsse
    Bernhard


  6. #6
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    Danke! Bei mir müsste ich das halt mit einer Eventliste kombinieren. Sprich ich würde nur das Filterlement ohne die Filteritems anlegen und bei Filter Container die Eventliste angeben richtig? Im Event-Listen-Template dann entsprechend data-category beim jeweiligen Event.

    Ich teste mal
    Geändert von Kahmoon (09.09.2021 um 09:11 Uhr)

  7. #7
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Kahmoon Beitrag anzeigen
    Danke! Bei mir müsste ich das halt mit einer Eventliste kombinieren. Sprich ich würde nur das Filterlement ohne die Filteritems anlegen und bei Filter Container die Eventliste angeben richtig? Im Event-Listen-Template dann entsprechend data-category beim jeweiligen Event.
    ungetestet und aus dem Bauch heraus, Ja
    In Kombination mit Events oder News hatte ich's noch nicht umgesetzt ... würde aber alonge dazu genauso aussehen, wie du beschreibst
    Grüsse
    Bernhard


  8. #8
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    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.
    Angehängte Grafiken Angehängte Grafiken
    Geändert von Kahmoon (09.09.2021 um 10:08 Uhr)

  9. #9
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Link zur Seite?
    Grüsse
    Bernhard


  10. #10
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    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
    Angehängte Grafiken Angehängte Grafiken
    Geändert von Kahmoon (09.09.2021 um 15:07 Uhr)

  11. #11
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    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->filterstrue) as $filter): ?>
    PHP-Code:
    <?php foreach ($this->filters as $filter): ?>
    Angehängte Grafiken Angehängte Grafiken
    Geändert von Kahmoon (10.09.2021 um 10:15 Uhr)

  12. #12
    Contao-Nutzer
    Registriert seit
    15.03.2010.
    Beiträge
    28

    Standard

    Hallo zusammen

    Ich danke euch für eure Hilfe. Ich schätze das sehr. Ich habe auch bereits ein Angebot für die Umsetzung erhalten. Ich möchte aber selber zurecht kommen und mich etwas aus meinem Anfängerlevel rausbewegen.

    Ich habe nun versucht das mit Isotope Metafizzy zu lösen: https://isotope.metafizzy.co/ Ich denke, dass das funktionieren sollte, wenn ich den Events eine entsprechende Klasse zuordne. Ich habe nun mal ganz simpel zu Testzwecken den HTML-Code und das CSS des Besipiels eingebunden: https://codepen.io/desandro/pen/nFrte

    Nun scheitere ich aber bereits, das Javascript bei mir zum Laufen zu bringen. Ich habe folgenden Code in ein Template gebracht, dieses j_isfilter.html5 genannt und im Seitentemplate integriert. Leider funktioniert das aber nicht.

    Der Link zur Seite lautet: https://www.webneu.ita-wegman-campus...gen-kopie.html

    Kann mir jemand den Knoten aus dem Schlauch bringen? Weshalb kann ich nicht filtern und sortieren? Die Elemente haben die entsprechenden Klassen, Javascript ist eingebunden und die Sortierbuttons sind auch da.

    Ich komme einfach nicht weiter.

    Vielen Dank für die Hilfe.

  13. #13
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Laut Browser Console wird das Script nicht gefunden ...
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  14. #14
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Unabhängig davon hab ich den Unterschied (hinsichtlich Funktionalität und (kommerzielle) Nutzung (Lizenz) zwischen
    https://masonry.desandro.com/ und https://isotope.metafizzy.co/
    nie ganz verstanden ...

    s.a.: https://masonry.desandro.com/faq.html
    Habs bisher so gelesen: masonry kann das Layout aber ohne Filter Möglichkeiten.

    Ansonsten wäre auch https://www.kunkalabs.com/mixitup/ möglich (Allerdings ebenfalls mit Lizenz zum kommerziellen Einsatz).
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  15. #15
    Contao-Nutzer
    Registriert seit
    15.03.2010.
    Beiträge
    28

    Standard

    Zitat Zitat von Franko Beitrag anzeigen
    Laut Browser Console wird das Script nicht gefunden ...
    Danke für die Analyse. Wenn ich den Seitequelltext durchsehe, so ist der Codee aber drin? Oder verstehe ich etwas falsch?

  16. #16
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Zitat Zitat von schufter Beitrag anzeigen
    Danke für die Analyse. Wenn ich den Seitequelltext durchsehe, so ist der Codee aber drin? Oder verstehe ich etwas falsch?
    Hm, bei mir wirds nicht gefunden:
    https://www.webneu.ita-wegman-campus...pe.pkgd.min.js
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  17. #17
    Contao-Nutzer
    Registriert seit
    15.03.2010.
    Beiträge
    28

    Standard

    Zitat Zitat von Franko Beitrag anzeigen
    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?:
    init.jpg

    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

  18. #18
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.464
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Multimedia

    Zitat Zitat von Kahmoon Beitrag anzeigen
    Ich habe sowas hier mit JS gebaut. Der blendet quasi nur aus. Die Events haben eine CSS Klasse. Die Eventliste hat die ID "termine". Drauf bezieht sich die Suche im JS

    HTML Element
    Code:
    <div id="category-nav" class="clearfix m2">
        <ul id="filterOptions">
            <li class="active "><a href="#" data-filter="all" class="btn btn-visible">Alle</a></li>
            <li><a href="#" data-filter="enduro-andalusien" class="btn btn-visible">Enduro Action Andalusien</a></li>
            <li><a href="#" data-filter="enduro-andalusien-wandern" class="btn btn-visible">Enduro Wandern Andalusien</a></li>
            <li><a href="#" data-filter="enduro-andalusien-einsteiger" class="btn btn-visible">Enduro Andalusien Einsteiger</a></li>
            <li><a href="#" data-filter="enduro-marokko" class="btn btn-visible">Enduro Marokko</a></li>
            <li><a href="#" data-filter="enduro-portugal" class="btn btn-visible">Enduro Portugal</a></li>
            <li><a href="#" data-filter="supermoto" class="btn btn-visible">Supermoto</a></li>
         </ul>
    </div>
    Der Filter ist aktuell etwas statisch weil er alle möglichen Events zeigt. Nicht nur die eine Auswahl der vorhandenen.

    [/CODE]
    Hallo Kahmoon,
    eben über deinen Eintrag gestolpert.

    Habe ich in einer 4.13 Installation eingebaut.
    Klappt sowie; nur der Link auf Alle / Reset führt keine Aktion aus.

    Der data-filter all wird ja nicht gesetzt oder?

    Freu mich auf einen Hinweis. Danke.

    Danke. Erledigt: Ich habe eine Liste (layout_list) und das nun angepasst. Läuft. Cool
    Geändert von planepix (08.02.2023 um 16:57 Uhr)
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  19. #19
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.464
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    …spannend wäre nun ob man mit dieser Methode oder etwas aufgebohrt auch mehrere Kategorien, in dem Fall CSS-Klassen, einem Event zuordnen kann…
    Jemand eine Idee oder Erfahrung damit?


    Das klappt
    Geändert von planepix (27.02.2023 um 20:26 Uhr)
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •