Skip to content

Commit 895652e

Browse files
iranimijiranimij
committed
Improve code, DEV-1111
Signed-off-by: Iman Aboheydary <[email protected]>
1 parent f66bb13 commit 895652e

File tree

7 files changed

+86
-92
lines changed

7 files changed

+86
-92
lines changed

Plugin/PageBuilder/Model/Filter/TemplatePlugin.php renamed to Plugin/PageBuilder/Model/Filter/AddVideoBlockerFilterPlugin.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
use CustomGento\Cookiebot\Model\ExternalVideoReplacer;
99
use Magento\PageBuilder\Model\Filter\Template;
1010

11-
class TemplatePlugin
11+
class AddVideoBlockerFilterPlugin
1212
{
1313
public function __construct(
1414
private readonly Config $config,

‎etc/di.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?xml version="1.0"?>
22
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
33
<type name="Magento\PageBuilder\Model\Filter\Template">
4-
<plugin name="customgento_cookiebot_pagebuilder_template_video_blocker_plugin" type="CustomGento\Cookiebot\Plugin\PageBuilder\Model\Filter\TemplatePlugin" sortOrder="10"/>
4+
<plugin name="customgento_cookiebot_pagebuilder_template_video_blocker_plugin" type="CustomGento\Cookiebot\Plugin\PageBuilder\Model\Filter\AddVideoBlockerFilterPlugin" sortOrder="10"/>
55
</type>
66
</config>

‎etc/module.xml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
<sequence>
66
<module name="Magento_Catalog"/>
77
<module name="Magento_Cms"/>
8+
<module name="Magento_ProductVideo"/>
9+
<module name="Magento_PageBuilder"/>
10+
<module name="Magento_Store"/>
11+
<module name="Magento_Config"/>
812
</sequence>
913
</module>
1014
</config>

‎i18n/de_DE.csv‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,4 @@
22
"Enable Cookiebot Integration","Cookiebot-Integration aktivieren"
33
"Cookiebot ID","Cookiebot ID"
44
"Data Culture","Data Culture"
5-
"accept %1 cookies","akzeptiere %1 Cookies"
6-
"Please %1 to view this %2 content.","Bitte %1 um diesen %2 Inhalt zu sehen."
5+
"Please <a href=\'javascript:Cookiebot.renew()\' class=\'cookiebot-iframe-consent-link\'>accept %1 cookies</a> to view this %2 content.","Bitte <a href=\'javascript:Cookiebot.renew()\' class=\'cookiebot-iframe-consent-link\'>akzeptieren Sie %1 Cookies</a>, um diesen %2 Inhalt anzuzeigen."

‎i18n/en_US.csv‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,4 @@
22
"Enable Cookiebot Integration","Enable Cookiebot Integration"
33
"Cookiebot ID","Cookiebot ID"
44
"Data Culture","Data Culture"
5-
"accept %1 cookies","accept %1 cookies"
6-
"Please %1 to view this %2 content.","Please %1 to view this %2 content."
5+
"Please <a href=\'javascript:Cookiebot.renew()\' class=\'cookiebot-iframe-consent-link\'>accept %1 cookies</a> to view this %2 content.","Please %1 to view this %2 content."

‎view/frontend/templates/iframe-handler.phtml‎

Lines changed: 57 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -7,66 +7,65 @@ use Magento\Framework\View\Helper\SecureHtmlRenderer;
77

88
/** @var SecureHtmlRenderer $secureRenderer */
99
/** @var Script $viewModel */
10+
1011
$viewModel = $block->getData('view_model');
12+
$consentMessage
13+
= "Please <a href='javascript:Cookiebot.renew()' class='cookiebot-iframe-consent-link'>accept %1 cookies</a> to view this %2 content.";
14+
15+
$scriptString = '
16+
document.addEventListener("DOMContentLoaded", function () {
17+
((document, selector, consentType) => {
18+
const createTextNode = text => document.createTextNode(text);
19+
const createElement = element => document.createElement(element);
20+
21+
document.querySelectorAll(selector).forEach(iframe => {
22+
const divElement = createElement("div");
23+
const paragraphElement = createElement("p");
24+
const iframeSrc = iframe.dataset.cookieblockSrc;
25+
26+
// Detect service provider type
27+
const serviceProvider =
28+
/google\.com\/maps\/embed/.test(iframeSrc) ? "Google Maps" :
29+
/player\.vimeo\.com\/video\//.test(iframeSrc) ? "Vimeo" :
30+
/youtube(-nocookie)?\.com\/embed\//.test(iframeSrc) ? "YouTube" :
31+
undefined;
1132
12-
// Prepare translations
13-
$acceptText = __('accept %1 cookies', 'marketing');
14-
$consentMessage = __('Please %1 to view this %2 content.');
33+
if (!serviceProvider) {
34+
return;
35+
}
1536
16-
$jsTranslations = [
17-
'acceptText' => $acceptText,
18-
'consentMessage' => $consentMessage,
19-
];
20-
?>
37+
const iframeHeight = iframe.getBoundingClientRect().height;
38+
const iframeWidth = iframe.getBoundingClientRect().width;
2139
22-
<script type="text/javascript" data-cookieconsent="ignore">
23-
document.addEventListener("DOMContentLoaded", function() {
24-
((document, selector, consentType, translations) => {
25-
const createTextNode = text => document.createTextNode(text);
26-
const createElement = element => document.createElement(element);
27-
28-
document.querySelectorAll(selector).forEach(iframe => {
29-
const linkElement = createElement("a");
30-
const divElement = createElement("div");
31-
const paragraphElement = createElement("p");
32-
const iframeSrc = iframe.dataset.cookieblockSrc;
33-
34-
// Detect service provider type
35-
const serviceProvider =
36-
/google\.com\/maps\/embed/.test(iframeSrc) ? "Google Maps" :
37-
/player\.vimeo\.com\/video\//.test(iframeSrc) ? "Vimeo" :
38-
/youtube(-nocookie)?\.com\/embed\//.test(iframeSrc) ? "YouTube" :
39-
undefined;
40-
41-
if (!serviceProvider) {
42-
return;
43-
}
44-
45-
const iframeHeight = iframe.getBoundingClientRect().height;
46-
const iframeWidth = iframe.getBoundingClientRect().width;
47-
48-
// Create placeholder content
49-
divElement.innerHTML = `
50-
<div style="background-color:#CCC;display:inline-block;height:${iframeHeight}px;position:relative;width:${iframeWidth}px;">
51-
<div style="background-color:#848484;border-radius:15px;height:50%;position:absolute;transform:translate(50%,50%);width:50%;">
52-
<p style="color:#FFF;font-size:7.5em;position:relative;top:50%;left:50%;margin:0;text-align:center;transform:translate(-50%,-50%);">&ctdot;</p>
40+
// Create placeholder content
41+
divElement.innerHTML = `
42+
<div style="background-color:#CCC;display:inline-block;height:${iframeHeight}px;position:relative;width:${iframeWidth}px;">
43+
<div style="background-color:#848484;border-radius:15px;height:50%;position:absolute;transform:translate(50%,50%);width:50%;">
44+
<p style="color:#FFF;font-size:7.5em;position:relative;top:50%;left:50%;margin:0;text-align:center;transform:translate(-50%,-50%);">&ctdot;</p>
45+
</div>
5346
</div>
54-
</div>
55-
`;
56-
57-
// Setup consent message and button
58-
divElement.classList.add(`cookieconsent-optout-${consentType}`);
59-
linkElement.textContent = translations.acceptText.replace('%1', consentType);
60-
linkElement.href = "javascript:Cookiebot.renew()";
61-
const message = translations.consentMessage
62-
.replace('%1', linkElement.outerHTML)
63-
.replace('%2', serviceProvider);
64-
paragraphElement.innerHTML = message;
65-
66-
divElement.style.fontSize = "1.4rem";
67-
divElement.append(paragraphElement);
68-
iframe.parentNode.insertBefore(divElement, iframe);
69-
});
70-
})(document, "iframe[data-cookieblock-src]", "marketing", <?php echo json_encode($jsTranslations); ?>);
71-
});
72-
</script>
47+
`;
48+
49+
// Setup consent message and button
50+
divElement.classList.add(`cookieconsent-optout-${consentType}`);
51+
const consentMessage = "' . $consentMessage . '";
52+
const message = consentMessage
53+
.replace("%1", consentType)
54+
.replace("%2", serviceProvider);
55+
paragraphElement.innerHTML = message;
56+
57+
divElement.style.fontSize = "1.4rem";
58+
divElement.append(paragraphElement);
59+
iframe.parentNode.insertBefore(divElement, iframe);
60+
});
61+
})(document, "iframe[data-cookieblock-src]", "marketing");
62+
})
63+
';
64+
65+
// checking on if SecureHtmlRenderer exists first, because this module is still compatible with Magento 2.3.x which doesn't include this class
66+
if (class_exists(SecureHtmlRenderer::class)) {
67+
echo $secureRenderer->renderTag('script', ['data-cookieconsent' => 'ignore'], $scriptString, false);
68+
} else {
69+
echo '<script data-cookieconsent="ignore">' . $scriptString . '</script>';
70+
}
71+

‎view/frontend/web/js/fotorama-video-events-mixin.js‎

Lines changed: 21 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,47 +8,40 @@ define([
88
_clickHandler: function (e) {
99
const blockVideoConsentConfig = window.cookiebotConfig && window.cookiebotConfig.blockVideosUntilConsent;
1010

11-
if (Cookiebot?.consent?.marketing) {
11+
if (Cookiebot?.consent?.marketing || !blockVideoConsentConfig) {
1212
this._super(e);
1313
return;
1414
}
1515

16-
if (!Cookiebot?.consent?.marketing && blockVideoConsentConfig) {
17-
const videoElement = event.target.querySelector('.product-video');
16+
const videoElement = event.target.querySelector('.product-video');
17+
const linkElement = document.createElement("a");
18+
const divElement = document.createElement("div");
19+
const paragraphElement = document.createElement("p");
20+
const iframeHeight = videoElement?.getBoundingClientRect().height || 300;
21+
const iframeWidth = videoElement?.getBoundingClientRect().width || 400;
1822

19-
const linkElement = document.createElement("a");
20-
const divElement = document.createElement("div");
21-
const paragraphElement = document.createElement("p");
22-
const iframeHeight = videoElement?.getBoundingClientRect().height || 300;
23-
const iframeWidth = videoElement?.getBoundingClientRect().width || 400;
24-
25-
26-
divElement.innerHTML = `
23+
divElement.innerHTML = `
2724
<div style="background-color:#CCC;display:inline-block;height:${iframeHeight}px;position:relative;width:${iframeWidth}px; z-index: 1000;">
2825
<div style="background-color:#848484;border-radius:15px;height:50%;position:absolute;transform:translate(50%,50%);width:50%;">
2926
<p style="color:#FFF;font-size:7.5em;position:relative;top:50%;left:50%;margin:0;text-align:center;transform:translate(-50%,-50%);">&ctdot;</p>
3027
</div>
3128
</div>
3229
`;
3330

34-
divElement.classList.add('cookieconsent-optout-marketing');
35-
linkElement.textContent = 'accept marketing cookies';
36-
linkElement.href = "javascript:Cookiebot.renew()";
37-
paragraphElement.append(
38-
document.createTextNode("Please "),
39-
linkElement,
40-
document.createTextNode(' to view this content.')
41-
);
42-
43-
divElement.style.fontSize = "1.4rem";
44-
divElement.append(paragraphElement);
45-
paragraphElement.style.zIndex = "1000";
46-
paragraphElement.style.position = "relative";
47-
videoElement?.parentNode.insertBefore(divElement, videoElement);
31+
divElement.classList.add('cookieconsent-optout-marketing');
32+
linkElement.textContent = 'accept marketing cookies';
33+
linkElement.href = "javascript:Cookiebot.renew()";
34+
paragraphElement.append(
35+
document.createTextNode("Please "),
36+
linkElement,
37+
document.createTextNode(' to view this content.')
38+
);
4839

49-
return;
50-
}
51-
this._super(e);
40+
divElement.style.fontSize = "1.4rem";
41+
divElement.append(paragraphElement);
42+
paragraphElement.style.zIndex = "1000";
43+
paragraphElement.style.position = "relative";
44+
videoElement?.parentNode.insertBefore(divElement, videoElement);
5245
},
5346

5447
_initialize: function () {

0 commit comments

Comments
 (0)