[Enhancement]: Block-based checkout: Collapsed order summary on mobile, sticky on desktop

[nikkivias]

Describe the solution you'd like

The current checkout experience where the Order summary is concerned needs improvement. We want to investigate if the following proposed solutions are feasible.

On mobile

Upon entering checkout the order summary takes up much of the space above the fold that it often pushes down the first actionable item on the page (e.g. Contact). Furthermore, when scrolling down to the end of the page, there is no access to the order summary unless the user scrolls all the way back up.

💡 Proposed solution

Implement an order summary that is:

• collapsed by default
• expands as an overlay
• hides/shows depending on scroll direction so it can be out of the way as they accomplish the page (video example below)
• add a final Order summary before Place order button

Collapsed on default, overlay when expanded

Final order summary section (sticky summary is hidden in this view)

Example of scroll interaction behaviour:

CleanShot.2024-03-04.at.15.58.17.mp4

cc: @pmcpinto

Describe alternatives you've considered

No response

Additional context

No response

[pmcpinto]

Two notes for the engineering team:

• The mobile and desktop flows don't need to be implemented in tandem. We can sequence them and implement them separately.
• Both are good a/b testing candidates, so that we can measure the impact of these changes.

[senadir]

Hey @nikkivias @pmcpinto I removed the sticky on desktop part of this issue, as those are 2 different things with different scope.

Sticky one is already requested here #42230

[senadir]

@nikkivias just to confirm:

• You want the exact same order summary in 2 places, at the top of the page, and before the place order button.
• I'm not sure I understand the scroll effect you're looking for, does it mean it shows the sidebar if you're scrolling back up, but hides it if you're scrolling down?

[senadir]

I wanted to pick this next, but I'm porter next week, if I'm not the one picking this up, a suggestion to whoever is picking this up, instead of replicating the order summary component, touching the editor component, or the structure, just use a slotfill, inside the sidebar and above the place order button. You'd have 2 slots and 1 fill.

Ideally the top order summary is the current one in its placement, and the one above the button is the slotted one.

[opr]

@senadir the slots we add would be for internal use only, correct?

[senadir]

Yes, ideally. Any concerns there? I still think slots have a place in extensibility.

[opr]

No concerns, just checking. Yes they do have a place in extensibility but I don't think we should expose these publicly until we see a solid use case for it, outside of this one.

[nikkivias]

Updating this issue with the latest mock up and prototype