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

Update fixtures and data converter renderer to use data-* attribute for href/target

Author: danmooney2

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

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

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

@@ -85,8 +85,8 @@ public function render(array $itemData, array $additionalData = []) : string
         $rootElementAttributes['style'] .= $margin;
         $linkAttributes = [
             'data-element' => 'link',
-            'href' => $eavData['link_url'] ?? '',
-            'target' => isset($eavData['target_blank']) && $eavData['target_blank'] ? '_blank' : '',
+            'data-href' => $eavData['link_url'] ?? '',
+            'data-target' => isset($eavData['target_blank']) && $eavData['target_blank'] ? '_blank' : '',
         ];
         $imageAttributes = [
             'data-element' => 'desktop_image',

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;"><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>
+<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" data-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"><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>
+<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" data-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"><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>
+<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" data-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"><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>
+<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" data-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;"><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>
+<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" data-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>