custom/plugins/NrbnLvgTheme/src/Resources/views/storefront/page/product-detail/index.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/page/product-detail/index.html.twig' %}
  3. {% block base_main_inner %}
  4.     {% block base_main_container %}
  5.         {{ parent() }}
  6.     {% endblock %}
  7. {% endblock %}
  9. {% block base_breadcrumb %}
  10.     <div class="container">
  11.         {{ parent() }}
  12.     </div>
  13. {% endblock %}
  15. {% block base_content %}
  16.     {% block page_product_detail %}
  17.         <div class="product-detail"
  18.              itemscope
  19.              itemtype="https://schema.org/Product">
  20.             {% block page_product_detail_inner %}
  21.                 {% block page_product_detail_content %}
  22.                     <div class="container">
  23.                         <div class="product-detail-content">
  24.                             {% set mediaItems = page.product.media.media %}
  26.                             {% set nrProductDetailSurcharge = ((page.product.customFields.lvg_fmt_breite_cm * 2 + page.product.customFields.lvg_fmt_hoehe_cm * 2) / 100) * 20 * 3.6 %}
  27.                             {% set nrProductDetailConfiguratorActiveOptionName = null %}
  28.                             {% set nrHasFrameCls = '' %}
  30.                             {% for group in page.configuratorSettings %}
  31.                                 {% for option in group.options %}
  32.                                     {% if option.id in page.product.optionIds %}
  33.                                         {% set nrProductDetailConfiguratorActiveOptionName = option.name %}
  34.                                     {% endif %}
  35.                                 {% endfor %}
  36.                             {% endfor %}
  38.                             {% if nrProductDetailConfiguratorActiveOptionName == 'Ohne' %}
  39.                             {% elseif nrProductDetailConfiguratorActiveOptionName == 'Natur' %}
  40.                                 {% set nrHasFrameCls = 'nr-product-detail-image-framed is-nature' %}
  41.                             {% elseif nrProductDetailConfiguratorActiveOptionName == 'Schwarz' %}
  42.                                 {% set nrHasFrameCls = 'nr-product-detail-image-framed is-black' %}
  43.                             {% elseif nrProductDetailConfiguratorActiveOptionName == 'Weiß' %}
  44.                                 {% set nrHasFrameCls = 'nr-product-detail-image-framed is-white' %}
  45.                             {% elseif nrProductDetailConfiguratorActiveOptionName == 'Gold' %}
  46.                                 {% set nrHasFrameCls = 'nr-product-detail-image-framed is-gold' %}
  47.                             {% elseif nrProductDetailConfiguratorActiveOptionName == 'Silber' %}
  48.                                 {% set nrHasFrameCls = 'nr-product-detail-image-framed is-silver' %}
  49.                             {% endif %}
  51.                             {% block page_product_detail_main %}
  52.                                 <div class="product-detail-main">
  53.                                     {% block page_product_detail_headline %}
  54.                                         <div class="product-detail-headline">
  55.                                             {% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %}
  56.                                         </div>
  57.                                     {% endblock %}
  59.                                     {% block page_product_detail_media %}
  60.                                         {% if page.product.cover.media %}
  61.                                             <div class="product-detail-media">
  62.                                                 {% set attributes = {
  63.                                                     'class': (nrHasFrameCls ? 'nr-product-detail-image ' ~ nrHasFrameCls : 'nr-product-detail-image'),
  64.                                                     'id': 'nrProductDetailImage',
  65.                                                     'alt': (page.product.cover.media.translated.alt ?: ''),
  66.                                                     'title': (page.product.cover.media.translated.title ?: '')
  67.                                                 } %}
  68.                                                 {% set sizes = {
  69.                                                     'md': '1200px'
  70.                                                 } %}
  71.                                                 {% sw_thumbnails 'nr-product-detail-image-thumbnails' with {
  72.                                                     media: page.product.cover.media
  73.                                                 } %}
  74.                                             </div>
  75.                                         {% endif %}
  76.                                     {% endblock %}
  78.                                     {% block page_product_detail_buy %}
  79.                                         <div class="product-detail-buy">
  80.                                             {% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' with {
  81.                                                 nrProductDetailSurcharge: nrProductDetailSurcharge,
  82.                                                 nrProductDetailConfiguratorActiveOptionName: nrProductDetailConfiguratorActiveOptionName
  83.                                             }%}
  84.                                         </div>
  85.                                     {% endblock %}
  87.                                     <div class="nr-product-detail-info">
  88.                                         <div class="nr-info-separator" aria-hidden="true"></div>
  90.                                         <div class="nr-info-box row no-gutters flex-column-reverse flex-md-row align-items-start">
  91.                                             <div class="nr-box-image col-12 col-md-6 col-xl-8">
  92.                                                 <div class="nr-product-detail-room-view">
  93.                                                     {# {% if page.product.translated.customFields.nrbn_lvg_product_room_view %}
  94.                                                         {% set nrbnLvgProductRoomViewMediaId = page.product.translated.customFields.nrbn_lvg_product_room_view %}
  95.                                                         {% set nrbnLvgProductRoomViewMediaCollection = searchMedia([nrbnLvgProductRoomViewMediaId], context.context) %}
  96.                                                         {% set nrbnLvgProductRoomViewMedia = nrbnLvgProductRoomViewMediaCollection.get(nrbnLvgProductRoomViewMediaId) %}
  97.                                                     
  98.                                                         {% sw_thumbnails 'nr-room-view-image-thumbnails' with {
  99.                                                             media: nrbnLvgProductRoomViewMedia,
  100.                                                             attributes: {
  101.                                                                 'class': 'nr-room-view-image img-fluid',
  102.                                                             },
  103.                                                             sizes: {
  104.                                                                 'default': '800px'
  105.                                                             }
  106.                                                         } %}
  107.                                                         <div class="nr-room-view-caption">Beispiel Größenrelation</div>
  108.                                                     {% endif %} #}
  109.                                                     <img class="nr-room-view-image img-fluid" src="https://www.littlevangogh.de/interface/gen_gallery/gallery_image.php?artworkID={{ page.product.productNumber }}" alt="Room View">
  110.                                                 </div>
  111.                                             </div>
  112.                                             <div class="nr-box-content col-12 col-md">
  113.                                                 <h2 class="nr-box-title">Daten zum Bild</h2>
  114.                                                 <div class="nr-product-detail-properties">
  115.                                                     {% if page.product.translated.customFields.lvg_technik %}
  116.                                                         <div class="nr-properties-group">
  117.                                                             <div class="nr-properties-title">
  118.                                                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
  119.                                                                     <path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42" />
  120.                                                                 </svg>
  121.                                                                 <div class="nr-properties-name">Technik</div>
  122.                                                             </div>
  123.                                                             <div class="nr-properties-value">{{ page.product.translated.customFields.lvg_technik }}</div>
  124.                                                         </div>
  125.                                                     {% endif %}
  126.                                                     {% if page.product.translated.customFields.lvg_format %}
  127.                                                         <div class="nr-properties-group">
  128.                                                             <div class="nr-properties-title">
  129.                                                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
  130.                                                                     <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
  131.                                                                 </svg>
  132.                                                                 <div class="nr-properties-name">Größe</div>
  133.                                                             </div>
  134.                                                             <div class="nr-properties-value">{{ page.product.translated.customFields.lvg_format }}</div>
  135.                                                         </div>
  136.                                                     {% endif %}
  137.                                                 </div>
  138.                                             </div>
  139.                                         </div>
  141.                                         <div class="nr-info-separator" aria-hidden="true"></div>
  143.                                         <div class="nr-info-box row no-gutters flex-column-reverse flex-md-row-reverse align-items-start">
  144.                                             <div class="nr-box-image col-12 col-md-6">
  145.                                                 <div class="nr-box-image-ratio-1-1">
  146.                                                     {% set attributes = {
  147.                                                         'class': 'nr-product-detail-manufacturer-image',
  148.                                                         'alt': (page.product.manufacturer.media.translated.alt ?: ''),
  149.                                                         'title': (page.product.manufacturer.media.translated.title ?: ''),
  150.                                                     } %}
  151.                                                     {% set sizes = {
  152.                                                     } %}
  153.                                                     {% sw_thumbnails 'nr-product-detail-manufacturer-image-thumbnails' with {
  154.                                                         media: page.product.manufacturer.media,
  155.                                                     } %}
  156.                                                 </div>
  157.                                             </div>
  158.                                             <div class="nr-box-content col-12 col-md">
  159.                                                 <h2 class="nr-box-title">{{ page.product.manufacturer.name }}</h2>
  160.                                                 <blockquote class="nr-blockquote">
  161.                                                     <svg class="text-primary flex-shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  162.                                                         <path d="M3.01987 24H0L1.43046 10.9377L3.65563 0H9.37748L7.15232 10.9377L3.01987 24ZM17.6424 24H14.6225L16.053 10.9377L18.3576 0H24L21.6954 10.9377L17.6424 24Z" />
  163.                                                     </svg>
  164.                                                     {{ page.product.manufacturer.customFields.zitat }}
  165.                                                 </blockquote>
  166.                                                 {% if page.product.manufacturer.customFields.refErfolge and page.product.manufacturer.customFields.refErfahrung and page.product.manufacturer.customFields.refAusbildung and page.product.manufacturer.customFields.refAusstellungen %}
  167.                                                     <div class="nr-product-detail-manufacturer-references">
  168.                                                         <div class="nr-references-heading h5">Referenzen</div>
  169.                                                         <ul class="nr-references-list list-unstyled">
  170.                                                             {% set references = [] %}
  171.                                                             {% set references = references|merge(page.product.manufacturer.customFields.refErfolge) %}
  172.                                                             {% set references = references|merge(page.product.manufacturer.customFields.refErfahrung) %}
  173.                                                             {% set references = references|merge(page.product.manufacturer.customFields.refAusbildung) %}
  174.                                                             {% set references = references|merge(page.product.manufacturer.customFields.refAusstellungen) %}
  175.                                                             {% for reference in references %}
  176.                                                                 {% if reference.label %}
  177.                                                                     <li class="nr-references-item">
  178.                                                                         <svg class="nr-references-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
  179.                                                                             <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  180.                                                                         </svg>
  181.                                                                         <span class="nr-references-title">{{ reference.label }}</span>
  182.                                                                     </li>
  183.                                                                 {% endif %}
  184.                                                             {% endfor %}
  185.                                                         </ul>
  186.                                                     </div>
  187.                                                 {% endif %}
  188.                                                 <div class="">
  189.                                                     <a class="nr-product-detail-manufacturer-link" href="{{ page.product.manufacture.link }}">Zum Künstler</a>
  190.                                                 </div>
  191.                                             </div>
  192.                                         </div>
  193.                                     </div>
  194.                                 </div>
  195.                             {% endblock %}
  196.                         </div>
  197.                     </div>
  198.                 {% endblock %}
  200.                 {% block page_product_detail_cross_selling %}
  201.                     {% if page.crossSellings.elements is defined and page.crossSellings.elements|filter(item => item.total > 0)|length > 0 %}
  202.                         <div class="product-detail-cross-selling">
  203.                             <div class="container">
  204.                                 {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig' with {
  205.                                     crossSellings: page.crossSellings
  206.                                 } %}
  207.                             </div>
  208.                         </div>
  209.                     {% endif %}
  210.                     <div class="product-detail-cross-selling">
  211.                         <div class="container">
  212.                             <h2 class="nr-cross-selling-title">Weitere Bilder des Künstlers</h2>
  213.                             {% sw_include "@Storefront/storefront/element/cms-element-product-slider.html.twig" with {
  214.                                 element: {
  215.                                     'data': {
  216.                                         'products': {
  217.                                             elements: page.product.manufacturer.products
  218.                                         }
  219.                                     },
  220.                                     type: 'product-slider'
  221.                                 }
  222.                             } %}
  223.                         </div>
  224.                     </div>
  225.                 {% endblock %}
  226.             {% endblock %}
  227.         </div>
  228.     {% endblock %}
  229. {% endblock %}