Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#26473: Improved logic for product image updating for configurable products #26560

Merged
merged 1 commit into from
Mar 19, 2020
Merged

#26473: Improved logic for product image updating for configurable products #26560

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions app/code/Magento/Catalog/Test/Mftf/ActionGroup/AdminAssignImageBaseRoleActionGroup.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->

<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
<actionGroup name="AdminAssignImageBaseRoleActionGroup">
<annotations>
<description>Requires the navigation to the Product Creation page. Checks the Base Role area for image.</description>
</annotations>
<arguments>
<argument name="image"/>
</arguments>
<conditionalClick selector="{{AdminProductImagesSection.productImagesToggle}}" dependentSelector="{{AdminProductImagesSection.imageFile(image.fileName)}}" visible="false" stepKey="expandImages"/>
<waitForElementVisible selector="{{AdminProductImagesSection.imageFile(image.fileName)}}" stepKey="seeProductImageName"/>
<click selector="{{AdminProductImagesSection.imageFile(image.fileName)}}" stepKey="clickProductImage"/>
<waitForElementVisible selector="{{AdminProductImagesSection.altText}}" stepKey="seeAltTextSection"/>
<checkOption selector="{{AdminProductImagesSection.roleBase}}" stepKey="checkRoles"/>
<click selector="{{AdminSlideOutDialogSection.closeButton}}" stepKey="clickCloseButton"/>
</actionGroup>
</actionGroups>
8 changes: 8 additions & 0 deletions app/code/Magento/Catalog/Test/Mftf/Data/ProductData.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -876,6 +876,14 @@
<data key="weight">5</data>
<requiredEntity type="product_extension_attribute">EavStock100</requiredEntity>
</entity>
<entity name="Magento2" type="image">
<data key="title" unique="suffix">Magento2</data>
<data key="file_type">Upload File</data>
<data key="shareable">Yes</data>
<data key="file">magento2.jpg</data>
<data key="filename">magento2</data>
<data key="file_extension">jpg</data>
</entity>
<entity name="Magento3" type="image">
<data key="title" unique="suffix">Magento3</data>
<data key="price">1.00</data>
Expand Down
228 changes: 228 additions & 0 deletions app/code/Magento/Catalog/Test/Mftf/Test/StorefrontConfigurableOptionsThumbImagesTest.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,228 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->

<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
<test name="StorefrontConfigurableOptionsThumbImagesTest">
<annotations>
<stories value="Configurable Product"/>
<title value="Check thumbnail images and active image for Configurable Product"/>
<description value="Login as admin, create attribute with two options, configurable product with two
associated simple products. Add few images for products, check the fotorama thumbnail images
(visible and active) for each selected option for the configurable product"/>
<group value="catalog"/>
</annotations>
<before>
<!-- Login as Admin -->
<actionGroup ref="LoginAsAdmin" stepKey="loginToAdminPanel"/>

<!-- Create Default Category -->
<createData entity="_defaultCategory" stepKey="createCategory"/>

<!-- Create an attribute with two options to be used in the first child product -->
<createData entity="productAttributeWithTwoOptions" stepKey="createConfigProductAttribute"/>
<createData entity="productAttributeOption1" stepKey="createConfigProductAttributeOption1">
<requiredEntity createDataKey="createConfigProductAttribute"/>
</createData>
<createData entity="productAttributeOption2" stepKey="createConfigProductAttributeOption2">
<requiredEntity createDataKey="createConfigProductAttribute"/>
</createData>

<!-- Add the attribute just created to default attribute set -->
<createData entity="AddToDefaultSet" stepKey="createConfigAddToAttributeSet">
<requiredEntity createDataKey="createConfigProductAttribute"/>
</createData>

<!-- Get the first option of the attribute created -->
<getData entity="ProductAttributeOptionGetter" index="1" stepKey="getConfigAttributeOption1">
<requiredEntity createDataKey="createConfigProductAttribute"/>
</getData>

<!-- Get the second option of the attribute created -->
<getData entity="ProductAttributeOptionGetter" index="2" stepKey="getConfigAttributeOption2">
<requiredEntity createDataKey="createConfigProductAttribute"/>
</getData>

