PLANET-7671 Add post type filter to News & Stories page (#2465)

This is in addition to the previously added category filter
greenpeace · Dec 17, 2024 · bad7c6a · bad7c6a
1 parent e5a54c7
commit bad7c6a
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 21 deletions.
diff --git a/assets/src/js/listing_pages.js b/assets/src/js/listing_pages.js
@@ -1,3 +1,5 @@
+const {__} = wp.i18n;
+
 export const setupListingPages = () => {
   // Setup behaviour for list/grid toggle.
   const listViewToggle = document.querySelector('.list-view-toggle');
@@ -25,21 +27,30 @@ export const setupListingPages = () => {
     return;
   }
 
-  // Functions and constants.
-  const CATEGORY_FILTER = 'category';
+  const AVAILABLE_FILTERS = ['category', 'post-type'];
 
-  const updateFilter = event => {
-    const {target: {id, value}} = event;
+  const updateFilters = () => {
     const newUrl = new URL(window.location.href.split('/page/')[0]);
 
-    if (value) {
-      newUrl.searchParams.set(id, value);
-    } else {
-      newUrl.searchParams.delete(id);
-    }
+    AVAILABLE_FILTERS.forEach(filter => {
+      const {value} = document.getElementById(filter);
+      if (value) {
+        newUrl.searchParams.set(filter, value);
+      } else {
+        newUrl.searchParams.delete(filter);
+      }
+    });
+
     window.location.href = newUrl.href;
   };
 
-  // Category filter.
-  document.getElementById(CATEGORY_FILTER).onchange = updateFilter;
+  document.getElementById('apply-filters').onclick = updateFilters;
+
+  // Add 'No posts found' text when needed.
+  if (!listingPageContent.querySelector('.wp-block-post-template')) {
+    const noPostsFound = document.createElement('p');
+    noPostsFound.classList.add('listing-page-no-posts-found');
+    noPostsFound.innerHTML = __('No posts found!', 'planet4-master-theme');
+    listingPageContent.appendChild(noPostsFound);
+  }
 };
diff --git a/assets/src/scss/pages/_listing-page.scss b/assets/src/scss/pages/_listing-page.scss
@@ -357,10 +357,37 @@
   width: 100%;
 
   .listing-page-select {
-    width: 220px;
+    width: 100%;
+    margin-bottom: $sp-3;
+  }
 
-    @include mobile-only {
-      width: 100%;
+  .btn-primary {
+    width: 100%;
+  }
+
+  @include medium-and-up {
+    display: flex;
+
+    .listing-page-select {
+      margin-inline-end: $sp-3;
+      margin-bottom: 0;
+      width: 220px;
+    }
+
+    .btn-primary {
+      width: auto;
     }
   }
+
+  @include large-and-up {
+    .listing-page-select {
+      width: 300px;
+    }
+  }
+}
+
+.listing-page-no-posts-found {
+  text-align: center;
+  font-size: var(--font-size-m--font-family-primary);
+  padding-top: $sp-4;
 }
diff --git a/functions.php b/functions.php
@@ -521,20 +521,26 @@ function ($urls, $post_id) {
 );
 
 // Add filters to the News & Stories listing page.
-// Right now only "category" is available.
+// Right now only "category" and "post type" are available.
 add_action(
     'pre_get_posts',
     function ($query): void {
         if (!$query->is_main_query() || is_admin() || !is_home()) {
             return;
         }
+        // Category filter
         $category_slug = isset($_GET['category']) ? $_GET['category'] : '';
         $category = get_category_by_slug($category_slug);
-        if (!$category || !get_posts(['post_type' => 'post', 'category' => $category->term_id])) {
-            $query->set('category__in', []);
-        } else {
-            $query->set('category__in', [$category->term_id]);
-        }
+        $query->set('category__in', $category ? [$category->term_id] : []);
+
+        // Post type filter
+        $post_type_slug = isset($_GET['post-type']) ? $_GET['post-type'] : '';
+        $post_type = get_term_by('slug', $post_type_slug, 'p4-page-type');
+        $query->set('tax_query', !$post_type ? [] : [[
+            'taxonomy' => 'p4-page-type',
+            'field' => 'term_id',
+            'terms' => [$post_type->term_id],
+        ]]);
     }
 );
 

diff --git a/src/ListingPage.php b/src/ListingPage.php
@@ -109,7 +109,7 @@ private function set_news_page_link(): void
 
     /**
      * Set the 'News & stories' page filters.
-     * For now only the "category" one is available.
+     * For now only the "category" and "post types" are available.
      */
     private function set_filters(): void
     {
@@ -127,7 +127,10 @@ private function set_filters(): void
             $categories[] = $cat;
         }
         $this->context['categories'] = $categories;
+        $this->context['post_types'] = get_terms(['taxonomy' => 'p4-page-type']);
+
         $this->context['current_category'] = $_GET['category'] ?? '';
+        $this->context['current_post_type'] = $_GET['post-type'] ?? '';
     }
 
     /**

diff --git a/templates/listing-page-filters.twig b/templates/listing-page-filters.twig
@@ -14,4 +14,17 @@
             </option>
         {% endfor %}
     </select>
+    <select class="form-select listing-page-select" id="post-type">
+        <option value="">{{__( 'All posts', 'planet4-master-theme' ) }}</option>
+        {% for key,post_type in post_types %}
+            {% set isSelected = current_post_type == post_type.slug %}
+            <option
+                value="{{post_type.slug}}"
+                {{isSelected ? 'selected' : ''}}
+            >
+                {{ post_type.name|raw }}
+            </option>
+        {% endfor %}
+    </select>
+    <button id="apply-filters" class="btn btn-primary">{{__('Apply', 'planet4-master-theme')}}</button>
 </div>