Fixed mobile version of checkout progress bar #36982

nidhigupta13-ey · 2023-03-07T05:59:42Z

Description (*)

Fixed the issue in mobile for checkout progress bar. Now it's showing in mobile and tablet view.

Related Pull Requests

#36856

Fixed Issues (if relevant)

Fixes No link to shipping when in payments in checkout in mobile phone view #36856

Manual testing scenarios (*)

We need to test it in mobile view.

Contribution checklist (*)

Pull request has a meaningful description of its purpose
All commits are accompanied by meaningful commit messages
All new or changed code is covered with unit/integration tests (if applicable)
README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
All automated tests passed successfully (all builds are green)

m2-assistant · 2023-03-07T05:59:45Z

Hi @nidhigupta13-ey. Thank you for your contribution!
Here are some useful tips on how you can test your changes using Magento test environment.

Add the comment under your pull request to deploy test or vanilla Magento instance:

@magento give me test instance - deploy test instance based on PR changes
@magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

@magento run all tests - run or re-run all required tests against the PR changes
@magento run <test-build(s)> - run or re-run specific test build(s)
For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names.

Allowed build names are:

Database Compare
Functional Tests CE
Functional Tests EE
Functional Tests B2B
Integration Tests
Magento Health Index
Sample Data Tests CE
Sample Data Tests EE
Sample Data Tests B2B
Static Tests
Unit Tests
WebAPI Tests
Semantic Version Checker

You can find more information about the builds here
ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

For more details, review the Code Contributions documentation.
Join Magento Community Engineering Slack and ask your questions in #github channel.

nidhigupta13-ey · 2023-03-07T06:01:49Z

@magento run all tests

magento-automated-testing · 2023-03-07T06:01:59Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

mrtuvn · 2023-03-07T23:51:44Z

...ign/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less

 //
 // Desktop
 // _____________________________________________



any reason of remove this media mixin ?

As this issue is working fine in blank theme. So I compared the code and there as well we don't have any mixin and using the progress bar code irrespective of view. So the progress bar will show in each device.

mrtuvn · 2023-03-07T23:52:51Z

...ign/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less

+
+//
+// Mobile max width 600px
+//


should target for mobile device. These lines will also maybe duplicated for desktop

It is not duplicated. Some kind of thing like margin and width is only changing based on screen size.

without wrap between media mixins your code styles probably duplicated in both final output files styles-m.css and styles-l.css as i remember before
That's why code base use mixins for target mobile or desktop

If you want apply for mobile move code between for apply also mobile and desktop

