Fixed conflicting styles for product image container in different listings at the same page #31473

tangar76 · 2020-12-28T11:33:22Z

Description (*)

This pull requests solves problem when there are two product listing blocks on the same page. Both blocks have at list one common product. And listings have different image sizes for product image.

Related Pull Requests

Can't find related pull requests.

Fixed Issues (if relevant)

Can't find related issue.

Manual testing scenarios (*)

Open product "Crown Summit Backpack" (SKU 24-MB03) to assign up-sell products. Add at list one up-sell product. One of the assigned products must be "Fusion Backpack" (SKU 24-MB02). Save changes.
Create widget "Catalog Product List" via Magento Admin. Assign widget to store view you test. Layout updates settings: display on "Specified page"; page "Catalog Product View"; container "Main Content Top". Widget Options - select at least two product via SKU. One of products must be "Fusion Backpack" (SKU 24-MB02). Save widget.
Clear Magento 2 cache.
Open product page for "Crown Summit Backpack" (SKU 24-MB03) at store front.

With old code you can see that "Fusion Backpack" has smaller image than it should.

This pull request fixes it. "Fusion Backpack" will get same size as "Affirm Water Bottle".

Questions or comments

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)
All automated tests passed successfully (all builds are green)

Resolved issues:

resolves [Issue] Fixed conflicting styles for product image container in different listings at the same page #31526: Fixed conflicting styles for product image container in different listings at the same page

Resolved issues:

resolves [Issue] Fixed conflicting styles for product image container in different listings at the same page #35372: Fixed conflicting styles for product image container in different listings at the same page

…tings at the same page

m2-assistant · 2020-12-28T11:33:24Z

Hi @tangar76. Thank you for your contribution
Here is some useful tips 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

You can find more information about the builds here

ℹ️ Please run only needed test builds instead of all when developing. Please run all test builds before sending your PR for review.

For more details, please, review the Magento Contributor Guide documentation.

⚠️ According to the Magento Contribution requirements, all Pull Requests must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

🕙 You can find the schedule on the Magento Community Calendar page.

📞 The triage of Pull Requests happens in the queue order. If you want to speed up the delivery of your contribution, please join the Community Contributions Triage session to discuss the appropriate ticket.

🎥 You can find the recording of the previous Community Contributions Triage on the Magento Youtube Channel

✏️ Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

m2-assistant · 2020-12-28T11:43:04Z

Hi @tangar76, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

m2-assistant · 2020-12-28T11:43:12Z

Hi @tangar76. Thank you for your contribution
Here is some useful tips 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

You can find more information about the builds here

ℹ️ Please run only needed test builds instead of all when developing. Please run all test builds before sending your PR for review.

For more details, please, review the Magento Contributor Guide documentation.

sidolov · 2021-01-04T18:40:34Z

@magento create issue

gabrieldagama · 2021-01-05T10:44:07Z

@magento run all tests

gabrieldagama

Hi @tangar76, thanks for your contribution! Can you have a look at my comment below?

Also, we must cover all changes with automated tests, probably the most suitable here would be MFTF test.

Thanks!

gabrieldagama · 2021-01-05T10:51:45Z

app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml

