Katalogliste mit Accordion

[Ignatz]

Hallo,

ich suche eine Lösung für das folgende Problem:

Ich möchte die Katalogitems nach Kategorien sortiert als Accordion darstellen. D. h. nach Klick auf die Kategorie werden die Items angezeigt.
Als Vorlage dient mir ein modifiziertes catalog_simple.tpl.
Dieses habe ich so angepasst, dass das Accordion erstmal funktioniert.
Aber das geht nur, solange je Kategorie nur ein Item vorhanden ist. Sobald es mehr sind, funzt das Accordion nicht mehr.
Mein catalog_simple.tpl sieht im Moment so aus:

<?php if (count($this->entries)): ?>
   <?php $lastcat=''; ?>
   <div class="layout_simple">
   <?php foreach ($this->entries as $entry): ?>
      <?php if ($lastcat!=$entry[data]['Kategorie']['value']): ?>
         <?php $lastcat=$entry[data]['Kategorie']['value']; ?>
         <div class="cat toggler"><?php echo $entry[data]['Kategorie']['value']; ?></div>
         <div class="accordion"><div>
      <?php endif; ?>
      <div class="floatbox item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
      <?php foreach ($entry['data'] as $field=>$data): ?>
         <?php if ($field=='Kategorie') continue; ?>
         <?php if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>
            <div class="field <?php echo $field; ?>">
            <div class="label"><?php echo $data['label']; ?></div>
            <div class="value"><?php echo $data['value']; ?></div>
            </div>
         <?php endif; ?>
      <?php endforeach; ?>
      <?php if ($entry['showLink'] && $entry['link']): ?>
         <div class="link"><?php echo $entry['link']; ?></div>
      <?php endif; ?>
      <?php if ($entry['linkEdit']): ?>
         <div class="linkEdit"><?php echo $entry['linkEdit']; ?></div>
      <?php endif; ?>
      </div></div></div>
   <?php endforeach; ?>
   </div>
<?php else: ?>
   <?php if ($this->condition): ?>
      <div class="condition"><?php echo $this->condition; ?></div>
   <?php else: ?>
      <p class="info">There are no entries matching your search.</p>
   <?php endif; ?>
<?php endif; ?>

Ich bin leider nicht der PHP-Crack und habe bisher nicht herausgefunden wo hier der Haken ist.

Hier noch der entsprechende Link zur Seite.

Kann jemand helfen?

Ignatz

[Tim G]

Hi,
gibt hier zwei Möglichkeiten:

1. Der gesamte Katalog wird in einem Accordion dargestellt. (mod_cataloglist muss modifiziert werden)
2. Die Einträge des Katalogs werden in einem Accordion dargestellt. (catalog_* layout muss modifiziert werden)
(3). Beides in einem verschachtelten Accordion.

Du willst 1., richtig?

<?php if (!$this->searchable): ?>
<!-- indexer::stop -->
<?php endif; ?>
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<div class="toggler"><<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>></div>
<?php endif; ?>
<span class="total"><?php echo $this->total; ?></span>

<?php if ($this->editEnable): ?>
<div class="addUrl"><a href="<?php echo $this->addUrl; ?>">Add New Item</a></div>
<?php endif; ?>

<div class="accordion">
<?php echo $this->catalog; ?>
<?php echo $this->pagination; ?>
</div>

</div>
<?php if (!$this->searchable): ?>
<!-- indexer::continue -->
<?php endif; ?>

-> Die Überschrift ist der Toggler.

Das sollte passen.
Einfach das template in mod_cataloglist_accordion.tpl umbennen, Code rein und im Katalog-Liste Modul auswählen.

Probier mal obs gleich passt.

Grüße,
Tim

[Ignatz]

Hallo Tim G,

nicht der gesamte Katalog soll ein Accordion sein, sondern nur die Kategorien. Will heißen, wenn ich die Seite aufrufe, sehe ich untereinander die Kategorien. Klicke ich dann auf eine dieser, so öffnet sich das Accordion mit den Items, die zu dieser Kategorie gehören. Also die Kategorie ist der Toggler.

Nach deiner Beschreibung eigentlich 2.)

Hoffe, das ist verständlich und nicht verdrückt ausgekehrt.

Gruß,
Ignatz

[Tim G]

Ah ok,
und die Kategorien sind ein Feld innerhalb des Kataloges.

Ich baus mal schnell um...
dann warste oben ja schon ganz nah.

[Tim G]

Hi,
du warst schon auf dem richtigen Weg:

