Skip to content

Commit 291df00

Browse files
davemacaulaydavemacaulay
authored
Merge pull request #318 from magento-obsessive-owls/PB-76
[Owls] Product List Template Swatches
2 parents 222823d + a68d263 commit 291df00

File tree

14 files changed

+585
-38
lines changed

14 files changed

+585
-38
lines changed

‎app/code/Magento/PageBuilder/Block/Adminhtml/Stage/Render.php

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717

1818
/**
1919
* Class Render
20+
*
21+
* @api
2022
*/
2123
class Render extends Template
2224
{

‎app/code/Magento/PageBuilder/Controller/Adminhtml/Stage/Render.php

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@
77

88
namespace Magento\PageBuilder\Controller\Adminhtml\Stage;
99

10+
use Magento\Backend\App\Action\Context;
1011
use Magento\Framework\App\Action\HttpGetActionInterface;
11-
use Magento\RequireJs\Block\Html\Head\Config;
12+
use Magento\Framework\View\Result\PageFactory;
1213

1314
/**
1415
* Class Render
@@ -20,30 +21,31 @@ class Render extends \Magento\Backend\App\Action implements HttpGetActionInterfa
2021
const ADMIN_RESOURCE = 'Magento_Backend::content';
2122

2223
/**
23-
* Render the RequireJS and Page Builder render blocks without any additional layout
24+
* @var \Magento\Framework\View\Result\PageFactory
25+
*/
26+
private $pageFactory;
27+
28+
/**
29+
* Render constructor.
30+
*
31+
* @param Context $context
32+
* @param PageFactory $pageFactory
33+
*/
34+
public function __construct(
35+
Context $context,
36+
PageFactory $pageFactory
37+
) {
38+
$this->pageFactory = $pageFactory;
39+
return parent::__construct($context);
40+
}
41+
42+
/**
43+
* Render route
2444
*
25-
* @return void
45+
* @return \Magento\Framework\App\ResponseInterface|\Magento\Framework\Controller\ResultInterface|mixed
2646
*/
2747
public function execute()
2848
{
29-
$layout = $this->_view->getLayout();
30-
$requireJs = $layout->createBlock(
31-
\Magento\Backend\Block\Page\RequireJs::class,
32-
'require.js'
33-
);
34-
$requireJs->setTemplate('Magento_Backend::page/js/require_js.phtml');
35-
/* @var \Magento\PageBuilder\Block\Adminhtml\Stage\Render $renderBlock */
36-
$renderBlock = $layout->createBlock(
37-
\Magento\PageBuilder\Block\Adminhtml\Stage\Render::class,
38-
'stage_render'
39-
);
40-
$renderBlock->setTemplate('Magento_PageBuilder::stage/render.phtml');
41-
$babelPolyfill = $layout->createBlock(
42-
\Magento\PageBuilder\Block\Adminhtml\Html\Head\BabelPolyfill::class,
43-
'pagebuilder.babel.polyfill'
44-
);
45-
$babelPolyfill->setTemplate('Magento_PageBuilder::html/head/babel_polyfill.phtml');
46-
$this->getResponse()->setBody($requireJs->toHtml() . $babelPolyfill->toHtml() . $renderBlock->toHtml());
47-
$this->getResponse()->sendResponse();
49+
return $this->pageFactory->create();
4850
}
4951
}

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ContentTypeProductsActionGroup.xml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -495,4 +495,17 @@
495495
<actualResult type="variable">differenceBetweenCenterPositions</actualResult>
496496
</assertLessThanOrEqual>
497497
</actionGroup>
498+
<actionGroup name="validateSwatchInProducts">
499+
<annotations>
500+
<description>Verify a product swatch is displayed within the Product preview within Page Builder.</description>
501+
</annotations>
502+
<arguments>
503+
<argument name="page" defaultValue="" />
504+
<argument name="productGroupIndex" defaultValue="1" type="string"/>
505+
<argument name="productIndex" defaultValue="1" type="string"/>
506+
<argument name="swatch" defaultValue="" />
507+
</arguments>
508+
<waitForElementVisible selector="{{page.product(productGroupIndex)}}" stepKey="waitForProduct"/>
509+
<seeElement selector="{{page.productSwatch(productGroupIndex, productIndex, swatch.default_label)}}" stepKey="assertSwatch"/>
510+
</actionGroup>
498511
</actionGroups>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
<element name="productAddToWishList" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{indexOfProductItem}}]//a[contains(@class,'towishlist') and @title='Add to Wish List']"/>
2626
<element name="productAddToCompare" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')]//ol//li[contains(@class,'product-item')])[{{indexOfProductItem}}]//a[contains(@class,'tocompare') and @title='Add to Compare']"/>
2727
<element name="productActions" type="text" selector=".pagebuilder-products div[data-appearance=grid] ol li.product-item div.product-item-actions"/>
28+
<element name="productSwatch" type="button" selector="((//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{indexOfProductGroup}}]//ol//li[contains(@class,'product-item')])[{{indexOfProductItem}}]//div[contains(@class, 'swatch-option')][@aria-label='{{swatchLabel}}']" parameterized="true"/>
2829
<!-- Advanced Configuration -->
2930
<element name="alignment" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{indexOfProductGroup}}][contains(@style,'text-align: {{alignment}};')]"/>
3031
<element name="noAlignment" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{indexOfProductGroup}}][not(contains(@style,'text-align:'))]"/>
@@ -61,6 +62,7 @@
6162
<element name="productAddToWishList" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'carousel')]//ol//li[contains(@class,'product-item')])[{{indexOfProductItem}}]//a[contains(@class,'towishlist') and @title='Add to Wish List']"/>
6263
<element name="productAddToCompare" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'carousel')]//ol//li[contains(@class,'product-item')])[{{indexOfProductItem}}]//a[contains(@class,'tocompare') and @title='Add to Compare']"/>
6364
<element name="productActions" type="text" selector=".pagebuilder-products div[data-appearance=carousel] ol li.product-item div.product-item-actions"/>
65+
<element name="productSwatch" type="button" selector="((//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'carousel')])[{{indexOfProductGroup}}]//ol//li[contains(@class,'product-item')])[{{indexOfProductItem}}]//div[contains(@class, 'swatch-option')][@aria-label='{{swatchLabel}}']" parameterized="true"/>
6466
<!-- Carousel Settings Configuration -->
6567
<element name="carouselMode" type="button" parameterized="true" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'carousel')])[{{indexOfProductGroup}}][@data-carousel-mode='{{carouselMode}}']"/>
6668
<element name="autoplay" type="button" parameterized="true" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'carousel')])[{{indexOfProductGroup}}][@data-autoplay='{{autoplay}}']"/>

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3475,4 +3475,45 @@
34753475
<argument name="product" value="_defaultProduct"/>
34763476
</actionGroup>
34773477
</test>
3478+
<test name="AdminPageBuilderVerifySwatchDisplayedInPreviewCarousel" extends="AdminPageBuilderVerifySwatchDisplayedInPreviewGrid">
3479+
<annotations>
3480+
<features value="PageBuilder"/>
3481+
<stories value="Products"/>
3482+
<title value="Verify products display swatches within the admin for carousel appearance"/>
3483+
<description value="Verify that a product which has swatches display the swatches within the admin for carousel appearance"/>
3484+
<severity value="AVERAGE"/>
3485+
<useCaseId value="PB-76"/>
3486+
<testCaseId value="MC-22765"/>
3487+
<group value="pagebuilder"/>
3488+
<group value="pagebuilder-products"/>
3489+
<group value="pagebuilder-productsCarousel"/>
3490+
</annotations>
3491+
<actionGroup ref="chooseVisualSelectOption" stepKey="selectAppearance" after="openEditAfterDrop">
3492+
<argument name="property" value="PageBuilderProductsProductCarouselAppearance"/>
3493+
</actionGroup>
3494+
<actionGroup ref="validateProductCountInProducts" stepKey="validateProductsCountStage">
3495+
<argument name="page" value="ProductsCarouselOnStage"/>
3496+
<argument name="count" value="1"/>
3497+
</actionGroup>
3498+
<actionGroup ref="validateSwatchInProducts" stepKey="assertFirstSwatch">
3499+
<argument name="page" value="ProductsCarouselOnStage"/>
3500+
<argument name="swatch" value="visualSwatchOption1"/>
3501+
</actionGroup>
3502+
<actionGroup ref="validateSwatchInProducts" stepKey="assertSecondSwatch">
3503+
<argument name="page" value="ProductsCarouselOnStage"/>
3504+
<argument name="swatch" value="visualSwatchOption2"/>
3505+
</actionGroup>
3506+
<actionGroup ref="validateProductCountInProducts" stepKey="validateProductsCountStageAfterSave">
3507+
<argument name="page" value="ProductsCarouselOnStage"/>
3508+
<argument name="count" value="1"/>
3509+
</actionGroup>
3510+
<actionGroup ref="validateSwatchInProducts" stepKey="assertFirstSwatchAfterSave">
3511+
<argument name="page" value="ProductsCarouselOnStage"/>
3512+
<argument name="swatch" value="visualSwatchOption1"/>
3513+
</actionGroup>
3514+
<actionGroup ref="validateSwatchInProducts" stepKey="assertSecondSwatchAfterSave">
3515+
<argument name="page" value="ProductsCarouselOnStage"/>
3516+
<argument name="swatch" value="visualSwatchOption2"/>
3517+
</actionGroup>
3518+
</test>
34783519
</tests>

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1619,4 +1619,92 @@
16191619
<argument name="product" value="_defaultProduct"/>
16201620
</actionGroup>
16211621
</test>
1622+
<test name="AdminPageBuilderVerifySwatchDisplayedInPreviewGrid">
1623+
<annotations>
1624+
<features value="PageBuilder"/>
1625+
<stories value="Products"/>
1626+
<title value="Verify products display swatches within the admin for grid appearance"/>
1627+
<description value="Verify that a product which has swatches display the swatches within the admin for grid appearance"/>
1628+
<severity value="AVERAGE"/>
1629+
<useCaseId value="PB-76"/>
1630+
<testCaseId value="MC-22763"/>
1631+
<group value="pagebuilder"/>
1632+
<group value="pagebuilder-products"/>
1633+
<group value="pagebuilder-productsGrid"/>
1634+
</annotations>
1635+
<before>
1636+
<createData entity="_emptyCmsPage" stepKey="createCMSPage"/>
1637+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
1638+
</before>
1639+
<after>
1640+
<deleteData createDataKey="createCMSPage" stepKey="deleteCMSPage"/>
1641+
<actionGroup ref="deleteProductBySku" stepKey="deleteProduct">
1642+
<argument name="sku" value="{{BaseConfigurableProduct.sku}}"/>
1643+
</actionGroup>
1644+
<actionGroup ref="deleteProductAttributeByLabel" stepKey="deleteAttribute">
1645+
<argument name="ProductAttribute" value="visualSwatchAttribute"/>
1646+
</actionGroup>
1647+
<actionGroup ref="logout" stepKey="logout"/>
1648+
</after>
1649+
<!-- Create a configurable swatch product via the UI -->
1650+
<actionGroup ref="AdminOpenProductIndexPageActionGroup" stepKey="goToProductIndex" />
1651+
<actionGroup ref="goToCreateProductPage" stepKey="goToCreateProductPage">
1652+
<argument name="product" value="BaseConfigurableProduct"/>
1653+
</actionGroup>
1654+
<actionGroup ref="fillMainProductForm" stepKey="fillProductForm">
1655+
<argument name="product" value="BaseConfigurableProduct"/>
1656+
</actionGroup>
1657+
<!-- Add swatch attribute to configurable product -->
1658+
<actionGroup ref="AddVisualSwatchToProductWithStorefrontConfigActionGroup" stepKey="addSwatchToProduct"/>
1659+
<actionGroup ref="saveProductForm" stepKey="saveProduct"/>
1660+
<!-- Add product to Page Builder Products content type -->
1661+
<actionGroup ref="navigateToCMSPage" stepKey="navigateToCMSPage">
1662+
<argument name="CMSPage" value="$$createCMSPage$$"/>
1663+
</actionGroup>
1664+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
1665+
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandMenuSectionAddContent">
1666+
<argument name="contentType" value="PageBuilderProductsContentType"/>
1667+
</actionGroup>
1668+
<actionGroup ref="dragContentTypeToStage" stepKey="dragProductsIntoStage">
1669+
<argument name="contentType" value="PageBuilderProductsContentType"/>
1670+
</actionGroup>
1671+
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditAfterDrop">
1672+
<argument name="contentType" value="PageBuilderProductsContentType"/>
1673+
</actionGroup>
1674+
<actionGroup ref="chooseVisualSelectOption" stepKey="chooseSelectProductsBy">
1675+
<argument name="property" value="PageBuilderProductsSelectProductsBySKU"/>
1676+
</actionGroup>
1677+
<actionGroup ref="addSKUsToSelectProductsBySKU" stepKey="addProductsSKUsToInputField">
1678+
<argument name="SKUs" value="{{BaseConfigurableProduct.sku}}"/>
1679+
</actionGroup>
1680+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
1681+
<actionGroup ref="validateProductCountInProducts" stepKey="validateProductsCountStage">
1682+
<argument name="page" value="ProductsOnStage"/>
1683+
<argument name="count" value="1"/>
1684+
</actionGroup>
1685+
<!-- Verify displayed swatches -->
1686+
<actionGroup ref="validateSwatchInProducts" stepKey="assertFirstSwatch">
1687+
<argument name="page" value="ProductsOnStage"/>
1688+
<argument name="swatch" value="visualSwatchOption1"/>
1689+
</actionGroup>
1690+
<actionGroup ref="validateSwatchInProducts" stepKey="assertSecondSwatch">
1691+
<argument name="page" value="ProductsOnStage"/>
1692+
<argument name="swatch" value="visualSwatchOption2"/>
1693+
</actionGroup>
1694+
<!-- Save page and verify swatches display on reload -->
1695+
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
1696+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStageAfterSave"/>
1697+
<actionGroup ref="validateProductCountInProducts" stepKey="validateProductsCountStageAfterSave">
1698+
<argument name="page" value="ProductsOnStage"/>
1699+
<argument name="count" value="1"/>
1700+
</actionGroup>
1701+
<actionGroup ref="validateSwatchInProducts" stepKey="assertFirstSwatchAfterSave">
1702+
<argument name="page" value="ProductsOnStage"/>
1703+
<argument name="swatch" value="visualSwatchOption1"/>
1704+
</actionGroup>
1705+
<actionGroup ref="validateSwatchInProducts" stepKey="assertSecondSwatchAfterSave">
1706+
<argument name="page" value="ProductsOnStage"/>
1707+
<argument name="swatch" value="visualSwatchOption2"/>
1708+
</actionGroup>
1709+
</test>
16221710
</tests>

