Skip to content

Commit 4c437c3

Browse files
author
Momotenko,Natalia(nmomotenko)
committed
Merge pull request #471 from magento-vanilla/JS-461
[Epam] Gallery
2 parents b2e5e71 + ddf3167 commit 4c437c3

File tree

26 files changed

+1993
-1633
lines changed

26 files changed

+1993
-1633
lines changed

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

Lines changed: 63 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,24 @@
2020
</div>
2121
</div>
2222
</div>
23+
<!--Fix for jumping content. Loader must be the same size as gallery.-->
24+
<script>
25+
var config = {
26+
"width": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
27+
"thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
28+
?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
29+
"navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navtype"); ?>",
30+
"height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height'); ?>
31+
},
32+
thumbBarHeight = 0,
33+
loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0];
34+
35+
if (config.navtype === 'horizontal') {
36+
thumbBarHeight = config.thumbheight;
37+
}
38+
39+
loader.style.paddingBottom = ( config.height / config.width * 100) + "%";
40+
</script>
2341
<script type="text/x-magento-init">
2442
{
2543
"[data-gallery-role=gallery-placeholder]": {
@@ -29,30 +47,60 @@
2947
"data": <?php /* @escapeNotVerified */ echo $block->getGalleryImagesJson(); ?>,
3048
"options": {
3149
"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"); ?>,
37-
"width": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
38-
"thumbwidth": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'width'); ?>,
39-
"thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
50+
<?php if (($block->getVar("gallery/loop"))): ?>
51+
"loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/loop"); ?>,
52+
<?php endif; ?>
53+
<?php if (($block->getVar("gallery/keyboard"))): ?>
54+
"keyboard": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/keyboard"); ?>,
55+
<?php endif; ?>
56+
<?php if (($block->getVar("gallery/arrows"))): ?>
57+
"arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/arrows"); ?>,
58+
<?php endif; ?>
59+
<?php if (($block->getVar("gallery/allowfullscreen"))): ?>
60+
"allowfullscreen": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/allowfullscreen"); ?>,
61+
<?php endif; ?>
62+
<?php if (($block->getVar("gallery/caption"))): ?>
63+
"showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/caption"); ?>,
64+
<?php endif; ?>
65+
"width": "<?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>",
66+
"thumbwidth": "<?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'width'); ?>",
67+
<?php if ($block->getImageAttribute('product_page_image_small', 'height') || $block->getImageAttribute('product_page_image_small', 'width')): ?>
68+
"thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
4069
?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
41-
"height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
70+
<?php endif; ?>
71+
<?php if ($block->getImageAttribute('product_page_image_medium', 'height') || $block->getImageAttribute('product_page_image_medium', 'width')): ?>
72+
"height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
4273
?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
43-
"transitionduration": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/transition/duration"); ?>,
74+
<?php endif; ?>
75+
<?php if ($block->getVar("gallery/transition/duration")): ?>
76+
"transitionduration": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/transition/duration"); ?>,
77+
<?php endif; ?>
4478
"transition": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/transition/effect"); ?>",
45-
"navarrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/navarrows"); ?>,
79+
<?php if (($block->getVar("gallery/navarrows"))): ?>
80+
"navarrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/navarrows"); ?>,
81+
<?php endif; ?>
4682
"navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navtype"); ?>",
4783
"navdir": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navdir"); ?>"
4884
},
4985
"fullscreen": {
5086
"nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/nav"); ?>",
51-
"loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/loop"); ?>,
87+
<?php if ($block->getVar("gallery/fullscreen/loop")): ?>
88+
"loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/loop"); ?>,
89+
<?php endif; ?>
5290
"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"); ?>,
91+
<?php if ($block->getVar("gallery/transition/navarrows")): ?>
92+
"navarrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/navarrows"); ?>,
93+
<?php endif; ?>
94+
"navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/navtype"); ?>",
95+
<?php if ($block->getVar("gallery/fullscreen/arrows")): ?>
96+
"arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/arrows"); ?>,
97+
<?php endif; ?>
98+
<?php if ($block->getVar("gallery/fullscreen/caption")): ?>
99+
"showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/caption"); ?>,
100+
<?php endif; ?>
101+
<?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?>
102+
"transitionduration": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/transition/duration"); ?>,
103+
<?php endif; ?>
56104
"transition": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/fullscreen/transition/effect"); ?>"
57105
},
58106
"breakpoints": <?php /* @escapeNotVerified */ echo $block->getBreakpoints(); ?>

