[Owls] Product List Template Swatches

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

@@ -17,6 +17,8 @@
 
 /**
  * Class Render
+ *
+ * @api
  */
 class Render extends Template
 {

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

@@ -7,8 +7,9 @@
 
 namespace Magento\PageBuilder\Controller\Adminhtml\Stage;
 
+use Magento\Backend\App\Action\Context;
 use Magento\Framework\App\Action\HttpGetActionInterface;
-use Magento\RequireJs\Block\Html\Head\Config;
+use Magento\Framework\View\Result\PageFactory;
 
 /**
  * Class Render
@@ -20,30 +21,31 @@ class Render extends \Magento\Backend\App\Action implements HttpGetActionInterfa
     const ADMIN_RESOURCE = 'Magento_Backend::content';
 
     /**
-     * Render the RequireJS and Page Builder render blocks without any additional layout
+     * @var \Magento\Framework\View\Result\PageFactory
+     */
+    private $pageFactory;
+
+    /**
+     * Render constructor.
+     *
+     * @param Context $context
+     * @param PageFactory $pageFactory
+     */
+    public function __construct(
+        Context $context,
+        PageFactory $pageFactory
+    ) {
+        $this->pageFactory = $pageFactory;
+        return parent::__construct($context);
+    }
+
+    /**
+     * Render route
      *
-     * @return void
+     * @return \Magento\Framework\App\ResponseInterface|\Magento\Framework\Controller\ResultInterface|mixed
      */
     public function execute()
     {
-        $layout = $this->_view->getLayout();
-        $requireJs = $layout->createBlock(
-            \Magento\Backend\Block\Page\RequireJs::class,
-            'require.js'
-        );
-        $requireJs->setTemplate('Magento_Backend::page/js/require_js.phtml');
-        /* @var \Magento\PageBuilder\Block\Adminhtml\Stage\Render $renderBlock */
-        $renderBlock = $layout->createBlock(
-            \Magento\PageBuilder\Block\Adminhtml\Stage\Render::class,
-            'stage_render'
-        );
-        $renderBlock->setTemplate('Magento_PageBuilder::stage/render.phtml');
-        $babelPolyfill = $layout->createBlock(
-            \Magento\PageBuilder\Block\Adminhtml\Html\Head\BabelPolyfill::class,
-            'pagebuilder.babel.polyfill'
-        );
-        $babelPolyfill->setTemplate('Magento_PageBuilder::html/head/babel_polyfill.phtml');
-        $this->getResponse()->setBody($requireJs->toHtml() . $babelPolyfill->toHtml() . $renderBlock->toHtml());
-        $this->getResponse()->sendResponse();
+        return $this->pageFactory->create();
     }
 }

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

@@ -495,4 +495,17 @@
             <actualResult type="variable">differenceBetweenCenterPositions</actualResult>
         </assertLessThanOrEqual>
     </actionGroup>
+    <actionGroup name="validateSwatchInProducts">
+        <annotations>
+            <description>Verify a product swatch is displayed within the Product preview within Page Builder.</description>
+        </annotations>
+        <arguments>
+            <argument name="page" defaultValue="" />
+            <argument name="productGroupIndex" defaultValue="1" type="string"/>
+            <argument name="productIndex" defaultValue="1" type="string"/>
+            <argument name="swatch" defaultValue="" />
+        </arguments>
+        <waitForElementVisible selector="{{page.product(productGroupIndex)}}" stepKey="waitForProduct"/>
+        <seeElement selector="{{page.productSwatch(productGroupIndex, productIndex, swatch.default_label)}}" stepKey="assertSwatch"/>
+    </actionGroup>
 </actionGroups>

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

@@ -25,6 +25,7 @@
         <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']"/>
         <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']"/>
         <element name="productActions" type="text" selector=".pagebuilder-products div[data-appearance=grid] ol li.product-item div.product-item-actions"/>
