7620 -Subcategories - include subcategory pills on the Product Page

fix tests complete
MozillaFoundation · Nov 1, 2021 · 6578f3b · 6578f3b
1 parent 193de5f
commit 6578f3b
Show file tree

Hide file tree

Showing 5 changed files with 242 additions and 55 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,10 @@ <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 +54,39 @@ <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">
+        <span class="tw-capitalize tw-text-5xl tw-font-zilla category-header tw-mb-2">{% if current_category.parent %}{{current_category.parent.localized.name}}{% elif current_category %}{{current_category.localized.name}}{% else  %}{% trans "All" %}{% endif %}</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="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 %}
+            {% 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 tw-no-underline tw-text-gray-60 border tw-border-gray-20 tw-bg-white tw-px-2 tw-py-1 tw-font-sans tw-rounded-3xl tw-font-normal tw-text-[12px] tw-leading-[1.3] hover:tw-bg-pni-lilac hover:tw-border-pni-lilac "
+                   href="{{ cat_url }}"
+                   data-parent="{{ cat.parent.name }}"
+                   data-name="{{ cat.name }}">
+                  {{ cat.name }}
+                </a>
+              {% endif %}
+            {% endif %}
+            {% endwith %}
+          {% endfor %}
         </div>
       </div>
     </div>