Skip to content

Commit f5e14b3

Browse files
magento-engcom-teammagento-engcom-team
committed
ENGCOM-5851: add config for disabling swatch tooltips #24270
- Merge Pull Request #24270 from torhoehn/magento2:feature/swatch-tooltip - Merged commits: 1. dbc514c 2. f463caf 3. 2a4a222 4. eff29c4
2 parents 52f9fd4 + eff29c4 commit f5e14b3

15 files changed

+306
-23
lines changed

‎app/code/Magento/Swatches/Block/Product/Renderer/Configurable.php

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* Copyright © Magento, Inc. All rights reserved.
44
* See COPYING.txt for license details.
55
*/
6+
declare(strict_types = 1);
67
namespace Magento\Swatches\Block\Product\Renderer;
78

89
use Magento\Catalog\Block\Product\Context;
@@ -57,6 +58,11 @@ class Configurable extends \Magento\ConfigurableProduct\Block\Product\View\Type\
5758
*/
5859
const SWATCH_THUMBNAIL_NAME = 'swatchThumb';
5960

61+
/**
62+
* Config path which contains number of swatches per product
63+
*/
64+
private const XML_PATH_SWATCHES_PER_PRODUCT = 'catalog/frontend/swatches_per_product';
65+
6066
/**
6167
* @var Product
6268
*/
@@ -200,7 +206,7 @@ public function getJsonSwatchConfig()
200206
public function getNumberSwatchesPerProduct()
201207
{
202208
return $this->_scopeConfig->getValue(
203-
'catalog/frontend/swatches_per_product',
209+
self::XML_PATH_SWATCHES_PER_PRODUCT,
204210
ScopeInterface::SCOPE_STORE
205211
);
206212
}

‎app/code/Magento/Swatches/Test/Mftf/Section/StorefrontProductInfoMainSection.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,6 @@
1616
<element name="nthSwatchOptionText" type="button" selector="div.swatch-option.text:nth-of-type({{n}})" parameterized="true"/>
1717
<element name="productSwatch" type="button" selector="//div[@class='swatch-option'][@aria-label='{{var1}}']" parameterized="true"/>
1818
<element name="visualSwatchOption" type="button" selector=".swatch-option[option-tooltip-value='#{{visualSwatchOption}}']" parameterized="true"/>
19+
<element name="swatchOptionTooltip" type="block" selector="div.swatch-option-tooltip"/>
1920
</section>
2021
</sections>

