Hallo liebe Community
,
im Checkout-Bereich des Shops gibt es sowohl für shipping (/templates/tpl_modified/module/checkout_shipping_block.html) als auch für payment (/templates/tpl_modified/module/checkout_payment_block.html) Accordions. Die sehen so aus (Beispiel aus checkout_payment_block):
<div id="horizontalAccordion" class="checkout_accordion">
<ul class="resp-tabs-list nonjs-fallback">
{foreach name=outer item=gift_data from=$module_gift}
<li><span class="payment_radio">{$gift_data.selection}</span>{$gift_data.module|onlytext}<span class="payment_costs">{$gift_data.credit_amount}</span></li>
{/foreach}
{foreach name=outer item=module_data from=$module_content}
<li><span class="payment_radio">{$module_data.selection}</span>{$module_data.module|onlytext}<span class="payment_costs">{$module_data.module_cost}</span></li>
{/foreach}
</ul>
<div class="resp-tabs-container">
{foreach name=outer item=gift_data from=$module_gift}
<div>{if $gift_data.description != ''}{$gift_data.description}<br />{/if}{$credit_amount_payment_info}</div>
{/foreach}
{foreach name=outer item=module_data from=$module_content}
(...)
Ich hatte das schon so eingestellt, daß die bei mir immer offen sind, wenn man allerdings den runden kleinen Radio-Button checkt, fährt die Beschreibung des Gewählten nochmal aufs Neue raus, und die Beschreibung des Nicht-Gewählten fährt ein und man sieht sie nicht mehr.
Außerdem, wenn die Seite geladen wird, dauert das ewig und zuerst erscheinen beide Titel und beide Beschreibungen gruppiert anstatt geschachtelt. Nach zwei Sekunden oder so springt es dann ins korrekte Format (sieht echt unprofessionell aus).
Wenn ich das Accordion ganz deaktiviere, sind logischerweise die Titel auch untereinander und darunter erst folgen die Beschreibungen, da beides
nacheinander mit Smarty in einer foreach-Schleife geladen wird und hinterher durch den Accordion-Code "sortiert".
Meine Frage ist nun, ob es eine Möglichkeit gibt, den Accordion-Code so umzuschreiben, daß sich da nichts bewegt und alle Beschreibungen immer ausgeklappt sind und bleiben, oder, wenn das nicht geht, ob man stattdessen ganz einfach mit Smarty jeweils den Titel und dann die dazugehörige Beschreibung laden kann, und das für jedes Element (anstatt erst alle Titel in einer foreach-Schleife und dann alle Beschreibungen auf dieselbe Weise), so, daß ich das Accordion deaktivieren kann und dann den divs selbst einen Style geben. Also sowas wie zwei verschachtelte for-Schleifen oder so. Ich hab in der Smarty-Dokumentation geschaut aber nichts gefunden, das mir geholfen hätte.
1. Hier, wie das Ganze mit deaktiviertem Accordion aussieht:
http://imgur.com/yNKIviX2. Genauso sieht es für ein paar Sekunden auch aus, wenn das Accordion aktiviert ist und die Seite lädt, bevor es nach ein paar Sekunden zu dem springt, wie es in 3 aussieht:
3. Hier, wie es aussehen soll, allerdings ohne, daß sich irgendwas bewegt oder einklappt, wenn man daraufklickt:
http://imgur.com/odfMHyy4. Hier, was unerwünschter Weise passiert, wenn man daraufklickt:
http://imgur.com/xCa1UxtIch hoffe, ich habe mich einigermaßen verständlich ausgedrückt, und daß ihr mir helfen könnt. Das wäre super!
Das Javascript für horizontalAccordion ist übrigens in /templates/tpl_modified/javascript/general_bottom.js.php.
Viele liebe Grüße,
Nadine
Linkback: https://www.modified-shop.org/forum/index.php?topic=36788.0