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

Support target _blank

Author: danmooney2

app/code/Magento/PageBuilder/view/base/web/js/widget/bind-click-to-data-link-element.js

@@ -31,17 +31,25 @@ define(['jquery'], function ($) {
                     return;
                 }
 
-                bindClickWidget.redirectTo($linkElement.attr('href'));
+                bindClickWidget.redirectTo(
+                    $linkElement.attr('href'),
+                    $linkElement.attr('target')
+                );
             });
         });
     }
 
     /**
-     * Navigate to href in browser
+     * Navigate to href in browser.  Open in new window if target is '_blank'
      * @param {String} href
+     * @param {String} target
      */
-    bindClickWidget.redirectTo = function (href) {
-        window.location.href = href;
+    bindClickWidget.redirectTo = function (href, target) {
+        if (target === '_blank') {
+            window.open(href, target);
+        } else {
+            window.location.href = href;
+        }
     };
 
     return bindClickWidget;

dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/view/frontend/web/js/widget/bind-click-to-data-link-element.test.js

@@ -8,7 +8,8 @@ define([
 ], function (bindClickToLinkInitializerWidget, $) {
     'use strict';
 
-    var $el;
+    var $el,
+        originalRedirectTo = bindClickToLinkInitializerWidget.redirectTo;
 
     afterEach(function () {
         if ($el !== undefined) {
@@ -19,9 +20,11 @@ define([
     describe('Magento_PageBuilder/js/widget/bind-click-to-data-link-element', function () {
         it('Should not navigate away from page if it is missing href attribute', function () {
             spyOn(bindClickToLinkInitializerWidget, 'redirectTo');
+            spyOn(window, 'open');
+
             $el = $(
                 '<div data-role="content-type">' +
-                    '<div data-link-type="link" href="">' +
+                    '<div data-link-type="link" href="" target>' +
                         '<span class="span-outside-inner-anchor">Hello world</span>' +
                         '<a class="inner-anchor" href="https://something.com"><span>Something</span></a>' +
                     '</div>' +
@@ -35,13 +38,16 @@ define([
             $el.find('.span-outside-inner-anchor').click();
 
             expect(bindClickToLinkInitializerWidget.redirectTo).not.toHaveBeenCalled();
+            expect(window.open).not.toHaveBeenCalled();
         });
 
         it('Should not navigate away from page if href is javascript:void(0)', function () {
             spyOn(bindClickToLinkInitializerWidget, 'redirectTo');
+            spyOn(window, 'open');
+
             $el = $(
                 '<div data-role="content-type">' +
-                    '<div data-link-type="link" href="javascript:void(0)">' +
+                    '<div data-link-type="link" href="javascript:void(0)" target>' +
                         '<span class="span-outside-inner-anchor">Hello world</span>' +
                         '<a class="inner-anchor" href="https://something.com"><span>Something</span></a>' +
                     '</div>' +
@@ -55,13 +61,16 @@ define([
             $el.find('.span-outside-inner-anchor').click();
 
             expect(bindClickToLinkInitializerWidget.redirectTo).not.toHaveBeenCalled();
+            expect(window.open).not.toHaveBeenCalled();
         });
 
         it('Should not navigate away from page if it is missing data-link-type attribute', function () {
             spyOn(bindClickToLinkInitializerWidget, 'redirectTo');
+            spyOn(window, 'open');
+
             $el = $(
                 '<div data-role="content-type">' +
-                    '<div href="https://adobe.com">' +
+                    '<div href="https://adobe.com" target>' +
                         '<span class="span-outside-inner-anchor">Hello world</span>' +
                         '<a class="inner-anchor" href="https://something.com"><span>Something</span></a>' +
                     '</div>' +
@@ -75,14 +84,16 @@ define([
             $el.find('.span-outside-inner-anchor').click();
 
             expect(bindClickToLinkInitializerWidget.redirectTo).not.toHaveBeenCalled();
+            expect(window.open).not.toHaveBeenCalled();
         });
 
         it('Should not navigate to an simulated anchor\'s href if clicked inside of nested anchor', function () {
             spyOn(bindClickToLinkInitializerWidget, 'redirectTo');
+            spyOn(window, 'open');
 
             $el = $(
                 '<div data-role="content-type">' +
-                    '<div data-link-type="link" href="https://adobe.com">' +
+                    '<div data-link-type="link" href="https://adobe.com" target>' +
                         '<span class="span-outside-inner-anchor">Hello world</span>' +
                         '<a class="inner-anchor" href="https://something.com"><span>Something</span></a>' +
                     '</div>' +
@@ -96,14 +107,16 @@ define([
             $el.find('.inner-anchor').click();
 
             expect(bindClickToLinkInitializerWidget.redirectTo).not.toHaveBeenCalled();
+            expect(window.open).not.toHaveBeenCalled();
         });
 
         it('Should navigate to an simulated anchor\'s href if clicked outside of nested anchor', function () {
             spyOn(bindClickToLinkInitializerWidget, 'redirectTo');
+            spyOn(window, 'open');
 
             $el = $(
                 '<div data-role="content-type">' +
-                    '<div data-link-type="link" href="https://adobe.com">' +
+                    '<div data-link-type="link" href="https://adobe.com" target>' +
                         '<span class="span-outside-inner-anchor">Hello world</span>' +
                         '<a class="inner-anchor" href="https://something.com"><span>Something</span></a>' +
                     '</div>' +
@@ -116,7 +129,35 @@ define([
 
             $el.find('.span-outside-inner-anchor').click();
 
-            expect(bindClickToLinkInitializerWidget.redirectTo).toHaveBeenCalledWith('https://adobe.com');
+            expect(bindClickToLinkInitializerWidget.redirectTo).toHaveBeenCalledWith('https://adobe.com', '');
+
+            originalRedirectTo('https://adobe.com', '');
+            expect(window.open).not.toHaveBeenCalled();
+        });
+
+        it('Should call window.open if target is _blank', function () {
+            spyOn(window, 'open');
+            spyOn(bindClickToLinkInitializerWidget, 'redirectTo');
+
+            $el = $(
+                '<div data-role="content-type">' +
+                    '<div data-link-type="link" href="https://adobe.com" target="_blank">' +
+                        '<span class="span-outside-inner-anchor">Hello world</span>' +
+                        '<a class="inner-anchor" href="https://something.com"><span>Something</span></a>' +
+                    '</div>' +
+                '</div>'
+            );
+
+            $el.appendTo('body');
+
+            bindClickToLinkInitializerWidget(null, $el);
+
+            $el.find('.span-outside-inner-anchor').click();
+
+            expect(bindClickToLinkInitializerWidget.redirectTo).toHaveBeenCalledWith('https://adobe.com', '_blank');
+
+            originalRedirectTo('https://adobe.com', '_blank');
+            expect(window.open).toHaveBeenCalledWith('https://adobe.com', '_blank');
         });
     });
 });