4

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. – Denis Spalenza Nov 6 '15 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 '15 at 17:13
  • Hi Denis. I'm just checking - do you still have a solution to this? Thank you – maGz Nov 6 '15 at 23:44
  • Yes, i'll do it asap. – Denis Spalenza Nov 6 '15 at 23:49
  • Great! Thank you. I look forward to hearing from you – maGz Nov 6 '15 at 23:58
3
+50

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">
    <type>skin_js</type>
    <name>path_in_my_theme/to/MY_JS_LIB_FILE.js</name>
</action>

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:

jQuery('.my-element-class').click(function(){
    //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 '15 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%. – Denis Spalenza Nov 7 '15 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 '15 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. – Denis Spalenza Nov 7 '15 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 '15 at 14:37

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.