Issue 5787 - Add Topics Accordion to Article Template on help.eyeo.com

includes/product-topics-accordion.tmpl

Index: includes/product-topics-accordion.tmpl
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/product-topics-accordion.tmpl
@@ -0,0 +1,24 @@
+<dl id="product-topics-accordion" class="accordion">
+  {% for category in product.help_categories %}
+    {% set articles = get_pages_metadata({ "product_id": product_id, "template": "article", "category": category.name }) %}
+    {% if articles %}
+      <dt role="heading" aria-level="3" class="accordion-heading">
+        <button aria-expanded="true" aria-controls="sect-{{ category.slug }}" id="heading-{{ category.slug }}" class="accordion-toggle-button">
+          <img src="/img/png/arrow-icon-secondary.png" srcset="/img/svg/arrow-icon-secondary.svg 2x" alt="{{ "Toggle arrow" | translate("accordion-toggle-icon", "Image alt text") }}">
+          {{ category.name | translate( category.slug + "-category-title", "Category title") }}
+        </button>
+      </dt>
+      <dd role="region" aria-labelledby="heading-{{ category.slug }}" id="sect-{{ category.slug }}" class="accordion-body">
+        <ul class="underlined-list">
+          {% for article in articles %}
+          <li>
+            <a href="{{ article["page"] }}">
+              {{ article.title | translate( get_page_name( article["page"]) + "-title", "Article title") }}
+            </a>
+          </li>
+          {% endfor %}
+        </ul>
+      </dd>
+    {% endif %}
+  {% endfor %}
+</dl>