JavaScript in CMS-Seite einbinden

Hallo Leute,

ich hab das Thema mal bewusst bei Newbies reingepackt da ich in dieser Angelegenheit wirklich neu bin.

Jetzt hab ich folgendes Problem mit unserem neuen Shop:

Wir haben auf der Startseite unseres Shops unten im Footer den Punkt “FAQs & Hilfe”.
Klickt man drauf landet man auf folgender CMS-Seite:

http://postimg.org/image/ser4hihqp/

Ich möchte diesen Bereich aber ein wenig anschaulicher und übersichtlicher gestalten. Einfügen würde ich gerne so ein ausklappbares Menü, ähnlich diesem (nur noch simpler, ohne Schick Schnack):

http://www.denic.de/faqs-zu-dnssec.html

Einen js/html code habe ich für meine Vorstellung. In Dreamweaver läuft auch alles so wie ich es haben will. Füge ich denn Code jedoch innerhalb Oxid in die CMS Seite ein (http://postimg.org/image/wr9fvkk6b/), passiert nichts, sprich JavaScript hat garkeinen Effekt.

Wie gesagt ich wirklich neu auf diesem Gebiet. Wäre nett falls mir einer von euch eine Antwort oder Anregung geben könnte. Gerne auch in Laien-Sprache :slight_smile:

Vielen vielen Dank im Vorfeld. Ihr seid die Besten.

Viele Grüße
Rafa

Vielleicht wäre es hilfreich wenn Du den Quellcode, zumindest einen aussagekräftigen Auszug, posten würdest.

Hallo Rafa,
obwohl mit JavaScript viel möglich ist würde ich an deiner stelle Tabs mit Pure CSS3 suchen. Im Notfalls brauchst du nur 3-5 Zeilen JS Kode damit das ding läuft. Google ist dein Freund, suche nach “Pure CSS3 Tab” oder eben “CSS Tab”

Grüße
Rafig

Hi, danke für die schnellen Antworten.

@ tarkka.ch

ein ganzer einfacher Code der komplett das ist was ich brauche ist z.B. dieser hier:


<script type="text/javascript">
  
  function treeMenu_init(menu, data) {
    var array = new Array(0);
    if(data != null && data != "") {
      array = data.match(/\d+/g);
    }
    var items = menu.getElementsByTagName("li");
    for(var i = 0; i < items.length; i++) {
      items[i].onclick = treeMenu_handleClick;
      if(!treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")
          && items[i].getElementsByTagName("ul").length
            + items[i].getElementsByTagName("ol").length > 0) {
        var classes = treeMenu_getClasses(items[i]);
        if(array.length > 0 && array[0] == i) {
          classes.push("treeMenu_opened")
        }
        else {
          classes.push("treeMenu_closed")
        }
        items[i].className = classes.join(" ");
        if(array.length > 0 && array[0] == i) {
          array.shift();
        }
      }
    }
  }


  function treeMenu_handleClick(event) {
    if(event == null) { //Workaround für die fehlenden DOM Eigenschaften im IE
      event = window.event;
      event.currentTarget = event.srcElement;
      while(event.currentTarget.nodeName.toLowerCase() != "li") {
        event.currentTarget = event.currentTarget.parentNode;
      }
      event.cancelBubble = true;
    }
    else {
      event.stopPropagation();
    }
    var array = treeMenu_getClasses(event.currentTarget);
    for(var i = 0; i < array.length; i++) {
      if(array[i] == "treeMenu_closed") {
        array[i] = "treeMenu_opened";
      }
      else if(array[i] == "treeMenu_opened") {
        array[i] = "treeMenu_closed"
      }
    }
    event.currentTarget.className = array.join(" ");
  }


  function treeMenu_getClasses(element) {
    if(element.className) {
      return element.className.match(/[^ 	
\r]+/g);
    }
    else {
      return new Array(0);
    }
  }


  function treeMenu_contains(array, element) {
    for(var i = 0; i < array.length; i++) {
      if(array[i] == element) {
        return true;
      }
    }
    return false;
  }

  function treeMenu_store(menu) {
    var result = new Array();;
    var items = menu.getElementsByTagName("li");
    for(var i = 0; i < items.length; i++) {
      if(treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")) {
        result.push(i);
      }
    }
    return result.join(" ");
  }
</script>
<style type="text/css">
  li.treeMenu_opened ul {
    display: block;
  }
  li.treeMenu_closed ul {
    display: none;
  }
</style>
Häufig gestellte Fragen zum Tehma Bestellung

Wie läuft eine Bestellung ab?
<body onLoad="treeMenu_init(document.getElementById('menu'), '')">
<ul id="menu">
  <li>1. Bestellung
    <ul>
      <li>Wenn Sie das gewünschte Produkt gefunden haben, können Sie es in den Warenkorb legen. Haben Sie so alle gewünschten Artikel gesammelt, können Sie die Bestellung abschliessen. Klicken Sie dazu im oberen Bereich auf "Warenkorb" . Hier können Sie noch Ihre  Lieferanschrift und Zahlungsweise wählen.  Sie können bis zur Absendung Ihrer Bestellung im letzten Bestellschritt Ihre eingegebenen Daten immer noch verändern. Erst wenn Sie die Daten auf der letzten Seite überprüft haben und die Bestellung absenden wird diese durch uns bearbeitet.</li>
    </ul>
  </li>
  <li>2. Bestätigung
    <ul>
      <li>Sie erhalten automatisch nach Ihrer Bestellung eine Bestätigungsmail über Ihre Bestellung in der der Artikel, der von Ihnen gewählte Versand, der Versandpreis und die Art der Zahlungsweise zu sehen sind. Es fallen keine weiteren Versandkosten oder Servicekosten für Sie an als in der Auftragsbestätigung ausgewiesen (ausgenommen 2€ Servicegebühr bei Nachnahme)</li>
    </ul>
  </li>
  <li>3. Lieferung
    <ul>
      <li>Bestellungen werden in der Regel 1-3 Tage nach Zahlungseingang versendet. Fahrräder erhalten Sie in einem speziellen Fahrradkarton durch unseren Logistikpartner DHL. Selbstverständlich ist die Rechnung die auch als Gewährleistungsnachweis dient der Lieferung beiliegend.</li>
    </ul>
  </li>

Füge ich das halt so in die CMS-Seite ein, zeigt er mir alles untereinander ein. Öffne ich es im Browser funktioniert es.

@ markus26

Kannst du evtl. ein wenig konkreter werden? Ich habs mal eingegeben und komm nicht wirklich weiter. Evtl. kannst du dich ja an dem Code Beispiel oben orientieren.

Vielen lieben Dank Jungs

Gruß
Rafa

Schaut doch in einer CMS-Seite genauso aus wie alleine.

Wenn ich den Code jetzt in meine CMS-Seite eingebe nicht. Er zeigt mir den gesamten Text untereinander an, ohne dieses Flip Down Menü.

Ich habe es hier mal auf die Schnelle eingaubt. Sieht nicht ganz so aus wie in Deinem Beispiel, aber es geht.

Alles bis hier </style> in den header (base.tpl) und den rest in die cms.

Hi Tarkka,

ja genau so sollte das laufen.

Also alles bis </style> in den header des kompletten Shop-Template? Versteh ich das richtig?

Ich hab einfach deinen kompletten Code in eine CMS-Seite gepasted, das geht auch.
http://zunderweb.de/demoshops/multifilter_xl/testjs/

aber ohne ihn zu ändern? oder hast du was angepasst?

Wenn ich denn genau so einfüge hab ich diese Klappfunktion nicht.

ich hoffe ich geh dir nicht auf den Geist mit meiner Fragerei :slight_smile:

Vielen Dank

Ohne was zu ändern. Probier’s mal im Demoshop.

Da gehts, aber ich kapier nicht warum in unserem nicht. Naja ich denke dann muss ichs ohne machen.

Kurzes Feedback,

alles klappt. Sieht auch ganz gut aus. Vielen vielen Dank euch alles.

Gruß

Rafa

Wie wär es wenn Du uns die Lösung verraten würdest?

Das wäre wirklich interessant :slight_smile:

Gruß BB