custom/plugins/GrimmTheme/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' %}
  2. {# due to different positioning of elements in mobile and desktop, we had to work with responsive classes as well as conditional device rendering (SD-5192 #}
  4. {% set isMobile = device == 'mobile' %}
  6. {% block base_header %}
  7.     <header class="header-main sticky-header">
  8.         {% block base_header_inner %}
  9.             <div class="container">
  10.                 {% sw_include '@Storefront/storefront/layout/header/header.html.twig' %}
  11.             </div>
  12.         {% endblock %}
  13.     </header>
  14. {% endblock %}
  16. {% block base_navigation %}
  17.     <div class="nav-main sticky-header-nav">
  18.         {% block base_navigation_inner %}
  19.             {% sw_include '@Storefront/storefront/layout/navigation/navigation.html.twig' %}
  20.         {% endblock %}
  21.     </div>
  23.     {# Sticky Header #}
  25.     <script>
  26.         function scrollToSection(sectionId) {
  27.             var section = document.getElementById(sectionId);
  28.             var offset = -500; // Adjust the offset as needed
  30.             if (section) {
  31.                 var offsetTop = section.offsetTop - offset;
  32.                 // window.scrollTo(0,15000);
  33.                 window.scrollTo({ top: 175, behavior: "smooth" });
  34.             }
  35.         }
  36.     </script>
  39.     <div class="sticky-product-header">
  40.         <div class="sticky-product-header-inner">
  41.             <div class="row">
  42.                 <div class="col-lg-7 col-12 product-navigation">
  43.                     {# <span class="header-nav-link"><a href="#productDescription" onclick="scrollToSection('productDescription')">{{ "detail.descriptionTitle"|trans|sw_sanitize }}</a></span>
  44.                     <span class="header-nav-link"><a href="#productRelatedArticles" onclick="scrollToSection('productRelatedArticles')">{{ "product.relatedProducts"|trans|sw_sanitize }}</a></span> #}
  45.                     <span class="header-nav-link"><a href="#productGeneralDescription" onclick="scrollToSection('productGeneralDescription')">{{ "detail.tabsDescription"|trans|sw_sanitize }}</a></span>
  46.                     {% if page.product.sortedProperties|length > 0 or page.product.manufacturerNumber != "" or page.product.ean != "" %}
  47.                         <span class="header-nav-link"><a href="#productGeneralProperties" onclick="scrollToSection('productGeneralProperties')">{{ "detail.tabsProperties"|trans|sw_sanitize }}</a></span>
  48.                     {% endif %}
  49.                     {% if product.customFields and product.customFields.downloads and product.customFields.downloads|length %}
  50.                         <span class="header-nav-link"><a href="#productGeneralDownloads" onclick="scrollToSection('productGeneralDownloads')">{{ "detail.tabsDownloads"|trans|sw_sanitize }}</a></span>
  51.                     {% endif %}
  52.                 </div>
  53.                 <div class="col-lg-2 only-desktop">
  54.                     {% sw_include '@Storefront/storefront/component/product/card/price-taxes.html.twig' with {
  55.                         product: page.product
  56.                     } %}
  57.                     <br>
  58.                     {% sw_include '@Storefront/storefront/page/product-detail/buy-widget-price.html.twig' with {
  59.                         product: page.product
  60.                     } %}
  61.                 </div>
  62.                 <div class="d-none d-md-block col-lg-3">
  63.                 <form
  64.                 class="show-form-loader show-form-loader-buy-btn"
  65.                 action="{% block page_product_detail_buy_form_action %}{{ path('frontend.checkout.line-item.add') }}{% endblock %}"
  66.                 method="post"
  67.                 data-add-to-cart="true"
  68.                 class="buy-widget">
  69.                     {{ sw_csrf('frontend.checkout.line-item.add') }}
  71.                     <input type="hidden"
  72.                                name="redirectTo"
  73.                                value="frontend.detail.page">
  75.                     <input type="hidden"
  76.                             name="redirectParameters"
  77.                             data-redirect-parameters="true"
  78.                             value='{"productId": "{{ page.product.id }}"}'>
  79.                     <input type="hidden"
  80.                                name="lineItems[{{ page.product.id }}][id]"
  81.                                value="{{ page.product.id }}">
  82.                     <input type="hidden"
  83.                             name="lineItems[{{ page.product.id }}][type]"
  84.                             value="product">
  85.                     <input type="hidden"
  86.                             name="lineItems[{{ page.product.id }}][referencedId]"
  87.                             value="{{ page.product.id }}">
  88.                     <input type="hidden"
  89.                             name="lineItems[{{ page.product.id }}][stackable]"
  90.                             value="1">
  91.                     <input type="hidden"
  92.                             name="lineItems[{{ page.product.id }}][removable]"
  93.                             value="1">
  94.                     <input type="hidden"
  95.                                name="product-name"
  96.                                value="{{ page.product.translated.name }}">
  97.                     <input type="hidden"
  98.                             name="brand-name"
  99.                             value="{{ page.product.manufacturer.getName() }}">
  101.                     <button class="btn btn-block btn-buy font-weight-bold w-100 justify-content-center mb-1" title="Warenkorb">
  102.                         <span class="d-sm-none mr-3">{{ "product.buyButton"|trans|sw_sanitize }}</span><span class="d-none d-sm-inline mr-3">{{ "detail.addProduct"|trans|sw_sanitize }}</span>
  103.                         <span class="lak icon icon-warenkorb icon-sm">
  104.                             <svg width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  105.                                 <g id="Startseite" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  106.                                     <g id="Startseite-Lang-Copy-9" transform="translate(-1282.000000, -61.000000)" fill="#9B9B9B" fill-rule="nonzero">
  107.                                         <g id="Group-41">
  108.                                             <g id="Group-5" transform="translate(1282.000000, 61.000000)">
  109.                                                 <g id="Group-36" transform="translate(0.500000, 0.500000)">
  110.                                                     <path d="M0.5,1 L2.83418038,1 C3.07711701,1 3.28489881,1.17462161 3.32671697,1.41393197 L5.83329879,15.7582041 C5.95875326,16.4761352 6.58209867,17 7.31090857,17 L18.5526336,17 C18.828776,17 19.0526336,16.7761424 19.0526336,16.5 C19.0526336,16.2238576 18.828776,16 18.5526336,16 L7.31090857,16 C7.06797193,16 6.86019013,15.8253784 6.81837197,15.586068 L4.31179015,1.24179591 C4.18633568,0.523864821 3.56299027,0 2.83418038,0 L0.5,0 C0.223857625,0 1.02318154e-12,0.223857625 1.02318154e-12,0.5 C1.02318154e-12,0.776142375 0.223857625,1 0.5,1 Z" id="Path-6"></path>
  111.                                                     <path d="M7.10477473,3.78963344 L20.9464503,3.78963344 C21.2225927,3.78963344 21.4464503,4.01349107 21.4464503,4.28963344 C21.4464503,4.3390493 21.4391247,4.38819219 21.4247125,4.43545967 L19.2903526,11.4354597 C19.2261971,11.6458689 19.0320631,11.7896334 18.8120904,11.7896334 L8.43673944,11.7896334 C8.16059707,11.7896334 7.93673944,12.0134911 7.93673944,12.2896334 C7.93673944,12.5657758 8.16059707,12.7896334 8.43673944,12.7896334 L18.8120904,12.7896334 C19.4720085,12.7896334 20.0544103,12.3583398 20.246877,11.7271121 L22.3812368,4.72711212 C22.4244736,4.58530969 22.4464503,4.43788103 22.4464503,4.28963344 C22.4464503,3.46120632 21.7748774,2.78963344 20.9464503,2.78963344 L7.10477473,2.78963344 C6.82863235,2.78963344 6.60477473,3.01349107 6.60477473,3.28963344 C6.60477473,3.56577582 6.82863235,3.78963344 7.10477473,3.78963344 Z" id="Path-7"></path>
  112.                                                     <path d="M9.19378522,21.8094908 C10.1602835,21.8094908 10.9437852,21.0259891 10.9437852,20.0594908 C10.9437852,19.0929925 10.1602835,18.3094908 9.19378522,18.3094908 C8.22728691,18.3094908 7.44378522,19.0929925 7.44378522,20.0594908 C7.44378522,21.0259891 8.22728691,21.8094908 9.19378522,21.8094908 Z M9.19378522,20.8094908 C8.77957165,20.8094908 8.44378522,20.4737044 8.44378522,20.0594908 C8.44378522,19.6452772 8.77957165,19.3094908 9.19378522,19.3094908 C9.60799878,19.3094908 9.94378522,19.6452772 9.94378522,20.0594908 C9.94378522,20.4737044 9.60799878,20.8094908 9.19378522,20.8094908 Z" id="Oval"></path>
  113.                                                     <path d="M18.1937852,21.8094908 C19.1602835,21.8094908 19.9437852,21.0259891 19.9437852,20.0594908 C19.9437852,19.0929925 19.1602835,18.3094908 18.1937852,18.3094908 C17.2272869,18.3094908 16.4437852,19.0929925 16.4437852,20.0594908 C16.4437852,21.0259891 17.2272869,21.8094908 18.1937852,21.8094908 Z M18.1937852,20.8094908 C17.7795717,20.8094908 17.4437852,20.4737044 17.4437852,20.0594908 C17.4437852,19.6452772 17.7795717,19.3094908 18.1937852,19.3094908 C18.6079988,19.3094908 18.9437852,19.6452772 18.9437852,20.0594908 C18.9437852,20.4737044 18.6079988,20.8094908 18.1937852,20.8094908 Z" id="Oval-Copy-3"></path>
  114.                                                 </g>
  115.                                             </g>
  116.                                         </g>
  117.                                     </g>
  118.                                 </g>
  119.                             </svg>
  120.                         </span>
  121.                     </button>
  122.                 </form>
  123.                 </div>
  124.             </div>
  125.         </div>
  126.     </div>
  127.     <div class="sticky-product-footer d-md-none">
  128.         <div class="sticky-product-footer-inner d-flex justify-content-between align-items-center">
  130.             <div class="col-lg-2 p-0">
  131.                 {% sw_include '@Storefront/storefront/component/product/card/price-taxes.html.twig' with {
  132.                     product: page.product
  133.                 } %}
  134.                 <br>
  135.                 {% sw_include '@Storefront/storefront/page/product-detail/buy-widget-price.html.twig' with {
  136.                     product: page.product
  137.                 } %}
  138.             </div>
  139.             <div class="d-md-none">
  140.                 <form
  141.                 class="show-form-loader show-form-loader-buy-btn"
  142.                 action="{{ path('frontend.checkout.line-item.add') }}"
  143.                 method="post"
  144.                 data-add-to-cart="true"
  145.                 class="buy-widget">
  146.                     {{ sw_csrf('frontend.checkout.line-item.add') }}
  148.                     <input type="hidden"
  149.                             name="redirectTo"
  150.                             value="frontend.detail.page">
  152.                     <input type="hidden"
  153.                             name="redirectParameters"
  154.                             data-redirect-parameters="true"
  155.                             value='{"productId": "{{ page.product.id }}"}'>
  156.                     <input type="hidden"
  157.                             name="lineItems[{{ page.product.id }}][id]"
  158.                             value="{{ page.product.id }}">
  159.                     <input type="hidden"
  160.                             name="lineItems[{{ page.product.id }}][type]"
  161.                             value="product">
  162.                     <input type="hidden"
  163.                             name="lineItems[{{ page.product.id }}][referencedId]"
  164.                             value="{{ page.product.id }}">
  165.                     <input type="hidden"
  166.                             name="lineItems[{{ page.product.id }}][stackable]"
  167.                             value="1">
  168.                     <input type="hidden"
  169.                             name="lineItems[{{ page.product.id }}][removable]"
  170.                             value="1">
  171.                     <input type="hidden"
  172.                             name="product-name"
  173.                             value="{{ page.product.translated.name }}">
  174.                     <input type="hidden"
  175.                             name="brand-name"
  176.                             value="{{ page.product.manufacturer.getName() }}">
  178.                     <button class="btn btn-block btn-buy font-weight-bold w-100 justify-content-center justify-content-md-around mb-1 sticky-footer-btn-buy" title="Warenkorb">
  179.                         <span class="lak icon icon-warenkorb icon-sm">
  180.                             <svg width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  181.                                 <g id="Startseite" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  182.                                     <g id="Startseite-Lang-Copy-9" transform="translate(-1282.000000, -61.000000)" fill="#9B9B9B" fill-rule="nonzero">
  183.                                         <g id="Group-41">
  184.                                             <g id="Group-5" transform="translate(1282.000000, 61.000000)">
  185.                                                 <g id="Group-36" transform="translate(0.500000, 0.500000)">
  186.                                                     <path d="M0.5,1 L2.83418038,1 C3.07711701,1 3.28489881,1.17462161 3.32671697,1.41393197 L5.83329879,15.7582041 C5.95875326,16.4761352 6.58209867,17 7.31090857,17 L18.5526336,17 C18.828776,17 19.0526336,16.7761424 19.0526336,16.5 C19.0526336,16.2238576 18.828776,16 18.5526336,16 L7.31090857,16 C7.06797193,16 6.86019013,15.8253784 6.81837197,15.586068 L4.31179015,1.24179591 C4.18633568,0.523864821 3.56299027,0 2.83418038,0 L0.5,0 C0.223857625,0 1.02318154e-12,0.223857625 1.02318154e-12,0.5 C1.02318154e-12,0.776142375 0.223857625,1 0.5,1 Z" id="Path-6"></path>
  187.                                                     <path d="M7.10477473,3.78963344 L20.9464503,3.78963344 C21.2225927,3.78963344 21.4464503,4.01349107 21.4464503,4.28963344 C21.4464503,4.3390493 21.4391247,4.38819219 21.4247125,4.43545967 L19.2903526,11.4354597 C19.2261971,11.6458689 19.0320631,11.7896334 18.8120904,11.7896334 L8.43673944,11.7896334 C8.16059707,11.7896334 7.93673944,12.0134911 7.93673944,12.2896334 C7.93673944,12.5657758 8.16059707,12.7896334 8.43673944,12.7896334 L18.8120904,12.7896334 C19.4720085,12.7896334 20.0544103,12.3583398 20.246877,11.7271121 L22.3812368,4.72711212 C22.4244736,4.58530969 22.4464503,4.43788103 22.4464503,4.28963344 C22.4464503,3.46120632 21.7748774,2.78963344 20.9464503,2.78963344 L7.10477473,2.78963344 C6.82863235,2.78963344 6.60477473,3.01349107 6.60477473,3.28963344 C6.60477473,3.56577582 6.82863235,3.78963344 7.10477473,3.78963344 Z" id="Path-7"></path>
  188.                                                     <path d="M9.19378522,21.8094908 C10.1602835,21.8094908 10.9437852,21.0259891 10.9437852,20.0594908 C10.9437852,19.0929925 10.1602835,18.3094908 9.19378522,18.3094908 C8.22728691,18.3094908 7.44378522,19.0929925 7.44378522,20.0594908 C7.44378522,21.0259891 8.22728691,21.8094908 9.19378522,21.8094908 Z M9.19378522,20.8094908 C8.77957165,20.8094908 8.44378522,20.4737044 8.44378522,20.0594908 C8.44378522,19.6452772 8.77957165,19.3094908 9.19378522,19.3094908 C9.60799878,19.3094908 9.94378522,19.6452772 9.94378522,20.0594908 C9.94378522,20.4737044 9.60799878,20.8094908 9.19378522,20.8094908 Z" id="Oval"></path>
  189.                                                     <path d="M18.1937852,21.8094908 C19.1602835,21.8094908 19.9437852,21.0259891 19.9437852,20.0594908 C19.9437852,19.0929925 19.1602835,18.3094908 18.1937852,18.3094908 C17.2272869,18.3094908 16.4437852,19.0929925 16.4437852,20.0594908 C16.4437852,21.0259891 17.2272869,21.8094908 18.1937852,21.8094908 Z M18.1937852,20.8094908 C17.7795717,20.8094908 17.4437852,20.4737044 17.4437852,20.0594908 C17.4437852,19.6452772 17.7795717,19.3094908 18.1937852,19.3094908 C18.6079988,19.3094908 18.9437852,19.6452772 18.9437852,20.0594908 C18.9437852,20.4737044 18.6079988,20.8094908 18.1937852,20.8094908 Z" id="Oval-Copy-3"></path>
  190.                                                 </g>
  191.                                             </g>
  192.                                         </g>
  193.                                     </g>
  194.                                 </g>
  195.                             </svg>
  196.                         </span>
  197.                     </button>
  198.                 </form>
  199.             </div>
  200.         </div>
  201.     </div>
  202.     
  203. {% endblock %}
  205. {% block base_content %}
  206.     {% set product = page.product %}
  207.     {% set device = app.session.get('deviceType') %}
  209.     {% block page_product_detail %}
  210.         <div class="product-detail" itemscope itemtype="https://schema.org/Product">
  211.             {% block page_product_detail_inner %}
  212.                 {% block page_product_detail_content %}
  213.                     <div class="product-detail-content">
  214.                         <div class="sw-clarity" data-action="set" data-params='[[ "pageType", "product" ]]'></div>
  215.                         {% set mediaItems = page.product.media.media %}
  217.                         <div class="row product-detail__box-container">
  218.                             {% block page_product_detail_headline %}
  219.                                 <button class="product-detail__print-btn d-none d-lg-block no-print" onclick="window.print()">
  220.                                     {% sw_icon 'drucken' style {'pack': 'grimmtheme', 'namespace': 'GrimmTheme', 'size': 'sm'} %}
  221.                                     {{ "detail.print"|trans|sw_sanitize }}
  222.                                 </button>
  223.                                 <div class="col-12 row align-items-center product-detail-headline">
  224.                                     {% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %}
  225.                                 </div>
  226.                             {% endblock %}
  228.                             {% block page_product_detail_media %}
  229.                                 <div class="col-lg-7 product-detail__first-block">
  230.                                     <div class="customer-switch__container d-md-none">
  231.                                         <nav class="row no-gutters top-bar-nav align-items-center">
  232.                                             <div id="top-bar-nav__item1" class="custom-control custom-switch">
  233.                                                 <label for="customSwitch1" class="top-bar-nav__label control-label label-b2b">{{ "header.accountType.business"|trans|sw_sanitize }}</label>
  234.                                                 <input type="checkbox" class="custom-control-input" id="customSwitch1" data-switch-tax {% if context.taxState is same as('gross') %}checked="checked"{% endif %}>
  235.                                                 <label for="customSwitch1" class="custom-control-label label-b2c">{{ "header.accountType.private"|trans|sw_sanitize }}</label>
  236.                                             </div>
  237.                                         </nav>
  238.                                     </div>
  240.                                     <div class="product-detail-media">
  241.                                         {% if page.product.media %}
  242.                                             {% sw_include '@Storefront/storefront/element/cms-element-image-gallery.html.twig' with {
  243.                                                 'mediaItems': mediaItems,
  244.                                                 'zoom': false,
  245.                                                 'zoomModal': true,
  246.                                                 'displayMode': 'contain',
  247.                                                 'gutter': 5,
  248.                                                 'minHeight': '430px',
  249.                                                 'navigationArrows': 'inside',
  250.                                                 'navigationDots': 'outside',
  251.                                                 'galleryPosition': 'left',
  252.                                                 'isProduct': true,
  253.                                                 'fallbackImageTitle': page.product.translated.name,
  254.                                                 'startIndexThumbnails': 1,
  255.                                                 'startIndexSlider': 1
  256.                                             } %}
  257.                                         {% endif %}
  258.                                     </div>
  259.                                     {# SD-5192: client wanted it this way #}
  260.                                     {# desktop #}
  262.                                 </div>
  263.                             {% endblock %}
  265.                             {% block page_product_detail_main %}
  266.                                 <div class="col-lg-5 product-detail-main">
  267.                                     <div class="customer-switch__container d-none d-lg-block">
  268.                                         <nav class="row no-gutters top-bar-nav align-items-center">
  269.                                             <div id="top-bar-nav__item1" class="custom-control custom-switch">
  270.                                                 <label for="customSwitch1" class="top-bar-nav__label control-label label-b2b">{{ "header.accountType.business"|trans|sw_sanitize }}</label>
  271.                                                 <input type="checkbox" class="custom-control-input" id="customSwitch1" data-switch-tax {% if context.taxState is same as('gross') %}checked="checked"{% endif %}>
  272.                                                 <label for="customSwitch1" class="custom-control-label label-b2c">{{ "header.accountType.private"|trans|sw_sanitize }}</label>
  273.                                             </div>
  274.                                         </nav>
  275.                                     </div>
  276.                                     {% block page_product_detail_buy %}
  277.                                         <div class="product-detail-buy__container">
  278.                                             {% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
  279.                                             {# {% sw_include '@Storefront/storefront/page/product-detail/share-modal.html.twig' %} #}
  280.                                             
  282.                                             {# BREITE LÄNGE WINDOW #}
  283.                                             {% if page.product.parentId and page.configuratorSettings|length > 0 %}
  284.                                                 <div class="product-detail-configurator-container test">
  285.                                                     {% sw_include '@Storefront/storefront/page/product-detail/configurator_dropdown.html.twig' %}
  286.                                                 </div>
  287.                                             {% endif %}
  288.                                             
  291.                                             
  293.                                             {# ZUBEHÖR #}
  294.                                             {% if not isMobile %}
  295.                                                 <div class="product-detail-tabs__cross-selling">
  296.                                                     {# moved from bottom where now clerk crossselling will appear #}
  297.                                                     {% if page.crossSellings|length > 0 and page.crossSellings|first.total > 0 %}
  298.                                                             <div class="product-detail-tabs {% if isMobile %}product-detail-tabs--mobile{% endif %}">
  299.                                                                 {% if isMobile %}
  300.                                                                     {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/tabs-mobile.html.twig' with { 
  301.                                                                         crossSellings: page.crossSellings,
  302.                                                                         onlyShowFew: true
  303.                                                                     } %}
  304.                                                                 {% else %}
  306.                                                                     {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig' with {
  307.                                                                         crossSellings: page.crossSellings,
  308.                                                                         onlyShowFew: true
  309.                                                                     } %}
  311.                                                                     {# {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/horizontal-tabs.html.twig' with {
  312.                                                                         crossSellings: page.crossSellings
  313.                                                                     } %}
  315.                                                                     {% for item in page.crossSellings %}
  316.                                                                         {% set id = item.crossSelling.id %}
  317.                                                                         {% if item.crossSelling.active and item.getProducts().elements %}
  319.                                                                             {% set config = {
  320.                                                                                         'title': {
  321.                                                                                             'value': item.crossSelling.name
  322.                                                                                         },
  323.                                                                                         'border': {
  324.                                                                                             'value': false
  325.                                                                                         },
  326.                                                                                         'rotate': {
  327.                                                                                             'value': false
  328.                                                                                         },
  329.                                                                                         'products': {
  330.                                                                                             'value': item.getProducts()
  331.                                                                                         },
  332.                                                                                         'boxLayout': {
  333.                                                                                             'value': 'standard'
  334.                                                                                         },
  335.                                                                                         'elMinWidth': {
  336.                                                                                             'value': '150px'
  337.                                                                                         },
  338.                                                                                         'navigation': {
  339.                                                                                             'value': true
  340.                                                                                         },
  341.                                                                                         'displayMode': {
  342.                                                                                             'value': 'minimal'
  343.                                                                                         },
  344.                                                                                         'verticalAlign': {
  345.                                                                                             'value': 'top'
  346.                                                                                         },
  347.                                                                                     } %}
  349.                                                                         {% sw_include "@Storefront/storefront/element/cms-element-product-slider.html.twig" with {
  350.                                                                                         sliderConfig: config,
  351.                                                                                         element: {
  352.                                                                                             'data': {
  353.                                                                                                 'products': {
  354.                                                                                                     elements: item.getProducts()
  355.                                                                                                 }
  356.                                                                                             },
  357.                                                                                             type: 'product-slider'
  358.                                                                                         }
  359.                                                                                     } %}
  360.                                                                             {% endif %} #}
  363.                                                                 {% endif %}
  364.                                                             </div>
  365.                                                     {% endif %}
  366.                                                     {# experts go here #}
  367.                                                 </div>
  369.                                                 
  370.                                             {% endif %}
  372.                                             
  373.                                             {# GARANTIE #}
  374.                                             <div class="product-detail-guarantee-container">
  375.                                                 <a class="monthly-installment-btn d-inline-block mb-2 col-12" href="/garantie-reklamation.html" target="_blank">
  376.                                                    {% sw_icon 'info' %}  <span class="guarantee-title">{{ "detail.guarantee.title"|trans|sw_sanitize }}</span>
  377.                                                 </a>
  378.                                             </div>
  380.                                             {# LEASING #}
  381.                                             {% set requestOnly = page.product.translated.customFields.grimm_customfields_productRequest_only %}
  382.                                             {% if (page.product.calculatedPrice.unitPrice >= 500) and (context.taxState == "net") and (requestOnly == false) %}
  383.                                                 <div class="product-detail-leasing-container">
  384.                                                         {% sw_include '@Storefront/solution360/grimm/leasing/leasing-modal.html.twig' 
  385.                                                         with {
  386.                                                             'price': page.product.calculatedPrice.unitPrice
  387.                                                         }
  388.                                                         %}
  389.                                                 </div>
  390.                                             {% endif %}
  392.                                             {% set additionalDeliveryInfoSpecific = product.translated.customFields.grimm_customFields_additionalDeliveryInfo %}
  393.                                             {% set additionalDeliveryInfoGeneral = "product.additionalDeliveryInfo"|trans|sw_sanitize %}
  395.                                             {% if additionalDeliveryInfoSpecific %}
  396.                                                 <div class="product-detail-buy additional-delivery-info buy-box-style mb-3">
  397.                                                     {{ additionalDeliveryInfoSpecific|raw }}
  398.                                                 </div>
  399.                                             {% elseif additionalDeliveryInfoGeneral != "" %}
  400.                                                 <div class="product-detail-buy additional-delivery-info buy-box-style mb-3">
  401.                                                     {{ additionalDeliveryInfoGeneral }}
  402.                                                 </div>
  403.                                             {% endif %}
  404.                                         </div>
  405.                                     {% endblock %}
  407.                                     {# SD-5192: client wanted it this way #}
  409.                                 </div>
  410.                                 <div class="col-lg-12 product-detail-tabs__cross-selling">
  411.                                     {% block page_product_detail_cross_selling %}
  412.                                     <a id="productRelatedArticles" style="scroll-margin-top: 250px"></a>
  413.                                         {# original crossselling was here #}
  414.                                         {# copied from S360ProductRecommendations plugin #}
  415.                                         {% if config("S360ProductRecommendations.config") and config("S360ProductRecommendations.config.active") %}
  416.                                             {% set recommendationProducts = page.getExtension('s360ProductRecommendations') %}
  417.                                             {% if recommendationProducts.products.elements %}
  418.                                                 {% set sliderConfig = {
  419.                                                     "boxLayout": {
  420.                                                         "value": "minimal"
  421.                                                     },
  422.                                                     "navigation": {
  423.                                                         "value": true
  424.                                                     },
  425.                                                     "title": {
  426.                                                         "value": "detail.productRecommendations"|trans
  427.                                                     }
  428.                                                 } %}
  429.                                                 {% sw_include '@Storefront/storefront/element/cms-element-s360-adjustable-productslider.html.twig'
  430.                                                     with {
  431.                                                         "element": {
  432.                                                             "type": "s360-adjustable-productslider",
  433.                                                             "data": recommendationProducts
  434.                                                         },
  435.                                                         "sliderConfig": sliderConfig
  436.                                                     }
  437.                                                 %}
  438.                                             {% endif %}
  439.                                         {% endif %}
  440.                                         {# clerk plugin has to be copied here, parent cannot be used because crossselling appears elsewhere on page #}
  441.                                         {% if config('Clerkio.config.productRecommendationsEnabled') == 'true' %}
  442.                                             {% set contents = config('Clerkio.config.productRecommendationsContent') | split(',') %}
  444.                                             <span class="clerk" data-template="@{{ contents[0] | replace({' ': ''}) }}" data-products='["{{ page.product.parentId ? page.product.parentId|upper : page.product.id|upper }}"]'></span>
  446.                                         {% endif %}
  447.                                     {% endblock %}
  448.                                 </div>
  449.                                 <div class="col-lg-7 product-detail-tabs__wrapper pt-3">
  450.                                     {% if not isMobile %}
  451.                                         <div class="">
  452.                                             <div class="product-detail-tabs">
  454.                                             {% if page.product.translated.description %}
  455.                                                 <div>
  456.                                                     <a id="productGeneralDescription" style="scroll-margin-top: 250px"></a>
  457.                                                     <h2 class="font-weight-bold">{{ "detail.tabsDescription"|trans|sw_sanitize }}</h2>
  458.                                                     {% sw_include '@Storefront/storefront/page/product-detail/description.html.twig' %}
  459.                                                 </div>
  460.                                             {% endif %}
  461.                                             {% if page.product.sortedProperties|length > 0 or page.product.manufacturerNumber != "" or page.product.ean != "" %}
  462.                                                 <div>
  463.                                                     <a id="productGeneralProperties" style="scroll-margin-top: 250px"></a>
  464.                                                     <h2 class="font-weight-bold">{{ "detail.tabsProperties"|trans|sw_sanitize }}</h2>
  465.                                                     {% sw_include '@Storefront/storefront/page/product-detail/properties.html.twig' %}
  466.                                                 </div>
  467.                                             {% endif %}
  468.                                             
  469.                                             {% if product.customFields and product.customFields.downloads and product.customFields.downloads|length %}
  470.                                                 <div>
  471.                                                     <a id="productGeneralDownloads" style="scroll-margin-top: 250px"></a>
  472.                                                     <h2 class="font-weight-bold">{{ "detail.tabsDownloads"|trans|sw_sanitize }}</h2>
  473.                                                     {% sw_include '@Storefront/storefront/page/product-detail/downloads.html.twig' %}
  474.                                                 </div>
  475.                                             {% endif %}
  478.                                                 {# {% sw_include '@Storefront/storefront/page/product-detail/tabs.html.twig' %} #}
  479.                                             </div>
  480.                                         </div>
  481.                                     {% endif %}
  482.                                 </div>
  483.                                 <div class="col-lg-5 product-detail-info pt-3">
  485.                                     <div class="mb-3 card reference-card">
  486.                                         <div class="card-header">
  487.                                             <div class="card-title">Unsere Referenzen</div>
  488.                                         </div>
  489.                                         <div class="card-body">
  490.                                             <div class="product-slider-controls-container">
  491.                                                 <div class="base-slider-controls" data-base-slider-controls="true" aria-label="Carousel Navigation" tabindex="0">
  492.                                                 <button id="prevButton" class="base-slider-controls-prev product-slider-controls-prev" aria-controls="tns2" tabindex="-1" data-controls="prev">{% sw_icon 'arrow-head-left' %}</button>
  493.                                                 <button id="nextButton" class="base-slider-controls-next product-slider-controls-next" aria-controls="tns2" tabindex="-1" data-controls="next">{% sw_icon 'arrow-head-right' %}</button>
  494.                                                 </div>
  495.                                             </div>
  496.                                             <div id="slider-container">
  497.                                                 <div id="image-slider">
  498.                                                     <div class="slide"><img src="/media/a1/72/75/1682430873/Hochschule-Fresenius.jpg" alt="Slide 1"></div>
  499.                                                     <div class="slide"><img src="/media/70/b0/17/1682430618/Konrad-Adenauer-Stiftung.jpg" alt="Slide 1"></div>
  500.                                                     <div class="slide"><img src="/media/3b/87/97/1633615706/Aviation-Catering.jpg" alt="Slide 2"></div>
  501.                                                     <div class="slide"><img src="/media/48/1f/c1/1633615706/Grand-Hyatt.jpg" alt="Slide 3"></div>
  502.                                                     <div class="slide"><img src="/media/b4/30/1c/1628156382/al-dente-group.jpg" alt="Slide 4"></div>
  503.                                                     <div class="slide"><img src="/media/77/11/2f/1633615706/Florida-Eis.jpg" alt="Slide 5"></div>
  504.                                                     <div class="slide"><img src="/media/47/ee/bf/1682430647/Heisser-Wolf.jpg" alt="Slide 6"></div>
  505.                                                     <div class="slide"><img src="/media/a1/72/75/1682430873/Hochschule-Fresenius.jpg" alt="Slide 7"></div>
  506.                                                     <div class="slide"><img src="/media/g0/4d/e3/1682430659/Upstall-Kantine.jpg" alt="Slide 8"></div>
  507.                                                     <div class="slide"><img src="/media/aa/11/51/1633615706/Regent-Berlin.jpg" alt="Slide 9"></div>
  508.                                                     <div class="slide"><img src="/media/5a/52/a1/1628156383/Wonder-Waffel.jpg" alt="Slide 10"></div>
  509.                                                     <div class="slide"><img src="/media/16/0a/a3/1628156382/Caritas.jpg" alt="Slide 11"></div>
  510.                                                     <div class="slide"><img src="/media/1d/1c/f8/1633615822/Tim-Raue-Logo.jpg" alt="Slide 12"></div>
  511.                                                     <!-- Add more slides as needed -->
  512.                                                 </div>
  513.                                             </div>
  514.                                         </div>
  515.                                     </div>
  516.                                     <script>
  517.                                         const _slider = document.getElementById('image-slider');
  518.                                         let _slideIndex = 0;
  520.                                         function showSlide(index) {
  521.                                             const translateValue = -index * (100 / 3) + '%';
  522.                                             _slider.style.transform = 'translateX(' + translateValue + ')';
  523.                                         }
  525.                                         function nextSlide() {
  526.                                             _slideIndex = (_slideIndex + 1) % (_slider.children.length - 2);
  527.                                             showSlide(_slideIndex);
  528.                                         }
  530.                                         function prevSlide() {
  531.                                             _slideIndex = (_slideIndex - 1 + (_slider.children.length - 2)) % (_slider.children.length - 2);
  532.                                             showSlide(_slideIndex);
  533.                                         }
  535.                                         // Set interval for automatic sliding (optional)
  536.                                         // setInterval(nextSlide, 3000); // Change slide every 3 seconds
  538.                                         // You can also use buttons or other events to trigger next/previous slides
  539.                                         // For example, you can use buttons like:
  540.                                         console.log('AAA');
  541.                                         document.getElementById('nextButton').addEventListener('click', nextSlide);
  542.                                         document.getElementById('prevButton').addEventListener('click', prevSlide);
  543.                                     </script>
  545.                                     {# experts go here #}
  546.                                     {% set config = config('S360Experts.config') %}
  547.                                     {% if config.showOnDetail and page.product.hasExtension('s360_experts') %}
  548.                                     {# same template can be used for category and detail page #}
  549.                                         {% sw_include '@Storefront/solution360/s360experts/product-detail.html.twig' %}
  550.                                     {% endif %}
  553.                                     {# {% sw_include "@Storefront/storefront/element/cms-element-image-slider-s360.html.twig" with {
  554.                                         element: {
  555.                                             'config': {
  556.                                                 'sliderItems': {
  557.                                                     value: ["https://picsum.photos/200/300","https://picsum.photos/200/300"]
  558.                                                 }
  559.                                             },
  560.                                         }
  561.                                     } only %} #}
  562.                                                 
  564.                                 </div>
  565.                                 {# SD-5192: client wanted it this way #}
  567.                                 <div class="col-lg-12 product-detail-tabs__cross-selling interest">
  568.                                         {# clerk plugin has to be copied here, parent cannot be used because crossselling appears elsewhere on page #}
  569.                                         {% if config('Clerkio.config.productRecommendationsEnabled') == 'true' %}
  570.                                             {% set contents = config('Clerkio.config.productRecommendationsContent') | split(',') %}
  571.                                             <span class="clerk" data-template="@{{ contents[1] | replace({' ': ''}) }}" data-products='["{{ page.product.parentId ? page.product.parentId|upper : page.product.id|upper }}"]'></span>
  572.                                         {% endif %}
  573.                                 </div>
  575.                                 {% if isMobile %}
  576.                                     <div class="col-12 col-lg-7 product-detail-tabs__wrapper">
  577.                                         <div class="product-detail-tabs product-detail-tabs--mobile">
  578.                                             {% sw_include '@Storefront/storefront/page/product-detail/tabs-mobile.html.twig' %}
  579.                                         </div>
  580.                                     </div>
  582.                                     <div class="col-12 product-detail-tabs__cross-selling">
  583.                                         {# moved from bottom where now clerk crossselling will appear #}
  584.                                         {% if page.crossSellings|length > 0 and page.crossSellings|first.total > 0 %}
  585.                                                 <div class="product-detail-tabs {% if isMobile %}product-detail-tabs--mobile{% endif %}">
  586.                                                     {% if isMobile %}
  587.                                                         {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/tabs-mobile.html.twig' with { crossSellings: page.crossSellings
  588.                                                         } %}
  589.                                                     {% else %}
  590.                                                         {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig' with {
  591.                                                             crossSellings: page.crossSellings
  592.                                                         } %}
  593.                                                     {% endif %}
  594.                                                 </div>
  595.                                         {% endif %}
  596.                                     </div>
  597.                                 {% endif %}
  601.                             {% endblock %}
  602.                         </div>
  603.                     </div>
  604.                 {% endblock %}
  608.                 {% block page_product_detail_tabs %}
  609.                 {% endblock %}
  612.             {% endblock %}
  613.         </div>
  614.     {% endblock %}
  616.     {# SD-5577 / if Klaviyo plugin is active, manually copied content due to
  617.     inheritance issues for this plugin #}
  618.     {% if page.hasExtension('klaviyoIntegrationPluginExtension') %}
  619.         {% set extensionData =  page.getExtension('klaviyoIntegrationPluginExtension') %}
  620.         {% set klaviyoComponentOptions = {
  621.                 'productInfo': extensionData.productInfo
  622.             }
  623.         %}
  625.         <div style="display: none;" data-klaviyo-product-viewed-event-tracking-component=""
  626.             data-klaviyo-product-viewed-event-tracking-component-options="{{ klaviyoComponentOptions|json_encode }}"></div>
  627.     {% endif %}
  628. {% endblock %}