Fixed mobile version of checkout progress bar

[nidhigupta13-ey]

trafficstars

Description (*)

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

Related Pull Requests

https://github.com/magento/magento2/issues/36856

Fixed Issues (if relevant)

1. Fixes magento/magento2#36856

Manual testing scenarios (*)

1. We need to test it in mobile view.

Contribution checklist (*)

• [x] Pull request has a meaningful description of its purpose
• [x] 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[bot]]

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

:exclamation: 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:

1. Database Compare
2. Functional Tests CE
3. Functional Tests EE
4. Functional Tests B2B
5. Integration Tests
6. Magento Health Index
7. Sample Data Tests CE
8. Sample Data Tests EE
9. Sample Data Tests B2B
10. Static Tests
11. Unit Tests
12. WebAPI Tests
13. Semantic Version Checker

You can find more information about the builds here :information_source: 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]

@magento run all tests

[magento-automated-testing[bot]]

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.

[cptX]

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]

@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]

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]

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

[cptX]

@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]

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]

@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]

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?

[nidhigupta13-ey]

@cptX I have tried the same in my another magento instance and it is working for me. Can you please try to clear cache again and try in incognito if it is working or not? You can also check in pub csc the changes are reflecting or not.

[cptX]

Can you please tell me what path should I use for the patch if I create a custom luma theme? Putting the patch in the "../frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less" should work also for a custom luma theme in a separate folder? Or is it better to patch directly the path in the core?

[cptX]

I ran extensive tests in my original luma theme and in my custom luma theme and is impossible to make it work. I placed the file in this location app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less Steps are not visible at all in mobile... Can you please check once more the path you suggested me?

UPDATE: The only method that worked is modifying the original file in the core: vendor/magento/theme-frontend-luma/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less I hope this will applied to the core one day.

Can you please explain why the path you suggested didn't work but modifying the core worked? What do you suggest me to do?

UPDATE SOLUTION: See my post a couple of posts below...

[nidhigupta13-ey]

@cptX I don't know why your changes are not working. But for me it is working fine in the given path, Can you please check your changes are there in style-m or style-l files.

[cptX]

So you are sure this path is 100% correctly given? Could be that I should place the file in my custom theme path (although I tried it...)?

[cptX]

I finally found the correct location to put the file in order to work

app/design/frontend/Vendor/Customtheme/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less

[nidhigupta13-ey]

@cptX happy to know that you found the path and it is working..

[nidhigupta13-ey]

@mrtuvn I have updated the code and pushed again.

[cptX]

Can you tell me if this is resolved in the stable release 2.4.7?

[cptX]

I don't know why the progress has stopped on this? Isn't this high priority? I mean having a progress bar in checkout in mobile isn't of high importance and functionality??

[engcom-Hotel]

@magento run all tests

[engcom-Bravo]

Hi @nidhigupta13-ey,

Thanks for the collaboration & contribution!

:heavy_check_mark: 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: :heavy_multiplication_x: 

After: :heavy_check_mark:

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

Thanks.

[engcom-Dash]

@magento run all tests

[engcom-Dash]

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

[engcom-Dash]

@magento run Functional Tests CE, Functional Tests B2B

[engcom-Dash]

@magento run Functional Tests CE, Functional Tests B2B

[engcom-Dash]

@magento run all tests

[engcom-Dash]

@magento run all tests

[engcom-Dash]

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