Skip to content

Commit 9d31376

Browse files
guz-antonguz-anton
committed
Merge pull request #691 from magento-vanilla/MAGETWO-32170--JS-51
[Sky EPAM] Gallery
2 parents 9ae5bba + 6e6bad7 commit 9d31376

File tree

34 files changed

+2295
-680
lines changed

34 files changed

+2295
-680
lines changed

‎app/code/Magento/Catalog/Block/Product/View/Gallery.php

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
namespace Magento\Catalog\Block\Product\View;
1313

1414
use Magento\Framework\Data\Collection;
15+
use Magento\Framework\Json\EncoderInterface;
1516
use Magento\Catalog\Helper\Image;
1617

1718
class Gallery extends \Magento\Catalog\Block\Product\View\AbstractView
@@ -21,6 +22,27 @@ class Gallery extends \Magento\Catalog\Block\Product\View\AbstractView
2122
*/
2223
protected $configView;
2324

25+
/**
26+
* @var \Magento\Framework\Json\EncoderInterface
27+
*/
28+
protected $jsonEncoder;
29+
30+
/**
31+
* @param \Magento\Catalog\Block\Product\Context $context
32+
* @param \Magento\Framework\Stdlib\ArrayUtils $arrayUtils
33+
* @param EncoderInterface $jsonEncoder
34+
* @param array $data
35+
*/
36+
public function __construct(
37+
\Magento\Catalog\Block\Product\Context $context,
38+
\Magento\Framework\Stdlib\ArrayUtils $arrayUtils,
39+
EncoderInterface $jsonEncoder,
40+
array $data = []
41+
) {
42+
$this->jsonEncoder = $jsonEncoder;
43+
parent::__construct($context, $arrayUtils, $data);
44+
}
45+
2446
/**
2547
* Retrieve collection of gallery images
2648
*
@@ -42,12 +64,14 @@ public function getGalleryImages()
4264
$image->setData(
4365
'medium_image_url',
4466
$this->_imageHelper->init($product, 'product_page_image_medium')
67+
->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
4568
->setImageFile($image->getFile())
4669
->getUrl()
4770
);
4871
$image->setData(
4972
'large_image_url',
5073
$this->_imageHelper->init($product, 'product_page_image_large')
74+
->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
5175
->setImageFile($image->getFile())
5276
->getUrl()
5377
);
@@ -57,6 +81,26 @@ public function getGalleryImages()
5781
return $images;
5882
}
5983

84+
/**
85+
* Return magnifier options
86+
*
87+
* @return string
88+
*/
89+
public function getMagnifier()
90+
{
91+
return $this->jsonEncoder->encode($this->getVar('magnifier'));
92+
}
93+
94+
/**
95+
* Return breakpoints options
96+
*
97+
* @return string
98+
*/
99+
public function getBreakpoints()
100+
{
101+
return $this->jsonEncoder->encode($this->getVar('breakpoints'));
102+
}
103+
60104
/**
61105
* Retrieve product images in JSON format
62106
*
@@ -69,12 +113,22 @@ public function getGalleryImagesJson()
69113
$imagesItems[] = [
70114
'thumb' => $image->getData('small_image_url'),
71115
'img' => $image->getData('medium_image_url'),
72-
'original' => $image->getData('large_image_url'),
116+
'full' => $image->getData('large_image_url'),
73117
'caption' => $image->getLabel(),
74118
'position' => $image->getPosition(),
75119
'isMain' => $this->isMainImage($image),
76120
];
77121
}
122+
if (empty($imagesItems)) {
123+
$imagesItems[] = [
124+
'thumb' => $this->_imageHelper->getDefaultPlaceholderUrl('thumbnail'),
125+
'img' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
126+
'full' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
127+
'caption' => '',
128+
'position' => '0',
129+
'isMain' => true,
130+
];
131+
}
78132
return json_encode($imagesItems);
79133
}
80134

‎app/code/Magento/Catalog/Helper/Image.php

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -436,11 +436,13 @@ public function placeholder($fileName)
436436
*/
437437
public function getPlaceholder($placeholder = null)
438438
{
439-
if (!$this->_placeholder) {
440-
$placeholder = $placeholder ? : $this->_getModel()->getDestinationSubdir();
441-
$this->_placeholder = 'Magento_Catalog::images/product/placeholder/' . $placeholder . '.jpg';
439+
if ($placeholder) {
440+
$placeholderFullPath = 'Magento_Catalog::images/product/placeholder/' . $placeholder . '.jpg';
441+
} else {
442+
$placeholderFullPath = $this->_placeholder
443+
?: 'Magento_Catalog::images/product/placeholder/' . $this->_getModel()->getDestinationSubdir() . '.jpg';
442444
}
443-
return $this->_placeholder;
445+
return $placeholderFullPath;
444446
}
445447

446448
/**
@@ -816,7 +818,7 @@ public function getWidth()
816818
*/
817819
public function getHeight()
818820
{
819-
return $this->getAttribute('height') ? : $this->getAttribute('width');
821+
return $this->getAttribute('height') ?: $this->getAttribute('width');
820822
}
821823

822824
/**

‎app/code/Magento/Catalog/Model/Product.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
* Catalog product model
2020
*
2121
* @method Product setHasError(bool $value)
22+
* @method \Magento\Catalog\Model\ResourceModel\Product getResource()
2223
* @method null|bool getHasError()
2324
* @method Product setAssociatedProductIds(array $productIds)
2425
* @method array getAssociatedProductIds()

‎app/code/Magento/Catalog/Model/Product/Image.php

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@
1919
* @SuppressWarnings(PHPMD.TooManyFields)
2020
* @SuppressWarnings(PHPMD.ExcessiveClassComplexity)
2121
* @SuppressWarnings(PHPMD.CouplingBetweenObjects)
22+
* @method string getFile()
23+
* @method string getLabel()
24+
* @method string getPosition()
2225
*/
2326
class Image extends \Magento\Framework\Model\AbstractModel
2427
{

‎app/code/Magento/Catalog/Test/Unit/Block/Product/View/GalleryTest.php

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ class GalleryTest extends \PHPUnit_Framework_TestCase
3232
*/
3333
protected $registry;
3434

35+
/**
36+
* @var \Magento\Framework\Json\EncoderInterface|\PHPUnit_Framework_MockObject_MockObject
37+
*/
38+
protected $jsonEncoderMock;
39+
3540
protected function setUp()
3641
{
3742
$this->mockContext();
@@ -40,9 +45,14 @@ protected function setUp()
4045
->disableOriginalConstructor()
4146
->getMock();
4247

48+
$this->jsonEncoderMock = $this->getMockBuilder('Magento\Framework\Json\EncoderInterface')
49+
->disableOriginalConstructor()
50+
->getMock();
51+
4352
$this->model = new \Magento\Catalog\Block\Product\View\Gallery(
4453
$this->context,
45-
$this->arrayUtils
54+
$this->arrayUtils,
55+
$this->jsonEncoderMock
4656
);
4757
}
4858

@@ -103,7 +113,8 @@ public function testGetGalleryImages()
103113
[$productMock, 'product_page_image_small', [], $this->imageHelper],
104114
[$productMock, 'product_page_image_medium', [], $this->imageHelper],
105115
[$productMock, 'product_page_image_large', [], $this->imageHelper],
106-
]);
116+
])
117+
->willReturnSelf();
107118
$this->imageHelper->expects($this->exactly(3))
108119
->method('setImageFile')
109120
->with('test_file')
@@ -118,6 +129,19 @@ public function testGetGalleryImages()
118129
->method('getUrl')
119130
->willReturn('product_page_image_large_url');
120131