‎app/code/Magento/Swatches/Test/Mftf/Test/AdminDisablingSwatchTooltipsTest.xml

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
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="AdminDisablingSwatchTooltipsTest">
12+
<annotations>
13+
<features value="Swatches"/>
14+
<title value="Admin disabling swatch tooltips test."/>
15+
<description value="Verify possibility to disable/enable swatch tooltips."/>
16+
<severity value="AVERAGE"/>
17+
<group value="Swatches"/>
18+
</annotations>
19+
<before>
20+
<!-- Create category -->
21+
<createData entity="ApiCategory" stepKey="createCategory"/>
22+
23+
<!-- Log in -->
24+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
25+
</before>
26+
<after>
27+
<!-- Clean up our modifications to the existing color attribute -->
28+
<amOnPage url="{{AdminProductAttributeGridPage.url}}" stepKey="goToProductAttributes"/>
29+
<waitForPageLoad stepKey="waitForProductAttributes"/>
30+
<fillField selector="{{AdminProductAttributeGridSection.FilterByAttributeCode}}" userInput="color"
31+
stepKey="fillFilter"/>
32+
<click selector="{{AdminProductAttributeGridSection.Search}}" stepKey="clickSearch"/>
33+
<click selector="{{AdminProductAttributeGridSection.AttributeCode('color')}}" stepKey="clickRowToEdit"/>
34+
<click selector="{{AdminManageSwatchSection.nthDelete('1')}}" stepKey="deleteSwatch1"/>
35+
<waitForPageLoad stepKey="waitToClickSave"/>
36+
<click selector="{{AttributePropertiesSection.SaveAndEdit}}" stepKey="clickSaveAndEdit"/>
37+
38+
<!-- Log out -->
39+
<actionGroup ref="logout" stepKey="logOut"/>
40+
41+
<!-- Delete category -->
42+
<deleteData stepKey="deleteCategory" createDataKey="createCategory"/>
43+
44+
<!-- Enable swatch tooltips -->
45+
<magentoCLI command="config:set catalog/frontend/show_swatch_tooltip 1" stepKey="disableTooltips"/>
46+
<magentoCLI command="cache:flush" stepKey="flushCacheAfterEnabling"/>
47+
</after>
48+
49+
<!-- Go to the edit page for the "color" attribute -->
50+
<amOnPage url="{{AdminProductAttributeGridPage.url}}" stepKey="goToProductAttributes"/>
51+
<waitForPageLoad stepKey="waitForProductAttributes"/>
52+
<fillField selector="{{AdminProductAttributeGridSection.FilterByAttributeCode}}" userInput="color"
53+
stepKey="fillFilter"/>
54+
<click selector="{{AdminProductAttributeGridSection.Search}}" stepKey="clickSearch"/>
55+
<click selector="{{AdminProductAttributeGridSection.AttributeCode('color')}}" stepKey="clickRowToEdit"/>
56+
57+
<!-- Change to visual swatches -->
58+
<selectOption selector="{{AdminNewAttributePanel.inputType}}" userInput="swatch_visual"
59+
stepKey="selectVisualSwatch"/>
60+
61+
<!-- Set swatch using the color picker -->
62+
<click selector="{{AdminManageSwatchSection.addSwatch}}" stepKey="clickAddSwatch1"/>
63+
<actionGroup ref="openSwatchMenuByIndex" stepKey="clickSwatch1">
64+
<argument name="index" value="0"/>
65+
</actionGroup>
66+
<click selector="{{AdminManageSwatchSection.nthChooseColor('1')}}" stepKey="clickChooseColor1"/>
67+
<actionGroup ref="setColorPickerByHex" stepKey="fillHex1">
68+
<argument name="nthColorPicker" value="1"/>
69+
<argument name="hexColor" value="e74c3c"/>
70+
</actionGroup>
71+
<fillField selector="{{AdminManageSwatchSection.adminInputByIndex('0')}}" userInput="red" stepKey="fillAdmin1"/>
72+
<waitForPageLoad stepKey="waitToClickSave"/>
73+
74+
<!-- Save -->
75+
<click selector="{{AttributePropertiesSection.SaveAndEdit}}" stepKey="clickSaveAndEdit1"/>
76+
<waitForElementVisible selector="{{AdminProductMessagesSection.successMessage}}" stepKey="waitForSuccess"/>
77+
78+
<!-- Assert that the Save was successful after round trip to server -->
79+
<actionGroup ref="assertSwatchColor" stepKey="assertSwatchAdmin">
80+
<argument name="nthSwatch" value="1"/>
81+
<argument name="expectedStyle" value="background: rgb(231, 77, 60);"/>
82+
</actionGroup>
83+
84+
<!-- Create a configurable product to verify the storefront with -->
85+
<amOnPage url="{{AdminProductIndexPage.url}}" stepKey="amOnProductGridPage"/>
86+
<waitForPageLoad stepKey="waitForProductGridPage"/>
87+
<click selector="{{AdminProductGridActionSection.addProductToggle}}" stepKey="clickOnAddProductToggle"/>
88+
<click selector="{{AdminProductGridActionSection.addConfigurableProduct}}"
89+
stepKey="clickOnAddConfigurableProduct"/>
90+
<fillField userInput="{{_defaultProduct.name}}" selector="{{AdminProductFormSection.productName}}"
91+
stepKey="fillName"/>
92+
<fillField userInput="{{_defaultProduct.sku}}" selector="{{AdminProductFormSection.productSku}}"
93+
stepKey="fillSKU"/>
94+
<fillField userInput="{{_defaultProduct.price}}" selector="{{AdminProductFormSection.productPrice}}"
95+
stepKey="fillPrice"/>
96+
<fillField userInput="{{_defaultProduct.quantity}}" selector="{{AdminProductFormSection.productQuantity}}"
97+
stepKey="fillQuantity"/>
98+
<searchAndMultiSelectOption selector="{{AdminProductFormSection.categoriesDropdown}}"
99+
parameterArray="[$$createCategory.name$$]" stepKey="fillCategory"/>
100+
<click selector="{{AdminProductSEOSection.sectionHeader}}" stepKey="openSeoSection"/>
101+
<fillField userInput="{{_defaultProduct.urlKey}}" selector="{{AdminProductSEOSection.urlKeyInput}}"
102+
stepKey="fillUrlKey"/>
103+
104+
<!-- Create configurations based on the Swatch we created earlier -->
105+
<click selector="{{AdminProductFormConfigurationsSection.createConfigurations}}"
106+
stepKey="clickCreateConfigurations"/>
107+
<click selector="{{AdminCreateProductConfigurationsPanel.filters}}" stepKey="clickFilters"/>
108+
<fillField selector="{{AdminCreateProductConfigurationsPanel.attributeCode}}" userInput="color"
109+
stepKey="fillFilterAttributeCodeField"/>
110+
<click selector="{{AdminCreateProductConfigurationsPanel.applyFilters}}" stepKey="clickApplyFiltersButton"/>
111+
<click selector="{{AdminCreateProductConfigurationsPanel.firstCheckbox}}" stepKey="clickOnFirstCheckbox"/>
112+
<click selector="{{AdminCreateProductConfigurationsPanel.next}}" stepKey="clickOnNextButton1"/>
113+
<click selector="{{AdminCreateProductConfigurationsPanel.selectAll}}" stepKey="clickOnSelectAll"/>
114+
<click selector="{{AdminCreateProductConfigurationsPanel.next}}" stepKey="clickOnNextButton2"/>
115+
<click selector="{{AdminCreateProductConfigurationsPanel.applyUniquePricesByAttributeToEachSku}}"
116+
stepKey="clickOnApplyUniquePricesByAttributeToEachSku"/>
117+
<selectOption selector="{{AdminCreateProductConfigurationsPanel.selectAttribute}}" userInput="Color"
118+
stepKey="selectAttributes"/>
119+
<fillField selector="{{AdminCreateProductConfigurationsPanel.attribute1}}" userInput="10"
120+
stepKey="fillAttributePrice1"/>
121+
<click selector="{{AdminCreateProductConfigurationsPanel.applySingleQuantityToEachSkus}}"
122+
stepKey="clickOnApplySingleQuantityToEachSku"/>
123+
<fillField selector="{{AdminCreateProductConfigurationsPanel.quantity}}" userInput="99"
124+
stepKey="enterAttributeQuantity"/>
125+
<click selector="{{AdminCreateProductConfigurationsPanel.next}}" stepKey="clickOnNextButton3"/>
126+
<click selector="{{AdminCreateProductConfigurationsPanel.next}}" stepKey="clickOnNextButton4"/>
127+
<click selector="{{AdminProductFormActionSection.saveButton}}" stepKey="clickOnSaveButton2"/>
128+
<conditionalClick selector="{{AdminChooseAffectedAttributeSetPopup.confirm}}"
129+
dependentSelector="{{AdminChooseAffectedAttributeSetPopup.confirm}}" visible="true"
130+
stepKey="clickOnConfirmInPopup"/>
131+
<seeElement selector="{{AdminProductMessagesSection.successMessage}}" stepKey="seeSaveProductMessage"/>
132+
<seeInTitle userInput="{{_defaultProduct.name}}" stepKey="seeProductNameInTitle"/>
133+
134+
<!-- Go to the product page and see swatch options -->
135+
<amOnPage url="{{_defaultProduct.urlKey}}.html" stepKey="amOnProductPage"/>
136+
<waitForPageLoad stepKey="waitForProductPage"/>
137+
138+
<!-- Verify that the storefront shows the swatches too -->
139+
<actionGroup ref="assertStorefrontSwatchColor" stepKey="assertSwatchStorefront">
140+
<argument name="nthSwatch" value="1"/>
141+
<argument name="expectedRgb" value="rgb(231, 77, 60)"/>
142+
</actionGroup>
143+
144+
<!-- Verify swatch tooltips are visible-->
145+
<moveMouseOver selector="{{StorefrontProductInfoMainSection.nthSwatchOption('1')}}" stepKey="hoverEnabledSwatch"/>
146+
<wait time="1" stepKey="waitForTooltip1"/>
147+
<seeElement selector="{{StorefrontProductInfoMainSection.swatchOptionTooltip}}" stepKey="swatchTooltipVisible"/>
148+
149+
<!-- Disable swatch tooltips -->
150+
<magentoCLI command="config:set catalog/frontend/show_swatch_tooltip 0" stepKey="disableTooltips"/>
151+
<magentoCLI command="cache:flush" stepKey="flushCacheAfterDisabling"/>
152+
153+
<!-- Verify swatch tooltips are not visible -->
154+
<reloadPage stepKey="refreshPage"/>
155+
<waitForPageLoad stepKey="waitForPageReload"/>
156+
<moveMouseOver selector="{{StorefrontProductInfoMainSection.nthSwatchOption('1')}}" stepKey="hoverDisabledSwatch"/>
157+
<wait time="1" stepKey="waitForTooltip2"/>
158+
<dontSeeElement selector="{{StorefrontProductInfoMainSection.swatchOptionTooltip}}" stepKey="swatchTooltipNotVisible"/>
159+
</test>
160+
</tests>

