Skip to content

Commit 4e16e77

Browse files
magento-engcom-teammagento-engcom-team
committed
ENGCOM-3987: [2.3] Reworked gallery.phtml to move generation of gallery json strings to own block functions #18440
- Merge Pull Request #18440 from gwharton/magento2:2.3-develop-gallery-rework - Merged commits: 1. 2ce4ab0 2. dcc71bf 3. 6c0c2fa 4. 927887f 5. e29fa3d
2 parents 60e3a73 + e29fa3d commit 4e16e77

File tree

4 files changed

+386
-39
lines changed

4 files changed

+386
-39
lines changed

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

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
namespace Magento\Catalog\Block\Product\View;
7+
8+
use Magento\Framework\View\Element\Block\ArgumentInterface;
9+
use Magento\Framework\Serialize\Serializer\Json;
10+
use Magento\Catalog\Block\Product\Context;
11+
use Magento\Framework\Stdlib\ArrayUtils;
12+
13+
/**
14+
* Gallery options block.
15+
*/
16+
class GalleryOptions extends AbstractView implements ArgumentInterface
17+
{
18+
/**
19+
* @var Json
20+
*/
21+
private $jsonSerializer;
22+
23+
/**
24+
* @var Gallery
25+
*/
26+
private $gallery;
27+
28+
/**
29+
* @param Context $context
30+
* @param ArrayUtils $arrayUtils
31+
* @param Json $jsonSerializer
32+
* @param Gallery $gallery
33+
* @param array $data
34+
*/
35+
public function __construct(
36+
Context $context,
37+
ArrayUtils $arrayUtils,
38+
Json $jsonSerializer,
39+
Gallery $gallery,
40+
array $data = []
41+
) {
42+
$this->gallery = $gallery;
43+
$this->jsonSerializer = $jsonSerializer;
44+
parent::__construct($context, $arrayUtils, $data);
45+
}
46+
47+
/**
48+
* Retrieve gallery options in JSON format
49+
*
50+
* @return string
51+
* @SuppressWarnings(PHPMD.CyclomaticComplexity)
52+
* @SuppressWarnings(PHPMD.NPathComplexity)
53+
* @SuppressWarnings(PHPMD.ElseExpression)
54+
*/
55+
public function getOptionsJson()
56+
{
57+
$optionItems = null;
58+
59+
//Special case for gallery/nav which can be the string "thumbs/false/dots"
60+
if (is_bool($this->getVar("gallery/nav"))) {
61+
$optionItems['nav'] = $this->getVar("gallery/nav") ? 'true' : 'false';
62+
} else {
63+
$optionItems['nav'] = $this->escapeHtml($this->getVar("gallery/nav"));
64+
}
65+
66+
$optionItems['loop'] = $this->getVar("gallery/loop");
67+
$optionItems['keyboard'] = $this->getVar("gallery/keyboard");
68+
$optionItems['arrows'] = $this->getVar("gallery/arrows");
69+
$optionItems['allowfullscreen'] = $this->getVar("gallery/allowfullscreen");
70+
$optionItems['showCaption'] = $this->getVar("gallery/caption");
71+
$optionItems['width'] = (int)$this->escapeHtml(
72+
$this->gallery->getImageAttribute('product_page_image_medium', 'width')
73+
);
74+
$optionItems['thumbwidth'] = (int)$this->escapeHtml(
75+
$this->gallery->getImageAttribute('product_page_image_small', 'width')
76+
);
77+
78+
if ($this->gallery->getImageAttribute('product_page_image_small', 'height') ||
79+
$this->gallery->getImageAttribute('product_page_image_small', 'width')) {
80+
$optionItems['thumbheight'] = (int)$this->escapeHtml(
81+
$this->gallery->getImageAttribute('product_page_image_small', 'height') ?:
82+
$this->gallery->getImageAttribute('product_page_image_small', 'width')
83+
);
84+
}
85+
86+
if ($this->gallery->getImageAttribute('product_page_image_medium', 'height') ||
87+
$this->gallery->getImageAttribute('product_page_image_medium', 'width')) {
88+
$optionItems['height'] = (int)$this->escapeHtml(
89+
$this->gallery->getImageAttribute('product_page_image_medium', 'height') ?:
90+
$this->gallery->getImageAttribute('product_page_image_medium', 'width')
91+
);
92+
}
93+
94+
if ($this->getVar("gallery/transition/duration")) {
95+
$optionItems['transitionduration'] =
96+
(int)$this->escapeHtml($this->getVar("gallery/transition/duration"));
97+
}
98+
99+
$optionItems['transition'] = $this->escapeHtml($this->getVar("gallery/transition/effect"));
100+
$optionItems['navarrows'] = $this->getVar("gallery/navarrows");
101+
$optionItems['navtype'] = $this->escapeHtml($this->getVar("gallery/navtype"));
102+
$optionItems['navdir'] = $this->escapeHtml($this->getVar("gallery/navdir"));
103+
104+
if ($this->getVar("gallery/thumbmargin")) {
105+
$optionItems['thumbmargin'] = (int)$this->escapeHtml($this->getVar("gallery/thumbmargin"));
106+
}
107+
108+
return $this->jsonSerializer->serialize($optionItems);
109+
}
110+
111+
/**
112+
* Retrieve gallery fullscreen options in JSON format
113+
*
114+
* @return string
115+
* @SuppressWarnings(PHPMD.CyclomaticComplexity)
116+
* @SuppressWarnings(PHPMD.NPathComplexity)
117+
* @SuppressWarnings(PHPMD.ElseExpression)
118+
*/
119+
public function getFSOptionsJson()
120+
{
121+
$fsOptionItems = null;
122+
123+
//Special case for gallery/nav which can be the string "thumbs/false/dots"
124+
if (is_bool($this->getVar("gallery/fullscreen/nav"))) {
125+
$fsOptionItems['nav'] = $this->getVar("gallery/fullscreen/nav") ? 'true' : 'false';
126+
} else {
127+
$fsOptionItems['nav'] = $this->escapeHtml($this->getVar("gallery/fullscreen/nav"));
128+
}
129+
130+
$fsOptionItems['loop'] = $this->getVar("gallery/fullscreen/loop");
131+
$fsOptionItems['navdir'] = $this->escapeHtml($this->getVar("gallery/fullscreen/navdir"));
132+
$fsOptionItems['navarrows'] = $this->getVar("gallery/fullscreen/navarrows");
133+
$fsOptionItems['navtype'] = $this->escapeHtml($this->getVar("gallery/fullscreen/navtype"));
134+
$fsOptionItems['arrows'] = $this->getVar("gallery/fullscreen/arrows");
135+
$fsOptionItems['showCaption'] = $this->getVar("gallery/fullscreen/caption");
136+
137+
if ($this->getVar("gallery/fullscreen/transition/duration")) {
138+
$fsOptionItems['transitionduration'] = (int)$this->escapeHtml(
139+
$this->getVar("gallery/fullscreen/transition/duration")
140+
);
141+
}
142+
143+
$fsOptionItems['transition'] = $this->escapeHtml($this->getVar("gallery/fullscreen/transition/effect"));
144+
145+
if ($this->getVar("gallery/fullscreen/keyboard")) {
146+
$fsOptionItems['keyboard'] = $this->getVar("gallery/fullscreen/keyboard");
147+
}
148+
149+
if ($this->getVar("gallery/fullscreen/thumbmargin")) {
150+
$fsOptionItems['thumbmargin'] =
151+
(int)$this->escapeHtml($this->getVar("gallery/fullscreen/thumbmargin"));
152+
}
153+
154+
return $this->jsonSerializer->serialize($fsOptionItems);
155+
}
156+
}

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

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
namespace Magento\Catalog\Test\Unit\Block\Product\View;
7+
8+
use Magento\Catalog\Block\Product\Context;
9+
use Magento\Catalog\Block\Product\View\Gallery;
10+
use Magento\Catalog\Block\Product\View\GalleryOptions;
11+
use Magento\Framework\TestFramework\Unit\Helper\ObjectManager;
12+
use Magento\Framework\Escaper;
13+
use Magento\Framework\View\Config;
14+
use Magento\Framework\Config\View;
15+
use Magento\Framework\Serialize\Serializer\Json;
16+
17+
/**
18+
* @SuppressWarnings(PHPMD.CouplingBetweenObjects)
19+
*/
20+
class GalleryOptionsTest extends \PHPUnit\Framework\TestCase
21+
{
22+
/**
23+
* @var GalleryOptions
24+
*/
25+
private $model;
26+
27+
/**
28+
* @var Gallery|\PHPUnit_Framework_MockObject_MockObject
29+
*/
30+
private $gallery;
31+
32+
/**
33+
* @var Context|\PHPUnit_Framework_MockObject_MockObject
34+
*/
35+
private $context;
36+
37+
/**
38+
* @var Json
39+
*/
40+
private $jsonSerializer;
41+
42+
/**
43+
* @var View|\PHPUnit_Framework_MockObject_MockObject
44+
*/
45+
private $configView;
46+
47+
/**
48+
* @var Config|\PHPUnit_Framework_MockObject_MockObject
49+
*/
50+
private $viewConfig;
51+
52+
/**
53+
* @var Escaper
54+
*/
55+
private $escaper;
56+
57+
protected function setUp()
58+
{
59+
$objectManager = new ObjectManager($this);
60+
61+
$this->escaper = $objectManager->getObject(Escaper::class);
62+
$this->configView = $this->createMock(View::class);
63+
64+
$this->viewConfig = $this->createConfiguredMock(
65+
Config::class,
66+
[
67+
'getViewConfig' => $this->configView
68+
]
69+
);
70+
71+
$this->context = $this->createConfiguredMock(
72+
Context::class,
73+
[
74+
'getEscaper' => $this->escaper,
75+
'getViewConfig' => $this->viewConfig
76+
]
77+
);
78+
79+
$this->gallery = $this->createMock(Gallery::class);
80+
81+
$this->jsonSerializer = $objectManager->getObject(
82+
Json::class
83+
);
84+
85+
$this->model = $objectManager->getObject(GalleryOptions::class, [
86+
'context' => $this->context,
87+
'jsonSerializer' => $this->jsonSerializer,
88+
'gallery' => $this->gallery
89+
]);
90+
}
91+
92+
public function testGetOptionsJson()
93+
{
94+
$configMap = [
95+
['Magento_Catalog', 'gallery/nav', 'thumbs'],
96+
['Magento_Catalog', 'gallery/loop', false],
97+
['Magento_Catalog', 'gallery/keyboard', true],
98+
['Magento_Catalog', 'gallery/arrows', true],
99+
['Magento_Catalog', 'gallery/caption', false],
100+
['Magento_Catalog', 'gallery/allowfullscreen', true],
101+
['Magento_Catalog', 'gallery/navdir', 'horizontal'],
102+
['Magento_Catalog', 'gallery/navarrows', true],
103+
['Magento_Catalog', 'gallery/navtype', 'slides'],
104+
['Magento_Catalog', 'gallery/thumbmargin', '5'],
105+
['Magento_Catalog', 'gallery/transition/effect', 'slide'],
106+
['Magento_Catalog', 'gallery/transition/duration', '500'],
107+
];
108+
109+
$imageAttributesMap = [
110+
['product_page_image_medium','height',null, 100],
111+
['product_page_image_medium','width',null, 200],
112+
['product_page_image_small','height',null, 300],
113+
['product_page_image_small','width',null, 400]
114+
];
115+
116+
$this->configView->expects($this->any())
117+
->method('getVarValue')
118+
->will($this->returnValueMap($configMap));
119+
$this->gallery->expects($this->any())
120+
->method('getImageAttribute')
121+
->will($this->returnValueMap($imageAttributesMap));
122+
123+
$json = $this->model->getOptionsJson();
124+
125+
$decodedJson = $this->jsonSerializer->unserialize($json);
126+
127+
$this->assertSame('thumbs', $decodedJson['nav']);
128+
$this->assertSame(false, $decodedJson['loop']);
129+
$this->assertSame(true, $decodedJson['keyboard']);
130+
$this->assertSame(true, $decodedJson['arrows']);
131+
$this->assertSame(false, $decodedJson['showCaption']);
132+
$this->assertSame(true, $decodedJson['allowfullscreen']);
133+
$this->assertSame('horizontal', $decodedJson['navdir']);
134+
$this->assertSame(true, $decodedJson['navarrows']);
135+
$this->assertSame('slides', $decodedJson['navtype']);
136+
$this->assertSame(5, $decodedJson['thumbmargin']);
137+
$this->assertSame('slide', $decodedJson['transition']);
138+
$this->assertSame(500, $decodedJson['transitionduration']);
139+
$this->assertSame(100, $decodedJson['height']);
140+
$this->assertSame(200, $decodedJson['width']);
141+
$this->assertSame(300, $decodedJson['thumbheight']);
142+
$this->assertSame(400, $decodedJson['thumbwidth']);
143+
}
144+
145+
public function testGetFSOptionsJson()
146+
{
147+
$configMap = [
148+
['Magento_Catalog', 'gallery/fullscreen/nav', false],
149+
['Magento_Catalog', 'gallery/fullscreen/loop', true],
150+
['Magento_Catalog', 'gallery/fullscreen/keyboard', true],
151+
['Magento_Catalog', 'gallery/fullscreen/arrows', false],
152+
['Magento_Catalog', 'gallery/fullscreen/caption', true],
153+
['Magento_Catalog', 'gallery/fullscreen/navdir', 'vertical'],
154+
['Magento_Catalog', 'gallery/fullscreen/navarrows', false],
155+
['Magento_Catalog', 'gallery/fullscreen/navtype', 'thumbs'],
156+
['Magento_Catalog', 'gallery/fullscreen/thumbmargin', '10'],
157+
['Magento_Catalog', 'gallery/fullscreen/transition/effect', 'dissolve'],
158+
['Magento_Catalog', 'gallery/fullscreen/transition/duration', '300']
159+
];
160+
161+
$this->configView->expects($this->any())
162+
->method('getVarValue')
163+
->will($this->returnValueMap($configMap));
164+
165+
$json = $this->model->getFSOptionsJson();
166+
167+
$decodedJson = $this->jsonSerializer->unserialize($json);
168+
169+
//Note, this tests the special case for nav variable set to false. It
170+
//Should not be converted to boolean.
171+
$this->assertSame('false', $decodedJson['nav']);
172+
$this->assertSame(true, $decodedJson['loop']);
173+
$this->assertSame(false, $decodedJson['arrows']);
174+
$this->assertSame(true, $decodedJson['keyboard']);
175+
$this->assertSame(true, $decodedJson['showCaption']);
176+
$this->assertSame('vertical', $decodedJson['navdir']);
177+
$this->assertSame(false, $decodedJson['navarrows']);
178+
$this->assertSame(10, $decodedJson['thumbmargin']);
179+
$this->assertSame('thumbs', $decodedJson['navtype']);
180+
$this->assertSame('dissolve', $decodedJson['transition']);
181+
$this->assertSame(300, $decodedJson['transitionduration']);
182+
}
183+
184+
public function testGetOptionsJsonOptionals()
185+
{
186+
$configMap = [
187+
['Magento_Catalog', 'gallery/fullscreen/thumbmargin', false],
188+
['Magento_Catalog', 'gallery/fullscreen/transition/duration', false]
189+
];
190+
191+
$this->configView->expects($this->any())
192+
->method('getVarValue')
193+
->will($this->returnValueMap($configMap));
194+
195+
$json = $this->model->getOptionsJson();
196+
197+
$decodedJson = $this->jsonSerializer->unserialize($json);
198+
199+
$this->assertArrayNotHasKey('thumbmargin', $decodedJson);
200+
$this->assertArrayNotHasKey('transitionduration', $decodedJson);
201+
}
202+
203+
public function testGetFSOptionsJsonOptionals()
204+
{
205+
$configMap = [
206+
['Magento_Catalog', 'gallery/fullscreen/keyboard', false],
207+
['Magento_Catalog', 'gallery/fullscreen/thumbmargin', false],
208+
['Magento_Catalog', 'gallery/fullscreen/transition/duration', false]
209+
];
210+
211+
$this->configView->expects($this->any())
212+
->method('getVarValue')
213+
->will($this->returnValueMap($configMap));
214+
215+
$json = $this->model->getFSOptionsJson();
216+
217+
$decodedJson = $this->jsonSerializer->unserialize($json);
218+
219+
$this->assertArrayNotHasKey('thumbmargin', $decodedJson);
220+
$this->assertArrayNotHasKey('keyboard', $decodedJson);
221+
$this->assertArrayNotHasKey('transitionduration', $decodedJson);
222+
}
223+
}

‎app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,11 @@
121121
</arguments>
122122
</block>
123123
</container>
124-
<block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="Magento_Catalog::product/view/gallery.phtml"/>
124+
<block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="Magento_Catalog::product/view/gallery.phtml">
125+
<arguments>
126+
<argument name="gallery_options" xsi:type="object">Magento\Catalog\Block\Product\View\GalleryOptions</argument>
127+
</arguments>
128+
</block>
125129
<container name="skip_gallery_after.wrapper" htmlTag="div" htmlClass="action-skip-wrapper">
126130
<block class="Magento\Framework\View\Element\Template" after="product.info.media.image" name="skip_gallery_after" template="Magento_Theme::html/skip.phtml">
127131
<arguments>

0 commit comments

Comments
 (0)