custom/plugins/TcinnThemeWareLiving/src/Resources/views/storefront/themeware/product-detail/twt-product-videos.html.twig line 1

Open in your IDE?
  1. {# ThemeWare "Product videos" on product pages via custom fileds #}
  2. {#
  3.     Create container and add product videos
  5.     @Storefront/storefront/themeware/product-detail/twt-product-videos.html.twig
  6. #}
  8. {# ---------------- START: SET TEMPLATE VARS ---------------- #}
  10. {# ThemeWare: Set theme variables #}
  11. {% set twtProductDetailProductVideosAdvancedPrivacy = theme_config('twt-product-detail-product-videos-advanced-privacy') %}
  12. {% set twtProductDetailProductVideosNeedConfirmation = theme_config('twt-product-detail-product-videos-need-confirmation') %}
  13. {% set twtProductDetailProductVideosPlaceholderLayoutType = theme_config('twt-product-detail-product-videos-placeholder-layout-type') %}
  14. {% set twtProductDetailProductVideosPlaceholderPreviewImage = theme_config('twt-product-detail-product-videos-placeholder-preview-image') %}
  15. {% set twtProductDetailProductVideosShowControls = theme_config('twt-product-detail-product-videos-show-controls') %}
  17. {# ---------------- END: SET TEMPLATE VARS ---------------- #}
  19. {# @TODO
  20.     Konfiguration:
  21.     - Button (Color, Outline)
  22.     - Backdrop (Color, ..)
  23.     - Placeholder (Color, ..)
  24.     - Apply styling to Shopware video CMS elements
  25.     - ..
  26. #}
  28. {# ThemeWare: Add product videos #}
  29. {% block twt_product_detail_videos %}
  30.     <div class="twt-product-detail-videos twt-videos">
  32.         {% block twt_product_detail_videos_inner %}
  34.             {# ThemeWare: Add title (only in tab "Description") #}
  35.             {% block twt_product_detail_videos_title %}
  36.                 {% if position == "description" %}
  37.                     {% if twtCustomFields.product.twt_living_pro_custom_field__product__youtube_video is not empty or twtCustomFields.product.twt_living_pro_custom_field__product__vimeo_video is not empty %}
  38.                         <div class="h5 twt-product-detail-product-videos-title">
  39.                             {{ 'twt.detail.customFields.productVideos.title'|trans }}
  40.                         </div>
  41.                     {% endif %}
  42.                 {% endif %}
  43.             {% endblock %}
  46.             {# ThemeWare: YouTube-Video(s) #}
  47.             {# TODO: Add configuration (Steuerelemente, Erweiterter Datenschutz, ...) #}
  48.             {# <iframe width="560" height="315" src="https://www.youtube.com/embed/aVw60mnS21o?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> #}
  49.             {# https://github.com/shopware/platform/blob/d6c853ca3b6b167d61d70e6329f4fcface5c5245/src/Storefront/Resources/views/storefront/element/cms-element-youtube-video.html.twig #}
  51.             {% block twt_product_detail_videos_youtube %}
  52.                 {% if twtCustomFields.product.twt_living_pro_custom_field__product__youtube_video is not empty %}
  53.                     {% set youtubeIDs = twtCustomFields.product.twt_living_pro_custom_field__product__youtube_video|split(',') %}
  55.                     <div class="twt-product-detail-product-videos-container">
  56.                         {% for youtubeID in youtubeIDs %}
  57.                             {% set videoId = youtubeID|trim %}
  59.                             {# Advanced privacy mode #}
  60.                             {% if twtProductDetailProductVideosAdvancedPrivacy == 2 %}
  61.                                 {% set videoUrl = 'https://www.youtube-nocookie.com/embed/' %}
  62.                             {% else %}
  63.                                 {% set videoUrl = 'https://www.youtube.com/embed/' %}
  64.                             {% endif %}
  66.                             {% set videoUrl = videoUrl ~ videoId ~ '?' ~ 'rel=0' ~ '&'  %}
  68.                             {# Show video controls #}
  69.                             {% if twtProductDetailProductVideosShowControls == 1 %}
  70.                                 {% set videoUrl = videoUrl ~ 'controls=0' ~ '&' %}
  71.                             {% endif %}
  73.                             {% set videoUrl = videoUrl ~ 'disablekb=1' %}
  75.                             {% set iframeClass = 'embed-responsive-item' %}
  77.                             {% block twt_product_detail_videos_youtube_embed %}
  78.                                 <div class="twt-product-video is-youtube embed-responsive embed-responsive-16by9" itemprop="video"> {# 16:9 aspect ratio #}
  79.                                     <div class="responsive-video">
  81.                                         {% block twt_product_detail_videos_youtube_embed_inner %}
  82.                                             {% if twtProductDetailProductVideosNeedConfirmation == 1 %}
  83.                                                 <iframe class="{{ iframeClass }}"
  84.                                                         src="{{ videoUrl }}"
  85.                                                         frameborder="0"
  86.                                                         allowfullscreen>
  87.                                                 </iframe>
  88.                                             {% else %}
  89.                                                 {% set pluginConfiguration = {
  90.                                                     videoUrl: videoUrl,
  91.                                                     iframeClasses: [ iframeClass ],
  92.                                                     btnClasses: [ 'btn', 'btn-outline-secondary' ],
  93.                                                     backdropClasses: [ 'twt-product-video__backdrop' ],
  94.                                                     confirmButtonText: 'component.cms.vimeo.acceptButtonLabel'|trans,
  95.                                                     overlayText: 'component.cms.vimeo.privacyNotice'|trans({
  96.                                                         '%url%': path('frontend.cms.page',{ id: config('core.basicInformation.privacyPage') }),
  97.                                                         '%platform%': 'YouTube'
  98.                                                     })|raw
  99.                                                 } %}
  101.                                                 {% block twt_product_detail_videos_youtube_embed_placeholder %}
  102.                                                     <div class="twt-product-video__placeholder"
  103.                                                          data-cms-gdpr-video-element="true"
  104.                                                          data-cms-gdpr-video-element-options="{{ pluginConfiguration|json_encode }}">
  105.                                                         {# Preview layouts #}
  106.                                                         {% if twtProductDetailProductVideosPlaceholderLayoutType == 3 %}
  107.                                                             {# Custom image #}
  108.                                                             <img class="product-detail-youtube-video-placeholder-img" src="{{ twtProductDetailProductVideosPlaceholderPreviewImage|sw_encode_url }}">
  109.                                                         {% elseif twtProductDetailProductVideosPlaceholderLayoutType == 2 %}
  110.                                                             {# Icon #}
  111.                                                             {% sw_include '@Storefront/storefront/themeware/twt-social-icons.html.twig' ignore missing with {
  112.                                                                 icon: 'youtube',
  113.                                                                 style: 'isolated'
  114.                                                             } %} {# Uses ThemeWare's social icons #}
  115.                                                         {% endif %}
  117.                                                         {# Youtube thumbnail #}
  118.                                                         {#
  119.                                                         <img class="product-detail-youtube-video-placeholder-img" src="http://img.youtube.com/vi/{{ videoId }}/maxresdefault.jpg">
  120.                                                         #}
  121.                                                     </div>
  122.                                                 {% endblock %}
  124.                                             {% endif %}
  125.                                         {% endblock %}
  127.                                     </div>
  128.                                 </div>
  129.                             {% endblock %}
  131.                         {% endfor %}
  132.                     </div>
  133.                 {% endif %}
  134.             {% endblock %}
  137.             {# ThemeWare: Vimeo-Video(s) #}
  138.             {# <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/213807531?color=ffffff&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script> #}
  139.             {# https://github.com/shopware/platform/blob/d6c853ca3b6b167d61d70e6329f4fcface5c5245/src/Storefront/Resources/views/storefront/element/cms-element-vimeo-video.html.twig #}
  141.             {% block twt_product_detail_videos_vimeo %}
  142.                 {% if twtCustomFields.product.twt_living_pro_custom_field__product__vimeo_video is not empty %}
  143.                     {% set vimeoIDs = twtCustomFields.product.twt_living_pro_custom_field__product__vimeo_video|split(',') %}
  145.                     <div class="twt-product-detail-product-videos-container">
  146.                         {% for vimeoID in vimeoIDs %}
  147.                             {% set videoId = vimeoID|trim %}
  149.                             {% set videoUrl = 'https://player.vimeo.com/video/' %}
  150.                             {% set videoUrl = videoUrl ~ videoId ~ '?'  %}
  152.                             {# Show video controls #}
  153.                             {% if twtProductDetailProductVideosShowControls == 1 %}
  154.                                 {% set videoUrl = videoUrl ~ 'controls=false' ~ '&' %}
  155.                             {% endif %}
  157.                             {% set iframeClass = 'embed-responsive-item' %}
  159.                             {% block twt_product_detail_videos_vimeo_embed %}
  160.                                 <div class="twt-product-video is-vimeo embed-responsive embed-responsive-16by9" itemprop="video"> {# 16:9 aspect ratio #}
  161.                                     <div class="responsive-video">
  163.                                         {% block twt_product_detail_videos_vimeo_embed_inner %}
  164.                                             {% if twtProductDetailProductVideosNeedConfirmation == 1 %}
  165.                                                 <iframe class="{{ iframeClass }}"
  166.                                                         src="{{ videoUrl }}"
  167.                                                         style="position:absolute;top:0;left:0;width:100%;height:100%;"
  168.                                                         frameborder="0"
  169.                                                         allow="autoplay; fullscreen; picture-in-picture"
  170.                                                         allowfullscreen>
  171.                                                 </iframe>
  172.                                                 {#<script src="https://player.vimeo.com/api/player.js"></script>#}
  173.                                             {% else %}
  174.                                                 {% set pluginConfiguration = {
  175.                                                     videoUrl: videoUrl,
  176.                                                     iframeClasses: [ iframeClass ],
  177.                                                     btnClasses: [ 'btn', 'btn-outline-secondary' ],
  178.                                                     backdropClasses: [ 'twt-product-video__backdrop' ],
  179.                                                     confirmButtonText: 'component.cms.vimeo.acceptButtonLabel'|trans,
  180.                                                     overlayText: 'component.cms.vimeo.privacyNotice'|trans({
  181.                                                         '%url%': path('frontend.cms.page',{ id: config('core.basicInformation.privacyPage') }),
  182.                                                         '%platform%': 'Vimeo'
  183.                                                     })|raw
  184.                                                 } %}
  186.                                                 {% block twt_product_detail_videos_vimeo_embed_placeholder %}
  187.                                                     <div class="twt-product-video__placeholder"
  188.                                                          data-cms-gdpr-video-element="true"
  189.                                                          data-cms-gdpr-video-element-options="{{ pluginConfiguration|json_encode }}">
  190.                                                         {# Preview layouts #}
  191.                                                         {% if twtProductDetailProductVideosPlaceholderLayoutType == 3 %}
  192.                                                             {# Custom image #}
  193.                                                             <img class="product-detail-youtube-video-placeholder-img" src="{{ twtProductDetailProductVideosPlaceholderPreviewImage|sw_encode_url }}">
  194.                                                         {% elseif twtProductDetailProductVideosPlaceholderLayoutType == 2 %}
  195.                                                             {# Icon #}
  196.                                                             {% sw_include '@Storefront/storefront/themeware/twt-social-icons.html.twig' ignore missing with {
  197.                                                                 icon: 'vimeo',
  198.                                                                 style: 'isolated'
  199.                                                             } %} {# Uses ThemeWare's social icons #}
  200.                                                         {% endif %}
  202.                                                         {# Vimeo thumbnail #}
  203.                                                         {# Under construction... #}
  204.                                                     </div>
  205.                                                 {% endblock %}
  207.                                             {% endif %}
  208.                                         {% endblock %}
  210.                                     </div>
  211.                                 </div>
  212.                             {% endblock %}
  214.                         {% endfor %}
  215.                     </div>
  216.                 {% endif %}
  217.             {% endblock %}
  219.         {% endblock %}
  220.     </div>
  221. {% endblock %}