<?php if (count($this->entries)): ?>
<?php $togglerFieldName = 'project_name'; ?>
<div class="layout_simple ce_accordion">


<?php foreach ($this->entries as $entry): ?>
<div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
<div class="toggler"><h3><?php echo $entry['data'][$togglerFieldName]['value']; ?></h3></div>

<div class="accordion">
<?php foreach ($entry['data'] as $field=>$data): ?>
<?php if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>

<?php if($field != $togglerFieldName): ?>
<div class="field <?php echo $field; ?>">
    <div class="label"><?php echo $data['label']; ?></div>
    <div class="value"><?php echo $data['value']; ?></div>
</div>
<?php endif; ?>

<?php endif; ?>
<?php endforeach; ?>

<?php if ($entry['showLink'] && $entry['link']): ?>
<div class="link"><?php echo $entry['link']; ?></div>
<?php endif; ?>
<?php if ($entry['linkEdit']): ?>
<div class="linkEdit"><?php echo $entry['linkEdit']; ?></div>
<?php endif; ?>
</div>

</div>

<?php endforeach; ?>
</div>
 
<?php else: ?>

<?php if ($this->condition): ?>
<div class="condition"><?php echo $this->condition; ?></div>
<?php else: ?>
<p class="info">There are no entries matching your search.</p>
<?php endif; ?>

<?php endif; ?>

Ich hab oben eine Variable drin, die den Namen des Feldes beschreibt, das als Toggler dienen soll. In meinem Fall heisst das Feld 'project_name' -> es ist auch das erste der Liste

In der ersten foreach - Schleife (Abhängig von der Anzahl an Katalog-Einträgen). Wird jeweils mit dem auserkorenen Feldnamen der Toggler gebildet und das accordion div.

Innerhalb des accordion divs läuft dann die zweite Schleife, die die Felder ausgibt.
Damit man hier keine Dopplungen mit dem Toggler Feld hat, wird dieses einfach ausgeschlossen. <?php if($field != $togglerFieldName): ?>


Werd ich gleich mal aufheben das Template

Grüße,
Tim

ps. war noch nen kleiner Schönheitsfehler drin.
Jetzt werden auch wieder die item divs samt Klasse erstellt.

[Ignatz]

Hallo Tim,

das sieht schon gut aus!
Allerdings wird für jedes Item einer Kategorie auch die Kategorie wiederholt.
Siehe Link im ersten Post.
Diese soll natürlich nur einmal, quasi als Überschrift angezeigt werden.

Gruß,
Ignatz

[Tim G]

Ah ja,
das wird schwierig.

Du willst das ganze jetzt noch in die richtigen Schubladen sortiert haben.
Die Schwierigkeit ist, das wir von oben nach unten, ganz stupide, durchlaufen und immer wenn der bestimmte Eintrag gefunden wurde den toggler erstellen.

Problem ist. Das erste Element gehört in Kategorie 1, das 2. z.B. in Kategorie 2 und das 3. wieder in 1.

Man müsste also vorher den kompletten Datensatz sortieren (eine geordnete Liste drausmachen), da das nachträglich in die Schublade legen nicht geht bzw. sehe ich grad nicht wie

Mal schauen, ob man nicht einfach vorher nach den verwendeten Kategorien sortieren kann und dann arbeiten wir die Liste ab.

Oder vorher neue Arrays erstellen und diese dann ausgeben, das sollte klappen.

[Ignatz]

Hallo Tim,

danke für deine Mühe. Denke bitte nicht, dass ich dich alleine arbeiten lasse. Ich bin auch weiter dran, habs aber bisher nicht lösen können.
Dieses Template sortiert ja bereits die Items nach Kategorien, zeigt also eine Kategorie als Überschrift und darunter die zugehörigen Items an.

Das Ganze wollte ich eben nur als hübsches Accordion anlegen ;-)

Gruß,
René

[Tim G]

Cool,
das ist ja schon mal die halbe Miete.

Gucken wir uns das mal an. Das war dein erstes Template. Sorry, war ich bissel forsch.
So etwas ähnliches kann ich eh gebrauchen und für heut ist eh Feierabend - da schadet bissel basteln nicht.

