MC-3934: Slide/Banner Overlay & Button Do Not Show On Storefront When Set To On Hover

Update converter/tests

Author: danmooney2

app/code/Magento/PageBuilder/Setup/DataConverter/Renderer/AdvancedSliderItem.php

@@ -103,7 +103,7 @@ public function render(array $itemData, array $additionalData = []) : string
         }
 
         // mobile wrapper div
-        $rootElementHtml = '<div' . $this->printAttributes($rootElementAttributes) . '><a data-element="link"';
+        $rootElementHtml = '<div' . $this->printAttributes($rootElementAttributes) . '><div data-element="link"';
         $rootElementHtml .= isset($eavData['link_url']) ? ' href="' . $eavData['link_url'] . '">' : '>';
         $rootElementHtml .= '<div'
             . $this->printAttributes($wrapperDivElementAttributes)
@@ -134,7 +134,7 @@ public function render(array $itemData, array $additionalData = []) : string
             . $buttonElementHtml
             . '</div></div></div>';
 
-        $rootElementHtml .= '</a></div>';
+        $rootElementHtml .= '</div></div>';
 
         return $rootElementHtml;
     }

app/code/Magento/PageBuilder/Setup/DataConverter/Renderer/Driver.php

@@ -123,7 +123,7 @@ public function render(array $itemData, array $additionalData = []) : string
 
         return '<div'
             . $this->printAttributes($rootElementAttributes)
-            . '><a'
+            . '><div'
             . $this->printAttributes($linkAttributes)
             . '>'
             . $imageElementHtml
@@ -135,7 +135,7 @@ public function render(array $itemData, array $additionalData = []) : string
             . $overlayElementHtml
             . '<div class="pagebuilder-poster-content"><div data-element="content"></div>'
             . $buttonHtml
