Skip to content

Commit c7bfc85

Browse files
cspruiellcspruiell
committed
Merge remote-tracking branch 'origin/MC-4096-product-content-type-doesnt-wrap-inside-tiny-column' into cms-team-1-delivery
2 parents fa5b103 + b5b1d0b commit c7bfc85

File tree

4 files changed

+184
-10
lines changed

4 files changed

+184
-10
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderProductsSection.xml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,14 @@
1414
<element name="notHidden" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{arg1}}]/ancestor::*[contains(@class, 'pagebuilder-content-type-wrapper') and not(contains(@class, 'pagebuilder-content-type-hidden'))][1]" parameterized="true"/>
1515
<element name="product" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{arg1}}]//ol//li[contains(@class,'product-item')]" parameterized="true"/>
1616
<element name="productImage" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//img[@class='product-image-photo']" parameterized="true"/>
17+
<element name="productImageCSS" type="text" selector=".pagebuilder-products div[data-appearance=grid] ol li.product-item img.product-image-photo"/>
1718
<element name="productName" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//strong//a[@class='product-item-link' and @href and contains(.,'{{arg2}}')]" parameterized="true"/>
1819
<element name="productPrice" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//span[@class='price' and .='${{arg2}}']" parameterized="true"/>
20+
<element name="productPriceContainer" type="text" selector=".pagebuilder-products div[data-appearance=grid] ol li.product-item div.price-box"/>
1921
<element name="productAddToCart" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//button[contains(@class,'tocart') and @title='Add to Cart']" parameterized="true"/>
2022
<element name="productAddToWishList" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//a[contains(@class,'towishlist') and @title='Add to Wish List']" parameterized="true"/>
2123
<element name="productAddToCompare" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//a[contains(@class,'tocompare') and @title='Add to Compare']" parameterized="true"/>
24+
<element name="productActions" type="text" selector=".pagebuilder-products div[data-appearance=grid] ol li.product-item div.product-item-actions"/>
2225
<!-- Advanced Configuration -->
2326
<element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{arg1}}][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
2427
<element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{arg1}}][not(contains(@style,'text-align:'))]" parameterized="true"/>
@@ -48,11 +51,14 @@
4851
<element name="notHidden" type="text" selector="(//div[contains(@data-role,'products')])[{{arg1}}][not(contains(@style, 'display: none'))]" parameterized="true"/>
4952
<element name="product" type="text" selector="(//div[contains(@data-role,'products')])[{{arg1}}]//ol//li[contains(@class,'product-item')]" parameterized="true"/>
5053
<element name="productImage" type="text" selector="(//div[contains(@data-role,'products')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//img[@class='product-image-photo']" parameterized="true"/>
54+
<element name="productImageCSS" type="text" selector="div[data-role=products] ol li.product-item img.product-image-photo"/>
5155
<element name="productName" type="text" selector="(//div[contains(@data-role,'products')])//ol//li[contains(@class,'product-item')][{{arg1}}]//strong//a[@class='product-item-link' and @href and contains(.,'{{arg2}}')]" parameterized="true"/>
5256
<element name="productPrice" type="text" selector="(//div[contains(@data-role,'products')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//span[@class='price' and .='${{arg2}}']" parameterized="true"/>
57+
<element name="productPriceContainer" type="text" selector="div[data-role=products] ol li.product-item div.price-box"/>
5358
<element name="productAddToCart" type="text" selector="(//div[contains(@data-role,'products')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//button[contains(@class,'tocart') and @title='Add to Cart']" parameterized="true"/>
5459
<element name="productAddToWishList" type="text" selector="(//div[contains(@data-role,'products')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//a[contains(@class,'towishlist') and @title='Add to Wish List']" parameterized="true"/>
5560
<element name="productAddToCompare" type="text" selector="(//div[contains(@data-role,'products')]//ol//li[contains(@class,'product-item')])[{{arg1}}]//a[contains(@class,'tocompare') and @title='Add to Compare']" parameterized="true"/>
61+
<element name="productActions" type="text" selector="div[data-role=products] ol li.product-item div.product-item-actions"/>
5662
<!-- Advanced Configuration -->
5763
<element name="alignment" type="text" selector="(//div[contains(@data-role,'products')])[{{arg1}}][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
5864
<element name="noAlignment" type="text" selector="(//div[contains(@data-role,'products')])[{{arg1}}][not(contains(@style,'text-align:'))]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderProductsTest.xml

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1094,4 +1094,137 @@
10941094
<dontSeeElementInDOM selector="{{ProductsOnStorefront.hidden('1')}}" stepKey="dontSeeHiddenElement"/>
10951095
<seeElement selector="{{ProductsOnStorefront.base('1')}}" stepKey="waitForContentTypeVisible" />
10961096
</test>
1097+
<test name="ProductsWrapsInsideTinyColumn">
1098+
<annotations>
1099+
<features value="PageBuilder"/>
1100+
<stories value="Products"/>
1101+
<title value="Product Content Type wraps inside tiny column"/>
1102+
<description value="As a Content Manager I want products to be wrapped inside tiny column"/>
1103+
<severity value="CRITICAL"/>
1104+
<useCaseId value="MC-4096"/>
1105+
<testCaseId value="MC-4301"/>
1106+
<group value="pagebuilder"/>
1107+
<group value="pagebuilder-column"/>
1108+
<group value="pagebuilder-products"/>
1109+
<group value="pagebuilder-addToColumn"/>
1110+
</annotations>
1111+
<before>
1112+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
1113+
<createData entity="PageBuilderProductsSubCategory" stepKey="createPreReqCategory"/>
1114+
<createData entity="_defaultProduct" stepKey="createPreReqProduct1">
1115+
<requiredEntity createDataKey="createPreReqCategory"/>
1116+
</createData>
1117+
<actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
1118+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
1119+
</before>
1120+
<after>
1121+
<deleteData createDataKey="createPreReqProduct1" stepKey="deletePreReqProduct1"/>
1122+
<deleteData createDataKey="createPreReqCategory" stepKey="deletePreReqCategory"/>
1123+
<actionGroup ref="logout" stepKey="logout"/>
1124+
</after>
1125+
<actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
1126+
<argument name="contentType" value="PageBuilderProductsContentType"/>
1127+
</actionGroup>
1128+
<actionGroup ref="dragContentTypeToStage" stepKey="dragColumnIntoStage">
1129+
<argument name="contentType" value="PageBuilderColumnContentType"/>
1130+
</actionGroup>
1131+
<!-- Drag new column onto column group to make 1/12 column -->
1132+
<comment userInput="Drag new column onto column group to make 1/12 column" stepKey="commentDragNewColumnToGroupMakeFirstColumnSmall"/>
1133+
<actionGroup ref="dragContentTypeToContainer" stepKey="dragColumnIntoFirstColumnGroup">
1134+
<argument name="contentType" value="PageBuilderColumnContentType"/>
1135+
<argument name="contentTypeIndex" value="3"/>
1136+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
1137+
<argument name="containerTargetIndex" value="1"/>
1138+
</actionGroup>
1139+
<!-- Add Products to Stage -->
1140+
<comment userInput="Add Products to Stage" stepKey="addProductsToStage"/>
1141+
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandGroupAddContent">
1142+
<argument name="group" value="PageBuilderProductsContentType"/>
1143+
</actionGroup>
1144+
<actionGroup ref="dragContentTypeToContainer" stepKey="dragProductsOntoColumn">
1145+
<argument name="contentType" value="PageBuilderProductsContentType"/>
1146+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
1147+
<argument name="containerTargetIndex" value="1" />
1148+
</actionGroup>
1149+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
1150+
<!-- Validate Stage -->
1151+
<comment userInput="User sees Products displayed in column on Stage" stepKey="confirmProductsOnStage"/>
1152+
<actionGroup ref="validateContentTypeInsideContainerStage" stepKey="checkContentTypeInContainerStage">
1153+
<argument name="contentType" value="PageBuilderProductsContentType"/>
1154+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
1155+
<argument name="contentTypeIndex" value="1"/>
1156+
<argument name="containerTargetIndex" value="1"/>
1157+
</actionGroup>
1158+
<!-- Validating products is smaller than column -->
1159+
<comment userInput="Validating products is smaller than column" stepKey="commentValidatingProductsIsSmallerThanColumn"/>
1160+
<waitForElementVisible selector="{{ColumnOnBackend.displayLabel('1','1/12')}}" stepKey="validateFirstColumnWidth"/>
1161+
<executeJS function="return document.querySelectorAll('{{ColumnOnBackend.columnX('1')}}')[0].clientWidth" stepKey="firstColumnWidth"/>
1162+
<executeJS function="return document.querySelectorAll('{{ProductsOnStage.productImageCSS}}')[0].clientWidth" stepKey="productImageWidth"/>
1163+
<executeJS function="return document.querySelectorAll('{{ProductsOnStage.productPriceContainer}}')[0].clientWidth" stepKey="productPriceContainerWidth"/>
1164+
<executeJS function="return document.querySelectorAll('{{ProductsOnStage.productActions}}')[0].clientWidth" stepKey="productActionsWidth"/>
1165+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductImage">
1166+
<actualResult type="variable">firstColumnWidth</actualResult>
1167+
<expectedResult type="variable">productImageWidth</expectedResult>
1168+
</assertGreaterThan>
1169+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductPriceContainer">
1170+
<actualResult type="variable">firstColumnWidth</actualResult>
1171+
<expectedResult type="variable">productPriceContainerWidth</expectedResult>
1172+
</assertGreaterThan>
1173+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductActions">
1174+
<actualResult type="variable">firstColumnWidth</actualResult>
1175+
<expectedResult type="variable">productActionsWidth</expectedResult>
1176+
</assertGreaterThan>
1177+
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
1178+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage2"/>
1179+
<!-- Validate Stage After Save -->
1180+
<comment userInput="Validate stage after save" stepKey="validateProductsOnStage"/>
1181+
<actionGroup ref="validateContentTypeInsideContainerStage" stepKey="checkContentTypeInContainerStage2">
1182+
<argument name="contentType" value="PageBuilderProductsContentType"/>
1183+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
1184+
<argument name="contentTypeIndex" value="1"/>
1185+
<argument name="containerTargetIndex" value="1"/>
1186+
</actionGroup>
1187+
<!-- Validating products is smaller than column after save -->
1188+
<comment userInput="Validating products is smaller than column after save" stepKey="commentValidatingProductsIsSmallerThanColumnAfterSave"/>
1189+
<waitForElementVisible selector="{{ColumnOnBackend.displayLabel('1','1/12')}}" stepKey="validateFirstColumnWidthAfterSave"/>
1190+
<executeJS function="return document.querySelectorAll('{{ColumnOnBackend.columnX('1')}}')[0].clientWidth" stepKey="firstColumnWidthAfterSave"/>
1191+
<executeJS function="return document.querySelectorAll('{{ProductsOnStage.productImageCSS}}')[0].clientWidth" stepKey="productImageWidthAfterSave"/>
1192+
<executeJS function="return document.querySelectorAll('{{ProductsOnStage.productPriceContainer}}')[0].clientWidth" stepKey="productPriceContainerWidthAfterSave"/>
1193+
<executeJS function="return document.querySelectorAll('{{ProductsOnStage.productActions}}')[0].clientWidth" stepKey="productActionsWidthAfterSave"/>
1194+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductImageAfterSave">
1195+
<actualResult type="variable">firstColumnWidthAfterSave</actualResult>
1196+
<expectedResult type="variable">productImageWidthAfterSave</expectedResult>
1197+
</assertGreaterThan>
1198+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductPriceContainerAfterSave">
1199+
<actualResult type="variable">firstColumnWidthAfterSave</actualResult>
1200+
<expectedResult type="variable">productPriceContainerWidthAfterSave</expectedResult>
1201+
</assertGreaterThan>
1202+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductActionsAfterSave">
1203+
<actualResult type="variable">firstColumnWidthAfterSave</actualResult>
1204+
<expectedResult type="variable">productActionsWidthAfterSave</expectedResult>
1205+
</assertGreaterThan>
1206+
<!-- Validate Storefront -->
1207+
<comment userInput="View Products inside column on storefront" stepKey="viewProductsOnStorefront"/>
1208+
<actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
1209+
<argument name="contentType" value="PageBuilderProductsContentType"/>
1210+
</actionGroup>
1211+
<!-- Validating products is smaller than column Storefront -->
1212+
<comment userInput="Validating products is smaller than column storefront" stepKey="commentValidatingProductsIsSmallerThanColumnStoreFront"/>
1213+
<executeJS function="return document.querySelectorAll('{{ColumnOnFrontend.columnX('1')}}')[0].clientWidth" stepKey="firstColumnWidthFrontend"/>
1214+
<executeJS function="return document.querySelectorAll('{{ProductsOnStorefront.productImageCSS}}')[0].clientWidth" stepKey="productImageWidthFrontend"/>
1215+
<executeJS function="return document.querySelectorAll('{{ProductsOnStorefront.productPriceContainer}}')[0].clientWidth" stepKey="productPriceContainerWidthFrontend"/>
1216+
<executeJS function="return document.querySelectorAll('{{ProductsOnStorefront.productActions}}')[0].clientWidth" stepKey="productActionsWidthFrontend"/>
1217+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductImageFrontend">
1218+
<actualResult type="variable">firstColumnWidthFrontend</actualResult>
1219+
<expectedResult type="variable">productImageWidthFrontend</expectedResult>
1220+
</assertGreaterThan>
1221+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductPriceContainerFrontend">
1222+
<actualResult type="variable">firstColumnWidthFrontend</actualResult>
1223+
<expectedResult type="variable">productPriceContainerWidthFrontend</expectedResult>
1224+
</assertGreaterThan>
1225+
<assertGreaterThan stepKey="assertColumnIsWiderThanProductActionsFrontend">
1226+
<actualResult type="variable">firstColumnWidthFrontend</actualResult>
1227+
<expectedResult type="variable">productActionsWidthFrontend</expectedResult>
1228+
</assertGreaterThan>
1229+
</test>
10971230
</tests>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/products/_default.less

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,20 +38,21 @@
3838