‎app/code/Magento/PageBuilder/view/adminhtml/layout/pagebuilder_stage_render.xml

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
9+
<head>
10+
<remove src="extjs/resources/css/ext-all.css"/>
11+
<remove src="extjs/resources/css/ytheme-magento.css"/>
12+
<remove src="jquery/jstree/themes/default/style.css"/>
13+
<remove src="css/styles-old.css"/>
14+
<remove src="css/styles.css"/>
15+
</head>
16+
<body>
17+
<referenceContainer name="backend.page" remove="true"/>
18+
<referenceContainer name="menu.wrapper" remove="true"/>
19+
<referenceContainer name="root">
20+
<block name="stage_render" class="Magento\PageBuilder\Block\Adminhtml\Stage\Render" template="Magento_PageBuilder::stage/render.phtml" />
21+
<block name="pagebuilder.babel.polyfill" class="Magento\PageBuilder\Block\Adminhtml\Html\Head\BabelPolyfill" template="Magento_PageBuilder::html/head/babel_polyfill.phtml" />
22+
<block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config"/>
23+
</referenceContainer>
24+
</body>
25+
</page>

‎app/code/Magento/PageBuilder/view/adminhtml/templates/stage/render.phtml

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@
66

77
/** @var \Magento\PageBuilder\Block\Adminhtml\Stage\Render $block */
88
?>
9-
<script src="<?= $block->escapeUrl($block->getRequireJsUrl()); ?>"></script>
10-
<?php if ($block->getRequireJsMinUrl()) : ?>
11-
<script src="<?= $block->escapeUrl($block->getRequireJsMinUrl()); ?>"></script>
12-
<?php endif; ?>
13-
<script src="<?= $block->escapeUrl($block->getRequireJsConfigUrl()); ?>"></script>
149
<script>
1510
<?php
1611
/**
@@ -22,9 +17,9 @@
2217
'map': {
2318
'*': {
2419
'text': 'Magento_PageBuilder/js/master-format/render/requirejs/text',
25-
'Magento_PageBuilder/js/events': 'Magento_PageBuilder/js/master-format/render/events',
20+
'Magento_PageBuilder/js/events': 'Magento_PageBuilder/js/master-format/render/events'
2621
}
27-
},
22+
}
2823
});
2924

3025
<?php
@@ -50,4 +45,4 @@
5045
listen(<?= /* @noEscape */ $block->getPageBuilderConfig(); ?>);
5146
});
5247
</script>
53-
<div>Page Builder Render Frame</div>
48+
<div>Page Builder Render Frame</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@
88
// _____________________________________________
99

