Best approach for this page/data structure?

Developing with Prismic
1

The Problem

I'm currently building a website for a client where the url structure will look a little something like this:
/products/[product-category]/[product-brand]

Scenario 1

In some cases, there will be both a product-category and product-brand
e.g. all of the below urls exist:
/products/watch
/products/watch/rolex
/products/watch/hublot

Scenario 2

In some cases, there will be no 'product-brand' (only a 'product-category') and the url will look like:
/products/[product-category]

e.g.
/products/watch exists
/products/watch/[product-brand] does not exist

Scenario 3

In some cases, there will be a 'product-brand' with a 'product-category' in the url, but the standalone 'product-category' page should not exist

e.g.
/products/watch doesn't exist
/products/watch/rolex exists

The Potential Solutions

I've thought of two approaches to handle this, but both approaches have their flaws

Approach 1

Prismic:

  • Use two custom types
    • product-brand
    • product-category
  • Product-brand has a content relationship field that links to product-category

Nextjs:

  • Dynamic routes
    • /products/[product-category] - brings back all product-category content types
    • /products/[product-category]/[product-brand] - brings back all product-brand content types with matching product-category

The issue with this approach is, /products/[product-category] would create a /products/watch page which I wouldn't want in scenario 3

Approach 2

Prismic:

  • Use two custom types
    • product-brand
    • product-category
  • Product-brand has a 'select' field with a collection of pre-defined categories

Nextjs

  • Dynamic routes
    • /products/[product-category] - brings back all product-category content types
    • /products/[category]/[product-brand] - brings back all the product-brand content types with a matching category select field

This would avoid the issue of approach 1, since a product category can exist in the select field of product-brand without being created as a product-category type (and therefore having no page).

The issue here is there would be duplication of data - since scenario 1 exists there could be issues where the client names a 'product-category' as 'watches' but 'watch' is used in the select list for product brand, causing inconsistencies. I'm also worried about potential clashes (what if a product-brand is the same name as a product-category, how will Nextjs handle that?)

Afterthoughts

Is there a 'proper' way of doing this? I'm leaning towards approach 2 as the best method and the lesser or two evils.

3

Hi @david.al.fox,

You can use your approach one and handle non-existing pages with the redirection of existing pages or error handling for 404 pages.

Or I have another approach that I can suggest:

Do not create the [product-category] page in Prismic. Instead, you can add a tag on the product page for the category, and whenever you want to query all the product pages which fall under the same tag, e.g., on the /products/watch page: You can use Query by Tag method to query all the products which have a "watch" tag. Learn more about tagging system in Prismic.

Let me know what do you think.

Thanks,
Priyanka

4

Hi Priyanka

Thanks for getting back to me and apologies for not responding to this sooner, it's been a hectic week!

Your first suggestion could work. I.e. there would be a product-category document called 'watches' and a product-brand document called 'rolex'

/products/watch/rolex would exist
/products/watch would be redirected, either to a product-brand page or the home page

It's a little more hacky than I'd like, it doesn't really feel like good practice to be redirecting away from a page that exists. It would also require developer intervention if this configuration needed to change in the future.

Not perfect, but you think this could be the best approach?

The second approach with the tagging system that you suggested I don't think will work. It's effectively the same or similar to approach two suggested in the OP.

There would be a need for the product-category page as, in the absence of a brand document, the category document essentially becomes a brand page - not an index page like would be the case in your suggestion.

Hopefully that makes sense :slight_smile:. Let me know if you think there are any other approaches that might work

5

Hi @david.al.fox

I understand your concerns about redirecting a user from a page. But for making a site consistent for all other brands/category pages, it would be great to have all the pages in place.

If the brand/category pages do not exist, there should be some message either 404 or some default page like "The page is in construction and soon will be available"(This is just for an example).