custom/plugins/C108Faq/src/Resources/views/storefront/element/cms-element-faq.html.twig line 1

Open in your IDE?
  1. {% block element_faq %}
  3. {# Settings Allgemein #}
  4. {% set id = element.id %}
  5. {% set c108faqhighlightcolor = element.config.c108faqhighlightcolor.value %}
  6. {% set c108faqbannertype = element.config.c108faqbannertype.value %}
  7. {% set c108faqbannerimg = element.config.c108faqbannerimg.value %}
  8. {% set c108faqbannertitle = element.config.c108faqbannertitle.value %}
  9. {% set currBannerTitle = asset('bundles/c108faq/static/img/cms/'~ c108faqbannertitle ~'.png') %}
  10. {% set c108faqsectionshideable = element.config.c108faqsectionshideable.value|default(false) %}
  12. {# Settings Bereich 1 #}
  13. {% set c108faqsection1title = element.config.c108faqsection1title.value %}
  14. {% set c108faqsection1text = element.config.c108faqsection1text.value %}
  15. {% set c108faqsection1icon = element.config.c108faqsection1icon.value %}
  16. {% set c108faqsection1icontype = element.config.c108faqsection1icontype.value %}
  17. {% set c108faqsection1iconpath = element.config.c108faqsection1iconpath.value %}
  18. {% set c108faqsection1questionsArray = element.config.c108faqsection1questionsArray.value %}
  20. {# Settings Bereich 2 #}
  21. {% set c108faqsection2title = element.config.c108faqsection2title.value %}
  22. {% set c108faqsection2text = element.config.c108faqsection2text.value %}
  23. {% set c108faqsection2icon = element.config.c108faqsection2icon.value %}
  24. {% set c108faqsection2icontype = element.config.c108faqsection2icontype.value %}
  25. {% set c108faqsection2iconpath = element.config.c108faqsection2iconpath.value %}
  26. {% set c108faqsection2questionsArray = element.config.c108faqsection2questionsArray.value %}
  28. {# Settings Bereich 3 #}
  29. {% set c108faqsection3title = element.config.c108faqsection3title.value %}
  30. {% set c108faqsection3text = element.config.c108faqsection3text.value %}
  31. {% set c108faqsection3icon = element.config.c108faqsection3icon.value %}
  32. {% set c108faqsection3icontype = element.config.c108faqsection3icontype.value %}
  33. {% set c108faqsection3iconpath = element.config.c108faqsection3iconpath.value %}
  34. {% set c108faqsection3questionsArray = element.config.c108faqsection3questionsArray.value %}
  36. {# FAQ Element#}
  37. <div class="cms-element-faq" style="height: 100%; width: 100%">
  39. {% block element_faq_inner %}
  41. {# Background image #}
  42. {# Shipped image #}
  43. {% if c108faqbannertype == 'shippedimage' %}
  44. {% set currImgPath = asset('bundles/c108faq/static/img/cms/'~ c108faqbannerimg ~'.jpg') %}
  45. {% endif %}
  47. {# Own image #}
  48. {% if c108faqbannertype == 'ownimage' %}
  49. {% set currMediaId = element.config.media.value %}
  50. {% if currMediaId %}
  51. {% set currMediaCollection = searchMedia([currMediaId], context.context) %}
  52. {% set currMediaObject = currMediaCollection.get(currMediaId) %}
  53. {% set currImgPath = currMediaObject.url %}
  54. {% else %}
  55.   {% set currImgPath = '' %}
  56. {% endif %}
  57. {% endif %}
  59. <div class="c108-faq-banner" style="background-image:url('{{ currImgPath }}');">
  60. <div class="c108-faq-inside" style="background-image:url('{{ currBannerTitle }}');">
  61. </div>
  62. </div>
  63. {# Background image Ende #}
  65. {# Boxes #}
  66. <div class="cms-element-faq-boxes">
  68. {# Bereich 1 #}
  69. <div class="c108faqwrappertype-{{ c108faqsection1icontype }} c108faqwrapper-einfach c108-faq-section-box">
  70. <div class="c108faq-content">
  72. {# Case 1: Shopware Icon #}
  73. {% if c108faqsection1icontype == 'shippedicon' %}
  74. <div class="c108-icon-wrapper">
  75. <span class="icon icon-{{ c108faqsection1icon }}" style="color:{{ c108faqhighlightcolor }};">
  76. {{ source('@Storefront/assets/icon/default/'~ c108faqsection1icon ~'.svg', ignore_missing = true) }}
  77. </span>
  78. </div>
  79. {# Case 1: Shopware Icon - Ende #}
  80. {# Case 2: Own Icon #}
  81. {% elseif c108faqsection1icontype == 'ownicon' %}
  82. <div class="c108-icon-wrapper c108faqowniconwrapper">
  83. <img src="{{ c108faqsection1iconpath }}" alt="{{ c108faqsection1title }} Icon">
  84. </div>
  85. {% endif %}
  86. {# Case 2: Own Icon- Ende #}
  88. <div class="c108-faq-text-wrapper">
  89. <div class="c108-faq-section-title-boxes">{{ c108faqsection1title }}</div>
  90. <div class="c108-faq-section-text-boxes"><p>{{ c108faqsection1text|nl2br }}</p></div>
  91. </div>
  92. </div>
  93. </div>
  94. {# Bereich 1: Ende #}
  96. {# Bereich 2 #}
  97. <div class="c108faqwrappertype-{{ c108faqsection2icontype }} c108faqwrapper-einfach c108-faq-section-box">
  98. <div class="c108faq-content">
  100. {# Case 1: Shopware Icon #}
  101. {% if c108faqsection2icontype == 'shippedicon' %}
  102. <div class="c108-icon-wrapper">
  103. <span class="icon icon-{{ c108faqsection2icon }}" style="color:{{ c108faqhighlightcolor }};">
  104. {{ source('@Storefront/assets/icon/default/'~ c108faqsection2icon ~'.svg', ignore_missing = true) }}
  105. </span>
  106. </div>
  107. {# Case 1: Shopware Icon - Ende #}
  109. {# Case 2: Own Icon #}
  110. {% elseif c108faqsection2icontype == 'ownicon' %}
  111. <div class="c108-icon-wrapper c108faqowniconwrapper">
  112. <img src="{{ c108faqsection2iconpath }}" alt="{{ c108faqsection2title }} Icon">
  113. </div>
  114. {% endif %}
  115. {# Case 2: Own Icon- Ende #}
  117. <div class="c108-faq-text-wrapper">
  118. <div class="c108-faq-section-title-boxes">{{ c108faqsection2title }}</div>
  119. <div class="c108-faq-section-text-boxes"><p>{{ c108faqsection2text|nl2br }}</p></div>
  120. </div>
  121. </div>
  122. </div>
  123. {# Bereich 2: Ende #}
  125. {# Bereich 1 #}
  126. <div class="c108faqwrappertype-{{ c108faqsection3icontype }} c108faqwrapper-einfach c108-faq-section-box">
  127. <div class="c108faq-content">
  129. {# Case 1: Shopware Icon #}
  130. {% if c108faqsection3icontype == 'shippedicon' %}
  131. <div class="c108-icon-wrapper">
  132. <span class="icon icon-{{ c108faqsection3icon }}" style="color:{{ c108faqhighlightcolor }};">
  133. {{ source('@Storefront/assets/icon/default/'~ c108faqsection3icon ~'.svg', ignore_missing = true) }}
  134. </span>
  135. </div>
  136. {# Case 1: Shopware Icon - Ende #}
  138. {# Case 2: Own Icon #}
  139. {% elseif c108faqsection3icontype == 'ownicon' %}
  140. <div class="c108-icon-wrapper c108faqowniconwrapper">
  141. <img src="{{ c108faqsection3iconpath }}" alt="{{ c108faqsection3title }} Icon">
  142. </div>
  143. {% endif %}
  144. {# Case 2: Own Icon- Ende #}
  146. <div class="c108-faq-text-wrapper">
  147. <div class="c108-faq-section-title-boxes">{{ c108faqsection3title }}</div>
  148. <div class="c108-faq-section-text-boxes"><p>{{ c108faqsection3text|nl2br }}</p></div>
  149. </div>
  150. </div>
  151. </div>
  152. {# Bereich 3: Ende #}
  154. {# Suche #}
  155. <div class="c108-faq-suchfeld-holder">
  156. <label class="c108-faq-search-title">{{ 'faq.element.labelsearch'|trans }}
  157. <input id="{{ id }}-searchField" type="text" name="faqsuchfeld" class="c108-faq-suchfeld">
  158. </label>
  159. </div>
  160. {# Suche: Ende #}
  161. </div>
  163. {# Boxes inkl. Suche: Ende #}
  165. {# Fragen Bereich #}
  166. <div id="{{ id }}-questionwrapper" class="c108-faq-question-section" >
  168. {# Fragen Bereich 1 #}
  169. <div class="c108-faq-section-outer">
  170. <div class="c108-faq-section-title{% if c108faqsectionshideable == true %} c108-faq-section-hideable is-shown{% endif %}">
  171. {{ c108faqsection1title }}
  172. </div>
  173. {% for currentQuestion in c108faqsection1questionsArray %}
  174. {% if currentQuestion.question is not empty and currentQuestion.answer is not empty %}
  175. <button class="questiontab"><span>{{ currentQuestion.question }}</span></button>
  176. <div class="answertab">
  177. <p>{{ currentQuestion.answer|nl2br}}</p>
  178. </div>
  179. {% endif %}
  180. {% endfor %}
  181. </div>
  182. {# Fragen Bereich 1: Ende #}
  184. {# Fragen Bereich 2 #}
  185. <div class="c108-faq-section-outer">
  186. <div class="c108-faq-section-title{% if c108faqsectionshideable == true %} c108-faq-section-hideable is-shown{% endif %}">
  187. {{ c108faqsection2title }}
  188. </div>
  189. {% for currentQuestion in c108faqsection2questionsArray %}
  190. {% if currentQuestion.question is not empty and currentQuestion.answer is not empty %}
  191. <button class="questiontab"><span>{{ currentQuestion.question }}</span></button>
  192. <div class="answertab">
  193. <p>{{ currentQuestion.answer|nl2br}}</p>
  194. </div>
  195. {% endif %}
  196. {% endfor %}
  197. </div>
  198. {# Fragen Bereich 2: Ende #}
  200. {# Fragen Bereich 3 #}
  201. <div class="c108-faq-section-outer">
  202. <div class="c108-faq-section-title{% if c108faqsectionshideable == true %} c108-faq-section-hideable is-shown{% endif %}">
  203. {{ c108faqsection3title }}
  204. </div>
  205. {% for currentQuestion in c108faqsection3questionsArray %}
  206. {% if currentQuestion.question is not empty and currentQuestion.answer is not empty %}
  207. <button class="questiontab"><span>{{ currentQuestion.question }}</span></button>
  208. <div class="answertab">
  209. <p>{{ currentQuestion.answer|nl2br}}</p>
  210. </div>
  211. {% endif %}
  212. {% endfor %}
  213. </div>
  214. {# Fragen Bereich 3: Ende #}
  216. {# Anzeige keine Suchtreffer #}
  217. <div class="c108-faq-no-results">
  218. <p>{{ 'faq.element.noresults'|trans }}</p>
  219. </div>
  220. {# Anzeige keine Suchtreffer: Ende #}
  222. </div>
  223. {# Fragen Bereich: Ende #}
  225. {% endblock %}
  227. <script>
  228. var faqElement = document.getElementById("{{ id }}-questionwrapper");
  229. var questionTabs = faqElement.getElementsByClassName("questiontab");
  230. var answerTabs = faqElement.getElementsByClassName("answertab");
  231. var sectionTitles = faqElement.getElementsByClassName("c108-faq-section-title");
  232. var noResultsText = faqElement.getElementsByClassName("c108-faq-no-results");
  233. var hideTitleSections = document.getElementsByClassName("c108-faq-section-hideable");
  235. var j;
  237. for (j = 0; j < questionTabs.length; j++) {
  238.   questionTabs[j].addEventListener("click", function() {
  239.     this.classList.toggle("active");
  240.     var answertab = this.nextElementSibling;
  241.     if (answertab.style.maxHeight) {
  242.       answertab.style.maxHeight = null;
  243.     } else {
  244.       answertab.style.maxHeight = answertab.scrollHeight + "px";
  245.     }
  246.   });
  247. }
  249. var searchField = document.getElementById("{{ id }}-searchField");
  251. searchField.addEventListener('input', function() {
  253.   var faqElement = document.getElementById("{{ id }}-questionwrapper");
  254.   var questionTabs = faqElement.getElementsByClassName("questiontab");
  255.   var answerTabs = faqElement.getElementsByClassName("answertab");
  256.   var sectionTitles = faqElement.getElementsByClassName("c108-faq-section-title");
  257.   var noResultsText = faqElement.getElementsByClassName("c108-faq-no-results");
  259.   // hide section title
  260.   for (var k = 0; k < sectionTitles.length; k++) {
  261.     sectionTitles[k].style['display'] = 'none';
  262.     sectionTitles[k].classList.remove("is-hidden");
  263.     sectionTitles[k].classList.add("is-shown");
  264.   }
  266.   // set all answer tabs to display block in case they were hidden because of title section hide
  267.   for (var o = 0; o < answerTabs.length; o++) {
  268.     answerTabs[o].style['display'] = 'block';
  269.   }
  271.   // get search input
  272.   var searchVal = this.value.toLowerCase();
  273.   var questionCounter = 0;
  274.   // check if search input matches content of answer or question
  275.   for (var i = 0; i < questionTabs.length; i++) {
  276.     if(!searchVal){
  277.       questionTabs[i].style['display'] = 'grid';
  278.       questionTabs[i].style['background-color'] = 'white';
  279.       questionTabs[i].querySelector('span').style['color'] = '#4a545b';
  280.       questionTabs[i].classList.remove('hide');
  281.       questionTabs[i].classList.remove('active');
  282.       answerTabs[i].style.maxHeight = null;
  284.       noResultsText[0].style['display'] = 'none';
  286.       // show section title
  287.       for (var k = 0; k < sectionTitles.length; k++) {
  288.         sectionTitles[k].style['display'] = 'grid';
  289.       }
  290.     }
  291.     else {
  292.       if (questionTabs[i].textContent.toLowerCase().indexOf(searchVal) > -1 || answerTabs[i].textContent.toLowerCase().indexOf(searchVal) > -1) {
  293.         questionTabs[i].style['display'] = 'grid';
  294.         questionTabs[i].style['background-color'] = '{{ c108faqhighlightcolor }}';
  295.         questionTabs[i].querySelector('span').style['color'] = 'white';
  296.         questionTabs[i].classList.add('hide');
  297.         questionTabs[i].classList.remove('active');
  298.         answerTabs[i].style.maxHeight = answerTabs[i].scrollHeight + "px";
  300.         // hide no results text
  301.         noResultsText[0].style['display'] = 'none';
  302.       }
  304.       else {
  305.         questionTabs[i].style['display'] = 'none';
  306.         questionTabs[i].style['background-color'] = 'white';
  307.         questionTabs[i].querySelector('span').style['color'] = '#4a545b';
  308.         questionTabs[i].classList.remove('hide');
  309.         answerTabs[i].style.maxHeight = null;
  311.         // show no results text
  312.         questionCounter += 1;
  313.         //noResultsText[0].style['display'] = 'block';
  314.       }
  315.     }
  317.   }
  318.   if(questionCounter == questionTabs.length){
  319.     noResultsText[0].style['display'] = 'block';
  320.   }
  321. });
  323. // add hideable feature
  324. var hideFaqSection = function() {
  325.   var currentTitleArea = event.target;
  326.   var allChildrenOfSection = currentTitleArea.parentNode.children;
  327.   
  328.   if(currentTitleArea.classList.contains("is-shown")){
  329.     for (var m = 0; m < allChildrenOfSection.length; m++) {
  330.       allChildrenOfSection[m].style.display = "none";
  331.     }
  332.     
  333.     currentTitleArea.style.display ="grid";
  334.     currentTitleArea.classList.add("is-hidden");
  335.     currentTitleArea.classList.remove("is-shown");
  337.     return;
  338.   }
  340.   if(currentTitleArea.classList.contains("is-hidden")){
  341.     for (var m = 0; m < allChildrenOfSection.length; m++) {
  342.       allChildrenOfSection[m].style.display = "grid";
  343.     }
  344.     
  345.     currentTitleArea.style.display ="grid";
  346.     currentTitleArea.classList.add("is-shown");
  347.     currentTitleArea.classList.remove("is-hidden");
  348.     
  349.     return;
  350.   }
  351. };
  353. // add hide event to title sections
  354. for (var l = 0; l < hideTitleSections.length; l++) {
  355.     hideTitleSections[l].addEventListener('click', hideFaqSection, false);
  356. }
  357. </script>
  358. </div>
  359. {% endblock %}