<!-- Create Configurable product -->
<createData entity="BaseConfigurableProduct" stepKey="createConfigProduct">
<requiredEntity createDataKey="createCategory"/>
</createData>

<!-- Create a simple product and give it the attribute with the first option -->
<createData entity="ApiSimpleOne" stepKey="createConfigChildProduct1">
<requiredEntity createDataKey="createConfigProductAttribute"/>
<requiredEntity createDataKey="getConfigAttributeOption1"/>
</createData>

<!--Create a simple product and give it the attribute with the second option -->
<createData entity="ApiSimpleTwo" stepKey="createConfigChildProduct2">
<requiredEntity createDataKey="createConfigProductAttribute"/>
<requiredEntity createDataKey="getConfigAttributeOption2"/>
</createData>

<!-- Create the configurable product -->
<createData entity="ConfigurableProductTwoOptions" stepKey="createConfigProductOption">
<requiredEntity createDataKey="createConfigProduct"/>
<requiredEntity createDataKey="createConfigProductAttribute"/>
<requiredEntity createDataKey="getConfigAttributeOption1"/>
<requiredEntity createDataKey="getConfigAttributeOption2"/>
</createData>

<!-- Add the first simple product to the configurable product -->
<createData entity="ConfigurableProductAddChild" stepKey="createConfigProductAddChild1">
<requiredEntity createDataKey="createConfigProduct"/>
<requiredEntity createDataKey="createConfigChildProduct1"/>
</createData>

<!-- Add the second simple product to the configurable product -->
<createData entity="ConfigurableProductAddChild" stepKey="createConfigProductAddChild2">
<requiredEntity createDataKey="createConfigProduct"/>
<requiredEntity createDataKey="createConfigChildProduct2"/>
</createData>

<!-- ConfigProduct -->
<!-- Go to Product Page (ConfigProduct) -->
<actionGroup ref="GoToProductPageViaIDActionGroup" stepKey="goToConfigProduct">
<argument name="productId" value="$$createConfigProduct.id$$"/>
</actionGroup>

<!--Switch to 'Default Store View' scope and open product page-->
<actionGroup ref="SwitchToTheNewStoreViewActionGroup" stepKey="SwitchDefaultStoreViewForConfigProduct">
<argument name="storeViewName" value="'Default Store View'"/>
</actionGroup>

<!-- Add images for ConfigProduct -->
<actionGroup ref="AddProductImageActionGroup" stepKey="addConfigProductMagento3">
<argument name="image" value="Magento3"/>
</actionGroup>

<actionGroup ref="AddProductImageActionGroup" stepKey="addConfigProductTestImageAdobe">
<argument name="image" value="TestImageAdobe"/>
</actionGroup>
<actionGroup ref="AdminAssignImageBaseRoleActionGroup" stepKey="assignTestImageAdobeBaseRole">
<argument name="image" value="TestImageAdobe"/>
</actionGroup>

<!-- Save changes fot ConfigProduct -->
<actionGroup ref="SaveProductFormActionGroup" stepKey="saveConfigProductProduct"/>

<!-- ChildProduct1 -->
<!-- Go to Product Page (ChildProduct1) -->
<actionGroup ref="GoToProductPageViaIDActionGroup" stepKey="goToChildProduct1">
<argument name="productId" value="$$createConfigChildProduct1.id$$"/>
</actionGroup>

<!--Switch to 'Default Store View' scope and open product page-->
<actionGroup ref="SwitchToTheNewStoreViewActionGroup" stepKey="SwitchDefaultStoreViewForChildProduct1">
<argument name="storeViewName" value="'Default Store View'"/>
</actionGroup>

<!-- Add images for ChildProduct1 -->
<actionGroup ref="AddProductImageActionGroup" stepKey="addChildProduct1ProductImage">
<argument name="image" value="ProductImage"/>
</actionGroup>
<actionGroup ref="AddProductImageActionGroup" stepKey="addChildProduct1Magento2">
<argument name="image" value="Magento2"/>
</actionGroup>
<actionGroup ref="AdminAssignImageRolesIfUnassignedActionGroup" stepKey="assignMagento2Role">
<argument name="image" value="Magento2"/>
</actionGroup>

