Filtering Blocks

Einer unserer E-Commerce-Kunden hatte eine Reihe von Produkten, die wir online bewerben wollten. Jedes Produkt hatte einen anderen „Grund“, warum es im Angebot war. Vielleicht wurde es eingestellt, vielleicht gab es Sonderpreise, vielleicht gab es kostenlosen Versand. Ursprünglich wollten sie eine spezielle Seite für eine neue Art von Rabatt erstellen: „Rollback Pricing“. Wir argumentierten, dass ein Besucher im Web im Allgemeinen nicht wirklich darum kümmert, warum ein Produkt im Angebot ist, sondern nur, dass es das ist, und dass es von Nachteil sein könnte, die Angebotsseite in verschiedene Seiten aufzuteilen.

Stattdessen haben wir uns darauf geeinigt, die Angebotsseite als eine einzige Seite zu belassen, aber die Produkte darin entweder alle auf einmal oder gefiltert nach der Art des Angebots anzuzeigen. Ein wenig jQuery ist immer für die Aufgabe da!

 

Demo anzeigen   Dateien herunterladen

 

Der Markup

Jeder Block hat eine umgebende Div. Sie hat eine Klasse, die sie mit allen anderen Blöcken für die gemeinsame Formatierung teilt, und eine Klasse, die einzigartig für ihren „Typ“ ist. Divs haben keine href-Elemente, aber sie können rel-Attribute haben, die ich verwendet habe, um eine URL zu speichern. In der Demo ist die Klickbarkeit von Divs nicht implementiert, aber der Code ist im JavaScript auskommentiert, sodass Sie dort sehen können, wie das funktioniert.

<div class="discounted-item reduced" rel="/store/catalog/Dryline_Markers-47-1.html">

    <img src="images/discountthumb-streamliner.jpg" alt="streamliner" />
    
    <div class="reasonbar">
        <div class="prod-title">Streamliner Field Chalkers</div>
        <div class="reason">Rollback Pricing</div>
    </div>

    <div class="discount-bar">
        Price lower than catalog. Save $30!
    </div>

</div>

Das „Filter“-Menü besteht nur aus einer Reihe von Links. Jeder Link hat eine ID, die mit der Klasse des Typs übereinstimmt, nach dem er filtern soll.

<p id="catpicker">
<a href="#" id="allcat" class="current">VIEW ALL</a> | 
<a href="#" id="reduced" class="filter">Rollback Pricing</a> | 
<a href="#" id="freeshipping" class="filter">Free Shipping</a> | 
<a href="#" id="discontinued" class="filter">Closeout</a> | 
<a href="#" id="webonly" class="filter">Web Only</a>
</p>

Das CSS

Es gibt nichts allzu Kompliziertes in der CSS, aber ich füge sie hier zur Sicherheit ein.

*                           { margin: 0; padding: 0; }
html                        { overflow-y: scroll; }
body                        { font: 12px Georgia; }

#page-wrap                  { width: 690px; margin: 20px auto; }

h1                          { font: 30px Georgia; margin: 0 0 10px 0;  }

.discounted-item            { width: 100%; margin: 0 0 10px 0; position: relative; cursor: pointer;
                              height: 79px; }

.discount-bar               { padding: 10px 0 10px 150px; font: italic 18px Georgia, Serif; }

.reasonbar                  { padding: 4px 0 4px 150px; overflow: hidden;
                              width: 540px; color: white; }
                 
.prod-title                 { width: 49%; float: left; font: bold 17px Helvetica, Sans-Serif; }
.reason                     { width: 49%; float: right; text-align: right; text-transform: uppercase; 
                              letter-spacing: 2px; padding: 0 5px 0 0; }
                              
.discounted-item img        { position: absolute; top: 0; left: 0; }

.reduced                    { border: 2px solid #A34427; }
.reduced .reasonbar         { background: #A34427; }
.reduced .discount-bar      { color: #A34427; background: white; }

Zufällige Dinge von Interesse

• Da die Höhe der Seite wächst und schrumpft, ist es am besten, eine vertikale Scrollleiste zu erzwingen, um Sprünge bei der horizontalen Zentrierung zu vermeiden.
• Das Bild wurde mit absoluter Positionierung platziert. Einfache und stabile Layouttechnik dafür, ohne Floats.
• Divs haben einen Zeigercursor, da sie in einer Live-Umgebung klickbar wären.

Das jQuery JavaScript

Es wurde eine kleine Opazitäts-Rollover-Aktion hinzugefügt. (Auch dies ist der Bereich, in dem Sie die Divs klickbar machen könnten, siehe das tatsächliche JS im Beispiel).

$(".discounted-item")
        .css("opacity","0.8")
       .hover(function(){
           $(this).css("opacity","1");
       }, function() {
           $(this).css("opacity","0.8");
});

Und um das Filtern zu ermöglichen

$("#allcat").click(function(){
       $(".discounted-item").slideDown();
       $("#catpicker a").removeClass("current");
       $(this).addClass("current");
       return false;
});
   
$(".filter").click(function(){
        var thisFilter = $(this).attr("id");
        $(".discounted-item").slideUp();
        $("."+ thisFilter).slideDown();
        $("#catpicker a").removeClass("current");
        $(this).addClass("current");
        return false;
});

Etwas anderer Code für den „Alle anzeigen“-Button, da er nur alles anzeigen muss.

In der Live-Demo gibt es auch etwas „Mischen“ (shuffling), sodass die Reihenfolge der Angebote bei jedem Laden der Seite zufällig ist, dank James Padolseys DOM Shuffler.

Ähnliches Tutorial

Trevor Davis hat vor einiger Zeit ein sehr ähnliches Demo auf NETTUTS gemacht.