I’m working within a team to try and create a single page checkout for a bespoke multi-store ecommerce platform. Using responsive design, we’d like our checkout to display as a single page at desktop size and display in an accordion style on mobile sized displays.
We have 4 ‘panels’ for data input/display
- Address Details - 7 text formfields and a listbox selector
- Shipping Method - 2 radio buttons
- Payment Method - listbox selector with optional formfield inputs depending on the list option selected
- Review and Confirm - Basket summary with totals updated on the fly using Ajax as the data in the input panels is changed, plus submit button
At desktop size, these 4 panels will display in 4 columns side by side so the user can see all options on one page. At mobile size we can get these panels to reflow into a single very long page, but we would prefer to collapse the panels so that only one 'stage' of the checkout is visible at a time. The panel headers will remain shown at the head of each accordion level, above or below the content of the current stage depending where the user is up to. Tapping a collapsed header should expand that panel and collapse the currently opened one so that only one panel is in view at a time.
On researching, I can’t locate any live examples where this functionality has been used in responsive design. Our lead designer tells us that the inputs for each display version would have to be stored in two separate data sets and synced on each change using Javascript. We want to avoid the page becoming overloaded with excess code so we’re looking for a way to display the same input/output panels shown on the desktop version as accordion panels with accordion behaviour when the responsive site is sized past a mobile break point.
Thinking about this mobile first, we believe the answer may lie in creating the accordion first and then somehow coding this to remove the accordion styling functionality at desktop size so the sections of the accordion can be manipulated to display side by side.
All answers gratefully received.