Inhalte per Auswahl nach Kategorien geordnet anzeigen lassen

ica112 · 10.06.2012, 10:22

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, 10:35

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, 11:36

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, 13:17

Zitat:

Zitat von ica112

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, 18:03

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>

10.06.2012, 10:22	#1
ica112 Ich nix Text, nur Bild! Registriert seit: 21.04.2010 Ort: Offenburg, Baden-Württemberg Beiträge: 158 Kamera: Kodak Easyshare DX7630 Verwendet: Photoshop, Illustrator, Flash, Dreamweaver, Indesign, Freehand, Corel Draw, Corel Painter	Inhalte per Auswahl nach Kategorien geordnet anzeigen lassen 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.

10.06.2012, 10:35	#2
msblacky Helper Registriert seit: 04.12.2009 Ort: Gengenbach Beiträge: 3.882 Kamera: Canon EOS 500D Verwendet: CS5 Master	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

10.06.2012, 11:36	#3
ica112 Ich nix Text, nur Bild! Themenstarter Registriert seit: 21.04.2010 Ort: Offenburg, Baden-Württemberg Beiträge: 158 Kamera: Kodak Easyshare DX7630 Verwendet: Photoshop, Illustrator, Flash, Dreamweaver, Indesign, Freehand, Corel Draw, Corel Painter	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. Geändert von ica112 (10.06.2012 um 12:43 Uhr). Grund: Hat sich erledigt

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Inhalte per Auswahl nach Kategorien geordnet anzeigen lassen

Reklame

Anzeige

Aktuelles Commag

Anzeige

Anzeige

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Inhalte per Auswahl nach Kategorien geordnet anzeigen lassen

Reklame

Anzeige

Aktuelles Commag

Anzeige

Social Media

Anzeige