Problem fetching WordPress menu

[chrys3136]

UPDATE - I have confirmed that the formatting of my source url in frontity.settings.js is creating an issue with how the Wordpress menu is fetched. localhost:8888/folder/ creates an issue where https://somesite.com doesn’t. It seems the when I use an location with a subfolder, the urls get /folder as the start of their paths…but short of altering the urls that get generated in the map function of nav.js, I can’t figure out how to address this. Below is my initial post…

I am excited to use Frontity and have really appreciated the videos and documentation! I hope someone in this community can help me figure out how the ‘link’ and ‘route’ get built/defined, because I think that’s where things are going wrong. Sorry I keep editing, but I’m trying to add info and things I’m trying…The problem I’m having after fetching my wordpress menu is that the route and link each resolve to ‘/newsg/page’ instead of ‘/page’ so only the index page at locahost:3000/ loads properly - any other link clicked on in the navigation results in a “404 - Not Found” error because they each resolve to localhost:3000/newsg/somepage instead of localhost:3000/somepage – if I delete the /newsg/ part of the url in the address bar, the page loads perfectly.

I don’t really understand enough of how things are working to know if the problem is the actually the route. The source url in my frontity.settings.js file is ‘http://localhost:8888/newsg’ which is the directory of my wordpress site. So that is where I am guessing the /newsg is coming from. But I don’t know if somewhere along the line frontity internally does string replacement to have the source url map to localhost:3000/ and I’ve made a mistake somewhere that is interfering with that? (I got thinking along those lines after reading this post Fix/internal links multiple sites by nicholasio · Pull Request #625 · frontity/frontity · GitHub) I also noticed that in the video, Michael is using a subdomain for his project (wp-menu.test/) instead of (wp-menu/test/) and I wonder if making my wp site a subdomain would help this complication? As a shortgap solution, I’ve added the following to my nav.js, which works but imho is a pretty janky solution:

{items.map((item) => {
     **item.url = item.url.replace('/newsg', '');**
     if (!item.child_items) {

Here is a repo of the files: https://github.com/chrisvwlc/frontity.git

And, if I understand correctly, the ‘WP REST API url’ is http://localhost:8888/newsg/wp-json/menus/v1/menus/primary.
Thank you for your time and thoughts.

Here is a screenshot showing the error as well as the link and route…

as well as a page loading if I remove the /newsg

[juanma]

Hi @chrys3136,

Welcome to our Community!!

Have you checked this video?

https://www.youtube.com/watch?v=BMJn0RZ2I9s

It explains how to read the menus defined in your WP installation so they can be used from Frontity

This is the repo with the project explained in the video: frontity-examples/fetch-menu-from-wp at master · frontity-demos/frontity-examples · GitHub

The plugin recommended to share the menus in the REST API: WP-REST-API V2 Menus – WordPress plugin | WordPress.org

Hope this helps

[chrys3136]

Hi Juanma and thanks for the response.

Yes, I watched the video and used code from the repo. And I am using the recommended WP REST API V2 Menus plugin.

I’m getting a 404 for every page except the index because all of the urls contain a directory in their paths that they shouldn’t.

Can you tell me how/where the urls are constructed/generated?

As I said, I’m using the code in the repo. Within menu-handler.js, there is this block of code:

func: async ({ link, params, state, libraries }) => {
    const { slug } = params;

    // Fetch the menu data from the endpoint
    const response = await api.get({
      endpoint: `/menus/v1/menus/${slug}`,
    });

    // Parse the JSON to get the object
    const menuData = await response.json();

    // Add the menu items to source.data
    const menu = state.source.data[link];

    Object.assign(menu, {
      items: menuData.items,
      isMenu: true,
    });
    console.log("items are: ", menuData.items);
  },

Inside the console.log("items are: ", menuData.items) results, there is a url and a slug for each menu item…

  [
  {
    ID: 3113,
   ...
    post_title: 'About Us',
   ...
    post_name: 'about-us',
   ...
    guid: 'http://localhost:8888/newsg/?p=3113',
    ...
    object: 'page',
    type: 'post_type',
    type_label: 'Page',
    url: 'http://localhost:8888/newsg/about-the-memorial-2/',
    title: 'About Us',
    ...
    slug: 'about-the-memorial-2',
    child_items: [ [Object], [Object], [Object], [Object] ]
  },

So what is frontity doing with this? I would have assumed that it would replace the source url (http://localhost:8888/newsg) with localhost:3000 and then add on the slug…so for the above item, you’d get ‘http://localhost:3000/about-the-memorial-2’ But that’s not what’s happening. Somehow the url is http://localhost:3000/sgnew/about-the-memorial-2’ … So the question is how is the /sgnew getting in the url strings?

Further, in link.js, there is this line:
<Link link={item.url}>{item.title}</Link>
“item.url” here is ‘http://localhost:8888/newsg/promoting-the-arts/programs/’
So the question again, is how does this become “localhost:3000/newsg/promoting-the-arts/programs/” ? Why, if the source url in frontity settings is configured to be “localhost:8888/newsg” doesn’t frontity subtract the source url from the item url and just grab what remains of the url string after? How would I properly change this? Again, the url should just drop the /newsg part to render properly in frontity… obviously there is someplace where external data gets mapped to frontity data and I feel that must be where I’d be able to fix this… I hope this is making sense?

Just doing a string replace in the nav.js (see my intitial post) will work for the navigation but it won’t work for all of the other fetches links and references… I’ll have to deal with this through the site… I’ve seen other references to wp subdirectory installs so I’d love to understand why I’m struggling with mine.

Thanks for any insight you can offer!