Skip to content

Commit 62e4ea2

Browse files
mitelgmitelg
committed
Merge branch 'sw-26916/youtube-accept-button' into '5.7'
SW-26916 - youtube accept button See merge request shopware/5/product/shopware!938
2 parents 0c2cad7 + b96558d commit 62e4ea2

File tree

8 files changed

+133
-10
lines changed

8 files changed

+133
-10
lines changed

‎_sql/migrations/1720-add-preview-for-youtube-videos.php‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<?php
2+
/**
3+
* Shopware 5
4+
* Copyright (c) shopware AG
5+
*
6+
* According to our dual licensing model, this program can be used either
7+
* under the terms of the GNU Affero General Public License, version 3,
8+
* or under a proprietary license.
9+
*
10+
* The texts of the GNU Affero General Public License with an additional
11+
* permission and of our proprietary license can be found at and
12+
* in the LICENSE file you have received along with this program.
13+
*
14+
* This program is distributed in the hope that it will be useful,
15+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
16+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
17+
* GNU Affero General Public License for more details.
18+
*
19+
* "Shopware" is a registered trademark of shopware AG.
20+
* The licensing of the program under the AGPLv3 does not imply a
21+
* trademark license. Therefore any rights, title and interest in
22+
* our trademarks remain entirely with us.
23+
*/
24+
25+
class Migrations_Migration1720 extends Shopware\Components\Migrations\AbstractMigration
26+
{
27+
public function up($modus)
28+
{
29+
$this->addSql('SET @componentId = (SELECT `id` FROM `s_library_component` WHERE `name` = "youtube")');
30+
$this->addSql('SET @maxNumberPosition = (SELECT MAX(position) FROM `s_library_component_field` WHERE `componentID`=@componentId) + 1;');
31+
$sql = <<<'EOD'
32+
INSERT IGNORE INTO `s_library_component_field` (`id`, `componentID`, `name`, `x_type`, `value_type`, `field_label`, `support_text`, `help_title`, `help_text`, `store`, `display_field`, `value_field`, `default_value`, `allow_blank`, `translatable`, `position`)
33+
VALUES
34+
(null, @componentId, 'load_video_on_confirmation', 'checkbox', '', 'Video erst nach Bestätigung durch den User laden', '', '', '', '', '', '', 0, 0, 0, @maxNumberPosition),
35+
(null, @componentId, 'preview_image', 'mediaselectionfield', '', 'Vorschau-Bild', '', '', '', '', '', '', 0, 0, 0, @maxNumberPosition+1)
36+
;
37+
EOD;
38+
$this->addSql($sql);
39+
}
40+
}

‎engine/Shopware/Models/Media/Repository.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ public function getAlbumMediaQueryBuilder($albumId, $filter = null, $orderBy = n
136136
}
137137