<?php
$fieldName = 'category';
if (count($this->entries)):
   $lastcat=''; ?>
   <div class="layout_simple">
   <?php foreach ($this->entries as $entry):
      if ($lastcat!=$entry[data][$fieldName]['value']):
         $lastcat=$entry[data][$fieldName]['value']; ?>
         <div class="cat toggler"><?php echo $entry[data][$fieldName]['value']; ?></div>
      <?php endif; ?>
      <div class="accordion">
      <div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
      <?php foreach ($entry['data'] as $field=>$data):
         if ($field==$fieldName) continue;
         if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>
            <div class="field <?php echo $field; ?>">
            <div class="label"><?php echo $data['label']; ?></div>
            <div class="value"><?php echo $data['value']; ?></div>
            </div>
         <?php endif;
      endforeach;
      if ($entry['showLink'] && $entry['link']): ?>
         <div class="link"><?php echo $entry['link']; ?></div>
      <?php endif;
      if ($entry['linkEdit']): ?>
         <div class="linkEdit"><?php echo $entry['linkEdit']; ?></div>
      <?php endif; ?>
      </div>
      </div>
   <?php endforeach; ?>
   </div>
<?php else:
   if ($this->condition): ?>
      <div class="condition"><?php echo $this->condition; ?></div>
   <?php else: ?>
      <p class="info">There are no entries matching your search.</p>
   <?php endif;
endif;
?>

Oben den Feldnamen deiner Kategorie-Felder eintragen.

[Tim G]

Bei mir verschluckt der Einträge, bei Dir auch?

[Ignatz]

Es wird schon wärmer

Aber so ganz ist es noch nicht, wo's hin soll.
Wir haben zwar jetzt einen Toggler, aber darunter mehrere <div class="accordion"....

[Tim G]

Moin,
ist gelöst!
Das Script im Wiki ist nicht verkehrt, man muss allerdings die Einträge der Reihe nach anlegen. Alle Einträge für Kat. 1 hintereinander, dann für Kat. 2. Sonst klappt die Sammlung auch nicht und die Liste wird verkehrt erstellt:

Kat. 1
Kat. 2
Kat. 1

Ich hab das mal grundlegend umgebaut mit einem Array, der erst alle nötigen Kategorien erstellt und dann den jeweiligen Kategorien die Einträge einsortiert.
So ist es egal ob der erste Eintrag in Kat. 1 ist, der 2. in Kat. 3, der dritte wieder in Kat. 1 und der vierte in Kat. 2. So wie man sich das halt vorstellt.

Ich reiche dem toggler und dem accordion noch den Namen der Kategorie als Klasse weiter, dann kann man auch sehr komfortabel die styles anpassen.

Optimal wäre wenn noch wenn ein Wert für die Sortierung mitgeliefert werden würde, dann könnte man die Sortierung noch beinflussen.

<?php if (count($this->entries)): ?>

<?php
$fieldName = 'category'; // field name for creating collections
$arrCategories = array(); // collects all catalog entries
$arrSorted = array(); // collects all sorted catalog entries
$index = 0;
foreach($this->entries as $entry)
{
    $act = $entry['data'][$fieldName]['value'];
    
    // check if category already exists / or not
    if( array_key_exists($act, array_flip($arrCategories) ) )
    {
        $arrSorted[$act][] = $entry; // fill existing category node
        $index++;
    } 
    else 
    {
        if( !strlen($act) ) // Incase entry has no categorie selected, build free category
        {
            $act = 'Ohne Kategorie';
        }
        
        $arrSorted[$act][0] = $entry; // create new category node
    }
    $arrCategories[] = $entry['data'][$fieldName]['value'];
}
?>

<?php foreach($arrSorted as $k => $entries): ?>
<div class="layout_simple block ce_accordion">
    <div class="toggler <?php echo str_replace(' ', '', $k); ?>"><h3><?php echo $k; ?></h3></div>
    <div class="accordion <?php echo str_replace(' ', '', $k); ?>">
    <?php foreach($entries as $entry): ?>
        <div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
        
        <?php foreach($entry['data'] as $field => $data): ?>
        <?php if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>
            <?php if($field == $fieldName) continue; ?>            
            <div class="field <?php echo $field; ?>">
                <div class="label"><?php echo $data['label']; ?></div>
                <div class="value"><?php echo $data['value']; ?></div>
            </div>
            
        <?php endif; ?>
        <?php endforeach; ?>
        </div>
        
    <?php endforeach; ?>
    </div>
    
    <?php if ($entry['showLink'] && $entry['link']): ?>
    <div class="link"><?php echo $entry['link']; ?></div>
    <?php endif; ?>
    <?php if ($entry['linkEdit']): ?>
    <div class="linkEdit"><?php echo $entry['linkEdit']; ?></div>
    <?php endif; ?>
    </div>
    
<?php endforeach; ?>
</div>

<?php else: ?>

