templates/default/components/organisms/pdp-gallery/pdp-gallery.html.twig line 1

Open in your IDE?
  1. {% set videoKeys = ['CS_YOUTUBE_ID1', 'CS_YOUTUBE_ID2', 'CS_YOUTUBE_ID3', 'CS_YOUTUBE_ID4'] %}
  2. {% set videos = [] %}
  3. {% for key in videoKeys %}
  4. {% if key in variant.attributes|keys and variant.attributes[key] is not empty %}
  5. {% set videos = videos|merge([variant.attributes[key]]) %}
  6. {% endif %}
  7. {% endfor %}
  9. {% block productBoxBadges %}
  10. {% try %}
  11. {% set until = date(variant.attributes.CS_NEW_UNTIL) %}
  12. {% catch %}
  13. {% set until = date("yesterday") %}
  14. {% endcatch %}
  15. <div class="pdp-gallery__badges">
  16. {% if variant.attributes.CS_BADGE|default() %}
  17. {% include 'components/atoms/badge/badge.html.twig' with {
  18. 'class': 'badge--cs-badge badge--with-background badge--pdp',
  19. 'content': variant.attributes.CS_BADGE
  20. } %}
  22. {% elseif until > date("now")|default(false) %}
  23. {% include 'components/atoms/badge/badge.html.twig' with {
  24. 'class': 'badge--new badge--with-background badge--pdp',
  25. 'content': 'product_badge_new' | trans
  26. } %}
  27. {% endif %}
  29. {% if variant.attributes.discount is defined and variant.attributes.discount is not empty
  30. and variant.salesStatus|default == constant('App\\Constant\\SalesStatus::SALE_STATUS_SALEABLE')%}
  32. {% include 'components/atoms/badge/badge.html.twig' with {
  33. 'class': 'badge--sale badge--with-background badge--pdp',
  34. 'content': 'discount_value'|trans({'%value%': variant.attributes.discount})
  35. } %}
  37. {% endif %}
  38. </div>
  40. {% if variant.stampImages|default is not empty %}
  41. <div class="pdp-gallery__badges pdp-gallery__badges--stamp">
  42. {% include 'components/atoms/image/image.html.twig' with {
  43. 'src': variant.stampImages[0].uri,
  44. 'class': 'image--stamp',
  45. 'resize': false
  46. } %}
  47. </div>
  49. {% endif %}
  50. {% endblock %}
  52. {% set show360Viewer = variant.attributes.CS_360ER_Bilder|default == 1 %}
  53. {% set orbitvuSku = show360Viewer ? variant.sku|default : null %}
  55. {% include 'components/organisms/image-gallery/image-gallery.html.twig' with {
  56. 'images': variant.images,
  57. 'obitvuSku': orbitvuSku,
  58. 'options': {
  59. 'main': {
  60. 'class': 'image-slider--detail-main js-image-main-slider',
  61. 'showNavigation': false,
  62. 'showPagination': true,
  63. 'imageSize': 'medium',
  64. 'showImageSimilarFlag': true,
  65. 'showVideoPreview': true,
  66. 'showOrbitvuPreview': true,
  67. 'navigation': {
  68. 'nextEl': 'js-preview-main-next-btn',
  69. 'prevEl': 'js-preview-main-prev-btn'
  70. },
  71. 'attributes': {
  72. 'data-swiper': {
  73. 'spaceBetween': 2,
  74. 'slidesPerView': 1,
  75. 'pagination': {
  76. 'el': '.swiper-pagination',
  77. },
  78. 'navigation': {
  79. 'nextEl': '.js-preview-main-next-btn',
  80. 'prevEl': '.js-preview-main-prev-btn',
  81. },
  82. 'thumbs': {
  83. 'swiper': '.js-image-thumbnail-slider',
  84. },
  85. }|json_encode|e,
  86. 'data-swiper-thumbnail-slider': '.js-image-thumbnail-slider'
  87. }
  88. },
  89. 'thumbnails': {
  90. 'class': 'image-slider--thumbnails js-image-thumbnail-slider',
  91. 'imageSize': 'small',
  92. 'showNavigation': false,
  93. 'showVideoThumbnail': true,
  94. 'showOrbitvuThumbnail': true,
  95. 'attributes': {
  96. 'data-swiper': {
  97. 'slidesPerView': 'auto',
  98. 'spaceBetween': 5,
  99. 'slidesPerGroup': 1,
  100. 'watchSlidesProgress': true,
  101. }|json_encode|e,
  102. 'data-swiper-main-slider': '.js-image-main-slider',
  103. }
  104. }
  105. }
  106. } %}
  108. {% include 'components/organisms/image-gallery/image-gallery.html.twig' with {
  109. 'images': variant.images|default,
  110. 'obitvuSku': orbitvuSku,
  111. 'lightgallery': true,
  112. 'options': {
  113. 'main': {
  114. 'class': 'image-slider--lightgallery-main js-lightgallery-main-slider',
  115. 'showNavigation': false,
  116. 'showImageSimilarFlag': true,
  117. 'attributes': {
  118. 'data-swiper': {
  119. 'init': false,
  120. 'slidesPerView': 1,
  121. 'lazy': true,
  122. 'thumbs': {
  123. 'swiper': '.js-lightgallery-thumbnail-slider',
  124. },
  125. }|json_encode|e,
  126. 'data-swiper-thumbnail-slider': '.js-lightgallery-thumbnail-slider'
  127. }
  128. },
  129. 'thumbnails': {
  130. 'class': 'image-slider--lightgallery-thumbnails js-lightgallery-thumbnail-slider',
  131. 'imageSize': 'small',
  132. 'showNavigation': false,
  133. 'showVideoThumbnail': true,
  134. 'showOrbitvuThumbnail': true,
  135. 'navigation': {
  136. 'nextEl': 'js-main-thumbnail-next-btn',
  137. 'prevEl': 'js-main-thumbnail-prev-btn'
  138. },
  139. 'attributes': {
  140. 'data-swiper': {
  141. 'slidesPerView': 'auto',
  142. 'spaceBetween': 15,
  143. 'lazy': true,
  144. 'watchSlidesVisibility': true,
  145. 'navigation': {
  146. 'nextEl': '.js-main-thumbnail-next-btn',
  147. 'prevEl': '.js-main-thumbnail-prev-btn',
  148. },
  149. }|json_encode|e,
  150. 'data-swiper-main-slider': '.js-lightgallery-main-slider'
  151. }
  152. }
  153. }
  154. } %}
  156. {% set additionalTextKey = 'additional_product_image_text' %}
  157. {% set additionalText = additionalTextKey|trans %}
  158. {% if additionalText not in ['', additionalTextKey] %}
  159. <span class="pdp-gallery__text">
  160. {{ additionalText }}
  161. </span>
  162. {% endif %}