One-Page Checkout [Support Thread]

The issue that @meksicus identified is due to the way that OPC (currently) manages the order's progress-to-submittal, since the full checkout_one page isn't re-rendered on a "simple" change to the shipping method.

Because of that, the changes that s/he made to disable the cash payment-method when the shipping-method chosen was flat aren't being told of any change in shipping until the order is initially submitted. Once the order's submitted, the checks on the checkout_one_confirmation page kick in and the customer is redirected back to the main order-entry page.

I'll need to think on this some and have opened an issue on the OPC's GitHub repository to track any changes: https://github.com/lat9/one_page_checkout/issues/127

I am trying this with the bootstrap template and really appreciate all of the work you have put into it, thanks so much for sharing this! Do you think it would make more sense from a user's POV to keep all of the input windows in the same place on the page so they don't have to scroll down to do the next inputs? If you don't agree, can you please tell me if it's doable and where I would look to edit the current behavior?

@lankeeyankee, are you suggesting some kind of "auto-tabbing" or just a different layout of the information?

I mean when I am on the checkout page, guest checkout in this example, I fill in the contact info window and click save changes. It then opens the billing address window which on my 17" laptop is mostly "below the fold" and I have to scroll down the page to fill it in. It's just a small user experience adjustment if we can keep the modal boxes height-centered in the viewport on initial render no matter where they are on the page, or maybe cursor -centered if that is possible.

I know I can just tab through the fields and it will keep scrolling the window up, but I think it might look better/be more "don't make me think" if it was all in view.

Attachment 17835

I have partially solved this, by moving the labels in front of the inputs

Quote:

---

Originally Posted by lankeeyankee

I mean when I am on the checkout page, guest checkout in this example, I fill in the contact info window and click save changes. It then opens the billing address window which on my 17" laptop is mostly "below the fold" and I have to scroll down the page to fill it in. It's just a small user experience adjustment if we can keep the modal boxes height-centered in the viewport on initial render no matter where they are on the page, or maybe cursor -centered if that is possible.

I know I can just tab through the fields and it will keep scrolling the window up, but I think it might look better/be more "don't make me think" if it was all in view.

Attachment 17835

---

@lankeeyankee and @Design75, thanks for the update. That gives me "focus"!

Quote:

---

Originally Posted by lankeeyankee

I mean when I am on the checkout page, guest checkout in this example, I fill in the contact info window and click save changes. It then opens the billing address window which on my 17" laptop is mostly "below the fold" and I have to scroll down the page to fill it in. It's just a small user experience adjustment if we can keep the modal boxes height-centered in the viewport on initial render no matter where they are on the page, or maybe cursor -centered if that is possible.

I know I can just tab through the fields and it will keep scrolling the window up, but I think it might look better/be more "don't make me think" if it was all in view.

Attachment 17835

---

Could use jquery

Code:

---

$(window).load(function(){
    $('html, body').animate({
        scrollTop: $('.opc-view .card-header').offset().top
    }, 'slow');
});

---

This of course would assume your using the ZCA Bootstrap Template with OPC overrides.

Quote:

---

Originally Posted by rbarbour

Could use jquery

Code:

---

$(window).load(function(){
    $('html, body').animate({
        scrollTop: $('.opc-view .card-header').offset().top
    }, 'slow');
});

---

This of course would assume your using the ZCA Bootstrap Template with OPC overrides.

---

Nice one, thanks a lot! Works perfectly (with ZCABST and OPC). I put it in includes/modules/pages/checkout_one/jscript_main.php.

Quote:

---

Originally Posted by lankeeyankee

Nice one, thanks a lot! Works perfectly (with ZCABST and OPC). I put it in includes/modules/pages/checkout_one/jscript_main.php.

---

Please note that the change above could cause issues when updating OPC, since the overall change that I'm looking at involves a similar jQuery change but imbedded in its loaded jquery module.

I can confirm that so far with initial testing, OPC works with Ceon Advanced Shipper (woohoo!!)