@@ -10,8 +10,9 @@
 /** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
 $width = (int)$block->getWidth();
 $paddingBottom = $block->getRatio() * 100;
+$containerId = uniqid($block->getProductId());


I believe we should create a function on Magento\Catalog\Block\Product\Image to generate the containerId instead of adding it to template.

engcom-Charlie · 2021-01-08T11:46:59Z

Hello @tangar76, Could you please look at #31473 (comment)?
Thank you.

engcom-Charlie · 2021-01-11T12:16:36Z

Hello @tangar76, please look at #31473 (comment). Otherwise, we can't proceed with your PR.
Thank you.

tangar76 · 2021-01-11T14:16:36Z

@engcom-Charlie container id logic moved from template to block

engcom-Charlie · 2023-08-10T05:50:58Z

@magento run Functional Tests CE

magento-automated-testing · 2023-08-10T05:51:08Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

engcom-Charlie · 2023-08-10T06:44:11Z

@magento run Functional Tests B2B, Functional Tests EE

magento-automated-testing · 2023-08-10T06:44:17Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

engcom-Charlie · 2023-08-10T06:45:22Z

@magento give me test instance

magento-deployment-service · 2023-08-10T06:45:26Z

Hi @engcom-Charlie. Thank you for your request. I'm working on Magento instance for you.

magento-deployment-service · 2023-08-10T06:50:53Z

Hi @engcom-Charlie, here is your Magento Instance: https://d571d325782608ff6ac4467b071305aa.instances-prod.magento-community.engineering
Admin access: https://d571d325782608ff6ac4467b071305aa.instances-prod.magento-community.engineering/admin_f94d
Login: 0e81fd51
Password: b40a7a600ae7

engcom-Charlie · 2023-08-10T09:58:57Z

@magento run all tests

magento-automated-testing · 2023-08-10T09:59:08Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

engcom-Charlie · 2023-08-11T07:50:21Z

@magento run all tests

magento-automated-testing · 2023-08-11T07:50:30Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

engcom-Charlie · 2023-08-11T11:31:24Z

@magento run all tests

magento-automated-testing · 2023-08-11T11:31:32Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

engcom-Charlie · 2023-09-01T07:04:49Z

@magento give me 2.4-develop instance

magento-deployment-service · 2023-09-01T07:04:52Z

Hi @engcom-Charlie. Thank you for your request. I'm working on Magento instance for you.

magento-deployment-service · 2023-09-01T07:11:22Z

Hi @engcom-Charlie, here is your Magento Instance: https://9d9c4c4df647b8bf82f7ff4524b9ab1d.instances-prod.magento-community.engineering
Admin access: https://9d9c4c4df647b8bf82f7ff4524b9ab1d.instances-prod.magento-community.engineering/admin_a32e
Login: 086cc673
Password: 626d98fc2b88

engcom-Charlie · 2023-09-01T10:21:38Z

@magento run all tests

magento-automated-testing · 2023-09-01T10:21:49Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

engcom-Charlie · 2023-09-04T06:07:58Z

@magento run all tests

magento-automated-testing · 2023-09-04T06:08:04Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

engcom-Charlie · 2023-09-13T13:22:25Z

@magento run Functional Tests CE

magento-automated-testing · 2023-09-13T13:22:31Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

engcom-Charlie · 2023-09-14T13:43:07Z

Hi @tangar76,

There are many failures in the build, it will be helpful if you have a look into them. Can you please check them.

Thank you!

engcom-Charlie · 2023-09-25T09:56:28Z

Hi @tangar76,

As per above comment, there are too many failures in this PR. Kindly have a look into this. Till then we are closing this PR.

Please feel free to reopen once it get updated or let us know to reopen when you are working on it.

Thank you!

Fixed conflicting styles for product image container in different lis…

03e4ad8

…tings at the same page

magento-engcom-team added Area: Frontend Component: Catalog Release Line: 2.4 labels Dec 28, 2020

tangar76 closed this Dec 28, 2020

tangar76 reopened this Dec 28, 2020

sidolov added Priority: P2 A defect with this priority could have functionality issues which are not to expectations. Severity: S3 Affects non-critical data or functionality and does not force users to employ a workaround. labels Jan 4, 2021

m2-community-project bot added Progress: pending review labels Jan 4, 2021

m2-assistant bot mentioned this pull request Jan 4, 2021

[Issue] Fixed conflicting styles for product image container in different listings at the same page #31526

Open

2 tasks

Merge branch '2.4-develop' into 2.4-develop

5e77a8f

gabrieldagama suggested changes Jan 5, 2021

View reviewed changes

m2-community-project bot assigned gabrieldagama Jan 5, 2021

m2-community-project bot added Progress: needs update and removed Progress: pending review labels Jan 5, 2021

engcom-Charlie self-assigned this Jan 8, 2021

Get container id from block instead of direct generate in template

d80b5b7

engcom-Charlie requested a review from gabrieldagama January 11, 2021 14:17

m2-community-project bot added Progress: pending review and removed Progress: needs update labels Jan 12, 2021

Merge branch '2.4-develop' into 2.4-develop

6cace49

Merge branch '2.4-develop' into 2.4-develop

ba5b376

engcom-Charlie added 2 commits September 1, 2023 15:03

Merged 2.4-develop

a0cf898

Merge remote-tracking branch 'magento/2.4-develop' into 2.4-develop

0920940

Merge branch '2.4-develop' into 2.4-develop

10d4b0e

engcom-Charlie closed this Sep 25, 2023

m2-community-project bot removed the Progress: needs update label Sep 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixed conflicting styles for product image container in different listings at the same page #31473

Fixed conflicting styles for product image container in different listings at the same page #31473

tangar76 commented Dec 28, 2020 •

edited by m2-assistant bot

Loading

m2-assistant bot commented Dec 28, 2020

m2-assistant bot commented Dec 28, 2020

m2-assistant bot commented Dec 28, 2020

sidolov commented Jan 4, 2021

gabrieldagama commented Jan 5, 2021

gabrieldagama left a comment

gabrieldagama Jan 5, 2021

engcom-Charlie commented Jan 8, 2021

engcom-Charlie commented Jan 11, 2021

tangar76 commented Jan 11, 2021

engcom-Charlie commented Aug 10, 2023

magento-automated-testing bot commented Aug 10, 2023

engcom-Charlie commented Aug 10, 2023

magento-automated-testing bot commented Aug 10, 2023

engcom-Charlie commented Aug 10, 2023

magento-deployment-service bot commented Aug 10, 2023

magento-deployment-service bot commented Aug 10, 2023

engcom-Charlie commented Aug 10, 2023

magento-automated-testing bot commented Aug 10, 2023

engcom-Charlie commented Aug 11, 2023

magento-automated-testing bot commented Aug 11, 2023

engcom-Charlie commented Aug 11, 2023

magento-automated-testing bot commented Aug 11, 2023

engcom-Charlie commented Sep 1, 2023

magento-deployment-service bot commented Sep 1, 2023

magento-deployment-service bot commented Sep 1, 2023

engcom-Charlie commented Sep 1, 2023

magento-automated-testing bot commented Sep 1, 2023

engcom-Charlie commented Sep 4, 2023

magento-automated-testing bot commented Sep 4, 2023

engcom-Charlie commented Sep 13, 2023

magento-automated-testing bot commented Sep 13, 2023

engcom-Charlie commented Sep 14, 2023

engcom-Charlie commented Sep 25, 2023

Fixed conflicting styles for product image container in different listings at the same page #31473

Fixed conflicting styles for product image container in different listings at the same page #31473

Conversation

tangar76 commented Dec 28, 2020 • edited by m2-assistant bot Loading

Description (*)

Related Pull Requests

Fixed Issues (if relevant)

Manual testing scenarios (*)

Questions or comments

Contribution checklist (*)

Resolved issues:

Resolved issues:

m2-assistant bot commented Dec 28, 2020

m2-assistant bot commented Dec 28, 2020

m2-assistant bot commented Dec 28, 2020

sidolov commented Jan 4, 2021

gabrieldagama commented Jan 5, 2021

gabrieldagama left a comment

Choose a reason for hiding this comment

gabrieldagama Jan 5, 2021

Choose a reason for hiding this comment

engcom-Charlie commented Jan 8, 2021

engcom-Charlie commented Jan 11, 2021

tangar76 commented Jan 11, 2021

engcom-Charlie commented Aug 10, 2023

magento-automated-testing bot commented Aug 10, 2023

engcom-Charlie commented Aug 10, 2023

magento-automated-testing bot commented Aug 10, 2023

engcom-Charlie commented Aug 10, 2023

magento-deployment-service bot commented Aug 10, 2023

magento-deployment-service bot commented Aug 10, 2023

engcom-Charlie commented Aug 10, 2023

magento-automated-testing bot commented Aug 10, 2023

engcom-Charlie commented Aug 11, 2023

magento-automated-testing bot commented Aug 11, 2023

engcom-Charlie commented Aug 11, 2023

magento-automated-testing bot commented Aug 11, 2023

engcom-Charlie commented Sep 1, 2023

magento-deployment-service bot commented Sep 1, 2023

magento-deployment-service bot commented Sep 1, 2023

engcom-Charlie commented Sep 1, 2023

magento-automated-testing bot commented Sep 1, 2023

engcom-Charlie commented Sep 4, 2023

magento-automated-testing bot commented Sep 4, 2023

engcom-Charlie commented Sep 13, 2023

magento-automated-testing bot commented Sep 13, 2023

engcom-Charlie commented Sep 14, 2023

engcom-Charlie commented Sep 25, 2023

tangar76 commented Dec 28, 2020 •

edited by m2-assistant bot

Loading