templates/areas/keyvisual/view.html.twig line 1

Open in your IDE?
  1. {% set brandStyles = document.getProperty('brandStyles') | default('none') %}
  2. {% set slideCount = pimcore_numeric('slideCount').getData() | default(3) %}
  3. {% set autoplayDelay = pimcore_numeric('autoplay_delay').getData() | default(5000) %}
  5. {# Check if any slides are active #}
  6. {% set hasActiveSlides = false %}
  7. {% for i in 1..10 %}
  8.     {% if pimcore_checkbox('slide_active_' ~ i).isChecked() %}
  9.         {% set hasActiveSlides = true %}
  10.     {% endif %}
  11. {% endfor %}
  13. {% if hasActiveSlides %}
  14.     {# New structure with multiple slides #}
  15.     {% set slides = [] %}
  16.     {% for i in 1..10 %}
  17.         {% if pimcore_checkbox('slide_active_' ~ i).isChecked() %}
  18.             {% set currentLink = pimcore_link('content_link_' ~ i) %}
  19.             {% set slides = slides|merge([{
  20.                 desktop_image: pimcore_image('slide_image_' ~ i),
  21.                 mobile_image: pimcore_image('slide_mobile_image_' ~ i),
  22.                 headline: brandStyles == 'Mini' 
  23.                     ? pimcore_wysiwyg('content_headline_' ~ i).getData()
  24.                     : pimcore_input('content_headline_' ~ i).getData(),
  25.                 headline_color: pimcore_select('content_headline_color_' ~ i).getData() | default('text-white'),
  26.                 text: pimcore_input('content_text_' ~ i).getData(),
  27.                 text_color: pimcore_select('content_text_color_' ~ i).getData() | default('text-white'),
  28.                 link: currentLink.isEmpty() ? null : {
  29.                     'path': currentLink.getHref(),
  30.                     'text': currentLink.getText() ?: 'Mehr erfahren'
  31.                 },
  32.                 consumption_notice: {
  33.                     active: pimcore_checkbox('consumption_notice_active_' ~ i).isChecked(),
  34.                     text: pimcore_input('consumption_notice_text_' ~ i).getData(),
  35.                     color: pimcore_select('consumption_notice_color_' ~ i).getData() | default('white'),
  36.                     transparent: pimcore_checkbox('consumption_notice_transparent_' ~ i).isChecked()
  37.                 }
  38.             }]) %}
  39.         {% endif %}
  40.     {% endfor %}
  41. {% else %}
  42.     {# Legacy structure with single slide #}
  43.     {% set slides = [{
  44.         desktop_image: pimcore_image('kv-image'),
  45.         mobile_image: pimcore_image('kv-mobile-image'),
  46.         headline: brandStyles == 'Mini' 
  47.             ? pimcore_wysiwyg('kv-headline').getData()
  48.             : pimcore_input('kv-headline').getData(),
  49.         headline_color: 'text-white',
  50.         text: pimcore_input('kv-text').getData(),
  51.         text_color: 'text-white',
  52.         link: pimcore_link('kv-link').isEmpty() ? null : {
  53.             'path': pimcore_link('kv-link').getHref(),
  54.             'text': pimcore_link('kv-link').getText() ?: 'Mehr erfahren'
  55.         },
  56.         consumption_notice: {
  57.             active: pimcore_checkbox('show_consumption_notice').isChecked(),
  58.             text: pimcore_textarea('consumption_notice_text').getData(),
  59.             color: pimcore_select('consumption_notice_color').getData() | default('white'),
  60.             transparent: pimcore_checkbox('consumption_notice_transparent').isChecked()
  61.         }
  62.     }] %}
  63. {% endif %}
  65. {# Get design settings #}
  66. {% set keyvisualDesign = pimcore_select('keyvisual_design').getData() | default('fullscreen') %}
  67. {% set keyvisualMobileDesign = pimcore_select('keyvisual_mobile_design').getData() | default('inherit') %}
  68. {% set mobileDesign = keyvisualMobileDesign == 'inherit' ? keyvisualDesign : keyvisualMobileDesign %}
  69. {% set keyvisualHeight = pimcore_numeric('keyvisual_height').getData() | default(70) %}
  71. {# Check for consumption notice #}
  72. {% set hasConsumptionNotice = false %}
  73. {% for slide in slides %}
  74.     {% if slide.consumption_notice.active and slide.consumption_notice.text %}
  75.         {% set hasConsumptionNotice = true %}
  76.     {% endif %}
  77. {% endfor %}
  79. {# Get consumption notice settings #}
  80. {% set showConsumptionNotice = pimcore_checkbox('show_consumption_notice').isChecked() %}
  81. {% set consumptionNoticeText = pimcore_textarea('consumption_notice_text').getData() %}
  82. {% set consumptionNoticeColor = pimcore_select('consumption_notice_color').getData() | default('white') %}
  83. {% set consumptionNoticeTransparent = pimcore_checkbox('consumption_notice_transparent').isChecked() %}
  85. {# Add design class based on selected layout #}
  86. <div class="keyvisual keyvisual--{{ keyvisualDesign }} keyvisual-mobile--{{ mobileDesign }}
  87.     {% if slides|length > 1 %}has-multiple-slides{% endif %}
  88.     {% if hasConsumptionNotice %}has-consumption-notice{% endif %}"
  89.     {% if keyvisualDesign == 'minimal' %}style="min-height: {{ keyvisualHeight }}vh"{% endif %}>
  90.     <!-- Slider main container -->
  91.     <div class="swiper keyvisual-swiper">
  92.         <!-- Additional required wrapper -->
  93.         <div class="swiper-wrapper">
  94.             <!-- Slides -->
  95.             {% for slide in slides %}
  96.                 {% set isClickable = hasActiveSlides ? pimcore_checkbox('slide_clickable_' ~ loop.index).isChecked() and not pimcore_link('slide_link_' ~ loop.index).isEmpty() : not pimcore_link('kv-link').isEmpty() %}
  97.                 {% set showButton = hasActiveSlides ? pimcore_checkbox('show_button_' ~ loop.index).isChecked() : not pimcore_link('kv-link').isEmpty() %}
  98.                 {% set isSplitView = hasActiveSlides and pimcore_checkbox('split_view_' ~ loop.index).isChecked() %}
  99.                 {% set splitRatio = isSplitView ? pimcore_select('split_ratio_' ~ loop.index).getData() | default('50-50') : '50-50' %}
  100.                 {% set splitLeftLink = pimcore_link('split_left_link_' ~ loop.index) %}
  101.                 {% set splitRightLink = pimcore_link('split_right_link_' ~ loop.index) %}
  102.                 
  103.                 <div class="swiper-slide{% if isClickable and not isSplitView %} cursor-pointer{% endif %}{% if isSplitView %} split-view split-{{ splitRatio }}{% endif %}"
  104.                     {% if isClickable and not isSplitView %}data-href="{{ hasActiveSlides ? pimcore_link('slide_link_' ~ loop.index).getHref() : pimcore_link('kv-link').getHref() }}"{% endif %}>
  105.                     {% if isSplitView %}
  106.                         <div class="split-overlay">
  107.                             {% if not splitLeftLink.isEmpty() %}
  108.                                 <div class="split-left" data-href="{{ splitLeftLink.getHref() }}" title="Link: {{ splitLeftLink.getHref() }}">
  109.                                     <div class="split-hover-indicator"></div>
  110.                                 </div>
  111.                             {% endif %}
  112.                             {% if not splitRightLink.isEmpty() %}
  113.                                 <div class="split-right" data-href="{{ splitRightLink.getHref() }}" title="Link: {{ splitRightLink.getHref() }}">
  114.                                     <div class="split-hover-indicator"></div>
  115.                                 </div>
  116.                             {% endif %}
  117.                         </div>
  118.                     {% endif %}
  119.                     <picture>
  120.                         {% if not slide.desktop_image.isEmpty() %}
  121.                             <source media="(min-width:768px)" srcset="{{ slide.desktop_image.getSrc() }}">
  122.                         {% endif %}
  123.                         {% if not slide.mobile_image.isEmpty() %}
  124.                             <img src="{{ slide.mobile_image.getSrc() }}"
  125.                                  alt="{{ slide.mobile_image.getAlt() }}"/>
  126.                         {% else %}
  127.                             <img src="{{ slide.desktop_image.getSrc() }}" 
  128.                                  alt="{{ slide.desktop_image.getAlt() }}"/>
  129.                         {% endif %}
  130.                     </picture>
  131.                     <div class="keyvisual-inner">
  132.                         {% set slideAlignment = pimcore_select('content_text_alignment_' ~ loop.index).getData() %}
  133.                         <div class="keyvisual-inner-text {{ slideAlignment == 'inherit' ? pimcore_select('content_text_alignment').getData() | default('text-start') : slideAlignment }}">
  135.                             {% if slide.headline is not empty %}
  136.                                 <h1 class="{{ slide.headline_color }}">
  137.                                     {{ slide.headline|raw }}
  138.                                 </h1>
  139.                             {% endif %}
  140.                             {% if slide.text is not empty %}
  141.                                 <h2 class="{{ slide.text_color }}">
  142.                                     {{ slide.text }}
  143.                                 </h2>
  144.                             {% endif %}
  145.                             {% if showButton %}
  146.                                 {% if hasActiveSlides %}
  147.                                     {% set buttonLink = pimcore_link('button_link_' ~ loop.index) %}
  148.                                     {% if not buttonLink.isEmpty() %}
  149.                                         <a href="{{ buttonLink.getHref() }}" class="btn {{ pimcore_select('button_style_' ~ loop.index).getData() | default('btn-secondary') }}">
  150.                                             {{ buttonLink.getText() ?: 'Mehr erfahren' }}
  151.                                         </a>
  152.                                     {% endif %}
  153.                                 {% else %}
  154.                                     <a href="{{ pimcore_link('kv-link').getHref() }}" class="btn {{ pimcore_select('button_style').getData() | default('btn-secondary') }}">
  155.                                         {{ pimcore_link('kv-link').getText() ?: 'Mehr erfahren' }}
  156.                                     </a>
  157.                                 {% endif %}
  158.                             {% endif %}
  159.                         </div>
  160.                     </div>
  161.                     {% if slide.consumption_notice.active and slide.consumption_notice.text %}
  162.                         <div class="keyvisual-consumption-notice {% if slide.consumption_notice.transparent %}keyvisual-consumption-notice--transparent{% endif %} keyvisual-consumption-notice--{{ slide.consumption_notice.color }} keyvisual-consumption-notice--{{ keyvisualDesign }} {{ pimcore_select('consumption_notice_alignment_' ~ loop.index).getData() | default('text-center') }}">
  163.                             {{ slide.consumption_notice.text|raw }}
  164.                         </div>
  165.                     {% endif %}
  166.                 </div>
  167.             {% endfor %}
  168.         </div>
  169.         
  170.         {# Show navigation only if we have more than 1 active slide #}
  171.         {% if slides|length > 1 %}
  172.             <div class="swiper-button-prev"></div>
  173.             <div class="swiper-button-next"></div>
  174.             <div class="swiper-pagination"></div>
  175.         {% endif %}
  176.     </div>
  178.     {% if pimcore_checkbox('show_widget').isChecked() %}
  179.         <div class="keyvisual-searchbox">
  180.             <form action="/fahrzeugboerse" method="get" id="keyvisual-search-form">
  181.                 <div class="d-flex flex-column flex-md-row">
  182.                     <div class="row flex-grow-1">
  183.                         <div class="col-md-4">
  184.                             <select name="car_list_filter_form[car_type]" id="keyvis-search-car-type"
  185.                                     class="update-trigger">
  186.                                 <option value="" disabled selected hidden>Fahrzeugart</option>
  187.                                 {% for category in vehicleCategories %}
  188.                                     <option value="{{ category }}">{{ category }}</option>
  189.                                 {% endfor %}
  190.                             </select>
  191.                         </div>
  192.                         <div class="col-md-4">
  193.                             <select name="car_list_filter_form[car_make]" id="keyvis-search-car-make"
  194.                                     class="update-trigger">
  195.                                 <option value="" disabled selected hidden>Marke</option>
  196.                                 {% for make in vehicleMakes %}
  197.                                     <option value="{{ make }}">{{ make }}</option>
  198.                                 {% endfor %}
  199.                             </select>
  200.                         </div>
  201.                         <div class="col-md-4">
  202.                             <select name="car_list_filter_form[car_model]" id="keyvis-search-car-model">
  203.                                 <option value="" disabled selected hidden>Modell</option>
  204.                                 <option value="" disabled hidden>bitte wähler Sie erst eine Marke</option>
  205.                             </select>
  206.                         </div>
  207.                     </div>
  208.                     <button type="submit" class="btn btn-primary justify-content-center mt-3 mb-2 my-md-0">Suchen
  209.                     </button>
  210.                 </div>
  211.             </form>
  212.             {% set kvLink = pimcore_link('kv-link') %}
  213.             {% if not kvLink.isEmpty() %}
  214.                 <a href="{{ kvLink.getHref() }}" class="btn btn-primary">{{ kvLink.getText() ?: 'Mehr erfahren' }}</a>
  215.             {% endif %}
  216.         </div>
  217.     {% endif %}
  218. </div>
  220. <script>
  221.     /* Do things after DOM has fully loaded */
  222. //     if (typeof ready !== 'undefined') {
  223. //         let ready = (callback) => {
  224. //             if (document.readyState !== 'loading') callback();
  225. //             else document.addEventListener('DOMContentLoaded', callback);
  226. //         };
  227. //     }
  229.     let loaded = () => {
  231.         let keyvisualSearchForm = document.getElementById('keyvisual-search-form');
  232.         let typeSelect = keyvisualSearchForm ? keyvisualSearchForm.querySelector('#keyvis-search-car-type') : null;
  233.         let makeSelect = keyvisualSearchForm ? keyvisualSearchForm.querySelector('#keyvis-search-car-make') : null;
  235.         if (keyvisualSearchForm) {
  236.             makeSelect.addEventListener('change', (e) => {
  237.                 updateModelsForMake(makeSelect.value)
  238.             });
  240.             keyvisualSearchForm.querySelectorAll('select').forEach(filterSelect => {
  241.                 filterSelect.addEventListener('change', (e) => {
  242.                     console.log('updated: ' + filterSelect.name);
  243.                     getQueryFilter();
  244.                     let models = fetchData();
  245.                     console.log(models);
  246.                 });
  247.             });
  248.         }
  251.         function getQueryFilter() {
  252.             let queryFilter = [];
  253.             console.log("type: " + typeSelect.value);
  254.             console.log("make: " + makeSelect.value);
  256.             if (typeSelect.value !== undefined && typeSelect.value.length >= 1) {
  257.                 queryFilter.push('\\\"vehicleBaseData.kategorie\\\": \\\"' + typeSelect.value + '\\\"')
  258.             }
  259.             if (makeSelect.value !== undefined && makeSelect.value.length >= 1) {
  260.                 queryFilter.push('\\\"vehicleBaseData.marke\\\": \\\"' + makeSelect.value + '\\\"')
  261.             }
  263.             let filter = queryFilter.join(",")
  265.             return "filter: \"{" + filter + "}\""; //"filter: {\"" + filter + "\"}"
  266.         }
  268.         function updateModelsForMake(make) {
  269.             let result = '';
  270.             fetch('/pimcore-graphql-webservices/vehicles', {
  271.                 method: 'POST',
  272.                 headers: {
  273.                     'Accept-Encoding': 'gzip, deflate, br',
  274.                     'Content-Type': 'application/json',
  275.                     'Accept': 'application/json',
  276.                     'Connection': 'keep-alive',
  277.                     'DNT': '1',
  278.                     // 'Origin': 'https://timmermanns.test',
  279.                     'X-API-Key': 'a406e0ce0d5d7281fd92d81b9cb1aae0'
  280.                 },
  281.                 body: JSON.stringify({
  282.                     query: '{ getVehicleMake(fullpath: "/Gebrauchte/Marken/' + make + '") { makeName, makeModels }}',
  283.                     variables: {
  284.                         now: new Date().toISOString(),
  285.                     },
  286.                 }),
  287.             })
  288.                 .then((res) => res.json())
  289.                 .then((result) => {
  290.                     let rawModels = JSON.parse(result.data['getVehicleMake']['makeModels']);
  291.                     let modelSelect = document.getElementById('keyvis-search-car-model');
  293.                     while (modelSelect.options.length > 0) {
  294.                         modelSelect.remove(modelSelect.options.length - 1);
  295.                     }
  297.                     let option = document.createElement('option');
  298.                     option.text = 'Modell';
  299.                     option.value = '';
  300.                     modelSelect.add(option);
  302.                     for (let i in rawModels) {
  303.                         console.log(rawModels[i][0]);
  304.                         option = document.createElement('option');
  305.                         option.text = rawModels[i][0];
  306.                         option.value = rawModels[i][0];
  307.                         modelSelect.add(option);
  308.                     }
  309.                 })
  310.                 .catch(error => {
  311.                     console.log(error);
  312.                 });
  313.         }
  316.         function fetchData() {
  317.             fetch('/pimcore-graphql-webservices/vehicles', {
  318.                 method: 'POST',
  319.                 headers: {
  320.                     'Accept-Encoding': 'gzip, deflate, br',
  321.                     'Content-Type': 'application/json',
  322.                     'Accept': 'application/json',
  323.                     'Connection': 'keep-alive',
  324.                     'DNT': '1',
  325.                     // 'Origin': 'https://timmermanns.test',
  326.                     'X-API-Key': 'a406e0ce0d5d7281fd92d81b9cb1aae0'
  327.                 },
  328.                 body: JSON.stringify({
  329.                     query: `
  330.         {
  331.   getVehicleListing(
  332.     `+ getQueryFilter() +`
  333.     published: true
  334.   ) {
  335.     totalCount
  336.     edges {
  337.       node {
  338.         interneNummer
  339.         id
  340.         marke
  341.         modell
  342.         modellbasis
  343.         kategorie
  344.       }
  345.     }
  346.   }
  347. }
  348.       `,
  349.                     variables: {
  350.                         now: new Date().toISOString(),
  351.                     },
  352.                 }),
  353.             })
  354.                 .then((res) => res.json())
  355.                 .then((result) => console.log(result));
  357.         }
  358.     };
  360.     if (document.readyState === 'loading'){
  361.         document.addEventListener("DOMContentLoaded", loaded);
  362.     } else {
  363.         loaded();
  364.     }
  366.     document.addEventListener('DOMContentLoaded', function() {
  367.         const swiper = new Swiper('.keyvisual-swiper', {
  368.             loop: {{ slides|length > 1 ? 'true' : 'false' }},
  369.             {% if slides|length > 1 %}
  370.             navigation: {
  371.                 nextEl: '.swiper-button-next',
  372.                 prevEl: '.swiper-button-prev',
  373.             },
  374.             pagination: {
  375.                 el: '.swiper-pagination',
  376.                 clickable: true
  377.             },
  378.             {% endif %}
  379.             autoplay: {% if pimcore_checkbox('enable_autoplay').isChecked() and pimcore_numeric('autoplay_delay').getData() > 0 %}{
  380.                 delay: {{ pimcore_numeric('autoplay_delay').getData() }},
  381.                 disableOnInteraction: false,
  382.             }{% else %}false{% endif %}
  383.         });
  385.         const splitElements = document.querySelectorAll('.split-left, .split-right');
  387.         // Add click handler for split view sections
  388.         splitElements.forEach(section => {
  389.             
  390.             section.addEventListener('click', function(e) {
  391.                 e.stopPropagation(); // Prevent slide click
  392.                 const href = this.getAttribute('data-href');
  393.                 if (href) {
  394.                     window.location.href = href;
  395.                 }
  396.             });
  397.         });
  399.         // Add click handler for clickable slides (only for non-split-view slides)
  400.         document.querySelectorAll('.keyvisual-swiper .swiper-slide[data-href]').forEach(slide => {
  401.             slide.addEventListener('click', function(e) {
  402.                 // Only trigger if not clicking a button, link or split section
  403.                 if (!e.target.closest('a') && !e.target.closest('button') && !e.target.closest('.split-left') && !e.target.closest('.split-right')) {
  404.                     const href = this.getAttribute('data-href');
  405.                     if (href) {
  406.                         window.location.href = href;
  407.                     }
  408.                 }
  409.             });
  410.         });
  411.     });
  413. </script>