138138
// Filter for file types
139-
if ($validTypes !== null && \is_array($validTypes) && !empty($validTypes)) {
139+
if ($validTypes !== null && \is_array($validTypes) && !empty($validTypes) && !empty(array_filter($validTypes))) {
140140
$builder->andWhere('media.extension IN (?2)');
141141
$builder->setParameter(2, $validTypes);
142142
}

‎snippets/backend/emotion/view/components/youtube.ini‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ video_info = "Hide info"
1010
video_branding = "Hide video branding"
1111
video_loop = "Loop video"
1212
video_loop_help = "Loop is not compatible with start and end times. Video will restart from beginning."
13+
load_video_on_confirmation = "Load video only after confirmation of the customer"
14+
previewImage = "Preview image"
1315

1416
[de_DE]
1517
video_hd = "HD Video verwenden"
@@ -22,4 +24,6 @@ video_end = "Stoppen nach x-Sekunden"
2224
video_info = "Info ausblenden"
2325
video_branding = "Branding ausblenden"
2426
video_loop = "Loop aktivieren"
25-
video_loop_help = "Loop ist nicht mit Start- und Endzeiten kompatibel. Video wird wieder von Beginn abgespielt."
27+
video_loop_help = "Loop ist nicht mit Start- und Endzeiten kompatibel. Video wird wieder von Beginn abgespielt."
28+
load_video_on_confirmation = "Video erst nach Bestätigung durch den Kunden laden"
29+
previewImage = "Vorschaubild"

‎snippets/widgets/emotion/components/component_youtube.ini‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
[en_GB]
2+
PrivacyNotice = "By viewing the video you agree that your data will be transferred to YouTube and that you have read the Privacy policy."
3+
AcceptButtonLabel = "Accept"
4+
5+
[de_DE]
6+
7+
PrivacyNotice = "Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an Youtube übermittelt werden und das Sie die Datenschutzbestimmungen gelesen haben."
8+
AcceptButtonLabel = "Akzeptieren"

‎themes/Backend/ExtJs/backend/emotion/view/components/youtube.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,9 @@ Ext.define('Shopware.apps.Emotion.view.components.Youtube', {
4646
video_loop: {
4747
fieldLabel: '{s name="video_loop"}Loop video{/s}',
4848
helpText: '{s name="video_loop_help"}{/s}'
49-
}
49+
},
50+
loadVideoOnConfirmation: '{s name="load_video_on_confirmation"}{/s}',
51+
previewImage: '{s name="preview_image"}{/s}'
5052
},
5153

5254
initComponent: function() {

‎themes/Frontend/Bare/widgets/emotion/components/component_youtube.tpl‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,24 @@
1919
{/if}
2020
{/foreach}
2121
{/if}
22-
<iframe class="external--content content--youtube"
23-
width="100%"
24-
height="100%"
25-
src="https://www.youtube-nocookie.com/embed/{$Data.video_id|escape}{if $params}{$params}{/if}"
26-
frameborder="0"
27-
allowfullscreen>
28-
</iframe>
22+
{if $Data.load_video_on_confirmation}
23+
<div
24+
class="emotion--youtube--gdpr"
25+
data-videoUrl="https://www.youtube-nocookie.com/embed/{$Data.video_id|escape}{if $params}{$params}{/if}" style="background-image: url({$Data.preview_image});">
26+
<div class="emotion--youtube--gdpr--inner center">
27+
<p>{s name="PrivacyNotice" namespace="widgets/emotion/components/component_youtube"}By viewing the video you agree that your data will be transferred to YouTube and that you have read the Privacy policy.{/s}</p>
28+
<a class="gdpr--view--button btn is--secondary">{s name="AcceptButtonLabel" namespace="widgets/emotion/components/component_youtube"}Accept{/s}</a>
29+
</div>
30+
</div>
31+
{else}
32+
<iframe class="external--content content--youtube"
33+
width="100%"
34+
height="100%"
35+
src="https://www.youtube-nocookie.com/embed/{$Data.video_id|escape}{if $params}{$params}{/if}"
36+
frameborder="0"
37+
allowfullscreen>
38+
</iframe>
39+
{/if}
2940
{/if}
3041
</div>
3142
{/block}

‎themes/Frontend/Responsive/frontend/_public/src/js/jquery.emotion.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -364,6 +364,8 @@
364364
*/
365365
wrapperSelector: '.emotion--wrapper',
366366

367+
youtubeElSelector: '.emotion--youtube--gdpr',
368+
367369
/**
368370
* flag to prevent `is--no-sidebar` for fullscreen emotions with listing below
369371
* @type {boolean}
@@ -390,6 +392,8 @@
390392

391393
me.$bannerElements = me.$elements.find(me.opts.bannerElSelector);
392394
me.$videoElements = me.$elements.find(me.opts.videoElSelector);
395+
me.$youtubeVideos = me.$elements.find(me.opts.youtubeElSelector);
396+
393397
me.$productSliderElements = me.$elements.find('*[data-product-slider="true"]');
394398

395399
me.remSpacing = ~~me.opts.cellSpacing / 16;
@@ -467,6 +471,10 @@
467471
$(item).swEmotionVideo();
468472
});
469473

474+
$.each(me.$youtubeVideos, function(index, item) {
475+
$(item).swYoutubeVideo();
476+
});
477+
470478
StateManager.updatePlugin('*[data-product-slider="true"]', 'swProductSlider');
471479
StateManager.updatePlugin('*[data-image-slider="true"]', 'swImageSlider');
472480
StateManager.updatePlugin('*[data-modalbox="true"]', 'swModalbox');
@@ -865,6 +873,36 @@
865873
}
866874
});
867875

876+
$.plugin('swYoutubeVideo', {
877+
defaults: {
878+
loadYoutubeVideoCls: '.gdpr--view--button',
879+
880+
videoUrl: null
881+
},
882+
883+
init: function () {
884+
var me = this;
885+
me.applyDataAttributes();
886+
me.loadYoutubeVideoButton = me.$el.find(me.opts.loadYoutubeVideoCls);
887+
888+
me._on(me.loadYoutubeVideoButton, 'click', $.proxy(me.onLoadYoutubeButton, me));
889+
},
890+
891+
onLoadYoutubeButton: function (event) {
892+
var me = this;
893+
event.preventDefault();
894+
895+
var videoElement = document.createElement('iframe');
896+
videoElement.setAttribute('src', me.opts.videoUrl);
897+
videoElement.setAttribute('width', '100%');
898+
videoElement.setAttribute('height', '100%');
899+
videoElement.setAttribute('frameborder', '0%');
900+
videoElement.setAttribute('allowfullscreen', '');
901+
902+
me.$el.replaceWith(videoElement);
903+
}
904+
});
905+
868906
/**
869907
* Emotion Video Element
870908
*

‎themes/Frontend/Responsive/frontend/_public/src/less/_components/emotions.less‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -953,6 +953,26 @@ body.emotion--preview {
953953
}
954954
}
955955

956+
.emotion--youtube--gdpr {
957+
text-align: center;
958+
min-width: 100%;
959+
min-height: 100%;
960+
position: relative;
961+
background-repeat: no-repeat;
962+
background-position: center;
963+
background-size: cover;
964+
965+
.emotion--youtube--gdpr--inner {
966+
background: rgba(255, 255, 255, .5);
967+
position: absolute;
968+
left: 50%;
969+
top: 50%;
970+
width: 100%;
971+
.transform(translate(-50%, -50%));
972+
border: 0 none;
973+
}
974+
}
975+
956976
// HTML element
957977
.emotion--html {
958978
width: 100%;

0 commit comments

Comments
 (0)