From 8f2111bcb65affb15d1fdd66795aef35a0083dc2 Mon Sep 17 00:00:00 2001 From: Sathakathulla-S Date: Mon, 7 Apr 2025 21:27:13 +0530 Subject: [PATCH 1/3] conflicting styles for product image container in different listings at the same page issue fixed --- .../Catalog/Block/Product/ImageFactory.php | 18 ++++++--- ...ProductImageUniqueContainerActionGroup.xml | 22 +++++++++++ .../Section/StorefrontCategoryMainSection.xml | 1 + ...rontProductImageContainerOnCatalogTest.xml | 39 +++++++++++++++++++ .../Catalog/ViewModel/Category/Image.php | 10 +++++ .../product/image_with_borders.phtml | 7 ++-- 6 files changed, 88 insertions(+), 9 deletions(-) create mode 100644 app/code/Magento/Catalog/Test/Mftf/ActionGroup/StorefrontAssertProductImageUniqueContainerActionGroup.xml create mode 100644 app/code/Magento/Catalog/Test/Mftf/Test/StorefrontProductImageContainerOnCatalogTest.xml diff --git a/app/code/Magento/Catalog/Block/Product/ImageFactory.php b/app/code/Magento/Catalog/Block/Product/ImageFactory.php index f37ee026a406..eb4b0deeb03f 100644 --- a/app/code/Magento/Catalog/Block/Product/ImageFactory.php +++ b/app/code/Magento/Catalog/Block/Product/ImageFactory.php @@ -1,12 +1,13 @@ objectManager = $objectManager; $this->presentationConfig = $presentationConfig; $this->viewAssetPlaceholderFactory = $viewAssetPlaceholderFactory; $this->viewAssetImageFactory = $viewAssetImageFactory; $this->imageParamsBuilder = $imageParamsBuilder; + $this->imageViewModel = $imageViewModel ?? ObjectManager::getInstance()->get(ImageViewModel::class); } /** @@ -133,7 +138,7 @@ private function getLabel(Product $product, string $imageType): string * @param array|null $attributes * @return ImageBlock */ - public function create(Product $product, string $imageId, ?array $attributes = null): ImageBlock + public function create(Product $product, string $imageId, array $attributes = null): ImageBlock { $viewImageConfig = $this->presentationConfig->getViewConfig()->getMediaAttributes( 'Magento_Catalog', @@ -171,7 +176,8 @@ public function create(Product $product, string $imageId, ?array $attributes = n 'ratio' => $this->getRatio($imageMiscParams['image_width'] ?? 0, $imageMiscParams['image_height'] ?? 0), 'custom_attributes' => $this->filterCustomAttributes($attributes), 'class' => $this->getClass($attributes), - 'product_id' => $product->getId() + 'product_id' => $product->getId(), + 'view_model' => $this->imageViewModel ], ]; diff --git a/app/code/Magento/Catalog/Test/Mftf/ActionGroup/StorefrontAssertProductImageUniqueContainerActionGroup.xml b/app/code/Magento/Catalog/Test/Mftf/ActionGroup/StorefrontAssertProductImageUniqueContainerActionGroup.xml new file mode 100644 index 000000000000..17654dd8023a --- /dev/null +++ b/app/code/Magento/Catalog/Test/Mftf/ActionGroup/StorefrontAssertProductImageUniqueContainerActionGroup.xml @@ -0,0 +1,22 @@ + + + + + + + Assert product image container is unique. + + + + + + + + + diff --git a/app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategoryMainSection.xml b/app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategoryMainSection.xml index 9ca961e06e58..ca7dc15dd9f0 100644 --- a/app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategoryMainSection.xml +++ b/app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategoryMainSection.xml @@ -38,6 +38,7 @@ + diff --git a/app/code/Magento/Catalog/Test/Mftf/Test/StorefrontProductImageContainerOnCatalogTest.xml b/app/code/Magento/Catalog/Test/Mftf/Test/StorefrontProductImageContainerOnCatalogTest.xml new file mode 100644 index 000000000000..25b531ba9675 --- /dev/null +++ b/app/code/Magento/Catalog/Test/Mftf/Test/StorefrontProductImageContainerOnCatalogTest.xml @@ -0,0 +1,39 @@ + + + + + + + + + <description value="Simple product container with image doesn't contain product id."/> + <group value="catalog"/> + <severity value="MAJOR"/> + </annotations> + <before> + <createData entity="ApiCategory" stepKey="createCategory"/> + <createData entity="ApiSimpleProduct" stepKey="createSimpleProduct"> + <requiredEntity createDataKey="createCategory"/> + </createData> + <createData entity="ApiProductAttributeMediaGalleryEntryWithoutTypesTestImage" stepKey="createSimpleProductImage"> + <requiredEntity createDataKey="createSimpleProduct"/> + </createData> + </before> + <after> + <deleteData createDataKey="createSimpleProduct" stepKey="deleteSimpleProduct"/> + <deleteData createDataKey="createCategory" stepKey="deleteCategory"/> + </after> + + <actionGroup ref="StorefrontNavigateCategoryPageActionGroup" stepKey="navigateToCategoryPage"> + <argument name="category" value="$$createCategory$$"/> + </actionGroup> + <actionGroup ref="StorefrontAssertProductImageUniqueContainerActionGroup" stepKey="assertProductImageContainer"> + <argument name="productId" value="$$createSimpleProduct.id$$"/> + </actionGroup> + </test> +</tests> diff --git a/app/code/Magento/Catalog/ViewModel/Category/Image.php b/app/code/Magento/Catalog/ViewModel/Category/Image.php index 2982779bd2eb..241c2920d6b0 100644 --- a/app/code/Magento/Catalog/ViewModel/Category/Image.php +++ b/app/code/Magento/Catalog/ViewModel/Category/Image.php @@ -43,4 +43,14 @@ public function getUrl(Category $category, string $attributeCode = self::ATTRIBU { return $this->image->getUrl($category, $attributeCode); } + + /** + * Get unique container ID for image + * @param $productid string + * @return string + */ + public function getProductUniqId( $productid) : string + { + return uniqid($productid); + } } diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml index c108525d3048..37bc5ee3b4d4 100644 --- a/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml +++ b/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml @@ -11,8 +11,9 @@ $width = (int)$block->getWidth(); $height = (int)$block->getHeight(); $paddingBottom = $block->getRatio() * 100; +$productUniqId = $block->getViewModel()->getProductUniqId($block->getProductId()); ?> -<span class="product-image-container product-image-container-<?= /* @noEscape */ $block->getProductId() ?>"> +<span class="product-image-container product-image-container-<?= /* @noEscape */ $productUniqId ?>"> <span class="product-image-wrapper"> <img class="<?= $escaper->escapeHtmlAttr($block->getClass()) ?>" <?php foreach ($block->getCustomAttributes() as $name => $value): ?> @@ -26,7 +27,7 @@ $paddingBottom = $block->getRatio() * 100; </span> <?php $styles = <<<STYLE -.product-image-container-{$block->getProductId()} { +.product-image-container-{$productUniqId} { width: {$width}px; height: auto; aspect-ratio: {$width} / {$height}; @@ -35,7 +36,7 @@ $styles = <<<STYLE height: 100%; width: 100%; } -@supports not (aspect-ratio: auto) { +@supports not (aspect-ratio: auto) { .product-image-container-{$block->getProductId()} span.product-image-wrapper { padding-bottom: {$paddingBottom}%; } From 2bdbb6050e4972a1474178de707ca1507d6384ba Mon Sep 17 00:00:00 2001 From: Sathakathulla-S <sathakathulla.mkp@gmail.com> Date: Tue, 8 Apr 2025 14:15:09 +0530 Subject: [PATCH 2/3] copyright fixed --- .../Test/Mftf/Section/StorefrontCategoryMainSection.xml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategoryMainSection.xml b/app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategoryMainSection.xml index ca7dc15dd9f0..5dcb04979f08 100644 --- a/app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategoryMainSection.xml +++ b/app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategoryMainSection.xml @@ -1,8 +1,8 @@ <?xml version="1.0" encoding="UTF-8"?> <!-- /** - * Copyright 2024 Adobe - * All Rights Reserved. + * Copyright © Magento, Inc. All rights reserved. + * See COPYING.txt for license details. */ --> From 4023d7d7386f911293f78befaf84853dfcde6491 Mon Sep 17 00:00:00 2001 From: Sathakathulla-S <sathakathulla.mkp@gmail.com> Date: Tue, 8 Apr 2025 16:23:14 +0530 Subject: [PATCH 3/3] nullable issue fixed --- app/code/Magento/Catalog/Block/Product/ImageFactory.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/code/Magento/Catalog/Block/Product/ImageFactory.php b/app/code/Magento/Catalog/Block/Product/ImageFactory.php index eb4b0deeb03f..92ed892eeb2a 100644 --- a/app/code/Magento/Catalog/Block/Product/ImageFactory.php +++ b/app/code/Magento/Catalog/Block/Product/ImageFactory.php @@ -138,7 +138,7 @@ private function getLabel(Product $product, string $imageType): string * @param array|null $attributes * @return ImageBlock */ - public function create(Product $product, string $imageId, array $attributes = null): ImageBlock + public function create(Product $product, string $imageId, ?array $attributes = null): ImageBlock { $viewImageConfig = $this->presentationConfig->getViewConfig()->getMediaAttributes( 'Magento_Catalog',