132+
$this->imageHelper->expects($this->exactly(2))
133+
->method('constrainOnly')
134+
->with(true)
135+
->willReturnSelf();
136+
$this->imageHelper->expects($this->exactly(2))
137+
->method('keepAspectRatio')
138+
->with(true)
139+
->willReturnSelf();
140+
$this->imageHelper->expects($this->exactly(2))
141+
->method('keepFrame')
142+
->with(false)
143+
->willReturnSelf();
144+
121145
$images = $this->model->getGalleryImages();
122146
$this->assertInstanceOf('Magento\Framework\Data\Collection', $images);
123147
}

‎app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,49 +12,50 @@
1212
* @var $block \Magento\Catalog\Block\Product\View\Gallery
1313
*/
1414
?>
15-
<div class="gallery-placeholder"></div>
15+
<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
16+
<div data-role="loader" class="loading-mask">
17+
<div class="loader">
18+
<img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
19+
alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
20+
</div>
21+
</div>
22+
</div>
1623
<script type="text/x-magento-init">
1724
{
18-
".gallery-placeholder": {
25+
"[data-gallery-role=gallery-placeholder]": {
1926
"mage/gallery/gallery": {
2027
"mixins":["magnifier/magnify"],
21-
"magnifierOpts": {
22-
"enabled": <?php /* @escapeNotVerified */ echo $block->getVar("magnifier:enabled"); ?>,
23-
"eventType": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:eventType"); ?>",
24-
"width": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:width"); ?>",
25-
"height": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:height"); ?>",
26-
"top": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:top"); ?>",
27-
"left": "<?php /* @escapeNotVerified */ echo $block->getVar("magnifier:left"); ?>"
28-
},
28+
"magnifierOpts": <?php /* @escapeNotVerified */ echo $block->getMagnifier(); ?>,
2929
"data": <?php /* @escapeNotVerified */ echo $block->getGalleryImagesJson(); ?>,
3030
"options": {
31-
"nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery:nav"); ?>",
32-
"loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery:loop"); ?>,
33-
"keyboard": <?php /* @escapeNotVerified */ echo $block->getVar("gallery:keyboard"); ?>,
34-
"arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery:arrows"); ?>,
35-
"showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery:showCaption"); ?>,
31+
"nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/nav"); ?>",
32+
"loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/loop"); ?>,
33+
"keyboard": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/keyboard"); ?>,
34+
"arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/arrows"); ?>,
35+
"allowfullscreen": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/allowfullscreen"); ?>,
36+
"showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/caption"); ?>,
3637
"width": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
3738
"thumbwidth": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'width'); ?>,
3839
"thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
3940
?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
4041
"height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
41-
?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>
42+
?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
43+
"transitionduration": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/transition/duration"); ?>,
44+
"transition": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/transition/effect"); ?>",
45+
"navarrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/navarrows"); ?>,
46+
"navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navtype"); ?>",
47+
"navdir": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navdir"); ?>"
48+
},
49+
"fullscreen": {
50+
"nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/nav"); ?>",
51+
"loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/loop"); ?>,
52+
"navdir": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/navdir"); ?>",
53+
"arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/arrows"); ?>,
54+
"showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/caption"); ?>,
55+
"transitionduration": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/transition/duration"); ?>,
56+
"transition": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/transition/effect"); ?>"
4257
},
43-
"breakpoints": {
44-
"mobile": {
45-
"conditions": {
46-
"max-width": "767px"
47-
},
48-
"options": {
49-
"options": {
50-
"nav": "dots"
51-
},
52-
"magnifierOpts": {
53-
"enabled": false
54-
}
55-
}
56-
}
57-
}
58+
"breakpoints": <?php /* @escapeNotVerified */ echo $block->getBreakpoints(); ?>
5859
}
5960
}
6061
}

