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 }) %} |
juliandoucette
2017/10/11 15:09:48
NIT: I think we indent after for
ire
2017/10/11 17:01:41
Done.
|
+ {% if articles %} |
+ <dt role="heading" aria-level="3" class="accordion-heading"> |
juliandoucette
2017/10/11 15:09:48
NIT: I think we indent after if
ire
2017/10/11 17:01:41
Done.
|
+ <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 Section" | translate("accordion-toggle-icon", "Image alt text") }}"> |
juliandoucette
2017/10/11 15:09:48
NIT/Suggest: "Toggle arrow"? - more visually desc
ire
2017/10/11 17:01:41
Done.
|
+ {{ 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> |