-            . '</div></div></div></a></div>';
+            . '</div></div></div></div></div>';
     }
 
     /**

dev/tests/integration/testsuite/Magento/PageBuilder/_files/advanced_slider.html

@@ -1 +1 @@
-<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="slider" data-appearance="default" data-autoplay="0" data-autoplay-speed="0" data-fade="0" data-is-infinite="0" data-show-arrows="0" data-show-dots="0" class="one two pagebuilder-slider" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-element="main" data-role="slide" data-appearance="poster" class="one two" style="margin: 2px 3px 4px 1px;"><a data-element="link" href="http://domain.com/"><div data-element="mobile_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-only" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent" style="padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div><button data-element="button" type="button" class="pagebuilder-slide-button pagebuilder-button-primary" style="opacity: 1; visibility: visible;">Domain</button></div></div></div><div data-element="desktop_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent" style="padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div><button data-element="button" type="button" class="pagebuilder-slide-button pagebuilder-button-primary" style="opacity: 1; visibility: visible;">Domain</button></div></div></div></a></div></div></div></div>
+<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="slider" data-appearance="default" data-autoplay="0" data-autoplay-speed="0" data-fade="0" data-is-infinite="0" data-show-arrows="0" data-show-dots="0" class="one two pagebuilder-slider" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-element="main" data-role="slide" data-appearance="poster" class="one two" style="margin: 2px 3px 4px 1px;"><div data-element="link" href="http://domain.com/"><div data-element="mobile_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-only" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent" style="padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div><button data-element="button" type="button" class="pagebuilder-slide-button pagebuilder-button-primary" style="opacity: 1; visibility: visible;">Domain</button></div></div></div><div data-element="desktop_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent" style="padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div><button data-element="button" type="button" class="pagebuilder-slide-button pagebuilder-button-primary" style="opacity: 1; visibility: visible;">Domain</button></div></div></div></div></div></div></div></div>

dev/tests/integration/testsuite/Magento/PageBuilder/_files/advanced_slider_image_appearance.html

@@ -1 +1 @@
-<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="slider" data-appearance="default" data-autoplay="1" data-autoplay-speed="500" data-fade="0" data-is-infinite="0" data-show-arrows="1" data-show-dots="0" class="one two pagebuilder-slider"><div data-element="main" data-role="slide" data-appearance="poster" class="one two"><a data-element="link" href="http://domain.com/"><div data-element="mobile_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-only" style="background-image: url('{{media url=wysiwyg/m/a/magento.png}}');"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div><button data-element="button" type="button" class="pagebuilder-slide-button pagebuilder-button-primary" style="opacity: 1; visibility: visible;">Domain</button></div></div></div><div data-element="desktop_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden" style="background-image: url('{{media url=wysiwyg/m/a/magento.png}}');"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div><button data-element="button" type="button" class="pagebuilder-slide-button pagebuilder-button-primary" style="opacity: 1; visibility: visible;">Domain</button></div></div></div></a></div></div></div></div>
+<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="slider" data-appearance="default" data-autoplay="1" data-autoplay-speed="500" data-fade="0" data-is-infinite="0" data-show-arrows="1" data-show-dots="0" class="one two pagebuilder-slider"><div data-element="main" data-role="slide" data-appearance="poster" class="one two"><div data-element="link" href="http://domain.com/"><div data-element="mobile_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-only" style="background-image: url('{{media url=wysiwyg/m/a/magento.png}}');"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div><button data-element="button" type="button" class="pagebuilder-slide-button pagebuilder-button-primary" style="opacity: 1; visibility: visible;">Domain</button></div></div></div><div data-element="desktop_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden" style="background-image: url('{{media url=wysiwyg/m/a/magento.png}}');"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div><button data-element="button" type="button" class="pagebuilder-slide-button pagebuilder-button-primary" style="opacity: 1; visibility: visible;">Domain</button></div></div></div></div></div></div></div></div>

dev/tests/integration/testsuite/Magento/PageBuilder/_files/advanced_slider_no_link_text.html

@@ -1 +1 @@
-<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="slider" data-appearance="default" data-autoplay="1" data-autoplay-speed="500" data-fade="0" data-is-infinite="0" data-show-arrows="1" data-show-dots="0" class="pagebuilder-slider"><div data-element="main" data-role="slide" data-appearance="poster"><a data-element="link" href="http://domain.com/"><div data-element="mobile_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-only"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div></div></div></div><div data-element="desktop_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div></div></div></div></a></div></div></div></div>
+<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="slider" data-appearance="default" data-autoplay="1" data-autoplay-speed="500" data-fade="0" data-is-infinite="0" data-show-arrows="1" data-show-dots="0" class="pagebuilder-slider"><div data-element="main" data-role="slide" data-appearance="poster"><div data-element="link" href="http://domain.com/"><div data-element="mobile_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-only"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div></div></div></div><div data-element="desktop_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div></div></div></div></div></div></div></div></div>

dev/tests/integration/testsuite/Magento/PageBuilder/_files/advanced_slider_overlay.html

@@ -1 +1 @@
-<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="slider" data-appearance="default" data-autoplay="1" data-autoplay-speed="500" data-fade="0" data-is-infinite="0" data-show-arrows="1" data-show-dots="0" class="pagebuilder-slider"><div data-element="main" data-role="slide" data-appearance="poster"><a data-element="link" href="http://domain.com/"><div data-element="mobile_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-only"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="rgba(0,0,0,0.5)" style="background-color: rgba(0,0,0,0.5);"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div></div></div></div><div data-element="desktop_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="rgba(0,0,0,0.5)" style="background-color: rgba(0,0,0,0.5);"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div></div></div></div></a></div></div></div></div>
+<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="slider" data-appearance="default" data-autoplay="1" data-autoplay-speed="500" data-fade="0" data-is-infinite="0" data-show-arrows="1" data-show-dots="0" class="pagebuilder-slider"><div data-element="main" data-role="slide" data-appearance="poster"><div data-element="link" href="http://domain.com/"><div data-element="mobile_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-only"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="rgba(0,0,0,0.5)" style="background-color: rgba(0,0,0,0.5);"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div></div></div></div><div data-element="desktop_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="rgba(0,0,0,0.5)" style="background-color: rgba(0,0,0,0.5);"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div></div></div></div></div></div></div></div></div>

dev/tests/integration/testsuite/Magento/PageBuilder/_files/banner.html

@@ -1 +1 @@
-<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="banner" data-appearance="poster" data-show-button="always" data-show-overlay="never" class="one two" style="background-size: auto; background-repeat: no-repeat; background-attachment: scroll; border: 1px none; border-radius: 0px; margin: 2px 3px 4px 1px;"><a data-element="link" href="http://domain.com/"><div data-element="desktop_image" style="background-image: url('{{media url=wysiwyg/m/a/magento.png}}'); min-height: 300px; background-size: auto; background-repeat: no-repeat; background-attachment: scroll; text-align: left;" class="pagebuilder-banner-wrapper pagebuilder-mobile-hidden"><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"></div><button data-element="button" class="pagebuilder-banner-button pagebuilder-button-primary" style="visibility: visible; opacity: 1;">Link Text</button></div></div></div><div data-element="mobile_image" style="background-image: url('{{media url=wysiwyg/m/a/magento.png}}'); min-height: 300px; background-size: auto; background-repeat: no-repeat; background-attachment: scroll; text-align: left;" class="pagebuilder-banner-wrapper pagebuilder-mobile-only"><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"></div><button data-element="button" class="pagebuilder-banner-button pagebuilder-button-primary" style="visibility: visible; opacity: 1;">Link Text</button></div></div></div></a></div></div></div>
+<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="banner" data-appearance="poster" data-show-button="always" data-show-overlay="never" class="one two" style="background-size: auto; background-repeat: no-repeat; background-attachment: scroll; border: 1px none; border-radius: 0px; margin: 2px 3px 4px 1px;"><div data-element="link" href="http://domain.com/"><div data-element="desktop_image" style="background-image: url('{{media url=wysiwyg/m/a/magento.png}}'); min-height: 300px; background-size: auto; background-repeat: no-repeat; background-attachment: scroll; text-align: left;" class="pagebuilder-banner-wrapper pagebuilder-mobile-hidden"><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"></div><button data-element="button" class="pagebuilder-banner-button pagebuilder-button-primary" style="visibility: visible; opacity: 1;">Link Text</button></div></div></div><div data-element="mobile_image" style="background-image: url('{{media url=wysiwyg/m/a/magento.png}}'); min-height: 300px; background-size: auto; background-repeat: no-repeat; background-attachment: scroll; text-align: left;" class="pagebuilder-banner-wrapper pagebuilder-mobile-only"><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"></div><button data-element="button" class="pagebuilder-banner-button pagebuilder-button-primary" style="visibility: visible; opacity: 1;">Link Text</button></div></div></div></div></div></div></div>