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

danmooney2 · danmooney2 · commit e61f5d794278 · 2018-09-20T16:07:13.000-05:00
Change anchor to div and add anchor-like bindings in JS widget
diff --git a/app/code/Magento/PageBuilder/Model/WidgetInitializerConfig.php b/app/code/Magento/PageBuilder/Model/WidgetInitializerConfig.php
@@ -43,7 +43,7 @@ public function getConfig(): array
                     $selector .= sprintf('[data-appearance="%s"]', $item['appearance']);
                 }
                 $componentConfig = isset($item['config']) ? $item['config'] : '{}';
-                $resultConfig[$selector] = [$item['component'] => $componentConfig];
+                $resultConfig[$selector][$item['component']] = $componentConfig;
             }
         }
         return $resultConfig;
diff --git a/app/code/Magento/PageBuilder/etc/di.xml b/app/code/Magento/PageBuilder/etc/di.xml
@@ -511,6 +511,9 @@
                             <item name="dataRole" xsi:type="string">slide</item>
                         </item>
                     </item>
+                    <item name="bindClickToDataLinkElement" xsi:type="array">
+                        <item name="component" xsi:type="string">Magento_PageBuilder/js/widget/bind-click-to-data-link-element</item>
+                    </item>
                 </item>
                 <item name="banner" xsi:type="array">
                     <item name="default" xsi:type="array">
@@ -521,6 +524,9 @@
                             <item name="dataRole" xsi:type="string">banner</item>
                         </item>
                     </item>
+                    <item name="bindClickToDataLinkElement" xsi:type="array">
+                        <item name="component" xsi:type="string">Magento_PageBuilder/js/widget/bind-click-to-data-link-element</item>
+                    </item>
                 </item>
                 <item name="buttons" xsi:type="array">
                     <item name="default" xsi:type="array">
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-centered/master.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-centered/master.html
@@ -6,7 +6,7 @@
 -->
 
 <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css">
-    <a attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
+    <div attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
         <div css="data.desktop_image.css" attr="data.desktop_image.attributes" ko-style="Object.assign({}, data.desktop_image.style(), {paddingLeft: 'calc(25% + ' + data.desktop_image.style().paddingLeft + ')', paddingRight: 'calc(25% + ' + data.desktop_image.style().paddingRight + ')'})"
             class="pagebuilder-banner-wrapper pagebuilder-mobile-hidden">
             <div class="pagebuilder-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css">
@@ -24,7 +24,7 @@
             </div>
         </div>
         <div class="pagebuilder-banner-wrapper pagebuilder-mobile-only" ko-style="data.mobile_image.style" attr="data.mobile_image.attributes" css="data.mobile_image.css">
-            <div class="pagebuilder-overlay " attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css">
+            <div class="pagebuilder-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css">
                 <div class="pagebuilder-collage-content">
                     <div attr="data.content.attributes" ko-style="data.content.style" css="data.content.css" html="data.content.html"></div>
                     <button if="data.main.attributes()['data-show-button'] !== 'never'"
@@ -38,5 +38,5 @@
                 </div>
             </div>
         </div>
-    </a>
+    </div>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/master.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/master.html
@@ -6,7 +6,7 @@
 -->
 
 <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css">
-    <a attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
+    <div attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
         <div attr="data.desktop_image.attributes" ko-style="Object.assign({}, data.desktop_image.style(), {paddingRight: 'calc(50% + ' + data.desktop_image.style().paddingRight + ')'})" css="data.desktop_image.css"
             class="pagebuilder-banner-wrapper pagebuilder-mobile-hidden">
             <div class="pagebuilder-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css">
@@ -38,5 +38,5 @@
                 </div>
             </div>
         </div>
-    </a>
+    </div>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/master.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/master.html
@@ -6,7 +6,7 @@
 -->
 
 <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css">
-    <a attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
+    <div attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
         <div attr="data.desktop_image.attributes" ko-style="Object.assign({}, data.desktop_image.style(), {paddingLeft: 'calc(50% + ' + data.desktop_image.style().paddingLeft + ')'})" css="data.desktop_image.css"
             class="pagebuilder-banner-wrapper pagebuilder-mobile-hidden">
             <div class="pagebuilder-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css">
@@ -38,5 +38,5 @@
                 </div>
             </div>
         </div>
-    </a>
+    </div>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/poster/master.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/poster/master.html
@@ -6,7 +6,7 @@
 -->
 
 <div data-bind="attr: data.main.attributes, style: data.main.style, css: data.main.css">
-    <a data-bind="attr: data.link.attributes, style: data.link.style, css: data.link.css">
+    <div data-bind="attr: data.link.attributes, style: data.link.style, css: data.link.css">
         <div class="pagebuilder-banner-wrapper pagebuilder-mobile-hidden" attr="data.desktop_image.attributes" ko-style="data.desktop_image.style" css="data.desktop_image.css">
             <div class="pagebuilder-overlay pagebuilder-poster-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css">
                 <div class="pagebuilder-poster-content">
