Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Enhancement]: Block-based checkout spacing improvements #46004

Open
2 tasks
Tracked by #44835
ralucaStan opened this issue Mar 27, 2024 · 3 comments · May be fixed by #47565
Open
2 tasks
Tracked by #44835

[Enhancement]: Block-based checkout spacing improvements #46004

ralucaStan opened this issue Mar 27, 2024 · 3 comments · May be fixed by #47565
Assignees
Labels
block: checkout Issues related to the checkout block. focus: checkout Issues related to checkout page. team: Rubik Store API checkout endpoints, Mini-Cart, Cart and Checkout related issues type: enhancement The issue is a request for an enhancement.

Comments

@ralucaStan
Copy link
Contributor

This is building off Tarun's recently completed work in #44160 . The items below specify further changes and mobile specific improvements.

  • Change space between sections from 36px to 40px 2JyXNimI4oGeJZhgQNZE9V-fi-2072%3A31996

CleanShot 2024-02-21 at 11 10 08@2x

  • For mobile: Add separator between each section, with a 36px top and bottom margin 2JyXNimI4oGeJZhgQNZE9V-fi-2056%3A14274

First Image Description First Image Description

@ralucaStan ralucaStan added type: enhancement The issue is a request for an enhancement. focus: checkout Issues related to checkout page. team: Rubik Store API checkout endpoints, Mini-Cart, Cart and Checkout related issues block: checkout Issues related to the checkout block. labels Mar 27, 2024
@ralucaStan
Copy link
Contributor Author

The team expressed some concerns about the border that should appear on mobile. It might require some changes at the inner cart level, so there is a high chance we might not be following that design if the solution is not straightforward: low effort, no impact on blocks's structure

@opr opr self-assigned this May 13, 2024
@opr opr linked a pull request May 16, 2024 that will close this issue
11 tasks
@opr
Copy link
Contributor

opr commented May 28, 2024

Nikki and I discussed this today and we are going to increase the padding to 48px rather than 40px.

We also noticed the following issues that need to be solved:

  1. The spacing underneath the terms and conditions block should be increased in case that block is moved. Currently there is no space under it.
  2. The separator between the order notes block and terms and conditions block should be removed and in its place an independent separator block should be added.
    1. This block should be styled like the existing one, in light grey.
    2. The default separator block should not be affected by this.
    3. The merchant should be able to move/remove the order notes, checkout terms and conditions, and separator.

Next steps for this issue are to address point 1 above in #47565 and for @nikkivias to review

Create a follow-up issue for point 2 as it would add complexity to the existing PR.

Follow up issue is created: #47910

@opr
Copy link
Contributor

opr commented May 28, 2024

Update to the above comment, we will add a separator to the checkout terms block and add an option to disable it in case the block is moved. The issue to track this change is here: #47910

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
block: checkout Issues related to the checkout block. focus: checkout Issues related to checkout page. team: Rubik Store API checkout endpoints, Mini-Cart, Cart and Checkout related issues type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants