7620 -Subcategories - include subcategory pills on the Product Page

fix tests complete Fixes Feedback
MozillaFoundation · Nov 1, 2021 · cfc62b6 · cfc62b6
1 parent 193de5f
commit cfc62b6
Show file tree

Hide file tree

Showing 5 changed files with 279 additions and 58 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,11 +1,8 @@
 {
-  "plugins": [
-    "prettier",
-    "react"
-  ],
+  "plugins": ["prettier", "react"],
   "parserOptions": {
     "sourceType": "module",
-    "ecmaVersion": 2018,
+    "ecmaVersion": 2020,
     "ecmaFeatures": {
       "jsx": true
     }
@@ -14,7 +11,12 @@
     "es6": true
   },
   "rules": {
-    "prettier/prettier": "error",
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
     "react/jsx-uses-vars": "error"
   }
 }
diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/bg_base.html b/network-api/networkapi/wagtailpages/templates/buyersguide/bg_base.html
@@ -94,9 +94,11 @@
 
           {% for cat in categories %}
             {% with original=cat.original %}
-            {% if original.published_product_page_count > 0 %}
-              {% localizedroutablepageurl home_page 'category-view' original.slug as cat_url %}
-              <a class="multipage-link {% check_active_category current_category cat %}{% if original.featured is True %} featured{% endif %}" href="{{ cat_url }}" data-name="{{ cat.name }}">{{ cat.name }}</a>
+            {% if cat.parent == None %}
+              {% if original.published_product_page_count > 0 %}
+                {% localizedroutablepageurl home_page 'category-view' original.slug as cat_url %}
+                <a class="multipage-link {% check_active_category current_category cat %}{% if original.featured is True %} featured{% endif %}" href="{{ cat_url }}" data-name="{{ cat.name }}">{{ cat.name }}</a>
+              {% endif %}
             {% endif %}
             {% endwith %}
           {% endfor %}

diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/catalog.html b/network-api/networkapi/wagtailpages/templates/buyersguide/catalog.html
@@ -1,13 +1,15 @@
 {% extends "buyersguide/bg_base.html" %}
 
-{% load env i18n static wagtailimages_tags cache bg_nav_tags %}
+{% load env i18n static wagtailimages_tags cache bg_nav_tags localization %}
 
 {% block bodyclass %}pni catalog{% endblock %}
 
 {% block main_content_class %}{% endblock %}
 
 {% block hero %}
-<input type="hidden" class="category-title" value="{{current_category.localized.name}}">
+<input type="hidden" class="category-title" value="{% if current_category %}{{current_category.localized.name}}{% else %}None{% endif %}">
+<input type="hidden" class="parent-title" value="{{current_category.parent.localized.name}}">
+
 <header
   class="container-fluid text-center page-header bg-gray"
   {% if page.get_banner != None %}style="background-image: url({% image page.get_banner max-1920x1280 as img %}{{ img.url }})"{% endif %}
@@ -36,10 +38,9 @@ <h1 class="h1-heading text-center mt-0">{{ page.header }}</h1>
 {% block guts %}
 <div class="project-list-section">
   <div class="container">
-    <div class="row px-3 px-sm-0">
+    <div class="row px-0 px-sm-0">
       <div class="col-12">
         <div id="sticky-bar" class="creepiness-slider bg-white text-center">
-
           <!-- temporary location for dev work -->
 
           <span class="creep-o-meter-information">
@@ -52,12 +53,51 @@ <h1 class="h1-heading text-center mt-0">{{ page.header }}</h1>
             <span class="current-creepiness"></span>
           </span>
 
-          <span id="product-filter-pni">
-            <input type="checkbox" id="product-filter-pni-toggle" autocomplete="off">
-            <label for="product-filter-pni-toggle" class="pni-checkbox-facade"></label>
-            <span class="pni-icon">&nbsp;</span>
-            <label for="product-filter-pni-toggle">{% trans "*privacy not included" %} </label>
-          </span>
+
+        </div>
+      </div>
+      <div class="col-12 tw-mb-4 tw-px-0 tw-flex tw-items-end">
+        <a 
+         href="{% if current_category.parent %}{% localizedroutablepageurl home_page 'category-view' current_category.parent.slug  %}{% elif current_category %}{% localizedroutablepageurl home_page 'category-view' current_category.slug  %}{% else %}{% relocalized_url home_page.localized.url %}{% endif %}"
+         data-name="{% if current_category.parent %}{{ current_category.parent.name }}{% elif current_category %}{{current_category.name}}{% else %}None{% endif %}"
+         class="tw-capitalize tw-text-5xl tw-font-zilla category-header tw-mb-2 tw-text-black hover:tw-text-pni-blue tw-no-underline tw-cursor-pointer"
+        >
+          {% if current_category.parent %}
+            {{current_category.parent.localized.name}}
+          {% elif current_category %}
+            {{current_category.localized.name}}
+          {% else %}
+            {% trans "All" %}
+          {% endif %}
+        </a>
+
+        <span id="product-filter-pni">
+          <input type="checkbox" id="product-filter-pni-toggle" autocomplete="off">
+          <label for="product-filter-pni-toggle" class="pni-checkbox-facade"></label>
+          <span class="pni-icon">&nbsp;</span>
+          <label for="product-filter-pni-toggle">{% trans "*privacy not included" %} </label>
+        </span>
+      </div>
+
+    </div>
+    <div class="row px-0 tw-mb-4">
+      <div class="tw-w-full">
+        <div class="tw-flex tw-space-x-2">
+          {% for cat in categories %}
+            {% with original=cat.original selected_classes="active tw-bg-gray-80 tw-text-white tw-border-gray-80" default_classes="hover:tw-border-pni-lilac hover:tw-bg-pni-lilac tw-text-gray-60 tw-border-gray-20 tw-bg-white" tailwind_classes="tw-no-underline border tw-px-2 tw-py-1 tw-font-sans tw-rounded-3xl tw-font-normal tw-text-[12px] tw-leading-[1.3]" %}
+            {% if cat.parent != None %}
+              {% if original.published_product_page_count > 0 %}
+                {% localizedroutablepageurl home_page 'category-view' original.slug as cat_url %}
+                <a class="{% if current_category.name != cat.parent.name and current_category.parent.name != cat.parent.name %} tw-hidden {% endif %} subcategories {{ tailwind_classes }} {% if current_category.name == cat.name %}{{ selected_classes }}{% else %}{{ default_classes }}{% endif %}"
+                   href="{{ cat_url }}"
+                   data-parent="{{ cat.parent.name }}"
+                   data-name="{{ cat.name }}">
+                  {{ cat.name }}
+                </a>
+              {% endif %}
+            {% endif %}
+            {% endwith %}
+          {% endfor %}
         </div>
       </div>
     </div>

diff --git a/network-api/networkapi/wagtailpages/templatetags/bg_nav_tags.py b/network-api/networkapi/wagtailpages/templatetags/bg_nav_tags.py
@@ -11,7 +11,8 @@ def check_active_category(current_category, target_category):
     # make sure to compare the linguistic originals.
     current_category = getattr(current_category, 'original', current_category)
     target_category = getattr(target_category, 'original', target_category)
-    return 'active' if current_category == target_category else ''
+    match = current_category == target_category or current_category.parent == target_category
+    return 'active' if match else ''
 
 
 # Determine if a nav link should be active.