diff --git a/app/code/Magento/Catalog/Test/Mftf/ActionGroup/AdminAssignImageBaseRoleActionGroup.xml b/app/code/Magento/Catalog/Test/Mftf/ActionGroup/AdminAssignImageBaseRoleActionGroup.xml
new file mode 100644
index 0000000000000..aa5311d389d7a
--- /dev/null
+++ b/app/code/Magento/Catalog/Test/Mftf/ActionGroup/AdminAssignImageBaseRoleActionGroup.xml
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Requires the navigation to the Product Creation page. Checks the Base Role area for image.
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/code/Magento/Catalog/Test/Mftf/Data/ProductData.xml b/app/code/Magento/Catalog/Test/Mftf/Data/ProductData.xml
index a44db8010a822..867f0fa9ccde5 100644
--- a/app/code/Magento/Catalog/Test/Mftf/Data/ProductData.xml
+++ b/app/code/Magento/Catalog/Test/Mftf/Data/ProductData.xml
@@ -876,6 +876,14 @@
5
EavStock100
+
+ Magento2
+ Upload File
+ Yes
+ magento2.jpg
+ magento2
+ jpg
+
Magento3
1.00
diff --git a/app/code/Magento/Catalog/Test/Mftf/Test/StorefrontConfigurableOptionsThumbImagesTest.xml b/app/code/Magento/Catalog/Test/Mftf/Test/StorefrontConfigurableOptionsThumbImagesTest.xml
new file mode 100644
index 0000000000000..134fd89c2c813
--- /dev/null
+++ b/app/code/Magento/Catalog/Test/Mftf/Test/StorefrontConfigurableOptionsThumbImagesTest.xml
@@ -0,0 +1,228 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/code/Magento/Catalog/Test/Mftf/Test/StorefrontSelectedByQueryParamsConfigurableOptionsThumbImagesTest.xml b/app/code/Magento/Catalog/Test/Mftf/Test/StorefrontSelectedByQueryParamsConfigurableOptionsThumbImagesTest.xml
new file mode 100644
index 0000000000000..941ae6fb84c56
--- /dev/null
+++ b/app/code/Magento/Catalog/Test/Mftf/Test/StorefrontSelectedByQueryParamsConfigurableOptionsThumbImagesTest.xml
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js
index 6f3af43bf5c7a..8fd1d761040d7 100644
--- a/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js
+++ b/app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js
@@ -13,7 +13,8 @@ define([
'priceUtils',
'priceBox',
'jquery-ui-modules/widget',
- 'jquery/jquery.parsequery'
+ 'jquery/jquery.parsequery',
+ 'fotoramaVideoEvents'
], function ($, _, mageTemplate, $t, priceUtils) {
'use strict';
@@ -307,9 +308,13 @@ define([
_changeProductImage: function () {
var images,
initialImages = this.options.mediaGalleryInitial,
- galleryObject = $(this.options.mediaGallerySelector).data('gallery');
+ gallery = $(this.options.mediaGallerySelector).data('gallery');
+
+ if (_.isUndefined(gallery)) {
+ $(this.options.mediaGallerySelector).on('gallery:loaded', function () {
+ this._changeProductImage();
+ }.bind(this));
- if (!galleryObject) {
return;
}
@@ -325,17 +330,35 @@ define([
images = $.extend(true, [], images);
images = this._setImageIndex(images);
- galleryObject.updateData(images);
-
- $(this.options.mediaGallerySelector).AddFotoramaVideoEvents({
- selectedOption: this.simpleProduct,
- dataMergeStrategy: this.options.gallerySwitchStrategy
- });
+ gallery.updateData(images);
+ this._addFotoramaVideoEvents(false);
} else {
- galleryObject.updateData(initialImages);
+ gallery.updateData(initialImages);
+ this._addFotoramaVideoEvents(true);
+ }
+ },
+
+ /**
+ * Add video events
+ *
+ * @param {Boolean} isInitial
+ * @private
+ */
+ _addFotoramaVideoEvents: function (isInitial) {
+ if (_.isUndefined($.mage.AddFotoramaVideoEvents)) {
+ return;
+ }
+
+ if (isInitial) {
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
+
+ return;
}
+ $(this.options.mediaGallerySelector).AddFotoramaVideoEvents({
+ selectedOption: this.simpleProduct,
+ dataMergeStrategy: this.options.gallerySwitchStrategy
+ });
},
/**
diff --git a/app/code/Magento/Swatches/Test/Mftf/ActionGroup/AdminUpdateAttributeInputTypeActionGroup.xml b/app/code/Magento/Swatches/Test/Mftf/ActionGroup/AdminUpdateAttributeInputTypeActionGroup.xml
new file mode 100644
index 0000000000000..23264601cad94
--- /dev/null
+++ b/app/code/Magento/Swatches/Test/Mftf/ActionGroup/AdminUpdateAttributeInputTypeActionGroup.xml
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ Set value for the "Catalog Input Type for Store Owner" attribute option
+
+
+
+
+
+
+
diff --git a/app/code/Magento/Swatches/Test/Mftf/Test/StorefrontConfigurableSwatchOptionsThumbImagesTest.xml b/app/code/Magento/Swatches/Test/Mftf/Test/StorefrontConfigurableSwatchOptionsThumbImagesTest.xml
new file mode 100644
index 0000000000000..8c90d88f51a10
--- /dev/null
+++ b/app/code/Magento/Swatches/Test/Mftf/Test/StorefrontConfigurableSwatchOptionsThumbImagesTest.xml
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/code/Magento/Swatches/Test/Mftf/Test/StorefrontSelectedByQueryParamsConfigurableSwatchOptionsThumbImagesTest.xml b/app/code/Magento/Swatches/Test/Mftf/Test/StorefrontSelectedByQueryParamsConfigurableSwatchOptionsThumbImagesTest.xml
new file mode 100644
index 0000000000000..8e4c6c0217b3a
--- /dev/null
+++ b/app/code/Magento/Swatches/Test/Mftf/Test/StorefrontSelectedByQueryParamsConfigurableSwatchOptionsThumbImagesTest.xml
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/code/Magento/Swatches/view/base/web/js/swatch-renderer.js b/app/code/Magento/Swatches/view/base/web/js/swatch-renderer.js
index 8b5dfcd80deb4..3e100d2c39168 100644
--- a/app/code/Magento/Swatches/view/base/web/js/swatch-renderer.js
+++ b/app/code/Magento/Swatches/view/base/web/js/swatch-renderer.js
@@ -1267,6 +1267,14 @@ define([
isInitial;
if (isInProductView) {
+ if (_.isUndefined(gallery)) {
+ context.find(this.options.mediaGallerySelector).on('gallery:loaded', function () {
+ this.updateBaseImage(images, context, isInProductView);
+ }.bind(this));
+
+ return;
+ }
+
imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
isInitial = _.isEqual(imagesToUpdate, initialImages);
@@ -1276,32 +1284,36 @@ define([
imagesToUpdate = this._setImageIndex(imagesToUpdate);
- if (!_.isUndefined(gallery)) {
- gallery.updateData(imagesToUpdate);
- } else {
- context.find(this.options.mediaGallerySelector).on('gallery:loaded', function (loadedGallery) {
- loadedGallery = context.find(this.options.mediaGallerySelector).data('gallery');
- loadedGallery.updateData(imagesToUpdate);
- }.bind(this));
- }
-
- if (isInitial) {
- $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
- } else {
- $(this.options.mediaGallerySelector).AddFotoramaVideoEvents({
- selectedOption: this.getProduct(),
- dataMergeStrategy: this.options.gallerySwitchStrategy
- });
- }
-
- if (gallery) {
- gallery.first();
- }
+ gallery.updateData(imagesToUpdate);
+ this._addFotoramaVideoEvents(isInitial);
} else if (justAnImage && justAnImage.img) {
context.find('.product-image-photo').attr('src', justAnImage.img);
}
},
+ /**
+ * Add video events
+ *
+ * @param {Boolean} isInitial
+ * @private
+ */
+ _addFotoramaVideoEvents: function (isInitial) {
+ if (_.isUndefined($.mage.AddFotoramaVideoEvents)) {
+ return;
+ }
+
+ if (isInitial) {
+ $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
+
+ return;
+ }
+
+ $(this.options.mediaGallerySelector).AddFotoramaVideoEvents({
+ selectedOption: this.getProduct(),
+ dataMergeStrategy: this.options.gallerySwitchStrategy
+ });
+ },
+
/**
* Set correct indexes for image set.
*
diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js
index 65a14f77de257..02ba72f64127b 100644
--- a/lib/web/mage/gallery/gallery.js
+++ b/lib/web/mage/gallery/gallery.js
@@ -480,7 +480,7 @@ define([
settings.fotoramaApi.load(data);
mainImageIndex = getMainImageIndex(data);
- if (mainImageIndex) {
+ if (settings.fotoramaApi.activeIndex !== mainImageIndex) {
settings.fotoramaApi.show({
index: mainImageIndex,
time: 0