How to detect for page templates?

🙋Get Help
1

So my use-case is that I really enjoy developing WordPress themes with ACF Pro and found it blazing fast development when paired with Timber. Now, I’ve got some React under my belt and using Frontity seems like it would yield more modern and much faster websites. However, as I’m just learning, I’m sort of bumbling through the docs, so apologies if this is an oft-asked or already-answered question:

What I’ve done in the past is create multiple templates for various types of pages and use ACF Pro to target those templates. The huge advantage to it is that the users can change their title or slugs at will, whether for SEO or organizational reasons, and the pages will work. This also enables pages with the same templates to be re-used, saving copying and pasting code you want to reuse.

In addition, I use the front page to determine a specific layout. Therefore I need to be able to switch components based on a combination of data.isHome and post.template. However, because I use the data.isHome, I get an error that state.source[data.type] is undefined unless I do some kind of silly undefined checking:

const Root = ({state}) => {
  const data = state.source.get(state.router.link)
  
  // This seems silly:
  let post = null

  if(typeof data.type !== 'undefined' && !!!data.isHome) {
    post = state.source[data.type][data.id]
  }
  // Thank god the silliness is over!

  return (
    <>
      <header>
        <h1>Page title</h1>

        <nav>
          <Link href="/">Home</Link>
          <Link href="/menus/">Menus</Link>
          <Link href="/about-us/">About Us</Link>
          <Link href="/contact-us/">Contact Us</Link>
        </nav>
      </header>

      <main>
        <Switch>
          <Loading when={data.isFetching} />
          <Home when={data.isHome} />
          <Menus when={post !== null && post.template == 'menus.php'} />
          <AboutUs when={post !== null && post.template == 'about.php'} />
          <ContactUs when={post !== null && post.template == 'contact.php'} />
        </Switch>
      </main>
    </>
  )
}

Anyways, I’m fairly certain this is the wrong way to be doing this but it works sometimes. Is there a better way to do this?

3

Hi @david1

Welcome to the community forum. Great to hear that you’re trying out Frontity.

It would be better to create a new component, or use the existing <Post /> component if you’re using mars-theme, and put the check in there. That way you can be sure that you’ve got a post (by virtue of the <Switch> in the <Root /> component).

Then in the <Post /> component have another <Switch> that does the check you have above, like this:

<Switch>
    <Menus when={post.template == 'menus.php'} />
    <AboutUs when={post.template == 'about.php'} />
    <ContactUs when={post.template == 'contact.php'} />
</Switch>

The <Switch> in the <Root /> component can then just look like this:

<Switch>
    <Loading when={data.isFetching} />
    <Home when={data.isHome} />
    <List when={data.isArchive} />
    <Post when={data.isPostType} />
    <PageError when={data.isError} />
</Switch>

Hope this helps.

1 Like