+        <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"/>
         <!-- Advanced Configuration -->
         <element name="alignment" type="text" parameterized="true" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'grid')])[{{indexOfProductGroup}}][contains(@style,'text-align: {{alignment}};')]"/>
         <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 @@
         <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']"/>
         <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']"/>
         <element name="productActions" type="text" selector=".pagebuilder-products div[data-appearance=carousel] ol li.product-item div.product-item-actions"/>
+        <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"/>
         <!-- Carousel Settings Configuration -->
         <element name="carouselMode" type="button" parameterized="true" selector="(//div[contains(@class,'pagebuilder-products')]//div[contains(@data-appearance,'carousel')])[{{indexOfProductGroup}}][@data-carousel-mode='{{carouselMode}}']"/>
         <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

@@ -3475,4 +3475,45 @@
             <argument name="product" value="_defaultProduct"/>
         </actionGroup>
     </test>
+    <test name="AdminPageBuilderVerifySwatchDisplayedInPreviewCarousel" extends="AdminPageBuilderVerifySwatchDisplayedInPreviewGrid">
+        <annotations>
+            <features value="PageBuilder"/>
+            <stories value="Products"/>
+            <title value="Verify products display swatches within the admin for carousel appearance"/>
+            <description value="Verify that a product which has swatches display the swatches within the admin for carousel appearance"/>
+            <severity value="AVERAGE"/>
+            <useCaseId value="PB-76"/>
+            <testCaseId value="MC-22765"/>
+            <group value="pagebuilder"/>
+            <group value="pagebuilder-products"/>
+            <group value="pagebuilder-productsCarousel"/>
+        </annotations>
+        <actionGroup ref="chooseVisualSelectOption" stepKey="selectAppearance" after="openEditAfterDrop">
+            <argument name="property" value="PageBuilderProductsProductCarouselAppearance"/>
+        </actionGroup>
+        <actionGroup ref="validateProductCountInProducts" stepKey="validateProductsCountStage">
+            <argument name="page" value="ProductsCarouselOnStage"/>
+            <argument name="count" value="1"/>
+        </actionGroup>
+        <actionGroup ref="validateSwatchInProducts" stepKey="assertFirstSwatch">
+            <argument name="page" value="ProductsCarouselOnStage"/>
+            <argument name="swatch" value="visualSwatchOption1"/>
+        </actionGroup>
+        <actionGroup ref="validateSwatchInProducts" stepKey="assertSecondSwatch">
+            <argument name="page" value="ProductsCarouselOnStage"/>
+            <argument name="swatch" value="visualSwatchOption2"/>
+        </actionGroup>
+        <actionGroup ref="validateProductCountInProducts" stepKey="validateProductsCountStageAfterSave">
+            <argument name="page" value="ProductsCarouselOnStage"/>
+            <argument name="count" value="1"/>
+        </actionGroup>
+        <actionGroup ref="validateSwatchInProducts" stepKey="assertFirstSwatchAfterSave">
+            <argument name="page" value="ProductsCarouselOnStage"/>
+            <argument name="swatch" value="visualSwatchOption1"/>
+        </actionGroup>
+        <actionGroup ref="validateSwatchInProducts" stepKey="assertSecondSwatchAfterSave">
+            <argument name="page" value="ProductsCarouselOnStage"/>
+            <argument name="swatch" value="visualSwatchOption2"/>
+        </actionGroup>
+    </test>
 </tests>

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

@@ -1619,4 +1619,92 @@
             <argument name="product" value="_defaultProduct"/>
         </actionGroup>
     </test>
