Skip to content

Commit f40b250

Browse files
magento-engcom-teammagento-engcom-team
committed
ENGCOM-3988: [Backport][2.2] Reworked gallery.phtml to move generation of gallery json strings to own block functions #18443
- Merge Pull Request #18443 from gwharton/magento2:2.2-develop-gallery-rework - Merged commits: 1. feea296
2 parents aa0a21c + feea296 commit f40b250

File tree

5 files changed

+388
-75
lines changed

5 files changed

+388
-75
lines changed

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

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

‎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)