convert some custom checkout modules into this structure

[onlinebizsoft]

Im not sure if it is possible to convert some available checkout modules on community into this structure for example https://github.com/SnowdogApps/magento2-vue-checkout https://github.com/danslo/CleanCheckout https://github.com/hyva-themes/magento2-hyva-checkout

[onlinebizsoft]

@robaimes can you share some ideas if it is doable ?

[robaimes]

@robaimes can you share some ideas if it is doable ?

The hyva checkout isn't built using knockout and the standard Magento front-end so in that regard no, but the interface/layout etc is possible to achieve if rewritten using Magento UI components.

It's definitely possible to 'convert' something like the one page checkout you linked, but I've no idea how easy it would be. Theoretically it's mostly a matter of moving any checkout_index_index layout instructions into your customer defined layout and moving any layout/config providers.

@onlinebizsoft I'll see if I can convert a module like what you've linked above at some point soon as a better example, I appreciate the current example module is very barebones and could definitely do with some improvement.

[onlinebizsoft]

@robaimes do you have any news?

[robaimes]

@onlinebizsoft Sorry it's been a hectic few months. I'd planned to do it a couple weeks back when I had time off work but have been unwell. It's still on my list to do; just need to find some time.

[onlinebizsoft]

@robaimes do you still plan to keep this module updated for next Magento version compatible?

[robaimes]

@robaimes do you still plan to keep this module updated for next Magento version compatible?

Yeah, I plan to keep this updated 🙂

I'm not sure what would be impacted, but provided checkout layout and jsLayout are not deprecated/removed it should be minimal work. 🤞

Also, I'll be working on some better examples since time in march when I have some time off work.

[robaimes]

@onlinebizsoft I've pushed up some basic example for the 'Clean Checkout' implementation (sorry for the delay!) which can be seen here - I won't merge it because I don't want to directly rely on CleanCheckout being installed.

I'll be creating a wiki / documentation on this repository soon. I feel that's more important than direct examples; however a real world example is always useful. Once the above documentation is sorted, I'll close the above pull request and create a separate 'case study' sort of entry which will house the details and decisions instead.

---

Do note that the pull rquest content is not expected to work fully due to the way that the clean checkout modules are, but it works to an extent. The pull request contains a couple of things to note if you wish to try it out yourself.

I've done what I can with the CleanCheckoutTheme, in that the email step should only be processed when the design is selected in the admin, and leaving the default selected shouldn't interfere with the checkout flow;l which should be enough of an example for the time being.

The key points to take away though are:

• If the logic requires modification use a custom component and define it's usage via the layout file.
  • This prevents pollution of other designs, as mixins are loaded globally
• As above; mixins are global so should be used sparingly, ideally reserved for global improvements or additions
  • As an example, changing a component's logic via mixin such as the shipping step valifation in clean checkout is not a good idea, as the mixin will process on every design; meaning that if the 'default' checkout was selected the validation we need to run is as per default Magento, not the clean checkout logic.

---

I'll leave this issue open until i've sorted out the documentation properly.

[robaimes]

Also, after taking a look at Snowdog's Vue Checkcout that one should be extremely easy to make compatible. All that should be required is:

• Create a new design virtualType as per the readme
  • As an example let's use snowdog_vue_checkout as the layoutHandle value
• Add this new design to available options
• Rename checkout_index_index.xml to the layoutHandle provided when declaring the virtual type.
  • In this case, that would be snowdug_vue_checkout.xml