Skip to content

Commit ae84d13

Browse files
slavvkaslavvka
authored
ENGCOM-6992: #26473: Improved logic for product image updating for configurable products #26560 
2 parents be49d90 + 7f0119e commit ae84d13

10 files changed

+488
-32
lines changed

‎app/code/Magento/Catalog/Test/Mftf/ActionGroup/AdminAssignImageBaseRoleActionGroup.xml

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
9+
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
10+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
11+
<actionGroup name="AdminAssignImageBaseRoleActionGroup">
12+
<annotations>
13+
<description>Requires the navigation to the Product Creation page. Checks the Base Role area for image.</description>
14+
</annotations>
15+
<arguments>
16+
<argument name="image"/>
17+
</arguments>
18+
<conditionalClick selector="{{AdminProductImagesSection.productImagesToggle}}" dependentSelector="{{AdminProductImagesSection.imageFile(image.fileName)}}" visible="false" stepKey="expandImages"/>
19+
<waitForElementVisible selector="{{AdminProductImagesSection.imageFile(image.fileName)}}" stepKey="seeProductImageName"/>
20+
<click selector="{{AdminProductImagesSection.imageFile(image.fileName)}}" stepKey="clickProductImage"/>
21+
<waitForElementVisible selector="{{AdminProductImagesSection.altText}}" stepKey="seeAltTextSection"/>
22+
<checkOption selector="{{AdminProductImagesSection.roleBase}}" stepKey="checkRoles"/>
23+
<click selector="{{AdminSlideOutDialogSection.closeButton}}" stepKey="clickCloseButton"/>
24+
</actionGroup>
25+
</actionGroups>

‎app/code/Magento/Catalog/Test/Mftf/Data/ProductData.xml

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -880,6 +880,14 @@
880880
<data key="weight">5</data>
881881
<requiredEntity type="product_extension_attribute">EavStock100</requiredEntity>
882882
</entity>
883+
<entity name="Magento2" type="image">
884+
<data key="title" unique="suffix">Magento2</data>
885+
<data key="file_type">Upload File</data>
886+
<data key="shareable">Yes</data>
887+
<data key="file">magento2.jpg</data>
888+
<data key="filename">magento2</data>
889+
<data key="file_extension">jpg</data>
890+
</entity>
883891
<entity name="Magento3" type="image">
884892
<data key="title" unique="suffix">Magento3</data>
885893
<data key="price">1.00</data>