<!-- Save changes fot ChildProduct1 -->
<actionGroup ref="SaveProductFormActionGroup" stepKey="saveChildProduct1Product"/>

<!-- ChildProduct2 -->
<!-- Go to Product Page (ChildProduct2) -->
<actionGroup ref="GoToProductPageViaIDActionGroup" stepKey="goToChildProduct2">
<argument name="productId" value="$$createConfigChildProduct2.id$$"/>
</actionGroup>

<!--Switch to 'Default Store View' scope and open product page-->
<actionGroup ref="SwitchToTheNewStoreViewActionGroup" stepKey="SwitchDefaultStoreViewForChildProduct2">
<argument name="storeViewName" value="'Default Store View'"/>
</actionGroup>

<!-- Add image for ChildProduct2 -->
<actionGroup ref="AddProductImageActionGroup" stepKey="addChildProduct2TestImageNew">
<argument name="image" value="TestImageNew"/>
</actionGroup>

<!-- Save changes fot ChildProduct2 -->
<actionGroup ref="SaveProductFormActionGroup" stepKey="saveChildProduct2Product"/>
</before>
<after>
<!-- Delete Created Data -->
<deleteData createDataKey="createCategory" stepKey="deleteCategory"/>
<deleteData createDataKey="createConfigProduct" stepKey="deleteConfigProduct"/>
<deleteData createDataKey="createConfigChildProduct1" stepKey="deleteConfigChildProduct1"/>
<deleteData createDataKey="createConfigChildProduct2" stepKey="deleteConfigChildProduct2"/>
<deleteData createDataKey="createConfigProductAttribute" stepKey="deleteAttribute"/>
<actionGroup ref="logout" stepKey="logout"/>

<!-- Reindex invalidated indices after product attribute has been created/deleted -->
<actionGroup ref="CliRunReindexUsingCronJobsActionGroup" stepKey="reindexInvalidatedIndices"/>
</after>

<!-- Open ConfigProduct in Store Front Page -->
<amOnPage url="$$createConfigProduct.sku$$.html" stepKey="openProductInStoreFront"/>
<waitForPageLoad stepKey="waitForProductToLoad"/>

<!-- Check fotorama thumbnail images (no selected options) -->
<actionGroup ref="StorefrontAssertFotoramaImageAvailabilityActionGroup" stepKey="seeMagento3ForNoOption">
<argument name="fileName" value="{{Magento3.filename}}"/>
</actionGroup>

<actionGroup ref="StorefrontAssertFotoramaImageAvailabilityActionGroup" stepKey="seeActiveTestImageAdobeForNoOption">
<argument name="fileName" value="{{TestImageAdobe.filename}}"/>
</actionGroup>

<!-- Select first option -->
<actionGroup ref="StorefrontProductPageSelectDropDownOptionValueActionGroup" stepKey="selectFirstOptionValue">
<argument name="attributeLabel" value="$$createConfigProductAttribute.default_frontend_label$$"/>
<argument name="optionLabel" value="$$getConfigAttributeOption1.label$$"/>
</actionGroup>

<!-- Check fotorama thumbnail images (first option selected) -->
<actionGroup ref="StorefrontAssertFotoramaImageAvailabilityActionGroup" stepKey="seeMagento3ForFirstOption">
<argument name="fileName" value="{{Magento3.filename}}"/>
</actionGroup>

<actionGroup ref="StorefrontAssertFotoramaImageAvailabilityActionGroup" stepKey="seeTestImageAdobeForFirstOption">
<argument name="fileName" value="{{TestImageAdobe.filename}}"/>
</actionGroup>

<actionGroup ref="StorefrontAssertFotoramaImageAvailabilityActionGroup" stepKey="seeProductImageForFirstOption">
<argument name="fileName" value="{{ProductImage.filename}}"/>
</actionGroup>

<!-- Check active fotorama thumbnail image (first option selected) -->
<actionGroup ref="StorefrontAssertActiveProductImageActionGroup" stepKey="seeActiveMagento2ForFirstOption">
<argument name="fileName" value="{{Magento2.filename}}"/>
</actionGroup>

