Infobox als Klappmenü

Hallo,

ich hätte gerne, dass statt der Infobox im linken Menü erstmal nur die Überschrift zu sehen ist mit dem Titel “Informationen” und wenn man dieses anklickt der Inhalt der Infobox sichtbar wird bzw sie sich aufklappt. Leider scheitere ich an der Umsetzung - über einen Tipp (passenden Code?) würde ich mich freuen…

[QUOTE=DasUnik.at;13143]Hallo,

ich hätte gerne, dass statt der Infobox im linken Menü erstmal nur die Überschrift zu sehen ist mit dem Titel “Informationen” und wenn man dieses anklickt der Inhalt der Infobox sichtbar wird bzw sie sich aufklappt. Leider scheitere ich an der Umsetzung - über einen Tipp (passenden Code?) würde ich mich freuen…[/QUOTE]
Ersetze die “[B]tpl/inc/infobox.tpl[/B]” hiermit:

<strong class="h2" id="test_LeftSideInfoHeader" onclick="document.getElementById('info').style.display='block'" style="cursor:pointer">[{ oxmultilang ident="INC_LEFTITEM_INFORMATION" }]</strong>
[{strip}]
<ul class="info" id="info" style="display:none;margin-bottom:-12px">
    [{ assign var="oCont" value=$oView->getContentByIdent("oxsecurityinfo") }]    
    <li><a id="test_infoProtection" href="[{ $oCont->getLink() }]" rel="nofollow">[{ $oCont->oxcontents__oxtitle->value }]</a></li>
    [{assign var="oCont" value=$oView->getContentByIdent("oxdeliveryinfo") }]
    <li><a id="test_infoShipping" href="[{ $oCont->getLink() }]" rel="nofollow">[{ $oCont->oxcontents__oxtitle->value }]</a></li>
    [{assign var="oCont" value=$oView->getContentByIdent("oxrightofwithdrawal") }]
    <li><a id="test_infoRights" href="[{ $oCont->getLink() }]" rel="nofollow">[{ $oCont->oxcontents__oxtitle->value }]</a></li>
    [{assign var="oCont" value=$oView->getContentByIdent("oxorderinfo") }]
    <li><a id="test_infoHowToOrder" href="[{ $oCont->getLink() }]" rel="nofollow">[{ $oCont->oxcontents__oxtitle->value }]</a></li>
    <li><a id="test_infoNewsletter" href="[{ oxgetseourl ident=$oViewConf->getSelfLink()|cat:"cl=newsletter" }]" rel="nofollow">[{ oxmultilang ident="INC_INFOBOX_NEWSLETTER" }]</a></li>
</ul>
<br/>
[{/strip}]

Erstmal danke für die schnelle Antwort!
Leider habe ich mich wohl etwas ungenau ausgedrückt - das aufklappen klappt zwar wunderbar mit diesem Code, aber die Box geht sofort wieder zu wenn ich einen Link daraus anklicke - am liebsten hätte ich es so, dass ich die Infobox “öffnen” (bzw aufklappen) kann und diese dann offen bleibt bis ich zB wieder eine Artikel Kategorie anklicke (oder eine andere Infobox aufklappe).
Ich hoffe ich habe mich nicht zu kompliziert ausgedrückt :rolleyes:

hi avenger,

was macht das [strip] bzw. was heißt das?

[QUOTE=racoon;13171]hi avenger,

was macht das [strip] bzw. was heißt das?[/QUOTE]
Keine Ahnung, das ist schon in der tpl drin…

[QUOTE=DasUnik.at;13164]Erstmal danke für die schnelle Antwort!
Leider habe ich mich wohl etwas ungenau ausgedrückt - das aufklappen klappt zwar wunderbar mit diesem Code, aber die Box geht sofort wieder zu wenn ich einen Link daraus anklicke - am liebsten hätte ich es so, dass ich die Infobox “öffnen” (bzw aufklappen) kann und diese dann offen bleibt bis ich zB wieder eine Artikel Kategorie anklicke (oder eine andere Infobox aufklappe).
Ich hoffe ich habe mich nicht zu kompliziert ausgedrückt [/QUOTE]
Ja, klar, da wird ja die Seite neu geladen, und die Infobox wieder versteckt…

Die Aufgabe lautet also, das “Verstecken” davon abhängig zu machen, ob eine Info angezeigt wird oder nicht…

[B]Nichts leichter als das![/B]

Wir machen uns dazu die Tatsache zu Nutze, dass im Template “[B]content.tpl[/B]” die Smarty-Variable “[B]oContent[/B]” gesetzt wird, wenn Content angezeigt wird.

Wenn also Content angezeigt wird, dann wird die Informationsbox [B]nicht [/B]versteckt, was über eine von “[B]oContent[/B]” abhängige dynamische Definition des Wertes des CSS-Attributs"[B]display[/B]" erreicht wird.

Ebenso davon abhängig gemacht wird das “[B]onclick[/B]” für den Information-Box-Header, da das ja überflüssig ist, wenn die Box schon offen ist.

[{if $oContent}]
[{assign var="display" value="block"}]
[{else}]
[{assign var="display" value="none"}]
[{/if}]
<strong class="h2" id="test_LeftSideInfoHeader"[{if !$oContent}] onclick="document.getElementById('info').style.display='block'" style="cursor:pointer" title="Mit 'Klick' Informationen anzeigen" [{/if}]>[{ oxmultilang ident="INC_LEFTITEM_INFORMATION" }]</strong>
[{strip}]
<ul class="info" id="info" style="display:[{display}];margin-bottom:-12px">
    [{ assign var="oCont" value=$oView->getContentByIdent("oxsecurityinfo") }]    
