Inhalte per Auswahl nach Kategorien geordnet anzeigen lassen

ica112 · 10.06.2012

Hi,

ich überarbeite gerade eine Webseite und bin mir an einem Punkt nicht ganz sicher, wie ich den umsetzen kann.
Und zwar geht es um eine Unterseite, auf der verschiedene Produkte aufgelistet werden. Diese Produkte werden mit Überschriften, Bildern und Texten angegeben. Bisher war es so, dass es nur eine Gesamtliste gab, da es sich nur um eine überschaubare Stückzahl handelte.

Das hat sich jetzt eben geändert und um eine zu lange Liste zu vermeiden wurde eine Unterteilung sinnvoll. Es gibt jetzt verschiedene Kategorien wie z.B. verschiedene Größen, Komplettinstallation oder Selber bauen, verschiedene vorgegebene Materialien.

Der Kunde stellt sich das so vor, dass oben eine Eingabemaske ist, in der man diese verschiedenen Kategorien anhaken kann und die Liste dann eben entsprechend angezeigt wird. Dabei ist zu beachten, dass manche Produkte verschachtelt sein können, da es die gleichen Produkte in verschiedenen Materialien und Größen gibt.

Ich hoffe ich konnte das jetzt verständlich beschreiben...
Hat jemand evtl. eine Ahnung wie man so etwas am Einfachsten umsetzen könnte?
Ich selber arbeite hauptsächlich mit Dreamweaver CS4 und habe was das Programmieren angeht keine all zu großen Kenntnisse.

msblacky · 10.06.2012

AW: Inhalte per Auswahl nach Kategorien geordnet anzeigen lassen

Hallo,

ich denke wenn Du keine großen Kenntnisse hast vom Programmieren wird sowas sehr schwer umzusetzen sein, Du brauchst im Hintergrund eine Datenbank und dann solltest Du auch PHP können, ist natürlich auch schwer etwas genaueres zu sagen wenn man die Seite dazu nicht sehen kann.

Schöne Grüße in das 10 km entfernte OG.

msblacky

ica112 · 10.06.2012

AW: Inhalte per Auswahl nach Kategorien geordnet anzeigen lassen

Ja ich weis ist schade dass ich den "aktuellen Stand" nicht zeigen kann bzw. darf. Der Kunde will erst damit an den Start gehen wenn alle Änderungen an der Site abgeschlossen sind und diese Liste ist nur ein kleiner Teil davon. Im Moment sind wir ohnehin in dem Stadium: Welche Möglichkeiten haben wir und welche davon setzen wir um?

Ich dachte mir eigentlich schon, dass das wohl ein Fall für PHP ist. Da ich da aber nur Anfängerkenntnisse habe suche ich eben erst einmal nach einer alternativen Lösung, bevor ich mich an einen Programmierer wände.

Über Dreamweaver Widgets gäbe es ja die Möglichkeit, eine editierbare Tabelle zu erstellen. Da hätte ich zwar noch immer eine Gesamtliste, könnte aber die einzelnen Einträge nach den genannten Kriterien anordnen lassen. Das ginge zumindest mal in eine ähnliche Richtung aber ich suche natürlich weiter.

Danke und Gruß zurück aus dem Wochenendrefugium Strasbourg.

Edith sagt: Hat sich erledigt, habe eine Lösung per Javascript gefunden.

Salael · 10.06.2012

AW: Inhalte per Auswahl nach Kategorien geordnet anzeigen lassen

ica112 schrieb:
Edith sagt: Hat sich erledigt, habe eine Lösung per Javascript gefunden.

Für mich wäre es interessant zu wissen, welche Lösung Du per JS gefunden hast.

ica112 · 10.06.2012

AW: Inhalte per Auswahl nach Kategorien geordnet anzeigen lassen

Ok also ich habe in HTML ein Formular erstellt.
Innerhalb dieses Form-Tags habe ich eine Kontrollkästchengruppe erstellt, mit der man eben die verschiedenen Kategorien einzeln anwählen kann (wie gesagt eben Farbe, Anzahl, etc.). Natürlich ist es auf diese Weise auch möglich, mehrere Kategorien gleichzeitig auszuwählen. Jeder dieser Kategorien habe ich einen Wert zugewiesen (value:1, value:2, etc.)

Darunter habe ich verschiedene span-tags erstellt, die wiederum verschiedene IDs haben (div:1, div:2, etc.). Standardmäßig sind die per CSS so eingestellt, dass man die nicht sieht (style="display:none;"). Innerhalb eines solchen span-tags gebe ich alle Inhalte der entsprechenden Kategorie ein.

Das Javascript sorgt jetzt dafür, dass wenn ich z.B. Kategorie 2 anwähle (sagen wir mal die Kategorie zeigt mir alle Produkte in grün), mir unten das span tag angezeigt wird, welches eben die ID 2 hat. Darin befinden sich alle Bilder und Texte zu grünen Produkten.
Das ganze funktioniert wie gesagt bei mehreren Auswahlen gleichzeitig.

Hier der Code zum Nachvollziehen; ist noch nicht aufgeräumt oder gestaltet, nur mal die reine Funktion:

Code:

<html>

<head>
<script type="text/javascript">
<!--
window.onload=function()
{
    document.getElementById('onclick').onclick=function()
    {
    var check=document.getElementsByTagName('input'),
    divs=document.getElementsByTagName('div'),i=0;
    for(var i;i<check.length,i<divs.length;i++)
    {
    divs[i].style.display='none';
    if(check[i].type=='checkbox')
        {
        if(check[i].checked==true)
        divs[i].style.display='';
        }}}}
//-->
</script>
</head>

<body>
Bitte treffen Sie Ihre Auswahl:

<form><table border="1" cellspacing="10" cellpadding="5">
  <tr>
    <td><input type="checkbox" name="modtype" value="value1" />
      <label>Kategorie 1</label></td>
    <td><input type="checkbox" name="modtype" value="value2" />
      <label>Kategorie 2</label></td>
    <td><input type="checkbox" name="modtype" value="value3" />
      <label>Kategorie 3</label></td>
    </tr>
  <tr>
    <td><input type="checkbox" name="modtype" value="value4" />
      <label>Kategorie 4</label></td>
    <td><input type="checkbox" name="modtype" value="value5" />
      <label>Kategorie 5</label></td>
    <td><input type="checkbox" name="modtype" value="value6" />
      <label>Kategorie 6</label></td>
    </tr>
</table>
<input type="button" name="onclick" id="onclick" value="Anzeigen">
<br>
<br>
<br>

<div class="row" style="display:none;" id="div1"><a href="http://www.google.de" target="_blank"><img src="http://www.*****************/srpr/logo3w.png" width="50" height="50"></a>Inhalte zu Kategorie 1 mit Testbild und Link</div>
<div class="row" style="display:none;" id="div2">Inhalte zu Kategorie 2</div>
<div class="row" style="display:none;" id="div3">Inhalte zu Kategorie 3</div>
<div class="row" style="display:none;" id="div4">Inhalte zu Kategorie 4</div>
<div class="row" style="display:none;" id="div5">Inhalte zu Kategorie 5</div>
<div class="row" style="display:none;" id="div6">Inhalte zu Kategorie 6</div>
</form>
</body>
</html>