‎app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,7 @@ public function getJsonConfig()
198198
'productId' => $currentProduct->getId(),
199199
'chooseText' => __('Choose an Option...'),
200200
'images' => isset($options['images']) ? $options['images'] : [],
201+
'index' => isset($options['index']) ? $options['index'] : [],
201202
];
202203

203204
if ($currentProduct->hasPreconfiguredValues() && !empty($attributesData['defaultValues'])) {

‎app/code/Magento/ConfigurableProduct/Helper/Data.php

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,44 @@ public function __construct(\Magento\Catalog\Helper\Image $imageHelper)
3030
$this->imageHelper = $imageHelper;
3131
}
3232

33+
/**
34+
* Retrieve collection of gallery images
35+
*
36+
* @param \Magento\Catalog\Api\Data\ProductInterface $product
37+
* @return \Magento\Catalog\Model\Product\Image[]|null
38+
*/
39+
public function getGalleryImages(\Magento\Catalog\Api\Data\ProductInterface $product)
40+
{
41+
$images = $product->getMediaGalleryImages();
42+
if ($images instanceof \Magento\Framework\Data\Collection) {
43+
foreach ($images as &$image) {
44+
/** @var $image \Magento\Catalog\Model\Product\Image */
45+
$image->setData(
46+
'small_image_url',
47+
$this->imageHelper->init($product, 'product_page_image_small')
48+
->setImageFile($image->getFile())
49+
->getUrl()
50+
);
51+
$image->setData(
52+
'medium_image_url',
53+
$this->imageHelper->init($product, 'product_page_image_medium')
54+
->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
55+
->setImageFile($image->getFile())
56+
->getUrl()
57+
);
58+
$image->setData(
59+
'large_image_url',
60+
$this->imageHelper->init($product, 'product_page_image_large')
61+
->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
62+
->setImageFile($image->getFile())
63+
->getUrl()
64+
);
65+
}
66+
}
67+
68+
return $images;
69+
}
70+
3371
/**
3472
* Get Options for Configurable Product Options
3573
*
@@ -42,16 +80,27 @@ public function getOptions($currentProduct, $allowedProducts)
4280
$options = [];
4381
foreach ($allowedProducts as $product) {
4482
$productId = $product->getId();
83+
$images = $this->getGalleryImages($product);
84+
if ($images) {
85+
foreach ($images as $image) {
86+
$options['images'][$productId][] =
87+
[
88+
'thumb' => $image->getData('small_image_url'),
89+
'img' => $image->getData('medium_image_url'),
90+
'full' => $image->getData('large_image_url'),
91+
'caption' => $image->getLabel(),
92+
'position' => $image->getPosition(),
93+
'isMain' => $image->getFile() == $product->getImage(),
94+
];
95+
}
96+
}
4597
foreach ($this->getAllowAttributes($currentProduct) as $attribute) {
4698
$productAttribute = $attribute->getProductAttribute();
4799
$productAttributeId = $productAttribute->getId();
48100
$attributeValue = $product->getData($productAttribute->getAttributeCode());
49101

50102
$options[$productAttributeId][$attributeValue][] = $productId;
51-
$imageUrl = (!$product->getImage() || $product->getImage() === 'no_selection')
52-
? $this->imageHelper->init($currentProduct, 'product_page_image_large')->getUrl()
53-
: $this->imageHelper->init($product, 'product_page_image_large')->getUrl();
54-
$options['images'][$productAttributeId][$attributeValue][$productId] = $imageUrl;
103+
$options['index'][$productId][$productAttributeId] = $attributeValue;
55104
}
56105
}
57106
return $options;

‎app/code/Magento/ConfigurableProduct/Model/Product/Type/Configurable.php

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -440,7 +440,9 @@ public function getUsedProducts($product, $requiredAttributeIds = null)
440440
}
441441

442442
$usedProducts = [];
443-
$collection = $this->getUsedProductCollection($product)->addAttributeToSelect('*')
443+
$collection = $this->getUsedProductCollection($product)
444+
->addAttributeToSelect('*')
445+
->addAttributeToSelect('media_gallery')
444446
->addFilterByRequiredOptions()
445447
->setStoreId($product->getStoreId());
446448

@@ -454,6 +456,8 @@ public function getUsedProducts($product, $requiredAttributeIds = null)
454456
}
455457

456458
foreach ($collection as $item) {
459+
/** @var \Magento\Catalog\Model\Product $item */
460+
$item->getResource()->getAttribute('media_gallery')->getBackend()->afterLoad($item);
457461
$usedProducts[] = $item;
458462
}
459463

0 commit comments

Comments
 (0)