& when (@media-common = true) { //Your code here }

mrtuvn · 2023-03-13T16:18:23Z

...ign/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less

+@media (min-width: 280px) and (max-width: 320px) {
+ .opc-progress-bar-item {
+ .lib-css(width, @checkout-progress-bar-item__width__mobile_small);
+ }


Also you should use screen variables instead hardcoded fix value

cptX · 2023-03-18T08:12:28Z

Is there any final solution to this problem yet?

I copied the _progress-bar.less file from the dev to my 2.4.6 installation but I didn't see any change!
Where should I place it? I placed it in my custom theme.

nidhigupta13-ey · 2023-03-20T05:21:06Z

@cptX app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less this is the path of the file. You can copy your file in this path.

cptX · 2023-03-20T10:30:18Z

Hi @nidhigupta13-ey ,
I placed the file to my custom theme but I didn't see any change

app/design/frontend/MyName/MyCustomTheme/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less

Should I place it exactly with the "Magento/luma" path or can it work with the above path as well? If it should work with my custom theme then unfortunately it didn't work...

nidhigupta13-ey · 2023-03-20T11:01:50Z

@cptX try to place it with "Magento/luma" path

cptX · 2023-03-20T18:39:40Z

@cptX try to place it with "Magento/luma" path

It didn't work even in Magento/luma path... I cannot see the progress bar in the checkout page in mobile...
As I said I'm using a custom Luma theme. Maybe this makes a difference, but still I think the solution is not working because I tried to place the file even in my custom theme...

cptX · 2023-03-20T18:45:17Z

Also I see that in checkout in mobile the menu button (3 horizontal lines) is also missing. Is this expected? Does it make sense?

nidhigupta13-ey · 2023-03-21T05:35:11Z

@cptX those three lines are not there in desktop view as well, so I don't think so it should be there in mobile view.

cptX · 2023-03-21T17:29:36Z

OK regarding the Menu lines just ignore it. I still believe that the progress bar is not visible in mobile after the patch. Whatever I tried didn't work.
Is there any other workaround?

engcom-Hotel · 2024-11-13T12:02:40Z

@magento run all tests

engcom-Bravo · 2024-11-15T07:57:32Z

Hi @nidhigupta13-ey,

Thanks for the collaboration & contribution!

✔️ QA Passed

Preconditions:

Install fresh Magento 2.4-develop

Steps to reproduce

Use a mobile phone or mobile view in browser dev tools

Add an item to checkout
Go to checkout
Fill in the shipping data and click next
Being in payment mode there is no way to go back. There is no link to shipping. The checkout titles/links "Shipping" and "Review & Payments" are hidden from the top of the page.

Before: ✖️

After: ✔️

Builds are failed. Hence, moving this PR to Extended Testing.

Thanks.

engcom-Dash · 2024-11-20T07:13:35Z

@magento run all tests

engcom-Dash · 2024-11-20T09:20:11Z

@magento run Unit Tests, Functional Tests CE, Functional Tests B2B

engcom-Dash · 2024-11-20T12:18:42Z

@magento run Functional Tests CE, Functional Tests B2B

engcom-Dash · 2024-11-20T16:36:59Z

@magento run Functional Tests CE, Functional Tests B2B

engcom-Dash · 2024-11-21T05:38:06Z

@magento run all tests

engcom-Dash · 2024-11-21T11:40:05Z

@magento run all tests

engcom-Dash · 2024-11-22T09:21:03Z

@magento run Integration Tests, Functional Tests CE, Functional Tests B2B

engcom-Dash · 2024-11-22T12:26:56Z

The Functional B2B test failures are different in recent 2 successive builds. The Functional CE test failures seem flaky, and also there is a known issue. They neither part of PR nor failing because of the PR changes, hence moving it to Merge in Progress.

Functional Tests B2B
Run 1: https://public-results-storage-prod.magento-testing-service.engineering/reports/magento/magento2/pull/36982/b63f36644d179449d5690be24f7735ad/Functional/allure-report-b2b/index.html#categories/16b25a50b4a8b68f5548cdba82ebd5f8/de373c800213d2be/

Run 2: https://public-results-storage-prod.magento-testing-service.engineering/reports/magento/magento2/pull/36982/d512d9162aae25676ec5dd94a783de50/Functional/allure-report-b2b/index.html#categories/8fb3a91ba5aaf9de24cc8a92edc82b5d

Functional Tests CE
Run 1: https://public-results-storage-prod.magento-testing-service.engineering/reports/magento/magento2/pull/36982/2fa9409bcd83ab6ed09f7dfdb9a394a3/Functional/allure-report-ce/index.html#categories/6d7e37752c3cc83cb3d2063131f608bb/c8b8c08819c056c6/

Run 2: https://public-results-storage-prod.magento-testing-service.engineering/reports/magento/magento2/pull/36982/13b5b25017d3d6ea6c68076fbe708cbe/Functional/allure-report-ce/index.html#categories/8fb3a91ba5aaf9de24cc8a92edc82b5d

Fixed mobile version of checkout progress bar

a2d99ee

m2-community-project bot added the Priority: P2 A defect with this priority could have functionality issues which are not to expectations. label Mar 7, 2023

m2-github-services added Partner: EY partners-contribution Pull Request is created by Magento Partner labels Mar 7, 2023

m2-community-project bot added the Progress: pending review label Mar 7, 2023

mrtuvn reviewed Mar 7, 2023

View reviewed changes

m2-community-project bot assigned mrtuvn Mar 7, 2023

m2-community-project bot added Progress: review and removed Progress: pending review labels Mar 7, 2023

mrtuvn reviewed Mar 7, 2023

View reviewed changes

mrtuvn added the Progress: needs update label Mar 7, 2023

m2-community-project bot removed the Progress: review label Mar 7, 2023

mrtuvn added Progress: review Issue: needs update Additional information is require, waiting for response labels Mar 7, 2023

m2-community-project bot removed the Progress: needs update label Mar 7, 2023

nidhigupta13-ey requested a review from mrtuvn March 9, 2023 06:06

mrtuvn reviewed Mar 13, 2023

View reviewed changes

Changed the media conditions as per review comments

65e190d

nidhigupta13-ey requested a review from mrtuvn March 14, 2023 13:18

Priyakshic added the Project: Community Picked PRs upvoted by the community label Nov 13, 2024

Merge branch '2.4-develop' into issue-36856

f327b1a

engcom-Hotel approved these changes Nov 14, 2024

View reviewed changes

m2-community-project bot assigned engcom-Hotel Nov 14, 2024

m2-community-project bot added Progress: ready for testing and removed Progress: review labels Nov 14, 2024

engcom-Hotel added Progress: review Progress: ready for testing and removed Progress: ready for testing Issue: needs update Additional information is require, waiting for response labels Nov 14, 2024

m2-community-project bot added Progress: review and removed Progress: review labels Nov 14, 2024

engcom-Bravo self-assigned this Nov 15, 2024

m2-community-project bot removed the Progress: review label Nov 15, 2024

engcom-Dash self-assigned this Nov 20, 2024

Merge branch '2.4-develop' into issue-36856

0a56ecc

Merge branch '2.4-develop' into issue-36856

b7472b5

engcom-Dash added the Progress: accept label Nov 22, 2024

m2-community-project bot removed the Progress: ready for testing label Nov 22, 2024

magento-devops-reposync-svc merged commit 1022693 into magento:2.4-develop Dec 4, 2024
10 of 12 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fixed mobile version of checkout progress bar #36982

Fixed mobile version of checkout progress bar #36982

Uh oh!

nidhigupta13-ey commented Mar 7, 2023 •

edited

Loading

m2-assistant bot commented Mar 7, 2023

nidhigupta13-ey commented Mar 7, 2023

magento-automated-testing bot commented Mar 7, 2023

mrtuvn Mar 7, 2023

nidhigupta13-ey Mar 8, 2023

mrtuvn Mar 7, 2023 •

edited

Loading

nidhigupta13-ey Mar 9, 2023

mrtuvn Mar 13, 2023 •

edited

Loading

mrtuvn Mar 13, 2023 •

edited

Loading

mrtuvn Mar 13, 2023

cptX commented Mar 18, 2023 •

edited

Loading

nidhigupta13-ey commented Mar 20, 2023

cptX commented Mar 20, 2023

nidhigupta13-ey commented Mar 20, 2023

cptX commented Mar 20, 2023 •

edited

Loading

cptX commented Mar 20, 2023

nidhigupta13-ey commented Mar 21, 2023

cptX commented Mar 21, 2023

engcom-Hotel commented Nov 13, 2024

engcom-Bravo commented Nov 15, 2024

engcom-Dash commented Nov 20, 2024

engcom-Dash commented Nov 20, 2024

engcom-Dash commented Nov 20, 2024

engcom-Dash commented Nov 20, 2024

engcom-Dash commented Nov 21, 2024

engcom-Dash commented Nov 21, 2024

engcom-Dash commented Nov 22, 2024

engcom-Dash commented Nov 22, 2024

Uh oh!

Fixed mobile version of checkout progress bar #36982

Fixed mobile version of checkout progress bar #36982

Uh oh!

Conversation

nidhigupta13-ey commented Mar 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description (*)

Related Pull Requests

Fixed Issues (if relevant)

Manual testing scenarios (*)

Contribution checklist (*)

m2-assistant bot commented Mar 7, 2023

nidhigupta13-ey commented Mar 7, 2023

magento-automated-testing bot commented Mar 7, 2023

mrtuvn Mar 7, 2023

Choose a reason for hiding this comment

nidhigupta13-ey Mar 8, 2023

Choose a reason for hiding this comment

mrtuvn Mar 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

nidhigupta13-ey Mar 9, 2023

Choose a reason for hiding this comment

mrtuvn Mar 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

mrtuvn Mar 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

mrtuvn Mar 13, 2023

Choose a reason for hiding this comment

cptX commented Mar 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

nidhigupta13-ey commented Mar 20, 2023

cptX commented Mar 20, 2023

nidhigupta13-ey commented Mar 20, 2023

cptX commented Mar 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

cptX commented Mar 20, 2023

nidhigupta13-ey commented Mar 21, 2023

cptX commented Mar 21, 2023

engcom-Hotel commented Nov 13, 2024

engcom-Bravo commented Nov 15, 2024

✔️ QA Passed

engcom-Dash commented Nov 20, 2024

engcom-Dash commented Nov 20, 2024

engcom-Dash commented Nov 20, 2024

engcom-Dash commented Nov 20, 2024

engcom-Dash commented Nov 21, 2024

engcom-Dash commented Nov 21, 2024

engcom-Dash commented Nov 22, 2024

engcom-Dash commented Nov 22, 2024

Uh oh!

nidhigupta13-ey commented Mar 7, 2023 •

edited

Loading

mrtuvn Mar 7, 2023 •

edited

Loading

mrtuvn Mar 13, 2023 •

edited

Loading

mrtuvn Mar 13, 2023 •

edited

Loading

cptX commented Mar 18, 2023 •

edited

Loading

cptX commented Mar 20, 2023 •

edited

Loading