‎app/code/Magento/ConfigurableProduct/view/frontend/templates/product/view/type/options/configurable.phtml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ $_attributes = $block->decorateArray($block->getAllowAttributes());
3434
{
3535
"#product_addtocart_form": {
3636
"configurable": {
37-
"spConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>
37+
"spConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>,
38+
"onlyMainImg": <?php /* @escapeNotVerified */ echo $block->getVar('change_only_base_image', 'Magento_ConfigurableProduct') ?: 'false'; ?>
3839
}
3940
}
4041
}

‎app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ define([
2727
' <%- data.finalPrice.formatted %>' +
2828
'<% } %>',
2929
mediaGallerySelector: '[data-gallery-role=gallery-placeholder]',
30-
mediaGalleryInitial: null
30+
mediaGalleryInitial: null,
31+
onlyMainImg: false
3132
},
3233

3334
/**
@@ -253,14 +254,45 @@ define([
253254
* @private
254255
*/
255256
_changeProductImage: function () {
256-
var images = this.options.spConfig.images[this.simpleProduct],
257+
var images,
258+
initialImages = $.extend(true, [], this.options.mediaGalleryInitial),
257259
galleryObject = $(this.options.mediaGallerySelector).data('gallery');
258260

261+
if (this.options.spConfig.images[this.simpleProduct]) {
262+
images = $.extend(true, [], this.options.spConfig.images[this.simpleProduct]);
263+
}
264+
265+
function updateGallery(imagesArr) {
266+
var imgToUpdate,
267+
mainImg;
268+
269+
mainImg = imagesArr.filter(function (img) {
270+
return img.isMain;
271+
});
272+
273+
imgToUpdate = mainImg.length ? mainImg[0] : imagesArr[0];
274+
galleryObject.updateDataByIndex(0, imgToUpdate);
275+
galleryObject.seek(1);
276+
}
277+
259278
if (galleryObject) {
260279
if (images) {
261-
galleryObject.updateData(images);
280+
images.map(function (img) {
281+
img.type = 'image';
282+
});
283+
284+
if (this.options.onlyMainImg) {
285+
updateGallery(images);
286+
} else {
287+
galleryObject.updateData(images)
288+
}
262289
} else {
263-
galleryObject.updateData(this.options.mediaGalleryInitial);
290+
if (this.options.onlyMainImg) {
291+
updateGallery(initialImages);
292+
} else {
293+
galleryObject.updateData(this.options.mediaGalleryInitial);
294+
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
295+
}
264296
}
265297
}
266298
},

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
{
1515
"[data-gallery-role=gallery-placeholder]": {
1616
"Magento_ProductVideo/js/fotorama-add-video-events": {
17-
"fotoramaVideoData": <?php /* @escapeNotVerified */ echo $block->getMediaGalleryDataJson(); ?>,
18-
"fotoramaVideoSettings": <?php /* @escapeNotVerified */ echo $block->getVideoSettingsJson(); ?>,
19-
"fotoramaOptionsVideoData": <?php /* @noEscape */ echo $block->getOptionsMediaGalleryDataJson(); ?>
17+
"videoData": <?php /* @escapeNotVerified */ echo $block->getMediaGalleryDataJson(); ?>,
18+
"videoSettings": <?php /* @escapeNotVerified */ echo $block->getVideoSettingsJson(); ?>,
19+
"optionsVideoData": <?php /* @noEscape */ echo $block->getOptionsMediaGalleryDataJson(); ?>
2020
}
2121
}
2222
}

0 commit comments

Comments
 (0)