‎app/code/Magento/Catalog/Test/Mftf/Test/StorefrontConfigurableOptionsThumbImagesTest.xml

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
9+
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
10+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
11+
<test name="StorefrontConfigurableOptionsThumbImagesTest">
12+
<annotations>
13+
<stories value="Configurable Product"/>
14+
<title value="Check thumbnail images and active image for Configurable Product"/>
15+
<description value="Login as admin, create attribute with two options, configurable product with two
16+
associated simple products. Add few images for products, check the fotorama thumbnail images
17+
(visible and active) for each selected option for the configurable product"/>
18+
<group value="catalog"/>
19+
</annotations>
20+
<before>
21+
<!-- Login as Admin -->
22+
<actionGroup ref="LoginAsAdmin" stepKey="loginToAdminPanel"/>
23+
24+
<!-- Create Default Category -->
25+
<createData entity="_defaultCategory" stepKey="createCategory"/>
26+
27+
<!-- Create an attribute with two options to be used in the first child product -->
28+
<createData entity="productAttributeWithTwoOptions" stepKey="createConfigProductAttribute"/>
29+
<createData entity="productAttributeOption1" stepKey="createConfigProductAttributeOption1">
30+
<requiredEntity createDataKey="createConfigProductAttribute"/>
31+
</createData>
32+
<createData entity="productAttributeOption2" stepKey="createConfigProductAttributeOption2">
33+
<requiredEntity createDataKey="createConfigProductAttribute"/>
34+
</createData>
35+
36+
<!-- Add the attribute just created to default attribute set -->
37+
<createData entity="AddToDefaultSet" stepKey="createConfigAddToAttributeSet">
38+
<requiredEntity createDataKey="createConfigProductAttribute"/>
39+
</createData>
40+
41+
<!-- Get the first option of the attribute created -->
42+
<getData entity="ProductAttributeOptionGetter" index="1" stepKey="getConfigAttributeOption1">
43+
<requiredEntity createDataKey="createConfigProductAttribute"/>
44+
</getData>
45+
46+
<!-- Get the second option of the attribute created -->
47+
<getData entity="ProductAttributeOptionGetter" index="2" stepKey="getConfigAttributeOption2">
48+
<requiredEntity createDataKey="createConfigProductAttribute"/>
49+
</getData>
50+
51+
<!-- Create Configurable product -->
52+
<createData entity="BaseConfigurableProduct" stepKey="createConfigProduct">
53+
<requiredEntity createDataKey="createCategory"/>
54+
</createData>
55+
56+
<!-- Create a simple product and give it the attribute with the first option -->
57+
<createData entity="ApiSimpleOne" stepKey="createConfigChildProduct1">
58+
<requiredEntity createDataKey="createConfigProductAttribute"/>
59+
<requiredEntity createDataKey="getConfigAttributeOption1"/>
60+
</createData>
61+
62+
<!--Create a simple product and give it the attribute with the second option -->
63+
<createData entity="ApiSimpleTwo" stepKey="createConfigChildProduct2">
64+
<requiredEntity createDataKey="createConfigProductAttribute"/>
65+
<requiredEntity createDataKey="getConfigAttributeOption2"/>
66+
</createData>
67+
68+
<!-- Create the configurable product -->
69+
<createData entity="ConfigurableProductTwoOptions" stepKey="createConfigProductOption">
70+
<requiredEntity createDataKey="createConfigProduct"/>
71+
<requiredEntity createDataKey="createConfigProductAttribute"/>
72+
<requiredEntity createDataKey="getConfigAttributeOption1"/>
73+
<requiredEntity createDataKey="getConfigAttributeOption2"/>
74+
</createData>
75+
76+
<!-- Add the first simple product to the configurable product -->
77+
<createData entity="ConfigurableProductAddChild" stepKey="createConfigProductAddChild1">
78+
<requiredEntity createDataKey="createConfigProduct"/>
79+
<requiredEntity createDataKey="createConfigChildProduct1"/>
80+
</createData>
81+
82+
<!-- Add the second simple product to the configurable product -->
83+
<createData entity="ConfigurableProductAddChild" stepKey="createConfigProductAddChild2">
84+
<requiredEntity createDataKey="createConfigProduct"/>
85+
<requiredEntity createDataKey="createConfigChildProduct2"/>
86+
</createData>
87+
88+
<!-- ConfigProduct -->
89+
<!-- Go to Product Page (ConfigProduct) -->
90+
<actionGroup ref="GoToProductPageViaIDActionGroup" stepKey="goToConfigProduct">
91+
<argument name="productId" value="$$createConfigProduct.id$$"/>
92+
</actionGroup>
93+
94+
<!--Switch to 'Default Store View' scope and open product page-->
95+
<actionGroup ref="SwitchToTheNewStoreViewActionGroup" stepKey="SwitchDefaultStoreViewForConfigProduct">
96+
<argument name="storeViewName" value="'Default Store View'"/>
97+
</actionGroup>
98+
99+
<!-- Add images for ConfigProduct -->
100+
<actionGroup ref="AddProductImageActionGroup" stepKey="addConfigProductMagento3">
101+
<argument name="image" value="Magento3"/>
102+
</actionGroup>
103+
104+
<actionGroup ref="AddProductImageActionGroup" stepKey="addConfigProductTestImageAdobe">
105+
<argument name="image" value="TestImageAdobe"/>
106+
</actionGroup>
107+
<actionGroup ref="AdminAssignImageBaseRoleActionGroup" stepKey="assignTestImageAdobeBaseRole">
108+
<argument name="image" value="TestImageAdobe"/>
109+
</actionGroup>
110+
111+
<!-- Save changes fot ConfigProduct -->
112+
<actionGroup ref="SaveProductFormActionGroup" stepKey="saveConfigProductProduct"/>
113+
114+
<!-- ChildProduct1 -->
115+
<!-- Go to Product Page (ChildProduct1) -->
116+
<actionGroup ref="GoToProductPageViaIDActionGroup" stepKey="goToChildProduct1">
117+
<argument name="productId" value="$$createConfigChildProduct1.id$$"/>
118+
</actionGroup>
119+
120+
<!--Switch to 'Default Store View' scope and open product page-->
121+
<actionGroup ref="SwitchToTheNewStoreViewActionGroup" stepKey="SwitchDefaultStoreViewForChildProduct1">
122+
<argument name="storeViewName" value="'Default Store View'"/>
123+
</actionGroup>
124+
125+
<!-- Add images for ChildProduct1 -->
126+
<actionGroup ref="AddProductImageActionGroup" stepKey="addChildProduct1ProductImage">
127+
<argument name="image" value="ProductImage"/>
128+
</actionGroup>
129+
<actionGroup ref="AddProductImageActionGroup" stepKey="addChildProduct1Magento2">
130+
<argument name="image" value="Magento2"/>
131+
</actionGroup>
132+
<actionGroup ref="AdminAssignImageRolesIfUnassignedActionGroup" stepKey="assignMagento2Role">
133+
<argument name="image" value="Magento2"/>
134+
</actionGroup>
135+
136+
<!-- Save changes fot ChildProduct1 -->
137+
<actionGroup ref="SaveProductFormActionGroup" stepKey="saveChildProduct1Product"/>
138+
139+
<!-- ChildProduct2 -->
140+
<!-- Go to Product Page (ChildProduct2) -->
141+
<actionGroup ref="GoToProductPageViaIDActionGroup" stepKey="goToChildProduct2">
142+
<argument name="productId" value="$$createConfigChildProduct2.id$$"/>
143+
</actionGroup>
144+
145+
<!--Switch to 'Default Store View' scope and open product page-->
146+
<actionGroup ref="SwitchToTheNewStoreViewActionGroup" stepKey="SwitchDefaultStoreViewForChildProduct2">
147+
<argument name="storeViewName" value="'Default Store View'"/>
148+
</actionGroup>
149+
150+
<!-- Add image for ChildProduct2 -->
151+
<actionGroup ref="AddProductImageActionGroup" stepKey="addChildProduct2TestImageNew">
152+
<argument name="image" value="TestImageNew"/>
153+
</actionGroup>
154+
155+
<!-- Save changes fot ChildProduct2 -->
156+
<actionGroup ref="SaveProductFormActionGroup" stepKey="saveChildProduct2Product"/>
157+
</before>
158+
<after>
159+
<!-- Delete Created Data -->
160+
<deleteData createDataKey="createCategory" stepKey="deleteCategory"/>
161+
<deleteData createDataKey="createConfigProduct" stepKey="deleteConfigProduct"/>
162+
<deleteData createDataKey="createConfigChildProduct1" stepKey="deleteConfigChildProduct1"/>
163+
<deleteData createDataKey="createConfigChildProduct2" stepKey="deleteConfigChildProduct2"/>
164+
<deleteData createDataKey="createConfigProductAttribute" stepKey="deleteAttribute"/>
165+
<actionGroup ref="logout" stepKey="logout"/>
166+
167+
<!-- Reindex invalidated indices after product attribute has been created/deleted -->
168+
<actionGroup ref="CliRunReindexUsingCronJobsActionGroup" stepKey="reindexInvalidatedIndices"/>
169+
</after>
170+
171+
<!-- Open ConfigProduct in Store Front Page -->
172+
<amOnPage url="$$createConfigProduct.sku$$.html" stepKey="openProductInStoreFront"/>
173+
<waitForPageLoad stepKey="waitForProductToLoad"/>
174+
175+
<!-- Check fotorama thumbnail images (no selected options) -->
176+
<actionGroup ref="StorefrontAssertFotoramaImageAvailabilityActionGroup" stepKey="seeMagento3ForNoOption">
177+
<argument name="fileName" value="{{Magento3.filename}}"/>
178+
</actionGroup>
179+
180+
<actionGroup ref="StorefrontAssertFotoramaImageAvailabilityActionGroup" stepKey="seeActiveTestImageAdobeForNoOption">
181+
<argument name="fileName" value="{{TestImageAdobe.filename}}"/>
182+
</actionGroup>
183+
184+
<!-- Select first option -->
185+
<actionGroup ref="StorefrontProductPageSelectDropDownOptionValueActionGroup" stepKey="selectFirstOptionValue">
186+
<argument name="attributeLabel" value="$$createConfigProductAttribute.default_frontend_label$$"/>
187+
<argument name="optionLabel" value="$$getConfigAttributeOption1.label$$"/>
188+
</actionGroup>
189+
190+
<!-- Check fotorama thumbnail images (first option selected) -->
191+
<actionGroup ref="StorefrontAssertFotoramaImageAvailabilityActionGroup" stepKey="seeMagento3ForFirstOption">
192+
<argument name="fileName" value="{{Magento3.filename}}"/>
193+
</actionGroup>
194+
195+
<actionGroup ref="StorefrontAssertFotoramaImageAvailabilityActionGroup" stepKey="seeTestImageAdobeForFirstOption">
196+
<argument name="fileName" value="{{TestImageAdobe.filename}}"/>
197+
</actionGroup>
198+
199+
<actionGroup ref="StorefrontAssertFotoramaImageAvailabilityActionGroup" stepKey="seeProductImageForFirstOption">
200+
<argument name="fileName" value="{{ProductImage.filename}}"/>
201+
</actionGroup>
202+
203+
<!-- Check active fotorama thumbnail image (first option selected) -->
204+
<actionGroup ref="StorefrontAssertActiveProductImageActionGroup" stepKey="seeActiveMagento2ForFirstOption">
205+
<argument name="fileName" value="{{Magento2.filename}}"/>
206+
</actionGroup>
207+
208+
<!-- Select second option -->
209+
<actionGroup ref="StorefrontProductPageSelectDropDownOptionValueActionGroup" stepKey="selectSecondOptionValue">
210+
<argument name="attributeLabel" value="$$createConfigProductAttribute.default_frontend_label$$"/>
211+
<argument name="optionLabel" value="$$getConfigAttributeOption2.label$$"/>
212+
</actionGroup>
213+
214+
<!-- Check fotorama thumbnail images (second option selected) -->
215+
<actionGroup ref="StorefrontAssertFotoramaImageAvailabilityActionGroup" stepKey="seeMagento3ForSecondOption">
216+
<argument name="fileName" value="{{Magento3.filename}}"/>
217+
</actionGroup>
218+
219+
<actionGroup ref="StorefrontAssertFotoramaImageAvailabilityActionGroup" stepKey="seeTestImageAdobeForSecondOption">
220+
<argument name="fileName" value="{{TestImageAdobe.filename}}"/>
221+
</actionGroup>
222+
223+
<!-- Check active fotorama thumbnail image (second option selected) -->
224+
<actionGroup ref="StorefrontAssertActiveProductImageActionGroup" stepKey="seeActiveTestImageNewForSecondOption">
225+
<argument name="fileName" value="{{TestImageNew.filename}}"/>
226+
</actionGroup>
227+
</test>
228+
</tests>