3939
.product-item {
4040
display: inline-block;
41-
min-width: 200px;
41+
max-width: 100%;
42+
min-width: 50px;
4243
padding-left: 20px;
4344
vertical-align: top;
44-
width: 100%/4;
45+
width: 200px;
4546

4647
&:extend(.abs-add-box-sizing all);
4748

4849

4950
.price-box {
5051
margin: @indent__s 0 @indent__m;
52+
word-wrap: break-word;
5153

5254
.price {
5355
font-weight: @font-weight__bold;
54-
white-space: nowrap;
5556
}
5657

5758
.price-label {
@@ -90,13 +91,13 @@
9091
}
9192

9293
.actions-primary {
93-
display: table-cell;
94+
display: inline-block;
95+
max-width: 100%;
9496

9597
+ .actions-secondary {
96-
display: table-cell;
98+
display: inline-block;
9799
padding-left: 10px;
98100
vertical-align: middle;
99-
width: 50%;
100101

101102
> .action {
102103
color: @color-very-dark-gray;
@@ -115,13 +116,17 @@
115116
}
116117

117118
.action {
119+
max-width: 100%;
118120
&.tocart {
119121
.lib-font-size(13px);
120122
border-radius: 0;
121123
line-height: 1;
122124
padding-bottom: @indent__s;
123125
padding-top: @indent__s;
124-
white-space: nowrap;
126+
> span {
127+
white-space: normal;
128+
word-wrap: break-word;
129+
}
125130
}
126131

127132
&.primary {
@@ -278,12 +283,10 @@
278283
}
279284
}
280285

281-
282286
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
283287
.pagebuilder-products {
284288
.product-item {
285289
margin-left: calc(~'(100% - 5 * (100%/6)) / 4');
286-
width: 100%/6;
287290

288291
&:nth-child(4n + 1) {
289292
margin-left: calc(~'(100% - 5 * (100%/6)) / 4');

‎app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/products/_default.less

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,39 @@
1010
.pagebuilder-column {
1111
.widget-product-grid {
1212
.product-item {
13-
min-width: 200px;
13+
max-width: 100%;
14+
min-width: 50px;
15+
.price-box {
16+
word-wrap: break-word;
17+
.price {
18+
white-space: normal;
19+
}
20+
}
21+
.product-item-actions {
22+
.actions-primary {
23+
display: inline-block;
24+
max-width: 100%;
25+
}
26+
.actions-secondary {
27+
display: inline-block;
28+
width: auto;
29+
}
30+
.tocart {
31+
max-width: 100%;
32+
white-space: normal;
33+
}
34+
}
35+
}
36+
}
37+
[data-role='products'] {
38+
.block.widget {
39+
.products-grid {
40+
.widget-product-grid.product-items {
41+
.product-item {
42+
width: 200px;
43+
}
44+
}
45+
}
1446
}
1547
}
1648
}

0 commit comments

Comments
 (0)