diff --git a/app/code/Magento/Catalog/Block/Product/ImageFactory.php b/app/code/Magento/Catalog/Block/Product/ImageFactory.php index f37ee026a406f..92ed892eeb2a6 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); } /** @@ -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 0000000000000..17654dd8023a3 --- /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 9ca961e06e580..5dcb04979f08f 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 @@ @@ -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 0000000000000..25b531ba9675f --- /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 2982779bd2eb3..241c2920d6b0d 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 c108525d3048d..37bc5ee3b4d4b 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}%; }