custom/plugins/AcrisFaqCS/src/Resources/views/storefront/component/faq/acris-faq.html.twig line 1

Open in your IDE?
  1. {% block acris_faq_wrapper %}
  3. {% set cover = faqs.media %}
  4. {% set imagePosition = faqs.imagePosition %}
  5. {% if imagePosition == '' %}{% set imagePosition = 'right' %}{% endif %}
  6. {% set videoPosition = faqs.videoPosition %}
  7. {% if videoPosition == '' %}{% set videoPosition = 'right' %}{% endif %}
  8. {% set imageUrlType = faqs.imageUrlType %}
  9. {% set imageUrlEntity = faqs.imageUrlEntity %}
  10. {% set imageUrl = null %}
  12. {% if imageUrlType is same as 'internal' and imageUrlEntity is same as 'product' %}
  13. {% set imageUrl = seoUrl('frontend.detail.page', {'productId': faqs.imageInternalLink}) %}
  14. {% elseif imageUrlType is same as 'internal' and imageUrlEntity is same as 'category' %}
  15. {% set imageUrl = seoUrl('frontend.navigation.page', { navigationId: faqs.imageInternalLink }) %}
  16. {% elseif imageUrlType is same as 'internal' and imageUrlEntity is same as 'landing_page' %}
  17. {% set imageUrl = path('frontend.cms.page', { id: faqs.imageInternalLink }) %}
  18. {% elseif imageUrlType is same as 'external' %}
  19. {% if faqs.translated.imageUrl %}
  20. {% set imageUrl = faqs.translated.imageUrl %}
  21. {% endif %}
  22. {% endif %}
  24. {% set imageUrlTarget = faqs.imageUrlTarget %}
  25. {% set videoUrl = faqs.translated.embedCode %}
  26. {% if faqSingle %}{% set id = (faqs.id ~ '-single') %}{% else %}{% set id = faqs.id %}{% endif %}
  27. {% set faqDocument = faqs.acrisFaqDocuments.elements %}
  29. {% set imageSizes = {} %}
  30. {% if faqs.imageSize == 'small' %}
  31. {% set imageSizes = {
  32. 'default': '120px'
  33. } %}
  34. {% elseif faqs.imageSize == 'medium' %}
  35. {% set imageSizes = {
  36. 'default': '280px'
  37. } %}
  38. {% elseif faqs.imageSize == 'large' %}
  39. {% set imageSizes = {
  40. 'default': '400px'
  41. } %}
  42. {% else %}
  43. {% set imageSizes = {
  44. 'default': '95px'
  45. } %}
  46. {% endif %}
  48. {% set iconStyle = config('AcrisFaqCS.config.iconType') == null ? 'plus' : config('AcrisFaqCS.config.iconType') %}
  49. {% set iconPosition = config('AcrisFaqCS.config.iconPosition') == null ? 'right' : config('AcrisFaqCS.config.iconPosition') %}
  51. {% set questionBgColor = config('AcrisFaqCS.config.questionBgColor') == null ? 'primary' : config('AcrisFaqCS.config.questionBgColor') %}
  53. {% set customTitleBgColor = config('AcrisFaqCS.config.customTitleBgColor') == null ? null : config('AcrisFaqCS.config.customTitleBgColor') %}
  54. {% set customTitleColor = config('AcrisFaqCS.config.customTitleColor') == null ? null : config('AcrisFaqCS.config.customTitleColor') %}
  56. {% set answerBgColor = config('AcrisFaqCS.config.answerBgColor') == null ? null : config('AcrisFaqCS.config.answerBgColor') %}
  58. {% set titleBorderColor = config('AcrisFaqCS.config.titleBorderColor') == null ? null : config('AcrisFaqCS.config.titleBorderColor') %}
  60. {% if customTitleBgColor is empty %}
  61. {% set questionBgColor = 'primary' %}
  62. {% endif %}
  64. {% set htmlHeadlineTag = 'div' %}
  65. {% if detailPage %}
  66. {% set htmlHeadlineTag = 'h1' %}
  67. {% endif %}
  69. <style>
  70. {% if questionBgColor is same as 'custom' %}
  71. .acris-faq-accordion-wrapper#faq_group_{{ id }} .acris-faq-accordion-header {
  72. background-color: {{ customTitleBgColor }};
  73. }
  75. {% endif %}
  77. {% if customTitleColor != '' and customTitleColor is not null %}
  78. .acris-faq-accordion-wrapper#faq_group_{{ id }} .acris-faq-accordion-header {
  79. color: {{ customTitleColor }};
  80. }
  82. .acris-faq-accordion-wrapper#faq_group_{{ id }} .acris-faq-accordion-header span {
  83. color: {{ customTitleColor }};
  84. }
  86. {% endif %}
  88. {% if answerBgColor != '' and answerBgColor is not null %}
  89. .acris-faq-accordion-wrapper#faq_group_{{ id }} .acris-faq-accordion-content .card {
  90. background-color: {{ answerBgColor }};
  91. }
  93. {% endif %}
  95. .title-font-color{
  96. color: {{ customTitleColor }} !important;
  97. }
  99. {% if titleBorderColor %}
  100. .acris-faq-accordion-wrapper#faq_group_{{ id }} .acris-faq-accordion-content.show-border {
  101. border-color: {{ titleBorderColor }};
  102. }
  103. {% endif %}
  104. </style>
  106. {% block acris_faq_container %}
  107. <div class="acris-faq-accordion-wrapper" data-acris-faq="true" id="faq_group_{{ id }}" itemscope
  108. itemprop="mainEntity" itemtype="https://schema.org/Question">
  110. {% block acris_faq_content_question %}
  111. <a class="acris-faq-accordion-header{% if detailPage != true or not faqs.collapsed == 'notCollapsed' %} collapsed{% endif %} btn{% if questionBgColor is not same as 'custom' %} btn-{{ questionBgColor }}{% endif %}{% if iconPosition is same as 'left' %} question-right{% endif %} icon-style-{{ iconStyle|lower }}{% if config('AcrisFaqCS.config.titlePadding') == "noPadding" %} p-0{% endif %}"
  112. href="{{ path('frontend.faq.detail', {'faqId': id}) }}"
  113. role="button"
  114. target="_blank"
  115. rel="noopener"
  116. data-toggle="collapse" data-target="#faq-{{ id }}"
  117. {% if faqs.collapsed == 'notCollapsed' %} aria-expanded="true" {% else %} aria-expanded="false" {% endif %}
  118. aria-controls="faq-{{ id }}">
  119. {% if iconPosition is same as 'left' %}
  120. {% if iconStyle is same as 'plus' %}{% sw_icon 'plus' %}{% elseif iconStyle is same as 'arrow' %}{% sw_icon 'arrow-head-down' %}{% else %}<span class="icon-plus-minus"></span>{% endif %}
  121. {% endif %}
  122. <{{ htmlHeadlineTag }} class="acris-faq-text text-left{% if detailPage %} title-font-color{% endif %}" itemprop="name">{{ faqs.translated.name }}</{{ htmlHeadlineTag }}>
  123. {% if iconPosition is same as 'right' %}
  124. {% if iconStyle is same as 'plus' %}{% sw_icon 'plus' %}{% elseif iconStyle is same as 'arrow' %}{% sw_icon 'arrow-head-down' %}{% else %}<span class="icon-plus-minus"></span>{% endif %}
  125. {% endif %}
  126. </a>
  127. {% endblock %}
  129. {% block acris_faq_content_answer %}
  130. <div class="acris-faq-accordion-content{% if config('AcrisFaqCS.config.titleBorder') == "showBorder" %} show-border{% endif %}">
  131. <div class="row">
  132. <div class="col-12">
  133. <div
  134. class="collapse{% if detailPage == true or faqs.collapsed == 'notCollapsed' %} show{% endif %}"
  135. id="faq-{{ id }}">
  136. <div
  137. class="card card-body faq-wrapper-answer{% if answerBgColor is empty %} faq-wrapper-answer-background{% endif %}{% if not faqs.translated.description %} no-text {% endif %}{% if videoUrl == null %} no-video {% elseif not faqs.translated.description %} faq-video {% else %} video-position-{{ videoPosition }}{% endif %} video-wrapper {% if faqs.mediaId == null %} no-image{% else %} image-position-{{ imagePosition }}{% endif %}{% if config('AcrisFaqCS.config.contentPadding') == "noPadding" %} p-0{% endif %}"
  138. itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
  140. {% if faqs.layout == 'cms' and faqs.cmsPageId != null %}
  141. <div itemprop="text" hidden>
  142. <p>{{ faqs.translated.description|raw }}</p>
  143. </div>
  144. {% sw_include '@Storefront/storefront/page/content/detail.html.twig' with { cmsPage: faqs.cmsPage } %}
  145. {% else %}
  147. {% if videoUrl %}
  148. {% sw_include '@Storefront/storefront/component/faq/video/acris-faq-video.html.twig' %}
  149. {% endif %}
  151. {% if faqs.translated.description %}
  152. {% block acris_faq_content_answer_description %}
  153. <div class="faq-text" itemprop="text">
  154. <p>{{ faqs.translated.description|raw }}</p>
  155. </div>
  156. {% endblock %}
  157. {% endif %}
  159. {% if cover.url %}
  160. {% block acris_faq_content_answer_image %}
  161. {% if cover.thumbnails.elements|length > 0 %}
  162. {% set image = cover.thumbnails|sort|first().url %}
  163. {% else %}
  164. {% set image = cover.url %}
  165. {% endif %}
  166. {% if imagePosition == 'left' or imagePosition == 'right' %}
  167. <div
  168. class="faq-image image-position-{{ imagePosition }}">
  169. <a {% if imageUrl %}href="{{ imageUrl }}" {% endif %}
  170. rel="noopener"
  171. target="{{ imageUrlTarget }}">
  172. {% sw_thumbnails 'cart-item-img-thumbnails' with {
  173. media: cover,
  174. sizes: imageSizes,
  175. attributes: {
  176. 'class': 'img-fluid',
  177. 'alt': (faqs.translated.internalName ?: ''),
  178. 'title': (entity.media.translated.title ?: '')
  179. }
  180. } %}
  181. </a>
  182. </div>
  183. {% else %}
  184. <div class="faq-image-{{ imagePosition }}">
  185. <a href="{{ imageUrl }}"
  186. rel="noopener"
  187. target="{{ imageUrlTarget }}">
  188. {% sw_thumbnails 'cart-item-img-thumbnails' with {
  189. media: cover,
  190. sizes: imageSizes,
  191. attributes: {
  192. 'class': 'img-fluid',
  193. 'alt': (faqs.translated.internalName ?: ''),
  194. 'title': (entity.media.translated.title ?: '')
  195. }
  196. } %}
  197. </a>
  198. </div>
  199. {% endif %}
  200. {% endblock %}
  201. {% endif %}
  203. {% if faqDocument|length > 0 %}
  204. {% block acris_faq_content_answer_document %}
  205. <div class="faq-document">
  206. <div class="h5">{{ 'acris-faq.detail.documentTitle'|trans }}</div>
  207. <ul>
  208. {% for item in faqDocument %}
  209. <li><a download
  210. target="_blank"
  211. rel="noopener"
  212. href="{{ item.media.url }}"
  213. >{% if item.translated.title %}{{ item.translated.title }}{% else %}{{ item.media.fileName }}.{{ item.media.fileExtension }}{% endif %}</a>
  214. {% if item.translated.description %} - {{ item.translated.description }}{% endif %}
  215. </li>
  216. {% endfor %}
  217. </ul>
  218. </div>
  219. {% endblock %}
  220. {% endif %}
  221. {% endif %}
  222. </div>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. {% endblock %}
  228. </div>
  229. {% endblock %}
  230. {% endblock %}