<?php if ($this->condition): ?>
<div class="condition"><?php echo $this->condition; ?></div>
<?php else: ?>
<p class="info">There are no entries matching your search.</p>
<?php endif; ?>

<?php endif; ?>

Probiers mal aus,
Tim

ps. ok man könnte sich das sorting aus der DB saugen.

[Tim G]

Um das ganze komplett zu machen:
Hier das ganze mit Sortierung nach der Kategorie-Spalte in der tl_taxonomy Tabelle.
Ganz oben in der Variablen $fieldName den Namen des Kategorie-Feldes eintragen.
Der Rest sollte von selbst passieren.

<?php if (count($this->entries)): ?>

<?php
$fieldName = 'category'; // field name for creating collections
$emptyCategoryName = 'Ohne Kategorie'; // create a seperate category for all items that are not selected in category
$arrCategories = array(); // collects all catalog entries
$arrSorted = array(); // collects all sorted catalog entries
$index = 0;
foreach($this->entries as $entry)
{
    $act = $entry['data'][$fieldName]['value'];
    // check if category already exists / or not
    if( array_key_exists($act, array_flip($arrCategories) ) )
    {
        $arrSorted[$act][] = $entry; // fill existing category node
        $index++;
    } 
    else 
    {
        if( !strlen($act) ) // Incase entry has no categorie selected, build free category
        {
            $act = $emptyCategoryName;
        }
        $arrSorted[$act][0] = $entry; // create new category node
    }
    $arrCategories[] = $entry['data'][$fieldName]['value'];
}

/**
 * Get category sorting from tl_taxonomy
 */
$catalog = $this->entries[0]['tablename'];
$arrCategorySorted = array();
foreach($this->entries as $entry)
{
    $this->import('Database');
    $objField = $this->Database    ->prepare("SELECT $fieldName FROM $catalog WHERE id=?")
                                ->limit(1)
                                ->execute($entry['id']);
    if(!$objField->numRows) continue;
    $taxId = $objField->$fieldName;
    
    $objField = $this->Database    ->prepare("SELECT sorting, name FROM tl_taxonomy WHERE id=?")
                                   ->limit(1)
                                ->execute($taxId);
    if(!$objField->numRows) continue;
    $sorting = $objField->sorting;
    $category = $objField->name;
    
    if( array_key_exists($category, $arrSorted ) )
    {
        // Remember sorting number in first element of each category
        $arrSorted[$category][0]['data'][$fieldName]['sorting'] = $sorting;
        $arrCategorySorted[$sorting] = $arrSorted[$category];
    }
}

// Sort
ksort($arrCategorySorted);
?>

<?php foreach($arrCategorySorted as $key => $entries): ?>
<div class="layout_simple block ce_accordion">
    <div class="toggler <?php echo str_replace(' ', '', $key); ?>"><h3><?php echo $entries[0]['data'][$fieldName]['value']; ?></h3></div>
    <div class="accordion <?php echo str_replace(' ', '', $key); ?>">
    
    <?php foreach($entries as $entry): ?>
        
        <div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
        <?php foreach($entry['data'] as $field => $data): ?>
        <?php if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>
            <?php if($field == $fieldName) continue; ?>            
            <div class="field <?php echo $field; ?>">
                <div class="label"><?php echo $data['label']; ?></div>
                <div class="value"><?php echo $data['value']; ?></div>
            </div>
        <?php endif; ?>
        <?php endforeach; ?>
        </div>
        
    <?php endforeach; ?>
    </div>
    
    <?php if ($entry['showLink'] && $entry['link']): ?>
    <div class="link"><?php echo $entry['link']; ?></div>
    <?php endif; ?>
    <?php if ($entry['linkEdit']): ?>
    <div class="linkEdit"><?php echo $entry['linkEdit']; ?></div>
    <?php endif; ?>
    </div>
    
<?php endforeach; ?>
</div>

<?php else: ?>

<?php if ($this->condition): ?>
<div class="condition"><?php echo $this->condition; ?></div>
<?php else: ?>
<p class="info">There are no entries matching your search.</p>
<?php endif; ?>

<?php endif; ?>

Viel Spaß damit,
Der Tim

[Ignatz]

Hallo Tim,

erst einmal vielen Dank! Das funktioniert tatsächlich. Ich habe dein Template zwar für meine Bedürfnisse etwas angepasst, aber jetzt tut es, was es soll. Ich schätze, das könnte einige interessieren.
Hier mein angepasstes Template:

<?php if (count($this->entries)): ?>

