How to create Custom Pages?

Hello @luisherranz, I tried your solution but when I am typing any id I get a 404 page :confused:

  const helloHandler = {
  pattern: "/hello/:id",
  func: ({ state, link, params }) => {
    state.source.data[link].isHello = true;
    state.source.data[link].id = params.id;
  },
};

And

packages: [
{
  name: "@awsmin/f1",
  state: {
    theme: {
      menu: [
        ["Nos occasions", "/"],
        ["L'atelier", "/category/nature/"],
        ["Nos services", "/category/travel/"],
        ["Qui sommes-nous", "/tag/japan/"],
        ["Actualités", "/about-us/"],
        ["Nous contacter", "/about-us/"],
      ],
      featured: {
        showOnList: false,
        showOnPost: false,
      },
    },
  },
  actions: {
    theme: {
      init: ({ libraries }) => {
        // Use html2react to process the <img> tags inside the content HTML.
        // libraries.html2react.processors.push(image);

        // Add the handler to wp-source.
        libraries.source.handlers.push(helloHandler);
      },
    },
  },

and my index.js I create a component with sample h1 at that time

<Switch>
      <Loading when={data.isFetching} />
      <List when={data.isArchive} />
      <HomeScreen when={data.isHome} />
      <VehicleScreen when={data.isOffers} />
      <Entretien when={data.isEntretien} />
      <Hello when={data.isHello} />
      <Jobs when={data.isAwsmJobOpenings} />
      <Page when={data.isPage} />
      <Post when={data.isPostType} />
      <PageError when={data.isError} />
    </Switch>

Hi @floriandupuis1996,

Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions of technical issues with specific code

I use it, can fix this problem !

const profilePage = {
	name: 'member',
	priority: 1,
	pattern: '/member/:user',
	func: ({ state, link, params }) => {
		state.source.data[link].isProfile = true
		state.source.data[link].user = params.user
	},
}
]
	actions: {
		actions: {
			init: ({ libraries }) => {
				libraries.source.handlers.push(profilePage)
			},
		},
		theme: {
...
}

Yeah I succeed

Hey @floriandupuis1996 it’d be great if you can share with the rest how you finally solved and what was the issue you were having :smiley:

Ths thing is I had handler in frontity.settings.js instead of index… now I am looking to get the param.id display on my component but this is not easy task…

any idea ?

Hi there, I’m Pilar. I’m starting with Frontity and I’ve struggling with custom handlers, custom pages and custom queries, browsing this thread and many others, reading the docs, etc. I’ve finally made it work so I wanted to share the code in case it’s helpful for anyone, as yours has been to me :slight_smile:

The base of my project is a large set of Galician traditional sayings or “refranes”. The main user interaction will be the search (and also copying the text of the quote, sharing it as an image, etc. but that’s another story). For SEO reasons I want some popular searches to be on the menu and have their own url, like “sayings-about-winter” (instead of “domain.com/?s=winter”), without having to categorize them. So I created a custom handler that takes the last word of that url pattern, whatever it is, (in this case, “winter”) and shows all the posts that contain that specific word.

That’s how I achieved it, I don’t know if it’s a better way to to do it? It would be simpler with the future method described here, but for now it’s working :slight_smile:!

In mars-theme/src/index.js:

import Theme from "./components";
import image from "@frontity/html2react/processors/image";
import iframe from "@frontity/html2react/processors/iframe";

const searchUrls = {
  priority: 1,
  pattern: "/sayings-about-:search",
  func: async ({ link, params, state, libraries, force }) => {
    
    const response = await libraries.source.api.get({
      endpoint: "posts",
      params: { search: params.search }
    });

    const items = await libraries.source.populate({
      response,
      state,
      force,
    });    

    Object.assign(state.source.data[link], {
      isSearchUrl: true,
      //add queried posts to data
      items,
    });

  }
}
const marsTheme = {
  name: "@frontity/mars-theme",
  roots: {
    theme: Theme,
  },
  state: {
    theme: {

      },
    },
  },
  actions: {
    theme: {   
      init: ({ libraries }) => {
        libraries.source.handlers.push(searchUrls);
      },    
    },
  },
};

export default marsTheme;

In src/components/index.js:

<Switch>
  <Loading when={data.isFetching} />
  <List when={data.isArchive} />
  <Post when={data.isPostType} />
  <ListSearch when={data.isSearchUrl} />
</Switch>

In components/list/list-search.js:

const ListSearch = ({ state, libraries, link }) => {
    const data = state.source.get(state.router.link);
    return (
      <Container>
        {data.items.map(({ type, id }) => {
          const item = state.source[type][id];
          // Render one Item component for each one.
          return <Item key={item.id} item={item} />;
        })}
        <Pagination />
      </Container>
    );
};

Now if I go to /sayings-about-winter I see all the posts that contain the word “winter”, and /sayings-about-spring shows all the posts containing “spring”, etc.

And I can add these links to the menu in frontity.settings.js (or anywhere else):

      "menu": [
        [
          "Home",
          "/"
        ],
        [
          "Sayings about winter",
          "/sayings-about-winter/"
        ],
        [
          "Sayings about spring",
          "/sayings-about-spring/"
        ],
      ],
2 Likes

Hi @decrecementofeliz

Welcome to the community. It looks like you’re doing great on your journey with Frontity! :tada:

Thanks for presenting this solution. I’m sure other Frontity users will find it useful.

We’d love to know more about what you’re building with Frontity. We’re always looking for projects to feature in our showcase page.

1 Like