‎app/code/Magento/Catalog/Test/Mftf/Test/StorefrontSelectedByQueryParamsConfigurableOptionsThumbImagesTest.xml

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
9+
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
10+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
11+
<test name="StorefrontSelectedByQueryParamsConfigurableOptionsThumbImagesTest"
12+
extends="StorefrontConfigurableOptionsThumbImagesTest">
13+
<annotations>
14+
<stories value="Configurable Product"/>
15+
<title value="Check thumbnail images and active image for Configurable Product with predefined
16+
by query params options"/>
17+
<description value="Login as admin, create attribute with two options, configurable product with two
18+
associated simple products. Add few images for products, check the fotorama thumbnail images
19+
(visible and active) for each option for the configurable product using product URL with params
20+
to selected needed option."/>
21+
<group value="catalog"/>
22+
</annotations>
23+
24+
<!-- Select first option using product query params URL -->
25+
<amOnPage
26+
url="$$createConfigProduct.sku$$.html#$$createConfigProductAttribute.attribute_id$$=$$getConfigAttributeOption1.value$$"
27+
stepKey="selectFirstOptionValue"/>
28+
<reloadPage stepKey="selectFirstOptionValueRefreshPage" after="selectFirstOptionValue"/>
29+
<waitForPageLoad stepKey="waitForProductWithSelectedFirstOptionToLoad" after="selectFirstOptionValueRefreshPage"/>
30+
31+
<!-- Select second option using product query params URL -->
32+
<amOnPage
33+
url="$$createConfigProduct.sku$$.html#$$createConfigProductAttribute.attribute_id$$=$$getConfigAttributeOption2.value$$"
34+
stepKey="selectSecondOptionValue"/>
35+
<reloadPage stepKey="selectSecondOptionValueRefreshPage" after="selectSecondOptionValue"/>
36+
<waitForPageLoad stepKey="waitForProductWithSelectedSecondOptionToLoad" after="selectSecondOptionValueRefreshPage"/>
37+
</test>
38+
</tests>

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

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ define([
1313
'priceUtils',
1414
'priceBox',
1515
'jquery-ui-modules/widget',
16-
'jquery/jquery.parsequery'
16+
'jquery/jquery.parsequery',
17+
'fotoramaVideoEvents'
1718
], function ($, _, mageTemplate, $t, priceUtils) {
1819
'use strict';
1920

@@ -307,9 +308,13 @@ define([
307308
_changeProductImage: function () {
308309
var images,
309310
initialImages = this.options.mediaGalleryInitial,
310-
galleryObject = $(this.options.mediaGallerySelector).data('gallery');
311+
gallery = $(this.options.mediaGallerySelector).data('gallery');
312+
313+
if (_.isUndefined(gallery)) {
314+
$(this.options.mediaGallerySelector).on('gallery:loaded', function () {
315+
this._changeProductImage();
316+
}.bind(this));
311317

312-
if (!galleryObject) {
313318
return;
314319
}
315320

@@ -325,17 +330,35 @@ define([
325330
images = $.extend(true, [], images);
326331
images = this._setImageIndex(images);
327332

328-
galleryObject.updateData(images);
329-
330-
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents({
331-
selectedOption: this.simpleProduct,
332-
dataMergeStrategy: this.options.gallerySwitchStrategy
333-
});
333+
gallery.updateData(images);
334+
this._addFotoramaVideoEvents(false);
334335
} else {
335-
galleryObject.updateData(initialImages);
336+
gallery.updateData(initialImages);
337+
this._addFotoramaVideoEvents(true);
338+
}
339+
},
340+
341+
/**
342+
* Add video events
343+
*
344+
* @param {Boolean} isInitial
345+
* @private
346+
*/
347+
_addFotoramaVideoEvents: function (isInitial) {
348+
if (_.isUndefined($.mage.AddFotoramaVideoEvents)) {
349+
return;
350+
}
351+
352+
if (isInitial) {
336353
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
354+
355+
return;
337356
}
338357

358+
$(this.options.mediaGallerySelector).AddFotoramaVideoEvents({
359+
selectedOption: this.simpleProduct,
360+
dataMergeStrategy: this.options.gallerySwitchStrategy
361+
});
339362
},
340363

341364
/**

‎app/code/Magento/Swatches/Test/Mftf/ActionGroup/AdminUpdateAttributeInputTypeActionGroup.xml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
9+
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
10+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
11+
<actionGroup name="AdminUpdateAttributeInputTypeActionGroup">
12+
<annotations>
13+
<description>Set value for the "Catalog Input Type for Store Owner" attribute option</description>
14+
</annotations>
15+
<arguments>
16+
<argument name="value" type="string" defaultValue="swatch_visual"/>
17+
</arguments>
18+
<selectOption selector="{{AttributePropertiesSection.InputType}}" userInput="{{value}}" stepKey="setInputType"/>
19+
</actionGroup>
20+
</actionGroups>

0 commit comments

Comments
 (0)