<?php
$fieldName = 'Kategorie'; // field name for creating collections
$emptyCategoryName = 'Ohne Kategorie'; // create a seperate category for all items that are not selected in category
$arrCategories = array(); // collects all catalog entries
$arrSorted = array(); // collects all sorted catalog entries
$index = 0;
foreach($this->entries as $entry)
{
    $act = $entry['data'][$fieldName]['value'];
    // check if category already exists / or not
    if( array_key_exists($act, array_flip($arrCategories) ) )
    {
        $arrSorted[$act][] = $entry; // fill existing category node
        $index++;
    } 
    else 
    {
        if( !strlen($act) ) // Incase entry has no categorie selected, build free category
        {
            $act = $emptyCategoryName;
        }
        $arrSorted[$act][0] = $entry; // create new category node
    }
    $arrCategories[] = $entry['data'][$fieldName]['value'];
}

/**
 * Get category sorting from tl_taxonomy
 */
$catalog = $this->entries[0]['tablename'];
$arrCategorySorted = array();
foreach($this->entries as $entry)
{
    $this->import('Database');
    $objField = $this->Database    ->prepare("SELECT $fieldName FROM $catalog WHERE id=?")
                                ->limit(1)
                                ->execute($entry['id']);
    if(!$objField->numRows) continue;
    $taxId = $objField->$fieldName;
    
    $objField = $this->Database    ->prepare("SELECT sorting, name FROM tl_taxonomy WHERE id=?")
                                   ->limit(1)
                                ->execute($taxId);
    if(!$objField->numRows) continue;
    $sorting = $objField->sorting;
    $category = $objField->name;
    
    if( array_key_exists($category, $arrSorted ) )
    {
        // Remember sorting number in first element of each category
        $arrSorted[$category][0]['data'][$fieldName]['sorting'] = $sorting;
        $arrCategorySorted[$sorting] = $arrSorted[$category];
    }
}

// Sort
ksort($arrCategorySorted);
?>

<?php foreach($arrCategorySorted as $key => $entries): ?>
<div class="layout_simple block ce_accordion">
    <div class="toggler"><?php echo $entries[0]['data'][$fieldName]['value']; ?></div>
    <div class="accordion"> 
    
    <?php foreach($entries as $entry): ?>
        
        <div class="floatbox item">
        <?php foreach($entry['data'] as $field => $data): ?>
        <?php if (!in_array($field, array('catalog_name','parentJumpTo'))): ?>
            <?php if($field == $fieldName) continue; ?>            
            
                <div class="name"><?php echo $data['value']; ?></div>
                <div class="link"><?php echo $entry['link']; ?></div>
            
        <?php endif; ?>
        <?php endforeach; ?>
        </div>
        
    <?php endforeach; ?>
    </div>
  </div>
    
<?php endforeach; ?>


<?php else: ?>

<?php if ($this->condition): ?>
<div class="condition"><?php echo $this->condition; ?></div>
<?php else: ?>
<p class="info">There are no entries matching your search.</p>
<?php endif; ?>

<?php endif; ?>

Ich habe ein paar von mir nicht benötigte Funktionalitäten entfernt. Wichtig war, den Link mit in die innere Schleife zu nehmen, sonst hatte nur jeweils das letzte Item einer Kategorie diesen Link, jetzt hat ihn jedes Item. Außerdem habe ich festgestellt, dass das Accordion-Script das <h3>-Tag im Toggler-div nicht mag. Erst nachdem ich es entfernte, hat das Accordion funktioniert.
Die floatbox-Klasse kommt übrigens vom Yaml-Framework und ist nur für meine die CSS-Anpassung nötig.

Ich habe auch die Kategorie-Namen als Klasse entfernt, mit deinem zweiten Template ergeben sich dort seltsamerweise Zahlen - 128, 256, 512 usw. Diese Zahlenfolge kommt mir bekannt vor Beim ersten Template hat es noch funktioniert. Auch müsste man eventuell die Kategorienamen mit regulären Ausdrücken filtern, denn ich hatte in einem Kategorienamen ein "&" in der Klasse und das hat der Validator angemeckert.

Ansonsten nochmal ein großes DANKESCHÖN! Das hätte ich nicht hinbekommen.
Jetzt das Ganze noch mit CSS etwas aufgehübscht und es läuft.

Gruß,
Ignatz

[Tim G]

Prima,
stellt beim 2. hab ich vergessen ne richtige klasse einzusetzen.
Das war so zwischen Tür und Angel.
Bessere ich morgen noch aus.
Dann ist es super.


Sent from my iPhone using Tapatalk