+    <test name="AdminPageBuilderVerifySwatchDisplayedInPreviewGrid">
+        <annotations>
+            <features value="PageBuilder"/>
+            <stories value="Products"/>
+            <title value="Verify products display swatches within the admin for grid appearance"/>
+            <description value="Verify that a product which has swatches display the swatches within the admin for grid appearance"/>
+            <severity value="AVERAGE"/>
+            <useCaseId value="PB-76"/>
+            <testCaseId value="MC-22763"/>
+            <group value="pagebuilder"/>
+            <group value="pagebuilder-products"/>
+            <group value="pagebuilder-productsGrid"/>
+        </annotations>
+        <before>
+            <createData entity="_emptyCmsPage" stepKey="createCMSPage"/>
+            <actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
+        </before>
+        <after>
+            <deleteData createDataKey="createCMSPage" stepKey="deleteCMSPage"/>
+            <actionGroup ref="deleteProductBySku" stepKey="deleteProduct">
+                <argument name="sku" value="{{BaseConfigurableProduct.sku}}"/>
+            </actionGroup>
+            <actionGroup ref="deleteProductAttributeByLabel" stepKey="deleteAttribute">
+                <argument name="ProductAttribute" value="visualSwatchAttribute"/>
+            </actionGroup>
+            <actionGroup ref="logout" stepKey="logout"/>
+        </after>
+        <!-- Create a configurable swatch product via the UI -->
+        <actionGroup ref="AdminOpenProductIndexPageActionGroup" stepKey="goToProductIndex" />
+        <actionGroup ref="goToCreateProductPage" stepKey="goToCreateProductPage">
+            <argument name="product" value="BaseConfigurableProduct"/>
+        </actionGroup>
+        <actionGroup ref="fillMainProductForm" stepKey="fillProductForm">
+            <argument name="product" value="BaseConfigurableProduct"/>
+        </actionGroup>
+        <!-- Add swatch attribute to configurable product -->
+        <actionGroup ref="AddVisualSwatchToProductWithStorefrontConfigActionGroup" stepKey="addSwatchToProduct"/>
+        <actionGroup ref="saveProductForm" stepKey="saveProduct"/>
+        <!-- Add product to Page Builder Products content type -->
+        <actionGroup ref="navigateToCMSPage" stepKey="navigateToCMSPage">
+            <argument name="CMSPage" value="$$createCMSPage$$"/>
+        </actionGroup>
+        <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
+        <actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandMenuSectionAddContent">
+            <argument name="contentType" value="PageBuilderProductsContentType"/>
+        </actionGroup>
+        <actionGroup ref="dragContentTypeToStage" stepKey="dragProductsIntoStage">
+            <argument name="contentType" value="PageBuilderProductsContentType"/>
+        </actionGroup>
+        <actionGroup ref="openPageBuilderEditPanel" stepKey="openEditAfterDrop">
+            <argument name="contentType" value="PageBuilderProductsContentType"/>
+        </actionGroup>
+        <actionGroup ref="chooseVisualSelectOption" stepKey="chooseSelectProductsBy">
+            <argument name="property" value="PageBuilderProductsSelectProductsBySKU"/>
+        </actionGroup>
+        <actionGroup ref="addSKUsToSelectProductsBySKU" stepKey="addProductsSKUsToInputField">
+            <argument name="SKUs" value="{{BaseConfigurableProduct.sku}}"/>
+        </actionGroup>
+        <actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
+        <actionGroup ref="validateProductCountInProducts" stepKey="validateProductsCountStage">
+            <argument name="page" value="ProductsOnStage"/>
+            <argument name="count" value="1"/>
+        </actionGroup>
+        <!-- Verify displayed swatches -->
+        <actionGroup ref="validateSwatchInProducts" stepKey="assertFirstSwatch">
+            <argument name="page" value="ProductsOnStage"/>
+            <argument name="swatch" value="visualSwatchOption1"/>
+        </actionGroup>
+        <actionGroup ref="validateSwatchInProducts" stepKey="assertSecondSwatch">
+            <argument name="page" value="ProductsOnStage"/>
+            <argument name="swatch" value="visualSwatchOption2"/>
+        </actionGroup>
+        <!-- Save page and verify swatches display on reload -->
+        <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
+        <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStageAfterSave"/>
+        <actionGroup ref="validateProductCountInProducts" stepKey="validateProductsCountStageAfterSave">
+            <argument name="page" value="ProductsOnStage"/>
+            <argument name="count" value="1"/>
+        </actionGroup>
+        <actionGroup ref="validateSwatchInProducts" stepKey="assertFirstSwatchAfterSave">
+            <argument name="page" value="ProductsOnStage"/>
+            <argument name="swatch" value="visualSwatchOption1"/>
+        </actionGroup>
+        <actionGroup ref="validateSwatchInProducts" stepKey="assertSecondSwatchAfterSave">
+            <argument name="page" value="ProductsOnStage"/>
+            <argument name="swatch" value="visualSwatchOption2"/>
+        </actionGroup>
+    </test>
 </tests>

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

