I know that this is a silly question, and ignores all UX practices, but I have a requirement to call the OneStepCheckout from LotusBreath into a lightbox or popup.

Is this possible?

Last resort would be to call the normal checkout within an iframe, but I'm not keen on that as a solution.

EDIT: moved from Stackoverflow

  • Did you got it? Yes, it's possible. If you are still interested, comment here which I have prepared an answer. Nov 6, 2015 at 17:10
  • Hi Denis. Thanks for replying. No, sadly I haven't solved this as yet and would greatly appreciate the assistance!
    – maGz
    Nov 6, 2015 at 17:13
  • Hi Denis. I'm just checking - do you still have a solution to this? Thank you
    – maGz
    Nov 6, 2015 at 23:44
  • Yes, i'll do it asap. Nov 6, 2015 at 23:49
  • Great! Thank you. I look forward to hearing from you
    – maGz
    Nov 6, 2015 at 23:58

1 Answer 1


First step: Change the layout file

In your lotusbreath/onestepcheckout.xml files, replace* <lotusbreath_onestepcheckout_index_index> handle to <checkout_cart_index>.

So, now the checkout block will be render in cart.

Change <block type="lotusbreath_onestepcheckout/onepage" name="checkout.onepage" as="checkout.onepage"> to <block type="lotusbreath_onestepcheckout/onepage" name="checkout.onepage" as="checkout.onepage" after="-">. The after atributes is not necessary but I think is better checkout code be after cart block.

Now, we have the one step checkout in cart page, like this:

Checkout in Cart Page

* Note: If you want to keep one step checkout page (/onestepcheckout/index), not replace <lotusbreath_onestepcheckout_index_index> but make a copy and change the copied handle.

Second step: Create a modal/dialog

Now we need use a javascript lib to create a dialog/modal. The "OneStepCheckout from LotusBreath" uses jQuery, so there are many options to do it. An html element to keep attention is <div class="lt-checkoutpage layout-2col " id="checkoutSteps">. All elements of checkout are inside the #checkoutSteps. Probably that ID is used as a reference in OneStepCheckout JavaScript. Put it in the modal.

To add a custom Js lib, use a action inside the <reference name="head"/>:

<action method="addItem">

To get modal/dialog working, probably you will need some (or many) css modify.

I did a simple test with custom CSS & JS:

Checkout inside a modal/dialog box

Third Step: Fix Css bugs and Ajaxs

After aplied dialog/modal, depending on the library used and changes made with css, you need fix js/css to get all checkout working again.

Fourth step: Replace the call-to-action (the buttons) to checkout.

Finally is necessary just change the call to action to checkout, removing links to original page and use javascript to display the dialog/modal. You can use a onclick attributes on elements or use jQuery 'click' method in script tag or js file, like this:

    //Code to display my dialog/modal
  • Wow! Gimme a little while to try all of this out and I'll revert soonest :)
    – maGz
    Nov 7, 2015 at 12:55
  • Sure. I think the hard step is the third. One Step Checkout has a lot ajax. Divided into steps, it seems simple, but it is a major change. I believe you'll need change some things on my "guide" and some custom changes about your theme to get it 100%. Nov 7, 2015 at 13:03
  • Ok, so I'm working through these steps and I'm just working on the modal window and CSS bits now. Quick question though. I'd like this to be available on every page. So I've replaced <checkout_cart_index> with <default> ... just that it's showing on top of the content. But the other thing is that if I'm going to make the OSC available on every page, I'll need to ensure that there is a way via Javscript to "refresh" it. Is that possible?
    – maGz
    Nov 7, 2015 at 14:17
  • To show on bottom, user attribute after="-" on major block of onestepcheckout. Be careful in case CART empty, the checkout maybe redirect users to checkout/cart. For last question, i think yes, but it will demand a lot more customizations. Nov 7, 2015 at 14:30
  • Thanks. I'll give that some thought also. Please allow me a few hours to try this all out
    – maGz
    Nov 7, 2015 at 14:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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