1

I use a vertical one page checkout methode, so that the steps are taken vertical.

When the first billing page is filled in, I want to begin all next steps at the top of the page.

I edit skin/frontend/base/default/js/opcheckout.js and replaced the gotoSection as follow.

Default:

gotoSection: function (section, reloadProgressBlock) {

    if (reloadProgressBlock) {
        this.reloadProgressBlock(this.currentStep);
    }
    this.currentStep = section;
    var sectionElement = $('opc-' + section);
    sectionElement.addClassName('allow');
    this.accordion.openSection('opc-' + section);
    if(!reloadProgressBlock) {
        this.resetPreviousSteps();
    }
},

Replaced with:

gotoSection: function(section, reloadProgressBlock) {

    if (reloadProgressBlock) {
        this.reloadProgressBlock(this.currentStep);
    }
    this.currentStep = section;
    var sectionElement = $('opc-'+section);
    sectionElement.addClassName('allow');
    this.accordion.openSection('opc-'+section);
    if(!reloadProgressBlock) {
        this.resetPreviousSteps();
    }
    jQuery("html, body").delay(10).animate({scrollTop: jQuery("#opc-"+section).offset().top }, 50);
},

That does work for the scroll, but it begin to early on the page and I need to edit it because we have a fixed header.

How can I edit this code, so that it is placed correctly with our fixed header?

2

In the last line, I guess you have to substract the fixed header's height from the scrolling position where you want to go.

So, assuming your header is something like <div id="header">...</div>, change the line to this:

jQuery("html, body").delay(10).animate({scrollTop: (jQuery("#opc-"+section).offset().top - jQuery('#header').height()) }, 50);

Note the jQuery('#header').height() I have added.

UPDATE

If you need to scroll further, you can simply substract a higher number from the target position. I put the target position in a variable for clarification:

// calculate the offset, note the new "- 50" at the end
var targetOffset = jQuery("#opc-"+section).offset().top
                       - jQuery('#header').height() - 50;
jQuery("html, body").delay(10).animate({scrollTop: targetOffset}, 50);
|improve this answer|||||
  • Thanks! That is much better, but it is still not good enough. It still needs to scroll higher. How can I set it higher? – JGeer Feb 1 '16 at 17:11
  • edited my answer – simonthesorcerer Feb 1 '16 at 17:19
1

checkout/onepage.phtml

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

below

var checkout = new Checkout(....);
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.