@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <remove src="extjs/resources/css/ext-all.css"/>
+        <remove src="extjs/resources/css/ytheme-magento.css"/>
+        <remove src="jquery/jstree/themes/default/style.css"/>
+        <remove src="css/styles-old.css"/>
+        <remove src="css/styles.css"/>
+    </head>
+    <body>
+        <referenceContainer name="backend.page" remove="true"/>
+        <referenceContainer name="menu.wrapper" remove="true"/>
+        <referenceContainer name="root">
+            <block name="stage_render" class="Magento\PageBuilder\Block\Adminhtml\Stage\Render" template="Magento_PageBuilder::stage/render.phtml" />
+            <block name="pagebuilder.babel.polyfill" class="Magento\PageBuilder\Block\Adminhtml\Html\Head\BabelPolyfill" template="Magento_PageBuilder::html/head/babel_polyfill.phtml" />
+            <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config"/>
+        </referenceContainer>
+    </body>
+</page>

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

@@ -6,11 +6,6 @@
 
 /** @var \Magento\PageBuilder\Block\Adminhtml\Stage\Render $block */
 ?>
-<script src="<?= $block->escapeUrl($block->getRequireJsUrl()); ?>"></script>
-<?php if ($block->getRequireJsMinUrl()) : ?>
-<script src="<?= $block->escapeUrl($block->getRequireJsMinUrl()); ?>"></script>
-<?php endif; ?>
-<script src="<?= $block->escapeUrl($block->getRequireJsConfigUrl()); ?>"></script>
 <script>
     <?php
     /**
@@ -22,9 +17,9 @@
         'map': {
             '*': {
                 'text': 'Magento_PageBuilder/js/master-format/render/requirejs/text',
-                'Magento_PageBuilder/js/events': 'Magento_PageBuilder/js/master-format/render/events',
+                'Magento_PageBuilder/js/events': 'Magento_PageBuilder/js/master-format/render/events'
             }
-        },
+        }
     });
 
     <?php
@@ -50,4 +45,4 @@
         listen(<?= /* @noEscape */ $block->getPageBuilderConfig(); ?>);
     });
 </script>
-<div>Page Builder Render Frame</div>
+<div>Page Builder Render Frame</div>

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

@@ -8,9 +8,6 @@
 //  _____________________________________________
 
 .pagebuilder-content-type .pagebuilder-block {
-    &:before {
-        content: '';
-    }
     .pagebuilder-block-placeholder {
         align-items: center;
         background-color: @color-gray98;
@@ -28,6 +25,9 @@
         min-height: 50px;
         pointer-events: none;
     }
+    .admin__data-grid-loading-mask {
+        z-index: 21;
+    }
 }
 .pagebuilder-block-chooser {
     .block-title {

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

@@ -9,11 +9,6 @@
 
 [data-content-type='products'],
 .pagebuilder-products {
-    .rendered-content a,
-    .rendered-content button {
-        pointer-events: none;
-    }
-
     .pagebuilder-products-placeholder {
         align-items: center;
         background-color: @color-gray98;
@@ -46,6 +41,11 @@
 
         &:extend(.abs-add-box-sizing all);
 
+        a,
+        button,
+        .swatch-attribute-options {
+            pointer-events: none;
+        }
 
         .price-box {
             margin: @indent__s 0 @indent__m;
@@ -312,6 +312,14 @@
             }
         }
     }
+
+    .swatch-attribute {
+        box-sizing: content-box;
+
+        &:last-child {
+            margin-bottom: 2rem;
+        }
+    }
 }
 
 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {

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

@@ -9,3 +9,4 @@
 
 @import './_default.less';
 @import './_carousel.less';
+@import './_swatches.less';