One Page Checkout scrollen zum unteren Rand des Bildschirms am nächsten

Question

Auf meiner Magento-Website bekomme ich ein seltsames Verhalten in onepagecheckout, das ich gerne beheben würde. Grundsätzlich, in Schritt 2, nachdem ich alle erforderlichen Daten eingegeben habe und ich auf die Schaltfläche "Weiter" klicke, scrollt die Seite automatisch zum unteren Bildschirmrand. Anstatt die Versandoption zu sehen, sehen Sie die Fußzeile und müssen nach oben scrollen der Versand. Also meine Frage ist, wie kann ich die Formulare in onepagecheckout "fokussiert" halten, so dass der Bildschirm darauf bleibt, wenn die Weiter/Weiter-Schaltfläche geklickt wird. Ich habe versucht, auf das Onclick-Ereignis zu etwas das shipping.save() Funktion zu ändern wie:

function test() { 
      shipping.save(); 
      document.getElementById('checkoutSteps').scrollIntoView(); 
} 

Aber das eindeutig nicht funktioniert. Wie kann ich die Seite so einstellen, dass sie auf dem Onepagecheckout bleibt, wenn auf Next geklickt wird?

Sorry, ich habe vergessen hinzuzufügen, die Schaltfläche hat bereits ein Klick-Ereignis. Grundsätzlich sieht die Schaltfläche wie folgt aus:

<button type="button" class="button" title="<?php echo $this->__('Continue') ?>" onclick="shipping.save()"><span><span><?php echo $this->__('Continue') ?></span></span></button> 

Ich bin mir nicht sicher, ob dies Angelegenheiten, aber wenn ich versuche, eine zweite Funktion Onclick hinzufügen (Onclick = „shipping.save(); Testfunction();“), Die zweite Funktion wird automatisch entfernt.

Answer 1

Ich stieß auf das gleiche Problem. In Ihrer Kasse/onepage.phtml, fügen Sie diesen Code:

checkout.gotoSection = function (section, reloadProgressBlock) { 
      Checkout.prototype.gotoSection.call(this, section, reloadProgressBlock); 
      $('opc-' + section).scrollTo(); 
     }; 

unter

var checkout = new Checkout(....); 

Hope this Hilfe.

Answer 2

$("#button").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#elementtoScrollToID").offset().top 
    }, 2000); 
}); 

Answer 3

Neben Williams answer:

Die meisten benutzerdefinierten Vorlagen „umschreiben“ nicht base/default/template/checkout/onepage.phtml so würde es einige Overhead sein, diese Datei zu Ihrer Vorlage kopieren Sie einfach diese ...

Sie noch verwenden können, hinzufügen dies mit einer neuen Vorlage-Datei hinzufügen:

Für Ihre Vorlagen Layout local.xml hinzufügen:

<checkout_onepage_index> 
    <reference name="before_body_end"> 
     <block type="core/template" name="checkout.scroll" as="checkout.scroll"> 
      <action method="setTemplate"> 
       <template>checkout/onepage/scroll.phtml</template> 
      </action> 
     </block> 
    </reference> 
</checkout_onepage_index> 

Erstellen .../template/checkout/onepage/scroll.phtml mit diesem Inhalt:

<script type="text/javascript"> 
//<![CDATA[ 
    document.observe("dom:loaded", function() { 
     if (typeof checkout !== 'undefined') { 
      checkout.gotoSection = function (section, reloadProgressBlock) { 
       Checkout.prototype.gotoSection.call(this, section, reloadProgressBlock); 
       $('opc-' + section).scrollTo(); 
      }; 
     } 
    }); 
//]]> 
</script> 

gleiches Ergebnis, nur ohne Template-Dateien Basis zu bearbeiten.