templates/areas/apk-faq/view.html.twig line 1

Open in your IDE?
  2. {% if editmode %}
  4. <div class="uk-container apk-container-1400 uk-margin-medium">
  5.     <h2 class="uk-h2">Section FAQ</h2>
  6.     <ul uk-tab>
  7.         <li><a href="#">Configurations</a></li>
  8.         <li class="uk-active"><a href="#">Content Edit</a></li>
  9.     </ul>
  11.     <ul class="uk-switcher uk-margin">
  12.         <li>
  13.             <div>Type de heading pour le titre ?</div>
  14.             {{ pimcore_select("content-heading", {
  15.                 "store" : [
  16.                     ['span', 'span'],
  17.                     ['h1', 'Heading 1'],
  18.                     ['h2', 'Heading 2'],
  19.                     ['h3', 'Heading 3'],
  20.                     ['h4', 'Heading 4'],
  21.                     ['h5', 'Heading 5'],
  22.                     ['h6', 'Heading 6']
  23.                 ],
  24.                 "defaultValue" : "h2"
  25.             }) }}
  27.             <div><strong>Style</strong> du heading pour le titre ?</div>
  28.             {{ pimcore_select("content-heading-style", {
  29.                 "store" : [
  30.                     ['h1', 'Heading 1'],
  31.                     ['h2', 'Heading 2'],
  32.                     ['h3', 'Heading 3'],
  33.                     ['h4', 'Heading 4'],
  34.                     ['h5', 'Heading 5'],
  35.                     ['h6', 'Heading 6']
  36.                 ],
  37.                 "defaultValue" : "h2"
  38.             }) }}
  39.             
  40.             <div><strong>Alignement</strong> du titre</div>
  41.             {{ pimcore_select("text-align", {
  42.                 "store" : [
  43.                     ['uk-text-center', 'Centré'],
  44.                     ['uk-text-left', 'Gauche'],
  45.                     ['uk-text-right', 'Droite']
  46.                 ],
  47.                 "defaultValue" : "uk-text-center"
  48.             }) }}
  50.             <div>Taille du container</div>
  51.             {{ pimcore_select("container-width", {
  52.                 "store" : [
  53.                     ['apk-container-1400', '1400px (default)'],
  54.                     ['apk-container-1300', '1300px'],
  55.                     ['apk-container-1200', '1200px'],
  56.                     ['apk-container-1100', '1100px'],
  57.                     ['apk-container-1000', '1000px'],
  58.                     ['apk-container-900', '900px'],
  59.                     ['apk-container-800', '800px'],
  60.                 ],
  61.                 "defaultValue" : "apk-container-1400"
  62.             }) }}
  64.             <div>Espacement en haut du block</div>
  65.             {{ pimcore_select("margin-top", {
  66.                 "store" : [
  67.                     ['uk-padding-remove-top', 'Suppression du padding'],
  68.                     ['', 'Aucun'],
  69.                     ['uk-margin-small-top', 'Petit'],
  70.                     ['uk-margin-medium-top', 'Moyen'],
  71.                     ['uk-margin-large-top', 'Grand'],
  72.                     ['uk-margin-xlarge-top', 'Très grand'],
  73.                 ],
  74.                 "defaultValue" : ""
  75.             }) }}
  77.             <div>Espacement en bas du block</div>
  78.             {{ pimcore_select("margin-bottom", {
  79.                 "store" : [
  80.                     ['uk-padding-remove-bottom', 'Suppression du padding'],
  81.                     ['', 'Aucun'],
  82.                     ['uk-margin-small-bottom', 'Petit'],
  83.                     ['uk-margin-medium-bottom', 'Moyen'],
  84.                     ['uk-margin-large-bottom', 'Grand'],
  85.                     ['uk-margin-xlarge-bottom', 'Très grand'],
  86.                 ],
  87.                 "defaultValue" : ""
  88.             }) }}
  90.         </li>
  91.     
  92.         <li class="uk-active">
  93.             <div class="uk-margin-large-bottom">
  94.                 <div class="apk-content">
  95.                     <h2 class="uk-h2">
  96.                         {{ pimcore_textarea("content-title",{
  97.                             "nl2br" : true,
  98.                             "placeholder" : "Titre (optionnel)"
  99.                         }) }}
  100.                     </h2>
  101.                     <div><span class="uk-h4">Contenu (optionnel)</span></div>
  102.                     {{ pimcore_wysiwyg("content") }}
  104.                     <h3>Ensemble des FAQ</h3>
  105.                     <div class="uk-dark" uk-alert>
  106.                       {% for faq in pimcore_block('faqBlock').iterator %}
  107.                         <div class="uk-card">
  108.                           <div>
  109.                             <div><h4 class="uk-h4 uk-margin-remove-bottom">Titre</h4></div>
  110.                             <h3 class="uk-h3 uk-margin-small-top">{{ pimcore_textarea('faqTitle', {'nl2br' : true}) }}</h3>
  111.                           </div>
  112.                           <div>
  113.                             <div><h4 class="uk-h4 uk-margin-remove-bottom">contenu</h4></div>
  114.                             {{ pimcore_wysiwyg('faqContent') }}
  115.                           </div>
  116.                         </div>
  117.                       {% endfor %}
  118.                     </div>
  119.                     <div class="actions uk-margin-top">
  120.                         <span class="uk-h4">Lien (optionnel)</span>
  121.                         <div>
  122.                             {{ pimcore_link("content-btn", {
  123.                                 "class" : "uk-button"
  124.                             }) }}
  125.                         </div>
  126.                     </div>
  127.                 </div>
  128.             </div>
  129.         </li>
  130.     </ul>
  131. </div>
  133. {% endif %}
  135. {% if not editmode %}
  137. <div class="apk-areabrick-container {{ pimcore_select("margin-top") }} {{ pimcore_select("margin-bottom") }}">
  138.     <div class="uk-container {{ pimcore_select("container-width") }}">
  139.         <div class="{{ pimcore_select("text-align") }}">
  140.             {% if not pimcore_textarea("content-title").isEmpty %}
  141.                 {% if pimcore_select("content-heading").getData() == 'span' %}
  142.                     <span class="uk-h2">
  143.                         {{ pimcore_textarea("content-title", {
  144.                         "nl2br" : true})|raw }}
  145.                     </span>
  146.                 {% else %}
  147.                     {% set content_heading = pimcore_select("content-heading").getData() %}
  148.                     <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  149.                         {{ pimcore_textarea("content-title", {
  150.                         "nl2br" : true})|raw }}
  151.                     </{{ content_heading }}>
  152.                 {% endif %}
  153.             {% endif %}
  154.         </div>
  155.         <div class="uk-text-center">
  156.           {% if not pimcore_wysiwyg("content").isEmpty %}
  157.           <div class="apk-content">
  158.               {{ pimcore_wysiwyg("content") }}
  159.           </div>
  160.         {% endif %}
  161.         </div>
  162.         <div class="apk-faq-container">
  163.             <ul uk-accordion="multiple: true">
  164.               {% set n = 1 %}
  165.               {% set count = pimcore_block('faqBlock').getData()|length %}
  166.               {% for faq in pimcore_block('faqBlock').iterator %}
  167.                 <li>
  168.                   <a class="uk-accordion-title" href="#">
  169.                     <h4 class="uk-margin-remove-bottom uk-text-bold">{{ pimcore_textarea('faqTitle', {'nl2br' : true}) }}</h4>
  170.                   </a>
  171.                   <div class="uk-accordion-content">
  172.                     {{ pimcore_wysiwyg('faqContent') }}
  173.                   </div>
  174.                 </li>
  175.                 {% set n = n + 1 %}
  176.               {% endfor %}
  177.               
  178.               </ul>
  179.               
  180.               {% if not pimcore_link("content-btn").isEmpty() %}
  181.               <div class="apk-actions uk-text-center uk-margin-large-top">
  182.                   {{ pimcore_link("content-btn", {
  183.                       "class" : "uk-button uk-button-large "
  184.                   }) }}
  185.               </div>
  186.             {% endif %}
  188.         </div>
  189.     </div>
  190.     
  191. </div>
  193. {% endif %}