🎨 [#1168] Set if/else statement for theme cards with/without products…

…/subthemes

src/open_inwoner/components/templates/components/Card/CategoryCard.html

@@ -1,20 +1,33 @@
 {% load card_tags icon_tags link_tags helpers utils %}
 
 {# create tag for anchor around card - never use anchors within anchors for valid HTML. #}
-<div title="{{ category }}" aria-describedby="Thema's" class="card">
+{% if category.products.published %}
+<div title="{{ category }}" aria-label="{{ category.name }}" class="card">
     <div class="card__body">
         {% if category %}
             <p class="h3">
                 <a href="{{ category.slug }}" class="link link__text">{{ category }}</a>
             </p>
         {% endif %}
         {% for product in category.products.published %}
-        {% with category as parent %}
-            <div class="card__categories">
-            {% get_product_url product as product_url %}
-            {% link href=product_url icon='arrow_forward' icon_position='before' secondary=True text=product.name %}
-            </div>
-        {% endwith %}
-    {% endfor %}
+            {% with category as parent %}
+                <div class="card__categories">
+                    {% get_product_url product as product_url %}
+                    {% link href=product_url icon='arrow_forward' icon_position='before' secondary=True text=product.name %}
+                </div>
+            {% endwith %}
+        {% endfor %}
     </div>
 </div>
+
+{% else %}
+    <a href="{{ category.slug }}" title="{{ category }}" class="card">
+        <div class="card__body">
+            {% if category %}
+                <p class="h3">
+                    <span class="link link__text">{{ category }}</span>
+                </p>
+            {% endif %}
+        </div>
+    </a>
+{% endif %}

src/open_inwoner/components/templates/components/Card/RenderCard.html

@@ -3,7 +3,7 @@
 {# Utilizes same template as Card. #}
 {% capture as tag %}{{ href|yesno:'a,div'}}{% endcapture %}
 {# create tag for anchor around card - never use anchors within anchors for valid HTML. #}
-<{{ tag }}{% if href %} href="{{ href }}"{% endif %} title="{{ title }}" aria-describedby="{{ title }}" class="card{% if compact %} card--compact{% endif %}{% if inline %} card--inline{% endif %}{% if stretch %} card--stretch{% endif %}{% if tinted %} card--tinted{% endif %}{% if type %} card--type-{{ type }}{% endif %}">
+<{{ tag }}{% if href %} href="{{ href }}"{% endif %} title="{{ title }}" aria-label="{{ title }}" class="card{% if compact %} card--compact{% endif %}{% if inline %} card--inline{% endif %}{% if stretch %} card--stretch{% endif %}{% if tinted %} card--tinted{% endif %}{% if type %} card--type-{{ type }}{% endif %}">
     {% if src %}
         <span class="card__header">
             <img class="card__img{% if image_object_fit %} card__img--{{ image_object_fit }}{% endif %}" src="{{ src }}" alt="{{ alt }}"/>