<!-- Select second option -->
<actionGroup ref="StorefrontProductPageSelectDropDownOptionValueActionGroup" stepKey="selectSecondOptionValue">
<argument name="attributeLabel" value="$$createConfigProductAttribute.default_frontend_label$$"/>
<argument name="optionLabel" value="$$getConfigAttributeOption2.label$$"/>
</actionGroup>

<!-- Check fotorama thumbnail images (second option selected) -->
<actionGroup ref="StorefrontAssertFotoramaImageAvailabilityActionGroup" stepKey="seeMagento3ForSecondOption">
<argument name="fileName" value="{{Magento3.filename}}"/>
</actionGroup>

<actionGroup ref="StorefrontAssertFotoramaImageAvailabilityActionGroup" stepKey="seeTestImageAdobeForSecondOption">
<argument name="fileName" value="{{TestImageAdobe.filename}}"/>
</actionGroup>

<!-- Check active fotorama thumbnail image (second option selected) -->
<actionGroup ref="StorefrontAssertActiveProductImageActionGroup" stepKey="seeActiveTestImageNewForSecondOption">
<argument name="fileName" value="{{TestImageNew.filename}}"/>
</actionGroup>
</test>
</tests>
38 changes: 38 additions & 0 deletions ...alog/Test/Mftf/Test/StorefrontSelectedByQueryParamsConfigurableOptionsThumbImagesTest.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->

<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
<test name="StorefrontSelectedByQueryParamsConfigurableOptionsThumbImagesTest"
extends="StorefrontConfigurableOptionsThumbImagesTest">
<annotations>
<stories value="Configurable Product"/>
<title value="Check thumbnail images and active image for Configurable Product with predefined
by query params options"/>
<description value="Login as admin, create attribute with two options, configurable product with two
associated simple products. Add few images for products, check the fotorama thumbnail images
(visible and active) for each option for the configurable product using product URL with params
to selected needed option."/>
<group value="catalog"/>
</annotations>

<!-- Select first option using product query params URL -->
<amOnPage
url="$$createConfigProduct.sku$$.html#$$createConfigProductAttribute.attribute_id$$=$$getConfigAttributeOption1.value$$"
stepKey="selectFirstOptionValue"/>
<reloadPage stepKey="selectFirstOptionValueRefreshPage" after="selectFirstOptionValue"/>
<waitForPageLoad stepKey="waitForProductWithSelectedFirstOptionToLoad" after="selectFirstOptionValueRefreshPage"/>

<!-- Select second option using product query params URL -->
<amOnPage
url="$$createConfigProduct.sku$$.html#$$createConfigProductAttribute.attribute_id$$=$$getConfigAttributeOption2.value$$"
stepKey="selectSecondOptionValue"/>
<reloadPage stepKey="selectSecondOptionValueRefreshPage" after="selectSecondOptionValue"/>
<waitForPageLoad stepKey="waitForProductWithSelectedSecondOptionToLoad" after="selectSecondOptionValueRefreshPage"/>
</test>
</tests>
43 changes: 33 additions & 10 deletions app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ define([
'priceUtils',
'priceBox',
'jquery-ui-modules/widget',
'jquery/jquery.parsequery'
'jquery/jquery.parsequery',
'fotoramaVideoEvents'
], function ($, _, mageTemplate, $t, priceUtils) {
'use strict';

Expand Down Expand Up @@ -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;
}

Expand All @@ -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
});
},

/**
Expand Down
20 changes: 20 additions & 0 deletions app/code/Magento/Swatches/Test/Mftf/ActionGroup/AdminUpdateAttributeInputTypeActionGroup.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->

<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
<actionGroup name="AdminUpdateAttributeInputTypeActionGroup">
<annotations>
<description>Set value for the "Catalog Input Type for Store Owner" attribute option</description>
</annotations>
<arguments>
<argument name="value" type="string" defaultValue="swatch_visual"/>
</arguments>
<selectOption selector="{{AttributePropertiesSection.InputType}}" userInput="{{value}}" stepKey="setInputType"/>
</actionGroup>
</actionGroups>
Loading