[#1535] Added subheading anchors to product page sidebar

src/open_inwoner/components/templates/components/AnchorMenu/AnchorMenu.html

@@ -8,6 +8,16 @@
             {% for anchor in anchors %}
                 <li class="anchor-menu__list-item">
                     <a class="link" href="{{ anchor.0 }}">{{ anchor.1 }}</a>
+                    <!-- subheadings -->
+                    {% if anchor.2 %}
+                        <ul class="anchor-menu__sublist anchor-menu__sublist--mobile">
+                            {% for subheading in anchor.2 %}
+                                <li class="anchor-menu__list-item">
+                                    <a class="link" href="#{{ subheading.1 }}">{{ subheading.0 }}</a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    {% endif %}
                 </li>
             {% endfor %}
             {{ contents }}
@@ -20,6 +30,16 @@
         {% for anchor in anchors %}
             <li class="anchor-menu__list-item">
                 <a class="link" href="{{ anchor.0 }}">{{ anchor.1 }}</a>
+                <!-- subheadings -->
+                    {% if anchor.2 %}
+                        <ul class="anchor-menu__sublist">
+                            {% for subheading in anchor.2 %}
+                                <li class="anchor-menu__list-item">
+                                    <a class="link" href="#{{ subheading.1 }}">{{ subheading.0 }}</a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    {% endif %}
             </li>
         {% endfor %}
         {{ contents }}

src/open_inwoner/js/components/anchor-menu/anchor-menu.js

@@ -5,6 +5,7 @@ export class CreateGumshoe {
 
   constructor(node) {
     new Gumshoe(CreateGumshoe.selector, {
+      nested: true,
       navClass: 'anchor-menu__list-item--active',
       offset: 30,
     })

src/open_inwoner/pdc/tests/test_product.py

@@ -276,3 +276,33 @@ def test_sidemenu_button_is_rendered_when_no_cta_inside_product_content(self):
 
         self.assertTrue(sidemenu_cta_button)
         self.assertIn(product.link, sidemenu_cta_button[0].values())
+
+
+@override_settings(ROOT_URLCONF="open_inwoner.cms.tests.urls")
+class TestProductDetailView(WebTest):
+    def test_subheadings_in_sidebar(self):
+        product = ProductFactory(
+            content="##First subheading\rlorem ipsum...\r##Second subheading",
+            link="http://www.example.com",
+        )
+
+        response = self.app.get(
+            reverse("products:product_detail", kwargs={"slug": product.slug})
+        )
+
+        links = response.pyquery(".anchor-menu__sublist a")
+
+        # 2 x 2 links (mobile + desktop)
+        self.assertEqual(len(links), 4)
+
+        self.assertEqual(links[0].text, "First subheading")
+        self.assertEqual(links[0].attrib["href"], "#subheader-first-subheading")
+
+        self.assertEqual(links[1].text, "Second subheading")
+        self.assertEqual(links[1].attrib["href"], "#subheader-second-subheading")
+
+        self.assertEqual(links[2].text, "First subheading")
+        self.assertEqual(links[2].attrib["href"], "#subheader-first-subheading")
+
+        self.assertEqual(links[3].text, "Second subheading")
+        self.assertEqual(links[3].attrib["href"], "#subheader-second-subheading")

src/open_inwoner/pdc/utils.py

@@ -1 +1,25 @@
+from django.utils.text import slugify
+
+import markdown
+from bs4 import BeautifulSoup
+
 PRODUCT_PATH_NAME = "products"
+
+
+def extract_subheadings(content: str, tag: str) -> list[tuple[str, str]]:
+    """
+    :returns: a list of tuples containing a subheading (the text of the `tag` element)
+    and a slug for the corresponding HTML anchor
+    """
+    md = markdown.Markdown()
+    html_string = md.convert(content)
+
+    soup = BeautifulSoup(html_string, "html.parser")
+
+    subs = []
+    for tag in soup.find_all("h2"):
+        subheading = tag.text
+        slug = f"subheader-{slugify(subheading)}"
+        subs.append((subheading, slug))
+
+    return subs

src/open_inwoner/pdc/views.py

@@ -16,6 +16,7 @@
 from .choices import YesNo
 from .forms import ProductFinderForm
 from .models import Category, Product, ProductLocation, Question
+from .utils import extract_subheadings
 
 
 class CategoryBreadcrumbMixin:
@@ -201,22 +202,19 @@ def get_context_data(self, **kwargs):
         product = self.get_object()
         context = super().get_context_data(**kwargs)
 
+        subheadings = extract_subheadings(product.content, tag="h2")
+
         anchors = [
-            ("#title", product.name),
+            ("#title", product.name, subheadings),
         ]
         if product.question_set.exists():
             anchors.append(("#faq", _("Veelgestelde vragen")))
         if product.files.exists():
             anchors.append(("#files", _("Bestanden")))
         if product.locations.exists():
             anchors.append(("#locations", _("Locaties")))
-        if product.links.exists():
-            anchors.append(("#links", _("Links")))
         if product.contacts.exists():
             anchors.append(("#contact", _("Contact")))
-        if product.related_products.published().exists():
-            anchors.append(("#see", _("Zie ook")))
-        # anchors.append(("#share", _("Delen")))  disabled for #822
 
         context["anchors"] = anchors
         context["related_products_start"] = 6 if product.links.exists() else 1

src/open_inwoner/scss/components/Header/AnchorMenu.scss

@@ -63,22 +63,48 @@
     margin-left: var(--spacing-large);
   }
 
-  .link {
+  &__list-item {
     box-sizing: border-box;
-    padding: var(--spacing-large) var(--spacing-medium);
+    font-weight: normal;
+    margin: 0;
 
     @media (min-width: 768px) {
-      border-left: var(--border-width) solid;
-      border-color: var(--color-gray-light);
-      padding: var(--spacing-large);
+      margin: 0;
     }
   }
 
-  &__list-item--active .link {
+  &__list-item .link {
+    padding: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
+
+    @media (min-width: 768px) {
+      border-left: var(--border-width) solid var(--color-gray-light);
+    }
+  }
+
+  &__list-item--active > .link {
     font-weight: bold;
 
     @media (min-width: 768px) {
-      border-color: var(--color-primary);
+      border-left-color: var(--color-primary);
+    }
+  }
+
+  // nested list
+  &__sublist {
+    list-style-type: none;
+    padding: 0;
+    line-height: var(--spacing-large);
+
+    li .link {
+      padding: var(--spacing-small) 0 var(--spacing-small)
+        var(--spacing-extra-large);
+      font-size: var(--font-size-body-small);
+    }
+
+    &--mobile {
+      li > a {
+        font-size: var(--font-size-heading-4) !important;
+      }
     }
   }
 

src/open_inwoner/utils/ckeditor.py

@@ -1,3 +1,4 @@
+from django.utils.text import slugify
 from django.utils.translation import gettext as _
 
 import markdown
@@ -52,6 +53,9 @@ def get_product_rendered_content(product):
 
             element.attrs["class"] = class_name
 
+            if tag == "h2":
+                element.attrs["id"] = f"subheader-{slugify(element.text)}"
+
             if "[CTABUTTON]" in element.text:
                 # decompose the element when product doesn't have either a link or a form
                 if not (product.link or product.form):