1010
.pagebuilder-content-type .pagebuilder-block {
11-
&:before {
12-
content: '';
13-
}
1411
.pagebuilder-block-placeholder {
1512
align-items: center;
1613
background-color: @color-gray98;
@@ -28,6 +25,9 @@
2825
min-height: 50px;
2926
pointer-events: none;
3027
}
28+
.admin__data-grid-loading-mask {
29+
z-index: 21;
30+
}
3131
}
3232
.pagebuilder-block-chooser {
3333
.block-title {

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,6 @@
99

1010
[data-content-type='products'],
1111
.pagebuilder-products {
12-
.rendered-content a,
13-
.rendered-content button {
14-
pointer-events: none;
15-
}
16-
1712
.pagebuilder-products-placeholder {
1813
align-items: center;
1914
background-color: @color-gray98;
@@ -46,6 +41,11 @@
4641

4742
&:extend(.abs-add-box-sizing all);
4843

44+
a,
45+
button,
46+
.swatch-attribute-options {
47+
pointer-events: none;
48+
}
4949

5050
.price-box {
5151
margin: @indent__s 0 @indent__m;
@@ -312,6 +312,14 @@
312312
}
313313
}
314314
}
315+
316+
.swatch-attribute {
317+
box-sizing: content-box;
318+
319+
&:last-child {
320+
margin-bottom: 2rem;
321+
}
322+
}
315323
}
316324

317325
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {

0 commit comments

Comments
 (0)