templates/bundles/SyliusShopBundle/Taxon/_verticalMenu.html.twig line 1

Open in your IDE?
  1. {{ sylius_template_event('sylius.shop.product.index.before_vertical_menu', {'taxon': taxon}) }}
  2. <div class="menu-vertical-category" {{ sylius_test_html_attribute('vertical-menu') }}>
  3.     {% if taxon.enabledChildren|length > 0  %}
  4.         <div class="item-parent-category">
  5.             <a href="{{ path('sylius_shop_product_index', {'slug': taxon.slug, '_locale': taxon.translation.locale}) }}" class="item" id="{{ taxon.slug }}" {{ sylius_test_html_attribute('vertical-menu-item') }}>{{ taxon.name }}</a>
  6.             <span class="toggle-btn-{{ taxon.code }}" id="button-div-category" onclick="toggleDiv1('div-{{ taxon.code }}-bar', 'toggle-btn-{{ taxon.code }}')">
  7.             <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
  8.                 <path d="M5.575 0C5.70833 0 5.83733 0.025001 5.962 0.075001C6.08733 0.125005 6.19166 0.191665 6.275 0.275005L10.875 4.87501C11.0583 5.05834 11.15 5.29167 11.15 5.57501C11.15 5.85834 11.0583 6.09166 10.875 6.275C10.6917 6.45833 10.4583 6.55 10.175 6.55C9.89169 6.55 9.65829 6.45833 9.475 6.275L5.575 2.37501L1.675 6.275C1.49166 6.45833 1.25833 6.55 0.975004 6.55C0.691664 6.55 0.458335 6.45833 0.275002 6.275C0.091669 6.09166 0 5.85834 0 5.57501C0 5.29167 0.091669 5.05834 0.275002 4.87501L4.875 0.275005C4.975 0.175005 5.08333 0.104335 5.2 0.063001C5.31666 0.021001 5.44166 0 5.575 0Z" fill="#858585"/>
  9.             </svg>
  10.         </span>
  11.         </div>
  12.     {% else %}
  13.         <div class="item-parent-category">
  14.             <a href="{{ path('sylius_shop_product_index', {'slug': taxon.slug, '_locale': taxon.translation.locale}) }}" class="item" id="{{ taxon.slug }}" {{ sylius_test_html_attribute('vertical-menu-item') }}>{{ taxon.name }}</a>
  15.         </div>
  16.     {% endif %}
  18.     <div class='div-{{ taxon.code }}-bar' id="item-child-category-container">
  19.     {% for child in taxon.enabledChildren %}
  20.         <div class="item-child-category">
  21.             <a href="{{ path('sylius_shop_product_index', {'slug': child.slug, '_locale': child.translation.locale}) }}" class="item" id="{{ child.slug }}" {{ sylius_test_html_attribute('vertical-menu-item') }}>{{ child.name }}</a>
  22.         </div>
  23.     {% endfor %}
  24.     </div>
  25. </div>
  26. {{ sylius_template_event('sylius.shop.product.index.after_vertical_menu', {'taxon': taxon}) }}
  28. <script>
  29.   function toggleDiv1(divClass, toggleBtnClass) {
  30.     // Sélectionnez la div avec la classe donnée
  31.     const div = document.querySelector(`.${divClass}`);
  33.     // Sélectionnez le bouton à basculer avec la classe donnée
  34.     const toggleBtn = document.querySelector(`.${toggleBtnClass}`);
  36.     console.log(div, toggleBtn);
  37.     // Ajoutez un gestionnaire d'événements au clic sur le bouton à basculer
  38.     // toggleBtn.addEventListener('click', () => {
  39.     // Changez le style de la div pour la masquer ou l'afficher
  40.     div.style.display = (div.style.display === 'none') ? 'block' : 'none';
  42.     const svgCode = '<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.00019 7.07501C5.86686 7.07501 5.73786 7.05001 5.61319 7.00001C5.48786 6.95001 5.38353 6.88335 5.30019 6.80001L0.700202 2.20001C0.516902 2.01668 0.425202 1.78335 0.425202 1.50001C0.425202 1.21668 0.516903 0.983346 0.700203 0.800006C0.883503 0.616676 1.1169 0.525006 1.4002 0.525006C1.6835 0.525006 1.9169 0.616676 2.10019 0.800007L6.00019 4.70001L9.90019 0.800007C10.0835 0.616677 10.3169 0.525007 10.6002 0.525007C10.8835 0.525007 11.1169 0.616677 11.3002 0.800007C11.4835 0.983347 11.5752 1.21668 11.5752 1.50001C11.5752 1.78335 11.4835 2.01668 11.3002 2.20001L6.70019 6.80001C6.60019 6.90001 6.49186 6.97068 6.37519 7.01201C6.25853 7.05401 6.13353 7.07501 6.00019 7.07501Z" fill="#858585"/></svg>';
  43.     const svgCode2 = '<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.575 0C5.70833 0 5.83733 0.025001 5.962 0.075001C6.08733 0.125005 6.19166 0.191665 6.275 0.275005L10.875 4.87501C11.0583 5.05834 11.15 5.29167 11.15 5.57501C11.15 5.85834 11.0583 6.09166 10.875 6.275C10.6917 6.45833 10.4583 6.55 10.175 6.55C9.89169 6.55 9.65829 6.45833 9.475 6.275L5.575 2.37501L1.675 6.275C1.49166 6.45833 1.25833 6.55 0.975004 6.55C0.691664 6.55 0.458335 6.45833 0.275002 6.275C0.091669 6.09166 0 5.85834 0 5.57501C0 5.29167 0.091669 5.05834 0.275002 4.87501L4.875 0.275005C4.975 0.175005 5.08333 0.104335 5.2 0.063001C5.31666 0.021001 5.44166 0 5.575 0Z" fill="#858585"/> </svg>';
  44.     // Changez le texte du bouton à basculer en fonction de l'état de la div
  45.     toggleBtn.innerHTML = (div.style.display === 'none') ? svgCode : svgCode2;
  46.     // });
  47.   }
  48. </script>