[#1645] improve design of product page

src/open_inwoner/pdc/migrations/0058_product_button_text.py

@@ -0,0 +1,24 @@
+# Generated by Django 3.2.15 on 2023-08-11 09:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("pdc", "0057_auto_20230623_1523"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="product",
+            name="button_text",
+            field=models.CharField(
+                blank=True,
+                default="Aanvraag starten",
+                help_text="The text displayed on the button.",
+                max_length=64,
+                verbose_name="CTA Button text",
+            ),
+        ),
+    ]

src/open_inwoner/pdc/models/product.py

@@ -79,6 +79,13 @@ class Product(models.Model):
         default="",
         help_text=_("Action link to request the product."),
     )
+    button_text = models.CharField(
+        verbose_name=_("CTA Button text"),
+        max_length=64,
+        blank=True,
+        default=_("Aanvraag starten"),
+        help_text=_("The text displayed on the button."),
+    )
     form = OpenFormsSlugField(
         _("Request form"),
         blank=True,

src/open_inwoner/pdc/tests/test_data_migrations.py

@@ -2,7 +2,6 @@
 
 from open_inwoner.utils.tests.test_migrations import TestMigrations
 
-from ..models import Category, Product
 from ..models.product import ProductLocation
 
 
@@ -92,14 +91,16 @@ def setUpBeforeMigration(self, apps):
         self.product.categories.add(self.category_initial)
 
     def test_products_still_have_category(self):
-        # swap our migration models for real objects
-        product = Product.objects.get(id=self.product.id)
+        Product = self.apps.get_model("pdc", "Product")
+        Category = self.apps.get_model("pdc", "Category")
+
         category_initial = Category.objects.get(id=self.category_initial.id)
         category_extra = Category.objects.get(id=self.category_extra.id)
 
-        product.categories.add(category_extra)
+        product = Product.objects.get(id=self.product.id)
+        product.categories.add(category_extra, through_defaults={"order": 1})
 
         self.assertEqual(
             list(product.categories.all()),
-            [category_extra, category_initial],
+            [category_initial, category_extra],
         )

src/open_inwoner/pdc/tests/test_product.py

@@ -228,6 +228,28 @@ def test_button_is_not_rendered_inside_content_when_no_form_or_link(self):
 
         self.assertFalse(cta_button)
 
+    def test_button_text_change(self):
+        """
+        Assert that button text can be modified + aria-labels are changed accordingly
+        """
+        product = ProductFactory(
+            content="Some content [CTABUTTON]",
+            link="http://www.example.com",
+            button_text="click me!",
+        )
+
+        response = self.app.get(
+            reverse("products:product_detail", kwargs={"slug": product.slug})
+        )
+
+        cta_button = response.pyquery(".grid__main")[0].find_class("cta-button")[0]
+        cta_button_span = cta_button.getchildren()[0]
+
+        self.assertEqual(cta_button.tag, "a")
+        self.assertEqual(cta_button.attrib["title"], "click me!")
+        self.assertEqual(cta_button.attrib["aria-label"], "click me!")
+        self.assertEqual(cta_button_span.attrib["aria-label"], "click me!")
+
     def test_sidemenu_button_is_not_rendered_when_cta_inside_product_content(self):
         product = ProductFactory(
             content="Some content \[CTABUTTON\]", link="http://www.example.com"

src/open_inwoner/scss/components/Typography/Link.scss

@@ -47,6 +47,8 @@
     color: var(--color-black);
   }
 
+  word-wrap: break-word;
+
   &--secondary {
     color: var(--color-secondary);
   }

src/open_inwoner/templates/pages/product/detail.html

@@ -40,16 +40,6 @@ <h1 class="h1" id="title">
         <hr class="divider">
     {% endif %}
 
-    {% if product.form %}
-        {% button_row mobile=True %}
-            {% button href=product.form_link text=_("Aanvraag starten") primary=True icon="arrow_forward" icon_position="before" %}
-        {% endbutton_row %}
-    {% elif product.link %}
-        {% button_row mobile=True %}
-            {% button href=product.link text=_("Aanvraag starten") primary=True icon="arrow_forward" icon_position="before" %}
-        {% endbutton_row %}
-    {% endif %}
-
     <div class="product-info">
         {% if object.question_set.exists %}
             {% faq object.question_set.all %}

src/open_inwoner/utils/ckeditor.py

@@ -61,7 +61,7 @@ def get_product_rendered_content(product):
                 # icon
                 icon = soup.new_tag("span")
                 icon.attrs.update(
-                    {"aria-label": _("Aanvraag starten"), "class": "material-icons"}
+                    {"aria-label": product.button_text, "class": "material-icons"}
                 )
                 icon.append("arrow_forward")
 
@@ -72,11 +72,12 @@ def get_product_rendered_content(product):
                     {
                         "class": "button button--textless button--icon button--icon-before button--primary cta-button",
                         "href": (product.link if product.link else product.form_link),
-                        "title": _("Aanvraag starten"),
+                        "title": product.button_text,
+                        "aria-label": product.button_text,
                     }
                 )
                 element.append(icon)
-                element.append(_("Aanvraag starten"))
+                element.append(product.button_text)
 
                 if product.link:
                     element.attrs.update({"target": "_blank"})