Catalog-Liste mit ABC-Klickliste und Logo-Carousel

[Nina]

Ich möchte die Katalogeinträge wie im Screenshot dargestellt auf der Übersicht ausgeben. Die Aufteilung sieht folgendermaßen aus:

1. Logo-Carousel
Jedem Eintrag ist im Catalog ein Logo zugewiesen. Diese Logos sollen auf der Übersicht mit einem "Carousel"-Effekt dargestellt werden, so dass man zwischen den Logos in einem Halbbogen hin- und herwechseln kann. Wenn man auf ein Logo klickt, soll man zum entsprechenden Catalog-Eintrag (Reader) gelangen.

Umsetzungsidee:
Beim Carousel bin ich noch sehr am überlegen, wie ich das in Verbindung mit dem Catalog machen kann. Hat da jemand eine schöne Script-Empfehlung? Dann würde ich mir das in einem Template zusammenschrauben, in das ich nur die Logos und die Links ausgeben lasse und darin in das MooTools-Script integriere.

2. Alphabetische Liste
Darunter sollen die Buchstaben des Alphabets aufgelistet sein. Wenn man auf einen entsprechenden Buchstaben klickt, soll man dann zum Anker mit dem gewählten Anfangsbuchstaben in der darunterliegenden Liste springen. Unter jeder Anfangsbuchstaben-Überschrift befinden sich die Einträge, die mit diesem Anfangsbuchstaben beginnen. Sie sind ebenfalls zum jeweiligen Catalog-Eintrag (Reader) verlinkt.

Umsetzungsidee:
Für die ABC-Liste würde ich in Bezug auf die CSS-Darstellung grob dieses Vorbild wählen. Und dann vermutlich mehrere Catalog-Listen anlegen, bei denen ich jeweils als Bedingung den Anfangsbuchstaben des Namensfeldes abfrage?

Habt ihr Tipps wie ich das am schönsten umsetzen kann?

[xtra]

Ein Lister sollte da vollkommen reichen.

Diesen durchlaeufst du im Template 2mal.
Beim ersten Durchlauf gibst du dir dein Karousell aus und packst dir gleichzeitig die Items in eine alphabethische Liste um diese unten dann vorzuhalten.

Abschliessend nur noch die Alphabethischen Listen durchlaufen und du bist fertig.

Ein Lister, ein Template, ein bisschen Schleifencode.

PS: gerade zum alphabeth hab ich dem Yoda heute etwas gebaut, frag ihn doch einfach mal.

[Nina]

PS: gerade zum alphabeth hab ich dem Yoda heute etwas gebaut, frag ihn doch einfach mal.

Werd ich tun

[Nina]

Ich tendiere bisher zum Einsatz des MooFlow- oder Imageflow-Scripts für das Logo-Carousel. Falls noch jemand ein gleich funktionierendes, hübsches Script kennt, nehme ich gerne Tipps an

[MacKP]

Werd ich tun

Ich habs dir erst mal roh als Mail geschickt.. bei Zeiten werde ich das noch ins Wiki bringen.. aber dieses Jahr wirds noch knapp werden ;-)

Viele Grüße

[derbackes]

Wäre es möglich das Template auch mal zu bekommen?

Sitze im Moment an einer ähnlichen Lösung für eine Art Lexikon und könnte es daher gut verwenden.

Danke im voraus! backes

[xtra]

Aber klar doch, hier ist es.

<?php
// configuration:
$captionfield = '<change to title field for assortion>';
// if you want to remap certain characters, put them in this array.
// remember to keep them uppercase as otherwise the script can not assort them.
$remap = array(
    'Ä' => 'A',
    'Ö' => 'O',
    'Ü' => 'U',
);
// define the caption of the "catch-all" tab. Everything that is not a letter and 
// has not been translated to one using the above remapping will end up in there.
$other = '[symbols]';
?>
<?php if (count($this->entries)): ?>
<?php
$alpha = array();

// asort everything into the alphabetically array.
foreach ($this->entries as $entry)
{
    $c = mb_substr($entry['data'][$captionfield]['raw'], 0, 1);
    if(!in_array(strtoupper($c), array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z')))
    {
        // not a plain char, remap?
        if(array_key_exists($c, $remap))
            $c = $remap[$c];
        else
            $c = $other;
    }
    if(!is_array($alpha[$c])){$alpha[$c]=array();}
    $alpha[$c][]=$entry;
}

?>
<div class="catalog_alphabet">
<?php foreach($alpha as $c=>$entries): ?>
<?php if(!count($entries))continue; ?>
  <h3><?php echo $c; ?></h3>
<?php foreach ($entries as $entry): ?>
<div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
<?php if($entry['linkEdit']): ?><?php echo $entry['linkEdit']; ?><?php endif; ?>
<?php foreach ($entry['data'] as $field=>$data): ?>
<?php if(strlen($data['raw']) && !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; ?>
</div>
<?php endforeach; ?>
<?php endforeach; ?>
</div>
<?php else: ?>
<p class="info">Invalid item reference for catalog.</p>
<?php endif; ?>

Gruss
Chris

[dhe]

Auflistung Catalog Einträge in alphabetischer Reihenfolge mit Schlüssel

Hi Leute,
ich habe den Code von xtra mal übernommen und etwas angepasst, da der Code bei mir nicht richtig funktioniert hat. Folgender Code erzeugt eine Liste nach alphabetischer Reihenfolge.

<?php
// configuration:
$captionfield = '<change to title field for assortion>';
// if you want to remap certain characters, put them in this array.
// remember to keep them uppercase as otherwise the script can not assort them.
$remap = array(
    'Ä' => 'A',
    'Ö' => 'O',
    'Ü' => 'U',
);
// define the caption of the "catch-all" tab. Everything that is not a letter and 
// has not been translated to one using the above remapping will end up in there.
$other = 'Sonstige';
?>
<?php if (count($this->entries)): ?>
<?php
$alpha = array();

// asort everything into the alphabetically array.
foreach ($this->entries as $entry)
{
    //EDIT dhe: das strtoupper muss hier schon hin    
    $c = strtoupper(mb_substr($entry['data'][$captionfield]['raw'], 0, 1));
    if(!in_array($c, array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z')))
    {
        // not a plain char, remap?
        if(array_key_exists($c, $remap))
            $c = $remap[$c];
        else
            $c = $other;
    }
    if(!is_array($alpha[$c])){
           $alpha[$c]=array();
    }
    $alpha[$c][]=$entry;
}

//EDIT dhe Sortiert das Array nach dem Schlüssel $c
ksort($alpha);
?>
<div class="catalog_alphabet">
<?php foreach($alpha as $c=>$entries): ?>
<?php if(!count($entries))continue; ?>
    <h3><?php echo $c; ?></h3>
    <ul>
    <?php foreach ($entries as $entry): ?>
        <li class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
            <a href="<?php echo $entry['url']?>"><?php echo $entry['data']['title']['value'] ?></a>
        </li>
    <?php endforeach; ?>
    </ul>
<?php endforeach; ?>
</div>
<?php else: ?>
<p class="info">Invalid item reference for catalog.</p>
<?php endif; ?>

[Tim G]

Hi Nina,
wenn du noch eine Template-Vorlage für die Einbindung des MooFlow-Scrips brauchst.
Ich hab hier: debug.tim-gatzky.de unter "Katalog Templates" ein Template mit dem Coin-Slider für jQuery. Der HTML Aufbau ist sehr nah an dem vom MooFlow.
Schreibste ne PM, dann kann ich`s schicken.

Grüße