templates/includes/areas/detail-sidebar.html.twig line 1

Open in your IDE?
  1. {% set isDecor = isDecor|default(false) %}
  2. {% set isSurface = isSurface|default(false) %}
  3. {% set content = content|default(null) %}
  4. {% set contactButton = contactButton|default(false) %}
  5. {% set cartButton = cartButton|default(false) %}
  6. {% set event = event ?? '' %}
  7. {% set showCountryDisclaimer = false %}
  8. {% set characteristics = characteristics is defined ? characteristics : null %}
  10. <div class="js-affix__placeholder">
  11.     <section class="box-details js-affix" data-affix-offset="159">
  12.             <div class="box-details__box">
  13.                 <h4 class="box-details__title mb-0">{{ title }}</h4>
  14.                 <div class="text-gray-650 fs-sm mb-4">{{ subtitle }}</div>
  15.                 {% if formats|default(false) %}
  16.                     <b>{{ 'detail.formats'|trans }}</b>
  17.                     <ul>
  18.                         {% for format in formats %}
  19.                             <li>{{ format }}</li>
  20.                         {% endfor %}
  21.                     </ul>
  22.                 {% endif %}
  24.                 {% if isDecor %}
  25.                     {% if decor.direction %}
  26.                         {{ ('decor.direction.' ~ decor.direction) | trans }}<br>
  27.                     {% endif %}
  28.                     {% if decor.surfacesInterior is not empty %}
  29.                         {{ 'decor.standard.surfaces.interior' | trans }}
  30.                         {{ decor.surfacesInterior | map(surface => "#{surface.title}") | join(', ') }}<br>
  31.                     {% endif %}
  32.                     {% if decor.surfacesExterior is not empty %}
  33.                         {{ 'decor.standard.surfaces.exterior' | trans }}
  34.                         {{ decor.surfacesExterior | map(surface => "#{surface.title}") | join(', ') }}<br>
  35.                     {% endif %}
  36.                     {% if decor.moreSurfacesInterior is not empty %}
  37.                         {{ 'decor.more.surfaces.interior' | trans }}
  38.                         {{ decor.moreSurfacesInterior | map(surface => "#{surface.title}") | join(', ') }}<br>
  39.                     {% endif %}
  40.                     {% if decor.moreSurfacesExterior is not empty %}
  41.                         {{ 'decor.more.surfaces.exterior' | trans }}
  42.                         {{ decor.moreSurfacesExterior | map(surface => "#{surface.title}") | join(', ') }}<br>
  43.                     {% endif %}
  44.                     {% if decor.ncsCode or decor.ralNr or decor.colorCode %}
  45.                         <div class="mb-4">
  46.                             <b>{{ 'detail-sidebar.colors'|trans }}</b>
  47.                             {% if decor.ncsCode %}
  48.                                 <br>{{ 'detail-decor.NCS' | trans }} {{ decor.ncsCode }}
  49.                             {% endif %}
  50.                             {% if decor.ralNr %}
  51.                                 <br>{{ 'detail-decor.RAL' | trans }} {{ decor.ralNr }}
  52.                             {% endif %}
  53.                             {% if decor.colorCode %}
  54.                                 <br>{{ 'detail-decor.CMYK' | trans }} {{ decor.colorCode }}
  55.                             {% endif %}
  56.                             {% if  decor.ncsCode and decor.ralNr and decor.colorCode %}
  57.                                 {# TK #}
  58.                                 <br> {{ 'detail-decor.NCS-RAL-CMYK' | trans }}
  59.                             {% endif %}
  60.                         </div>
  61.                     {% endif %}
  62.                 {% endif %}
  63.                 {% if content %}
  64.                     <div class="mb-4">
  65.                         {{ content|raw }}
  66.                     </div>
  67.                 {% endif %}
  69.                 {% if not isDecor and not isSurface %}
  70.                     {% if featureItems %}
  71.                         <ul class="list-unstyled row gy-3 vertical-gutter mt-md-3 mt-2">
  72.                             {% for item in featureItems %}
  73.                                 <li class="col-6">
  74.                                     {{ include('includes/utils/icon-text.html.twig', {
  75.                                         item: item,
  76.                                     }) }}
  77.                                 </li>
  78.                             {% endfor %}
  79.                         </ul>
  80.                     {% endif %}
  81.                 {% endif %}
  83.                 {% if deliveryProgramLink %}
  84.                     <div class="mb-4">
  85.                         <a href="{{ deliveryProgramLink }}" class="btn btn-outline-primary btn-pdf w-100 mt-4"><span
  86.                                 class="icon icon-info me-2"
  87.                                 aria-hidden="true"></span> {{ 'product.supply-range-button'|trans }}
  88.                         </a>
  89.                     </div>
  90.                 {% endif %}
  92.                 {% if isDecor and relatedSurfaces is not empty %}
  93.                     {% set showCountryDisclaimer = true %}
  95.                     <div class="mb-4 js-show-all">
  96.                         <b>{{ 'detail-sidebar.Surfaces' |trans }}</b>
  98.                         <div class="d-flex flex-wrap gap-2 show-all__content js-show-all__content" data-show-all-max-height="76" data-show-all-max-height-mobile="56">
  99.                             {% for surface in relatedSurfaces %}
  100.                                 <a href="{{ linkGenerator(surface) }}"
  101.                                    class="btn btn-outline-primary px-2 py-0">{{ surface.title }}</a>
  102.                             {% endfor %}
  103.                         </div>
  105.                         <button type="button" class="btn-no-styling show-all__btn js-show-all__btn fst-italic text-gray-650 d-none mt-1">
  106.                             <span class="show-all__btn-open">{{ 'detail-sidebar.show all' | trans }} ({{ relatedSurfaces | length }})</span>
  107.                             <span class="show-all__btn-close">{{ 'detail-sidebar.show less' | trans }}</span>
  108.                         </button>
  110.                     </div>
  111.                 {% endif %}
  113.                 {% if isSurface and relatedDecors is not empty %}
  114.                     {% set showCountryDisclaimer = true %}
  116.                     <div class="mb-4 js-show-all">
  117.                         <b>{{ 'detail-sidebar.Decors' |trans }}</b>
  119.                         <div class="d-flex flex-wrap gap-2 show-all__content js-show-all__content" data-show-all-max-height="76" data-show-all-max-height-mobile="56">
  120.                             {% for decor in relatedDecors %}
  121.                                 <a href="{{ linkGenerator(decor) }}"
  122.                                    class="btn btn-outline-primary px-2 py-0">{{ decor.decorNr }} {{ decor.webTitle ?? decor.title }}</a>
  123.                             {% endfor %}
  124.                         </div>
  126.                         <button type="button" class="btn-no-styling show-all__btn js-show-all__btn fst-italic text-gray-650 d-none mt-1">
  127.                             <span class="show-all__btn-open">{{ 'detail-sidebar.show all' | trans }} ({{ relatedDecors | length }})</span>
  128.                             <span class="show-all__btn-close">{{ 'detail-sidebar.show less' | trans }}</span>
  129.                         </button>
  131.                     </div>
  132.                 {% endif %}
  134.                 {% if relatedMaterialGroups is not empty%}
  135.                     {% set showCountryDisclaimer = true %}
  137.                     <div class="mb-4 js-show-all">
  138.                         <b>{{ 'detail-sidebar.materialGroups'|trans }}</b>
  140.                         <div class="d-flex flex-wrap gap-2 show-all__content js-show-all__content" data-show-all-max-height="76" data-show-all-max-height-mobile="56">
  141.                             {% for materialGroup in relatedMaterialGroups %}
  143.                                 {% if materialGroup.relatedDocument %}
  144.                                     <a href="{{ materialGroup.relatedDocument.fullPath }}"
  145.                                        class="btn btn-outline-primary px-2 py-0">{{ materialGroup.title }}</a>
  146.                                 {% else %}
  147.                                     <span
  148.                                         class="btn btn-outline-primary px-2 py-0 pe-none">{{ materialGroup.title }}</span>
  149.                                 {% endif %}
  150.                             {% endfor %}
  151.                         </div>
  153.                         <button type="button" class="btn-no-styling show-all__btn js-show-all__btn fst-italic text-gray-650 d-none mt-1">
  154.                             <span class="show-all__btn-open">{{ 'detail-sidebar.show all' | trans }} ({{ relatedMaterialGroups | length }})</span>
  155.                             <span class="show-all__btn-close">{{ 'detail-sidebar.show less' | trans }}</span>
  156.                         </button>
  158.                     </div>
  159.                 {% endif %}
  160.                 {% if showCountryDisclaimer %}
  161.                     <div class="mb-4">
  162.                         <span>{{ 'detail-sidebar.countryDisclaimer'|trans }}</span>
  163.                     </div>
  164.                 {% endif %}
  165.             </div>
  166.             <form action="/404" data-action="{{ app.request.pathInfo }}?ajax=1&update=1" class="js-cart__form"
  167.                   data-cart-one-add="true">
  168.                 <input type="hidden" name="productId" value="123">
  170.                 <div class="box-details__footer row g-0">
  171.                     <!-- Varianten für mögliche Konstellationen, je nachdem welchen Button es gibt/nicht gibt -->
  172.                     {% if contactButton and cartButton and siteConfig().contactPage %}
  173.                         <div class="col-6">
  174.                             {{ _self.contactButton(event) }}
  175.                         </div>
  176.                         <div class="col-6">
  177.                             {{ _self.cartButton() }}
  178.                         </div>
  179.                     {% elseif contactButton and siteConfig().contactPage %}
  180.                         <div class="col-12">
  181.                             {{ _self.contactButton(event) }}
  182.                         </div>
  183.                     {% elseif(cartButton) %}
  184.                         <div class="col-12">
  185.                             {{ _self.cartButton() }}
  186.                         </div>
  187.                     {% endif %}
  188.                 </div>
  189.             </form>
  191.         {% if characteristics %}
  192.             {{ include('includes/title-blocks/title-block.html.twig', {
  193.                 title: 'surface.characteristics' | trans,
  194.                 titleTag:'h2',
  195.                 titleStyle:'h3 mt-4',
  196.             }, with_context = false) }}
  197.             <ul class="list-unstyled d-flex flex-wrap gap-3">
  198.                 {% for characteristic in characteristics %}
  199.                     {% if characteristic.icon %}
  200.                         <li style="height: fit-content;">
  201.                             <span title="{{ characteristic.title }}" class="icon icon-{{ characteristic.icon }} icon-5x" aria-hidden="true"></span>
  202.                         </li>
  203.                     {% endif %}
  204.                 {% endfor %}
  205.             </ul>
  206.         {% endif %}
  207.     </section>
  208. </div>
  210. {% macro cartButton() %}
  211.     <button type="submit" class="btn btn-primary btn--no-transition w-100 btn-cart js-cart__add">
  212.         <span class="btn__text btn-cart__default">{{ 'detail-sidebar.order preview'|trans }}</span>
  214.         <span class="btn-cart__added">
  215.             <span class="btn-cart__added-icon icon icon-check" aria-label="Added" aria-hidden="true"></span>
  216.             <span class="btn-cart__added-text">{{ 'detail-sidebar.added'|trans }}</span>
  217.         </span>
  219.         {{ include('loading/loading-overlay.html.twig', {className: 'loading-overlay--centered loading-overlay--btn js-cart__loading', text: null}) }}
  220.     </button>
  221. {% endmacro %}
  223. {% macro contactButton(event) %}
  224.     <a class="btn btn-outline-primary btn--no-transition w-100 js-smoothscroll__link"
  225.        href="{{ siteConfig().contactPage }}"
  226.         {% if event == 'click_cta_infobox' %}
  227.             data-event-tracking-event="{{ event }}"
  228.             data-event-tracking-click_text="{{ 'detail-sidebar.to contactFrom'|trans }}"
  229.             data-event-tracking-click_url="{{ siteConfig().contactPage }}"
  230.         {% endif %}
  231.     ><span
  232.             class="btn__text">{{ 'detail-sidebar.to contactFrom'|trans }}</span></a>
  233. {% endmacro %}