Contao-Camp 2024
Ergebnis 1 bis 4 von 4

Thema: [Rocksolid Custom Elements] - Filter mit filterizr

  1. #1
    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 [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->filterstrue) 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',
                        ],
                    ],
                ],
            ],
        ],
    );










    Im Frontend wird eine Liste für die Filternavigation und ein filterbarer Inhaltswrapper mit den eingefügten Inhalten erzeugt.


    Eigene CSS Klassen im Backend als auch im Template sind möglich.
    Die Optionsmöglichkeiten von Filterizr werden über eine Templateanpassung eingefügt

    rsce_filterizr_backend_01.png
    rsce_filterizr_backend_02.png
    rsce_filterizr_backend_03.png
    rsce_filterizr_backend_04.png
    Grüsse
    Bernhard


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

    Standard

    Danke,
    evtl. auch als Einstieg hilfreich:
    https://docs.contao.org/manual/de/guides/filter/
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  3. #3
    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 Franko Beitrag anzeigen
    evtl. auch als Einstieg hilfreich
    ja korrekt, dein Doku-Eintrag war auch für mich in diesem Projekt sehr hilfreich und hat mich zu dieser, etwas anderen Variante inspiriert
    Danke an dieser Stelle für den Doku-Eintrag!
    Grüsse
    Bernhard


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

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    ja korrekt, dein Doku-Eintrag war auch für mich in diesem Projekt sehr hilfreich und hat mich zu dieser, etwas anderen Variante inspiriert
    Danke an dieser Stelle für den Doku-Eintrag!
    Deine Umsetzung bietet ja eine komplette "RSCE" Lösung.
    In der Doku habe ich ja dies nur hinsichtlich der Data-Attribute entsprechend beschrieben.

    Evtl. könnte man deine vollständige "RSCE" Lösung in der Doku im Nachhinein einbinden.
    • Entweder "nur" mit Link auf diesen Forum Beitrag
    • Oder vollständig mit deinen Beispielen (de/en)


    Weiß nur nicht ob dies für die Doku Guides dann nicht zu "aufwändig" wäre bzw gewünscht ist?
    Evtl. sollte @Spooky dies entscheiden ...
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

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
  •