custom/plugins/BjerregaardTheme/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_head %}
  4.     {% sw_include '@Storefront/storefront/page/product-detail/meta.html.twig' %}
  5. {% endblock %}
  7. {% block base_content %}
  8.     {% block page_product_detail %}
  9.         <div class="product-detail"
  10.         itemscope
  11.         itemtype="https://schema.org/Product">
  12.         <div class="container">
  13.         {% block page_product_detail_inner %}
  14.             {% block page_product_detail_headline %}
  15.                 <div class="product-detail-headline row">
  16.                     {% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %}
  17.                     {% set mediaURL = page.product.manufacturer.media.url %}
  18.                     {% if mediaURL %}
  19.                         <div class="product-detail-brand-image col-5 col-sm-3">
  20.                             <img src="{{ mediaURL }}" alt="brand image">
  21.                         </div>
  22.                     {% endif %}
  23.                 </div>
  24.             {% endblock %}
  25.             {% block page_product_detail_content %}
  26.                 <div class="product-detail-content">
  27.                 {% set mediaItems = page.product.media.media %}
  28.                 {% block page_product_detail_main %}
  29.                     <div class="row product-detail-main">
  30.                     {% block page_product_detail_media %}
  32.                         <div class="col-lg-8 product-detail-media">
  34.                             {% if page.product.media %}
  35.                                 <div class="desktop-gallery">
  36.                                     {% sw_include '@Storefront/storefront/page/product-detail/image-gallery.html.twig' with {
  37.                                         'mediaItems': mediaItems,
  38.                                         'isProduct': true,
  39.                                         'fallbackImageTitle': page.product.translated.name,
  40.                                     } %}
  41.                                 </div>
  42.                                 <div class="mobile-gallery">
  43.                                     {% sw_include '@Storefront/storefront/element/cms-element-image-gallery.html.twig' with {
  44.                                         'mediaItems': mediaItems,
  45.                                         'zoomModal': true,
  46.                                         'isProduct': true,
  47.                                         'isGridLayout': true,
  48.                                         'fallbackImageTitle': page.product.translated.name,
  50.                                     } %}
  51.                                 </div>
  52.                             {% endif %}
  53.                         </div>
  54.                     {% endblock %}
  56.                     {% block page_product_detail_buy %}
  57.                         <div class="col-lg-4 product-detail-buy">
  59.                         <div class="product-detail-content">
  60.                             {% block page_product_detail_description %}
  61.                                 {% if "Godkendelse" in page.product.customFields|keys %}
  62.                                     <p class="product-detail-approval ">{{ "product.detail.approvalLabel"|trans|sw_sanitize }}
  63.                                         <span class="product-variant-characteristics-option text-black-50">
  64.                                             {{ page.product.customFields["Godkendelse"] }}
  65.                                         </span>
  66.                                     </p>
  67.                                 {% endif %}
  68.                                 {% sw_include '@Storefront/storefront/page/product-detail/description.html.twig' %}
  69.                             {% endblock %}
  71.                             <div class="product-buy-widget-wrapper">
  72.                                 {% if context.customer  %}
  73.                                     {# condition to show the netPrice label only if the product is not on sale #}
  74.                                     {% if page.product.calculatedPrice.listPrice is null  %}
  75.                                         <p class="product-netPrice-badge product-netPrice-badge--detail">{{ "product.detail.netPriceLabel"|trans|striptags }}</p>
  76.                                     {% endif %}
  77.                                 {% endif %}
  78.                                 {% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
  80.                             </div>
  82.                             <div class="product-detail-features">
  83.                                 {% sw_include '@bjerregaard-theme/storefront/page/product-detail/properties.html.twig' %}
  84.                             </div>
  86.                             <div class="product-detail-property-wrapper row">
  87.                                 <p class="col-12 text-black font-weight-bold">{{ "product.detail.propertiesLabel"|trans|sw_sanitize }}</p>
  88.                                 {% set properties = page.product.sortedProperties %}
  89.                                 {% for property in properties %}
  90.                                     {% if property.translated.name|e == "Egenskaber" %}
  91.                                         {% for option in property.options %}
  92.                                             <div class="product-detail-property col-6">
  93.                                                 {% sw_icon "checkmark-circle" %}
  94.                                                 <span>{{ option.translated.name|e }}</span>
  95.                                             </div>
  96.                                         {% endfor %}
  97.                                     {% endif %}
  98.                                 {% endfor %}
  99.                             </div>
  101.                             {% set productDatasheet = page.product.customFields.datasheet %}
  102.                             {% set productDatasheetENG = page.product.customFields.datasheeten %}
  103.                             {% set mediaCollection = searchMedia([productDatasheet, productDatasheetENG], context.context) %}
  104.                             <div class="product-detail-datasheet-wrapper">
  105.                             {% if productDatasheet %}
  106.                             <div class="product-detail-datasheet-container">
  107.                                 <a href="{{ mediaCollection.get(productDatasheet).url }}" target="_blank" class="product-detail-datasheet-link">
  108.                                     <p class="product-detail-datasheet__text"><span class="product-detail-datasheet__label">{{ "product.detail.datasheetLabel"|trans }}</span>{% sw_icon 'arrow-down' %}</p>
  109.                                 </a>
  110.                             </div>
  111.                             {% endif %}
  112.                             {% if productDatasheetENG %}
  113.                                 <div class="product-detail-datasheet-container">
  114.                                     <a href="{{ mediaCollection.get(productDatasheetENG).url }}" target="_blank" class="product-detail-datasheet-link">
  115.                                         <p class="product-detail-datasheet__text"><span class="product-detail-datasheet__label">{{ "product.detail.datasheetLabelENG"|trans }}</span>{% sw_icon 'arrow-down' %}</p>
  116.                                     </a>
  117.                                 </div>
  118.                             {% endif %}
  119.                             </div>
  120.                         </div>
  121.                     {% endblock %}
  122.                     </div>
  123.                 {% endblock %}
  125.                 </div>
  126.                 <div class="product-detail-video-container col-lg-8 col-md-12 col-sm-12" id="video-link-container">
  128.                     {% if page.product.customFields['VideoLink'] matches '{(?:[?&]v=|\/embed\/|\/1\/|\/v\/|https:\/\/(?:www\.)?youtu\.be\/)([^&\n?#]+)}' %}
  129.                         <div style="display:none" id="videolink" data-link="{{ page.product.customFields['VideoLink'] }}"></div>
  130.                         <iframe data-video-frame width="100%" height="600px" style="display:none;"
  131.                                 src="" id="videoIframe">
  132.                         </iframe>
  133.                     {% endif %}
  136.                     {% if videoLink %}
  138.                     {% endif %}
  140.                 </div>
  141.             {% endblock %}
  143.             {% block page_product_detail_cross_selling %}
  144.                 {% if page.crossSellings.elements is defined and page.crossSellings.elements|filter(item => item.total > 0)|length > 0 %}
  145.                     <div class="product-detail-tabs product-detail-cross-selling">
  146.                         {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig' with {
  147.                             crossSellings: page.crossSellings
  148.                         } %}
  149.                     </div>
  150.                 {% endif %}
  151.             {% endblock %}
  152.         {% endblock %}
  153.                 </div>
  154.         </div>
  155.     {% endblock %}
  156.     </div>
  157. {% endblock %}