‎app/code/Magento/Swatches/ViewModel/Product/Renderer/Configurable.php

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
declare(strict_types = 1);
7+
namespace Magento\Swatches\ViewModel\Product\Renderer;
8+
9+
use Magento\Framework\App\Config\ScopeConfigInterface;
10+
use Magento\Framework\View\Element\Block\ArgumentInterface;
11+
use Magento\Store\Model\ScopeInterface;
12+
13+
/**
14+
* Class Configurable
15+
*/
16+
class Configurable implements ArgumentInterface
17+
{
18+
/**
19+
* Config path if swatch tooltips are enabled
20+
*/
21+
private const XML_PATH_SHOW_SWATCH_TOOLTIP = 'catalog/frontend/show_swatch_tooltip';
22+
23+
/**
24+
* @var ScopeConfigInterface
25+
*/
26+
private $scopeConfig;
27+
28+
/**
29+
* Configurable constructor.
30+
*
31+
* @param ScopeConfigInterface $scopeConfig
32+
*/
33+
public function __construct(ScopeConfigInterface $scopeConfig)
34+
{
35+
$this->scopeConfig = $scopeConfig;
36+
}
37+
38+
/**
39+
* Get config if swatch tooltips should be rendered.
40+
*
41+
* @return string
42+
*/
43+
public function getShowSwatchTooltip()
44+
{
45+
return $this->scopeConfig->getValue(
46+
self::XML_PATH_SHOW_SWATCH_TOOLTIP,
47+
ScopeInterface::SCOPE_STORE
48+
);
49+
}
50+
}

