Katalogliste mit Accordion
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:
Code:
<?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
Liste der Anhänge anzeigen (Anzahl: 1)
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-Code:
<?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.
Liste der Anhänge anzeigen (Anzahl: 1)
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-Code:
<?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
Katalogliste mit Kategorie-Sammlung und Accordion
Bitte schön:
Mit sauberer Klassenvergabe. (& Zeichen etc. werden ersetzt und Leerzeichen entfernt).
PHP-Code:
<?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): ?>
<?php
$category = $entries[0]['data'][$fieldName]['value'];
$class = strtolower( preg_replace( array('/ /', '/&/'), array('', '-'), $category) );
?>
<div class="layout_simple block ce_accordion">
<div class="toggler <?php echo $class ?>"><h3><?php echo $category; ?></h3></div>
<div class="accordion <?php echo $class; ?>">
<?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; ?>
Viele Grüße,
Tim
Liste der Anhänge anzeigen (Anzahl: 2)
OK, Fehler gefunden. Mootools waren im Template nicht eingebunden. Das klappt jetzt.
Leider funzt es nicht, dass alle Elemente geschlossen sind.
Und auch der Effekt, dass alle <accordion>-Elemente eingeklappt werden. Beim ersten <toggler> klappt es bei den ersten 4, danach nur noch beim ersten <accordion>. Hat jemand eine Idee woran das liegen kann?
Screenshot vom Frontend und Quelltext-Ausschnitt anbei