@@ -37,5 +37,5 @@
                 </div>
             </div>
         </div>
-    </a>
+    </div>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/master.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/master.html
@@ -8,7 +8,7 @@
 <div attr="data.main.attributes"
      ko-style="data.main.style"
      css="data.main.css">
-    <a attr="data.link.attributes"
+    <div attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css">
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden"
@@ -40,7 +40,7 @@
              ko-style="data.mobile_image.style"
              attr="data.mobile_image.attributes"
              css="data.mobile_image.css">
-            <div class="pagebuilder-overlay "
+            <div class="pagebuilder-overlay"
                  attr="data.overlay.attributes"
                  ko-style="data.overlay.style"
                  css="data.overlay.css">
@@ -61,5 +61,5 @@
                 </div>
             </div>
         </div>
-    </a>
+    </div>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/master.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/master.html
@@ -8,7 +8,7 @@
 <div attr="data.main.attributes"
      ko-style="data.main.style"
      css="data.main.css">
-    <a attr="data.link.attributes"
+    <div attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css">
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden"
@@ -61,5 +61,5 @@
                 </div>
             </div>
         </div>
-    </a>
+    </div>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/master.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/master.html
@@ -8,7 +8,7 @@
 <div attr="data.main.attributes"
      ko-style="data.main.style"
      css="data.main.css">
-    <a attr="data.link.attributes"
+    <div attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css">
         <div attr="data.desktop_image.attributes"
@@ -60,5 +60,5 @@
                 </div>
             </div>
         </div>
-    </a>
+    </div>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/master.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/master.html
@@ -8,7 +8,7 @@
 <div attr="data.main.attributes"
      ko-style="data.main.style"
      css="data.main.css">
-    <a attr="data.link.attributes"
+    <div attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css">
         <div class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden"
@@ -61,5 +61,5 @@
                 </div>
             </div>
         </div>
-    </a>
+    </div>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/base/web/js/widget/bind-click-to-data-link-element.js b/app/code/Magento/PageBuilder/view/base/web/js/widget/bind-click-to-data-link-element.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define(['jquery'], function ($) {
+    'use strict';
+
+    return function (config, element) {
+        var $linkElements = $(element).find('[data-link-type]');
+
+        $linkElements.each(function (idx, linkElement) {
+            var $linkElement = $(linkElement);
+
+            if ($linkElement.prop('nodeName') === 'A' || !$linkElement.attr('href')) {
+                return;
+            }
+
+            $linkElement.on('click', function (e) {
+                var $nestedAnchorElementsReceivingTheClick = $(e.target).closest('a', $linkElement);
+
+                if ($nestedAnchorElementsReceivingTheClick.length) {
+                    return;
+                }
+
+                window.location.href = $linkElement.attr('href');
+            });
+        });
+    };
+});
diff --git a/app/code/Magento/PageBuilder/view/base/web/js/widget/show-on-hover.js b/app/code/Magento/PageBuilder/view/base/web/js/widget/show-on-hover.js
@@ -56,10 +56,10 @@ define(['jquery'], function ($) {
     return function (config) {
 
         var buttonSelector = config.buttonSelector,
-            overlayHoverSelector = 'div[data-role="%s"][data-show-overlay="%s"] > a'
+            overlayHoverSelector = 'div[data-role="%s"][data-show-overlay="%s"]'
                 .replace('%s', config.dataRole)
                 .replace('%s', config.showOverlay),
-            overlayButtonSelector = 'div[data-role="%s"][data-show-button="%s"] > a'
+            overlayButtonSelector = 'div[data-role="%s"][data-show-button="%s"]'
                 .replace('%s', config.dataRole)
                 .replace('%s', config.showOverlay);
 
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_default.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_default.less
@@ -7,8 +7,9 @@
 //  Default appearance styles
 //  _____________________________________________
 
-[data-role='banner'] > a {
+[data-role='banner'] > [data-link-type] {
     color: inherit;
+    cursor: pointer;
     text-decoration: inherit;
 
     &:hover {

Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ public function getConfig(): array`
`43`	`43`	`$selector .= sprintf('[data-appearance="%s"]', $item['appearance']);`
`44`	`44`	`}`
`45`	`45`	`$componentConfig = isset($item['config']) ? $item['config'] : '{}';`
`46`		`- $resultConfig[$selector] = [$item['component'] => $componentConfig];`
	`46`	`+ $resultConfig[$selector][$item['component']] = $componentConfig;`
`47`	`47`	`}`
`48`	`48`	`}`
`49`	`49`	`return $resultConfig;`