‎app/code/Magento/Swatches/etc/adminhtml/system.xml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717
<label>Show Swatches in Product List</label>
1818
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
1919
</field>
20+
<field id="show_swatch_tooltip" translate="label" type="select" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
21+
<label>Show Swatch Tooltip</label>
22+
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
23+
</field>
2024
</group>
2125
</section>
2226
</system>

‎app/code/Magento/Swatches/etc/config.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<frontend>
1212
<swatches_per_product>16</swatches_per_product>
1313
<show_swatches_in_product_list>1</show_swatches_in_product_list>
14+
<show_swatch_tooltip>1</show_swatch_tooltip>
1415
</frontend>
1516
</catalog>
1617
<general>

‎app/code/Magento/Swatches/view/frontend/layout/catalog_category_view.xml

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,19 @@
55
* See COPYING.txt for license details.
66
*/
77
-->
8-
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
8+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
910
<body>
1011
<referenceBlock name="category.product.type.details.renderers">
11-
<block class="Magento\Swatches\Block\Product\Renderer\Listing\Configurable" name="category.product.type.details.renderers.configurable" as="configurable" template="Magento_Swatches::product/listing/renderer.phtml" ifconfig="catalog/frontend/show_swatches_in_product_list" />
12+
<block class="Magento\Swatches\Block\Product\Renderer\Listing\Configurable"
13+
name="category.product.type.details.renderers.configurable" as="configurable"
14+
template="Magento_Swatches::product/listing/renderer.phtml"
15+
ifconfig="catalog/frontend/show_swatches_in_product_list">
16+
<arguments>
17+
<argument name="configurable_view_model"
18+
xsi:type="object">Magento\Swatches\ViewModel\Product\Renderer\Configurable</argument>
19+
</arguments>
20+
</block>
1221
</referenceBlock>
1322
</body>
1423
</page>

