Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: im Checkout-Bereich die Accordions immer ausgeklappt lassen

    hhtech

    • Frisch an Board
    • Beiträge: 71
    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):

    Zitat
    <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/yNKIviX

    2. 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/odfMHyy

    4. Hier, was unerwünschter Weise passiert, wenn man daraufklickt:

    http://imgur.com/xCa1Uxt

    Ich 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

    hpzeller

    • Experte
    • Beiträge: 4.129
    • Geschlecht:
    Re: im Checkout-Bereich die Accordions immer ausgeklappt lassen
    Antwort #1 am: 28. Februar 2017, 15:55:54
    Hallo Nadine,

    versuch mal folgendes, in der Datei 'templates/tpl_modified/javascript/general_bottom.js.php' nach folgendem Code

    Code: PHP  [Auswählen]
    <?php if (strstr($PHP_SELF, 'checkout')) { ?>
    <script type="text/javascript">
        $.get("<?php echo DIR_WS_BASE.'templates/'.CURRENT_TEMPLATE; ?>"+"/css/jquery.easyTabs.css", function(css) {
          $("head").append("<style type='text/css'>"+css+"<\/style>");
        });
        $(document).ready(function () {
            $('#horizontalAccordion').easyResponsiveTabs({
                type: 'accordion', //Types: default, vertical, accordion    
                closed: true,    
                activate: function(event) { // Callback function if tab is switched
                   $(".resp-tab-active input[type=radio]").prop('checked', true);
                }
            });
            $('#horizontalTab').easyResponsiveTabs({
                type: 'default' //Types: default, vertical, accordion          
            });

    diesen Code einfügen

    Code: PHP  [Auswählen]
            $('.resp-arrow').attr('style', 'display:none !important');
            $('.resp-tab-content').attr('style', 'display:block !important');        
            $('.resp-accordion').removeAttr("aria-controls");
            $('.resp-tab-content').removeClass("resp-tab-content-active");

    [ Für Gäste sind keine Dateianhänge sichtbar ]

    Alternativ könnte man das HTML so umbauen, dass allen die "ohne JavaScript" Ansicht ausgeliefert wird.

    [ Für Gäste sind keine Dateianhänge sichtbar ]

    Gruss
    Hanspeter

    hpzeller

    • Experte
    • Beiträge: 4.129
    • Geschlecht:
    Re: im Checkout-Bereich die Accordions immer ausgeklappt lassen
    Antwort #2 am: 28. Februar 2017, 17:20:02
    Nachtrag:

    Alternative Lösung:

    Im Verzeichnis '/templates/tpl_modified/module/' den kompletten Inhalt folgender Dateien 'checkout_shipping.html',  'checkout_shipping_block.html', 'checkout_payment.html' und 'checkout_payment_block.html' mit dem entsprechenden nachfolgend geposteten Code ersetzen.

    checkout_shipping.html

    Code: XML  [Auswählen]
    {config_load file="$language/lang_$language.conf" section="checkout_shipping"}
    {config_load file="$language/lang_$language.conf" section="checkout_navigation"}
    {config_load file="lang_`$language`.custom"}
    {config_load file="lang_`$language`.section" section="checkout_shipping"}
    {*<noscript>*}
    {literal}
    <style type="text/css">
      .nonjs-fallback {display:none !important;}
      .nonjs-heading {margin:10px 0px 5px 0px; font-weight:bold;}
    </style>
    {/literal}
    {*</noscript>*}

    <ul id="checkoutnavigation" class="cf">
      <li class="active"><span class="title">1. {#title_shipping#}</span><span class="description">{#desc_shipping#}</span></li>
      <li class="inactive"><span class="title">2. {#title_payment#}</span><span class="description">{#desc_payment#}</span></li>
      <li class="inactive"><span class="title">3. {#title_confirmation#}</span><span class="description">{#desc_confirmation#}</span></li>
      <li class="inactive last"><span class="title">4. {#title_success#}</span><span class="description">{#desc_success#}</span></li>
    </ul>

    <h1 class="checkout">{#heading_shipping#}</h1>
    {if $error != ''}<div class="errormessage">{$error}</div>{/if}

    {$FORM_ACTION}
    <div class="twoColums">
      <div class="highlightbox">
        <h4>{#title_shipping#}</h4>
        <p>{#text_shipping#}</p>
        <div>{$SHIPPING_BLOCK}</div>
      </div>
    </div>

    <div class="twoColums last">
      <div class="highlightbox">
        <h4>{#title_address#}</h4>
        <p class="cf"><span class="checkout_button_right">{$BUTTON_ADDRESS}</span>{$ADDRESS_LABEL}</p>
      </div>
    </div>
    <br class="clearfix" />
    <div class="button_left">{$BUTTON_BACK}</div>
    <div class="button_right">{$BUTTON_CONTINUE}</div>
    {$FORM_END}
     

    checkout_shipping_block.html

    Code: XML  [Auswählen]
    <div {*id="horizontalAccordion"*} class="checkout_accordion">
      {*<ul class="resp-tabs-list nonjs-fallback">
        {if $FREE_SHIPPING}
          <li><span class="shipping_radio"></span>{$FREE_SHIPPING_TITLE|onlytext}</li>
        {else}    
          {foreach name=outer item=module_data from=$module_content}
            {if $module_data.error != ''}
              <li><span class="shipping_radio"></span>{$module_data.module|onlytext}</li>
            {else}
              {foreach name=inner item=method_data from=$module_data.methods}
                <li><span class="shipping_radio">{$method_data.radio_field}</span><label for="{$method_data.id}">{$module_data.module|onlytext}<span class="shipping_costs">{$method_data.price}</span></label></li>
              {/foreach}
            {/if}
          {/foreach}
        {/if}
      </ul>*}
      <div class="resp-tabs-container">
        {if $FREE_SHIPPING}
          {*<noscript>*}
            <div><span class="shipping_radio"></span>{$FREE_SHIPPING_TITLE}</div>
          {*</noscript>*}
          <div>{$FREE_SHIPPING_DESCRIPTION}</div>
        {else}    
          {foreach name=outer item=module_data from=$module_content}
            {if $module_data.error != ''}
              <div>{$module_data.error}</div>
            {else}
              {foreach name=inner item=method_data from=$module_data.methods}
                {*<noscript>*}
                  <div class="nonjs-heading"><span class="shipping_radio">{$method_data.radio_field}</span><label for="{$method_data.id}">{$module_data.module}<span class="shipping_costs">{$method_data.price}</span></label></div>
                {*</noscript>*}
                <div>{$module_data.icon}{$method_data.title}</div>
              {/foreach}
            {/if}
          {/foreach}
        {/if}
      </div>
    </div>
     

    checkout_payment.html

    Code: XML  [Auswählen]
    {config_load file="$language/lang_$language.conf" section="checkout_payment"}
    {config_load file="$language/lang_$language.conf" section="checkout_navigation"}
    {config_load file="lang_`$language`.custom"}
    {config_load file="lang_`$language`.section" section="checkout_payment"}
    {*<noscript>*}
    {literal}
    <style type="text/css">
      .nonjs-fallback {display:none !important;}
      .nonjs-heading {margin:10px 0px 5px 0px; font-weight:bold;}
      .nonjs-h4 {margin:10px 0px 10px 0px;}
    </style>
    {/literal}
    {*</noscript>*}

    <ul id="checkoutnavigation" class="cf">
      {if isset($NO_SHIPPING)}
        <li class="active no_shipping"><span class="title">1. {#title_payment#}</span><span class="description">{#desc_payment#}</span></li>
        <li class="inactive no_shipping"><span class="title">2. {#title_confirmation#}</span><span class="description">{#desc_confirmation#}</span></li>
        <li class="inactive no_shipping last"><span class="title">3. {#title_success#}</span><span class="description">{#desc_success#}</span></li>
      {else}
        <li class="inactive"><span class="title">1. {#title_shipping#}</span><span class="description">{#desc_shipping#}</span></li>
        <li class="active"><span class="title">2. {#title_payment#}</span><span class="description">{#desc_payment#}</span></li>
        <li class="inactive"><span class="title">3. {#title_confirmation#}</span><span class="description">{#desc_confirmation#}</span></li>
        <li class="inactive last"><span class="title">4. {#title_success#}</span><span class="description">{#desc_success#}</span></li>
      {/if}
    </ul>

    <h1 class="checkout">{#heading_payment#}</h1>
    {if $error != ''}<div class="errormessage">{$error}</div>{/if}

    {$FORM_ACTION}
    <div class="twoColums">
      <div class="highlightbox">
        <h4 class="checkout">{#title_payment#}</h4>
        {if (!isset($GV_COVER) || $GV_COVER != 'true') && (!isset($NO_PAYMENT) || $NO_PAYMENT != 'true')}
         <p>{#text_payment#}</p>
         {$PAYMENT_BLOCK}{$module_gift}
       {elseif isset($GV_COVER) && $GV_COVER == 'true'}
         <div class="infomessage" id="gccover"><b>{#text_gccover#}</b></div>
       {elseif isset($NO_PAYMENT) && $NO_PAYMENT == 'true'}
         <div class="infomessage" id="nopayment"><b>{#text_nopayment#}</b></div>
       {/if}
     </div>
    </div>

    <div class="twoColums last">
     {if $step2 != 'true'}
     <div class="highlightbox">
       <h4 class="checkout">{#title_address#}</h4>
       <p class="cf"><span class="checkout_button_right">{$BUTTON_ADDRESS}</span>{$ADDRESS_LABEL}</p>
     </div>
     {/if}

     {if $step2 != 'true'}
     <br />
     <div class="highlightbox">
       {if $smarty.const.DISPLAY_CONDITIONS_ON_CHECKOUT == 'true'}
         <div id="horizontalTab">
           <ul class="resp-tabs-list nonjs-fallback">
             <li>{#title_comments_short#}</li>
             <li>{#title_agb#}</li>
           </ul>
           <div class="resp-tabs-container">
             <noscript><h4 class="nonjs-h4">{#title_comments_short#}</h4></noscript>
             <div class="checkoutcomment">{$COMMENTS}</div>
             <div>
               <noscript><h4 class="nonjs-h4">{#title_agb#}</h4></noscript>
               <div class="checkoutagb">{$AGB}</div>
             </div>
           </div>
         </div>
         <div class="checkoutconditions">
           {$AGB_checkbox} <strong><label for="conditions">{#text_accept_agb#}</label></strong>&nbsp;{$AGB_LINK}
          </div>
          {if isset($REVOCATION_checkbox)}
            <div class="checkoutconditions">
              {$REVOCATION_checkbox} <strong><label for="revocation">{#text_accept_revocation#}</label></strong>&nbsp;{$REVOCATION_LINK}
            </div>
          {/if}
        {else}
          <h4 class="checkout">{#title_comments_short#}</h4>
          <div class="checkoutcomment">{$COMMENTS}</div>
          {if isset($REVOCATION_checkbox)}
            <div class="checkoutconditions">
              {$REVOCATION_checkbox} <strong><label for="revocation">{#text_accept_revocation#}</label></strong>&nbsp;{$REVOCATION_LINK}
            </div>
          {/if}
        {/if}
      </div>
      {/if}

    </div>
    <br class="clearfix" />
    <div class="button_left">{$BUTTON_BACK}</div>
    <div class="button_right">{$BUTTON_CONTINUE}</div>
    {$FORM_END}
     

    checkout_payment_block.html

    Code: XML  [Auswählen]
    <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}
          <div>
            {*<noscript>*}
              <div class="nonjs-heading"><span class="payment_radio">{$module_data.selection}</span>{$module_data.module|onlytext}<span class="payment_costs">{$module_data.module_cost}</span></div>
            {*</noscript>*}
            {if $module_data.description}{$module_data.description}<br />{/if}
            {if $module_data.error != ''}
              {$module_data.error}<br />
            {elseif $module_data.fields}
              <table class="paymentmoduledata">
                {foreach name=inner item=method_data from=$module_data.fields}
                  <tr>
                    <td class="title">{$method_data.title}</td>
                    <td class="field">{$method_data.field}</td>
                   </tr>
                {/foreach}
              </table>
            {/if}    
          </div>
        {/foreach}    
      </div>
    </div>
     

    Gruss
    Hanspeter

    hhtech

    • Frisch an Board
    • Beiträge: 71
    Re: im Checkout-Bereich die Accordions immer ausgeklappt lassen
    Antwort #3 am: 08. März 2017, 13:23:22
    Hallo Hanspeter! :)

    Vielen vielen Dank!

    Von den Dateien checkout_shipping.html und checkout_payment.html habe ich nur den oberen Teil zwischen den {*<noscript>*}-Tags ersetzen müssen, da der Rest bei mir sowieso ganz anders ist.

    Die beiden ...block.html-Dateien habe ich komplett ersetzt, wie du gesagt hast, und dann das Design angepaßt. Was ist denn das für ein toller Trick mit den {* ... *}-Tags?  :-D

    Es hat super funktioniert!

    Viele liebe Grüße,
    Nadine

    PS: Hab das Thema auf "gelöst" gesetzt. :) Danke nochmal für deine Hilfe!

    hpzeller

    • Experte
    • Beiträge: 4.129
    • Geschlecht:
    Re: im Checkout-Bereich die Accordions immer ausgeklappt lassen
    Antwort #4 am: 08. März 2017, 16:54:49
    [...]
    Was ist denn das für ein toller Trick mit den {* ... *}-Tags?  :-D
    [...]

    Damit schliesst Man Kommentare ein, siehe Link, kann man aber auch gut dazu benutzen nicht gebrauchten Code auszukommentieren, so dass er nicht mit dem Quelltext an den Browser gesendet wird.

    http://www.smarty.net/docsv2/de/language.basic.syntax.tpl

    Gruss
    Hanspeter

    hhtech

    • Frisch an Board
    • Beiträge: 71
    Re: im Checkout-Bereich die Accordions immer ausgeklappt lassen
    Antwort #5 am: 17. März 2017, 13:34:28
    Hallo Hanspeter,

    vielen Dank für deine Hilfe! :)

    Liebe Grüße,
    Nadine

    karsta.de

    • Experte
    • Beiträge: 3.157
    Re: im Checkout-Bereich die Accordions immer ausgeklappt lassen
    Antwort #6 am: 13. Oktober 2021, 12:41:14
    Hallo Hanspeter,

    hast du vielleicht noch eine Idee wie man das Paypal-JavaScript umgehen kann, dass hier auch der Paypal-Wall sofort sichtbar ist?

    Meine 1. Idee war die 1. Zahlungsoption standardmäßig vorausgewählt zu machen, aber ich fänd es wirklich besser keine Zahlart vorauszuwählen.

    BG Karsta

    karsta.de

    • Experte
    • Beiträge: 3.157
    Re: im Checkout-Bereich die Accordions immer ausgeklappt lassen
    Antwort #7 am: 14. Oktober 2021, 08:55:15
    Habe selbst herausgefunden wie das Javascript umgangen wird. Man braucht nur im PayPal-Plus Modul die Verwendung des Accordion ausschalten, dann wird der Wall für PayPal komplett angezeigt auch wenn keine Zahlart vorausgewählt wurde.

    BG Karsta
    rechtstexte für onlineshop
    10 Antworten
    8737 Aufrufe
    02. Februar 2013, 16:18:07 von kokoszka
    6 Antworten
    5695 Aufrufe
    01. Februar 2013, 18:24:20 von kokoszka
    0 Antworten
    1773 Aufrufe
    07. Oktober 2012, 14:37:37 von Toby
    5 Antworten
    2280 Aufrufe
    19. Dezember 2017, 11:22:51 von NeKo
               
    anything