Hi,
I have many custom taxonomies and I’m trying to build custom search where user can search for different post types and filter results by taxonomies.
On the left side of the page I have a tree of all taxonomies for different post types, so user can click and go to the taxonomy page, where on the left side he will have the same menu with selected taxonomy.
What’s important - there will be custom routing, because I need to have URLs that can contain different taxonomies in one segment, for example:
https://exapmle.com/products-for-mens/tax1-category1.tax-1-category2/tax2.category1/?s=somequery
You can find similar logic on Zalando website:
https://www.zalando.co.uk/mens-shoes-loafers/aldo.barker/
To this stage everything is easy and great, but I have a problem with populating the results that I get from my custom endpoint.
For example, if user enters search page I will download in the handler for this url list of all categories and some amount of posts, to show it on this page. I have registered endpoint that returns array of categories from get_categories()
.
cat_ID: 113
cat_name: "Accusantium animi"
category_count: 4
category_description: "Some category description"
category_parent: 0
count: 4
description: "Some category description"
filter: "raw"
name: "Accusantium animi"
parent: 0
slug: "accusantium-animi"
taxonomy: "category"
term_group: 0
term_id: 113
term_taxonomy_id: 113
I have a handler that looks like this:
...
name: 'isMainSearchResults',
priority: 20,
pattern: '(/search-results/)',
...
...
const response = await api.get({
endpoint: `/${endpoint}/search-main`,
params: {
s: decodeQuery(query.s),
type: pageType,
},
});
const results = await response.json();
results
returns object with list of all taxonomies and couple posts that I want to display. I get it from the backend with help of get_posts()
function:
{
blogCategories: [
{... category object as above }
],
blogPosts: [
{
ID: 82
comment_count: "0"
comment_status: "open"
filter: "raw"
guid: "https://example.com/admin/blog/distinctio-iusto-molestiae-aut-hic-nemo/"
menu_order: 0
ping_status: "open"
pinged: ""
post_author: "1"
post_content: "<p>some content</p>"
post_content_filtered: ""
post_date: "2020-12-12 23:54:18"
post_date_gmt: "2020-12-12 23:54:18"
post_excerpt: ""
post_mime_type: ""
post_modified: "2020-12-12 23:54:18"
post_modified_gmt: "2020-12-12 23:54:18"
post_name: "distinctio-iusto-molestiae-aut-hic-nemo"
post_parent: 0
post_password: ""
post_status: "publish"
post_title: "Distinctio iusto molestiae aut hic nemo"
post_type: "post"
to_ping: ""
}
]
products: [
...same as posts
]
... other post types
}
Now I would like to map this data to the format that Frontity uses (or the one that WordPress REST API gives you?), and populate it, so user wouldn’t have to download this data every time the route / filter changes.
Is it possible to achieve something like this with Frontity?
I know I could preload all categories in beforeSSR
and then only load posts on other pages, but then user would have to download it for every single page even if he doesn’t use it, which is not the best case scenario.
And the other problem of not populating this data is, that if I want to show list of posts on the custom page, using component that uses inside source.category
the categories will not show until I go into the post page (cause the categories are not available in state.source.category
and are not automatically fetched on my search page). Same with featured images etc.
I’m trying to achieve it with Frontity for last couple days and can’t find a way to do it I will be really grateful for some explanation to these two problems.