custom/plugins/SchilderSysteme/src/Resources/views/storefront/element/cms-element-categories.html.twig line 1

Open in your IDE?
  1. {% block block_categories %}
  2.     {% set element = block.slots.elements|first %}
  4. <div data-cms-element-id="{{ element.id }}" class="flip-book col-12">
  5.     {% set categories= element.data.all %}
  7.     <div class="flip-book-slider-container">
  8.         {% set sortingArray = ["ALU", "NIRO", "FORMO", "GLAS/PROFIL", "TAKTIL", "AUSSEN", "iNOX"] %}
  10.         {% set sortedItems = [] %}
  11.         {% for name in sortingArray %}
  12.             {% for item in categories %}
  13.                 {% if item.name == name %}
  14.                     {% set sortedItems = sortedItems|merge([item]) %}
  15.                 {% endif %}
  16.             {% endfor %}
  17.         {% endfor %}
  18.         {{ dump(sortedItems) }}
  19.         {% for item in sortedItems %}
  20.             {% if item.customFields.custom_category_info_flip_book_2 %}
  21.                 <div class="flip-book-slider-item d-none" data-id="{{ item.id }}">
  22.                     {{ item.customFields.custom_category_info_flip_book_2|raw }}
  23.                 </div>
  24.             {% endif %}
  25.         {% endfor %}
  26.         <script>
  27.             document.addEventListener("DOMContentLoaded", () => {
  28.                 let elems = document.querySelectorAll(".flip-book-slider-item div.container");
  29.                 // Check if the element exists
  30.                 if (elems) {
  31.                     for (let item of elems) {
  32.                         console.log(item); // Log the element to the console
  33.                         console.log(item.dataset.html); // Log the value of dataset.html property
  35.                         // Add a click event listener to the element
  36.                         item.addEventListener("click", () => {
  37.                             setInnerHTML(item, item.dataset.html)
  38.                         });
  39.                     }
  40.                 }
  41.             });
  42.             function setInnerHTML(elm, html) {
  43.                 elm.innerHTML = html;
  45.                 Array.from(elm.querySelectorAll("script"))
  46.                     .forEach( oldScriptEl => {
  47.                         const newScriptEl = document.createElement("script");
  49.                         Array.from(oldScriptEl.attributes).forEach( attr => {
  50.                             newScriptEl.setAttribute(attr.name, attr.value)
  51.                         });
  53.                         const scriptText = document.createTextNode(oldScriptEl.innerHTML);
  54.                         newScriptEl.appendChild(scriptText);
  56.                         oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
  57.                     });
  58.             }
  59.         </script>
  60.     </div>
  62.     <div class="flip-book--categories cms-element-categories-slider">
  63.         {% for item in sortedItems %}
  64.             {% if item.customFields.custom_category_info_flip_book_2 %}
  65.                 {% set categoryColor = item.customFields.custom_category_info_color %}
  67.                 <div class="cms-element-categories-item" alt="{{ item.translated.name }}" data-id="{{ item.id }}">
  68.                     <span class="cms-element-categories-item-text">{{ item.translated.name }}</span>
  69.                     <div class="background-container" style="background-color: {% if categoryColor %}{{ categoryColor }} {% else %} black {% endif %}"></div>
  70.                 </div>
  71.             {% endif %}
  72.         {% endfor %}
  73.     </div>
  74. </div>
  76. {% endblock %}