‎app/code/Magento/Swatches/view/frontend/layout/catalog_product_view_type_configurable.xml

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,18 @@
55
* See COPYING.txt for license details.
66
*/
77
-->
8-
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
8+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
910
<body>
1011
<referenceContainer name="product.info.options.configurable" remove="true"/>
1112
<referenceBlock name="product.info.options.wrapper">
12-
<block class="Magento\Swatches\Block\Product\Renderer\Configurable" name="product.info.options.swatches" as="swatch_options" before="-" />
13+
<block class="Magento\Swatches\Block\Product\Renderer\Configurable" name="product.info.options.swatches"
14+
as="swatch_options" before="-">
15+
<arguments>
16+
<argument name="configurable_view_model"
17+
xsi:type="object">Magento\Swatches\ViewModel\Product\Renderer\Configurable</argument>
18+
</arguments>
19+
</block>
1320
</referenceBlock>
1421
</body>
1522
</page>

‎app/code/Magento/Swatches/view/frontend/layout/catalog_widget_product_list.xml

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,19 @@
33
~ See COPYING.txt for license details.
44
-->
55

6-
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
6+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
7+
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
78
<body>
89
<referenceBlock name="category.product.type.widget.details.renderers">
9-
<block class="Magento\Swatches\Block\Product\Renderer\Listing\Configurable" name="category.product.type.details.renderers.configurable" as="configurable" template="Magento_Swatches::product/listing/renderer.phtml" ifconfig="catalog/frontend/show_swatches_in_product_list"/>
10+
<block class="Magento\Swatches\Block\Product\Renderer\Listing\Configurable"
11+
name="category.product.type.details.renderers.configurable" as="configurable"
12+
template="Magento_Swatches::product/listing/renderer.phtml"
13+
ifconfig="catalog/frontend/show_swatches_in_product_list">
14+
<arguments>
15+
<argument name="configurable_view_model"
16+
xsi:type="object">Magento\Swatches\ViewModel\Product\Renderer\Configurable</argument>
17+
</arguments>
18+
</block>
1019
</referenceBlock>
1120
</body>
12-
</page>
21+
</page>

‎app/code/Magento/Swatches/view/frontend/layout/catalogsearch_advanced_result.xml

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,19 @@
55
* See COPYING.txt for license details.
66
*/
77
-->
8-
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
8+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
910
<body>
1011
<referenceBlock name="category.product.type.details.renderers">
11-
<block class="Magento\Swatches\Block\Product\Renderer\Listing\Configurable" name="category.product.type.details.renderers.configurable" as="configurable" template="Magento_Swatches::product/listing/renderer.phtml" ifconfig="catalog/frontend/show_swatches_in_product_list" />
12+
<block class="Magento\Swatches\Block\Product\Renderer\Listing\Configurable"
13+
name="category.product.type.details.renderers.configurable" as="configurable"
14+
template="Magento_Swatches::product/listing/renderer.phtml"
15+
ifconfig="catalog/frontend/show_swatches_in_product_list">
16+
<arguments>
17+
<argument name="configurable_view_model"
18+
xsi:type="object">Magento\Swatches\ViewModel\Product\Renderer\Configurable</argument>
19+
</arguments>
20+
</block>
1221
</referenceBlock>
1322
</body>
1423
</page>

0 commit comments

Comments
 (0)