<li><a id="test_infoProtection" href="[{ $oCont->getLink() }]" rel="nofollow">[{ $oCont->oxcontents__oxtitle->value }]</a></li>
    [{assign var="oCont" value=$oView->getContentByIdent("oxdeliveryinfo") }]
<li><a id="test_infoShipping" href="[{ $oCont->getLink() }]" rel="nofollow">[{ $oCont->oxcontents__oxtitle->value }]</a></li>
    [{assign var="oCont" value=$oView->getContentByIdent("oxrightofwithdrawal") }]
<li><a id="test_infoRights" href="[{ $oCont->getLink() }]" rel="nofollow">[{ $oCont->oxcontents__oxtitle->value }]</a></li>
    [{assign var="oCont" value=$oView->getContentByIdent("oxorderinfo") }]
<li><a id="test_infoHowToOrder" href="[{ $oCont->getLink() }]" rel="nofollow">[{ $oCont->oxcontents__oxtitle->value }]</a></li>
<li><a id="test_infoNewsletter" href="[{ oxgetseourl ident=$oViewConf->getSelfLink()|cat:"cl=newsletter" }]" rel="nofollow">[{ oxmultilang ident="INC_INFOBOX_NEWSLETTER" }]</a></li>
</ul>
<br/>
[{/strip}]

Das ist das Smarty-Plugin für “strip”.

<?php
/**
 * Smarty plugin
 * @package Smarty
 * @subpackage plugins
 */


/**
 * Smarty strip modifier plugin
 *
 * Type:     modifier<br>
 * Name:     strip<br>
 * Purpose:  Replace all repeated spaces, newlines, tabs
 *           with a single space or supplied replacement string.<br>
 * Example:  {$var|strip} {$var|strip:" "}
 * Date:     September 25th, 2002
 * @link http://smarty.php.net/manual/en/language.modifier.strip.php
 *          strip (Smarty online manual)
 * @author   Monte Ohrt <monte at ohrt dot com>
 * @version  1.0
 * @param string
 * @param string
 * @return string
 */
function smarty_modifier_strip($text, $replace = ' ')
{
    return preg_replace('!\s+!', $replace, $text);
}

/* vim: set expandtab: */

?>

Hallo,

nochmal danke für die schnelle und vor allem verständliche/gut erklärte Antwort! Leider bin ich erst heute dazu gekommen mich wirklich damit zu beschäftigen…
Ein kleiner Fehler hat sich jedoch eingeschlichen, den ich aber Dank Google und deiner Erklärung beheben konnte.
Statt

<ul class="info" id="info" style="display:[{display}];margin-bottom:-12px">

muss es heissen:

<ul class="info" id="info" style="display:[{$display}];margin-bottom:-12px">

Ein Problem habe ich jedoch noch - wenn ich den Newsletter mit in dem Menü einbaue (oder das Kontakt-Formular) sieht das ja so aus:


<li><a id="test_infoNewsletter" href="[{ oxgetseourl ident=$oViewConf->getSelfLink()|cat:"cl=newsletter" }]" rel="nofollow">[{ oxmultilang ident="INC_INFOBOX_NEWSLETTER" }]</a></li>

Nur fehlt hier ja (wenn ich es richtig verstehe) die Definition, dass es sich um einen oCont handelt - wie es bei allen anderen Links mit angegeben ist - was ich hier jedoch nicht machen kann, da ich “getContentByIdent” nicht verwenden kann - als Resultat klappt dann das menü zu, wenn ich “Newsletter” anklicke…

bekommt man das auch noch in den Griff?

und noch eine Frage (ich trau mich ja fast nicht :rolleyes:):
Wenn ich eine zweite Klapp-Box einbaue (in meinem fall “Service”) funktioniert das zwar erstmal mit folgendem Code:


[{if $oContent}]
[{assign var="display" value="block"}]
[{else}]
[{assign var="display" value="none"}]
[{/if}]
<strong class="h2" id="test_LeftSideServiceHeader"[{if !$oContent}] onclick="document.getElementById('service').style.display='block'" style="cursor:pointer" title="Service" [{/if}]>[{ oxmultilang ident="Service" }]</strong>
[{strip}]
<ul class="info" id="service" style="display:[{ $display }];margin-bottom:-12px;">
    [{ assign var="oCont" value=$oView->getContentByIdent("repairservice") }]    
	<li><a id="test_infoProtection" href="[{ $oCont->getLink() }]" rel="nofollow">[{ $oCont->oxcontents__oxtitle->value }]</a></li>
</ul>
<br/>
[{/strip}]

nur wenn ich dann den Link der im aufgeklappten Menü erscheint anklicke, öffnet sich auch wieder die Informations-Box - da es sich ja auch um einen “oCont” handelt - kann man da eine andere Variable vergeben?

Sollte die frage noch offen sein, hier ein ansatz:

Also entweder du packst alles in eine function oder schreibst es in eine zeile:

<strong class="h2" id="test_LeftSideInfoHeader" onclick="document.getElementById('info2').style.display='block'; document.getElementById('info1').style.display='none'"   style="cursor:pointer">[{ oxmultilang ident="INC_LEFTITEM_INFORMATION" }]</strong>

was passiert jedoch, wenn besucher java script ausgeschalten haben?

gibts eine abfrage, bei der ein alternativ-code oder was anderes angezeigt werden soll- sobald javascript nicht zur verfügung steht?

Also konkreter Fall:

Die Informationen sollen klickbar sein, wenn kein javascript vorhanden ist, um den benutzer auf eine andere seite zu leiten. Im Demoshop wird das für mein konto verwendet. ist ganz nett, hab aber keine ahnung, wie das dort gemacht wird.