diff --git a/assets/src/js/listing_pages.js b/assets/src/js/listing_pages.js index 151243b938..27bd8048a4 100644 --- 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 index 6352601bcb..655126f67d 100644 --- 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 index 628436cba9..4781aeaa3c 100644 --- 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 index e6a2a379b1..35a009b06a 100644 --- 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 index 4bbe13d58c..a2ca2718f3 100644 --- a/templates/listing-page-filters.twig +++ b/templates/listing-page-filters.twig @@ -14,4 +14,17 @@ {% endfor %} + +