Skip to content

Commit

Permalink
Merge pull request #730 from maykinmedia/feature/1645-product-page-de…
Browse files Browse the repository at this point in the history
…sign

[#1645] improve design of product page
  • Loading branch information
alextreme authored Aug 22, 2023
2 parents 180261d + ad6114f commit 42dd777
Show file tree
Hide file tree
Showing 7 changed files with 65 additions and 18 deletions.
24 changes: 24 additions & 0 deletions src/open_inwoner/pdc/migrations/0058_product_button_text.py
Original file line number Diff line number Diff line change
@@ -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",
),
),
]
7 changes: 7 additions & 0 deletions src/open_inwoner/pdc/models/product.py
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
11 changes: 6 additions & 5 deletions src/open_inwoner/pdc/tests/test_data_migrations.py
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

from open_inwoner.utils.tests.test_migrations import TestMigrations

from ..models import Category, Product
from ..models.product import ProductLocation


Expand Down Expand Up @@ -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],
)
22 changes: 22 additions & 0 deletions src/open_inwoner/pdc/tests/test_product.py
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 2 additions & 0 deletions src/open_inwoner/scss/components/Typography/Link.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@
color: var(--color-black);
}

word-wrap: break-word;

&--secondary {
color: var(--color-secondary);
}
Expand Down
10 changes: 0 additions & 10 deletions src/open_inwoner/templates/pages/product/detail.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
7 changes: 4 additions & 3 deletions src/open_inwoner/utils/ckeditor.py
Original file line number Diff line number Diff line change
Expand Up @@ -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")

Expand All @@ -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"})
Expand Down

0 comments on commit 42dd777

Please sign in to comment.