WP-source not making request to extra postTypes

ni.bonev · 22 September 2020 09:04

After quite some struggles, trying to figure out why either my products or posts don’t load on a hard refresh, depending on the postEndpoint I had set in settings, I had to dig deeper to figure out what is going on.

So what do I want to achieve is that blog post url should be domain.com/some-blog-post and a product url should be domain.com/some-product-url

So they are basically using the same url structure. When that is the case when I try to go to domain.com/some-product I get a 404 because wp-source is making a request to 3 endpoints:

However, it doesnt make a request to product and I can’t figure out why. Here is my settings file, where you can see product is defined as a postType:

const settings = {
  name: "webshop",
  state: {
    frontity: {
      url: "http://localhost:3000",
      title: "Webshop",
      description: "WordPress installation for Frontity development",
    },
  },
  packages: [
    {
      name: "@frontity/webshop-theme",
    },
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          api: "https://api.webshop.de/wp-json/",
          params: {
            per_page: 9,
          },
          homepage: "/home/",
          postsPage: "/blog/",
          postTypes: [
            {
              type: "product",
              endpoint: "product",
              archive: "/product",
            },
          ],
        },
      },
    },
    "@frontity/tiny-router",
    "@frontity/html2react",
    "@frontity/head-tags",
    "woocommerce-shop",
  ],
};

export default settings;

Any help will be greatly appreciated. I am super desperate at this point as this is my last step left and not sure what to do so my product endpoint is also hit.

Debug info:

donkokoッ: ~
🧙🏼‍ > npx frontity info

## System:
 - OS: macOS 10.15
 - CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
 - Memory: 193.04 MB / 8.00 GB
 - Shell: 5.0.18 - /usr/local/bin/bash
## Binaries:
 - Node: 10.14.2 - /usr/local/bin/node
 - npm: 6.13.4 - /usr/local/bin/npm
## Browsers:
 - Chrome: 85.0.4183.121
 - Edge: 85.0.564.60
 - Firefox: 70.0
 - Safari: 13.0.2
## npmPackages:
 - @frontity/core: ^1.8.0 => 1.8.0
 - @frontity/head-tags: ^1.0.7 => 1.0.7
 - @frontity/html2react: ^1.4.0 => 1.4.0
 - @frontity/webshop-theme: ./packages/webshop-theme => 1.4.2
 - @frontity/tiny-router: ^1.2.1 => 1.2.1
 - @frontity/wp-source: ^1.8.4 => 1.8.4
 - @hookform/error-message: 0.0.4 => 0.0.4
 - axios: ^0.20.0 => 0.20.0
 - frontity: ^1.11.1 => 1.11.1
 - js-cookie: ^2.2.1 => 2.2.1
 - libphonenumber-js: ^1.7.58 => 1.7.58
 - libphonenumber-js-core:  1.0.0
 - libphonenumber-js-max:  1.0.0
 - libphonenumber-js-min:  1.0.0
 - libphonenumber-js-mobile:  1.0.0
 - react-content-loader: ^5.1.2 => 5.1.2
 - react-content-loader/native:  undefined ()
 - react-hook-form: ^6.8.4 => 6.8.4
 - react-select: ^3.1.0 => 3.1.0
 - react-spring: ^8.0.27 => 8.0.27
 - woocommerce-shop: file:packages/woocommerce-shop => 1.0.0
## npmGlobalPackages:
 - frontity: Not Found
 - npx: Not Found

Terminal output

{ ServerError: post type from endpoints "posts,pages,media" with slug "spiegel-serie" not found
    at Object.eval (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/postType.ts:37:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  name: 'ServerError',
  status: 404,
  statusText:
   'post type from endpoints "posts,pages,media" with slug "spiegel-serie" not found' }

@mburridge I checked your video on youtube and based on the description there this should work 100%. Could you please let me know what I am doing wrong?

P.S. I have created a new project from scratch and only added the postEndpoints and changed the API url and it still doesnt work.
Greetings

juanma · 22 September 2020 15:43

Hi @ni.bonev,

In order to provide the best possible help as quickly and as efficiently as possible, can you please provide the info suggested here?

The more info you provide about your issue the better.
Providing a repo or code-sandbox with your code is especially helpful to find solutions of technical issues with specific code

Regarding Custom Post Types we published this “Frontity Talk” where we talk about how to implement Custom Post Types in a Frontity project

This is the demo explained in the video

Hope this helps

ni.bonev · 22 September 2020 16:08

Hey @juanma,

thanks for your answer. As I mentioned in my post I already followed the guide step by step and even created a blank project with mars-theme and I had the same issue.

After digging deeper, I think the way frontity is built now, if I want to use a CPT I have to access them via sub-directory for example:

domain.com/:product_id - NOT possible
domain.com/product/:id - the way it is designed.

This doesnt work for us as we are following the best SEO practices, which means that our links should be the following:

Would that be possible, considering that product is a CPT?

I have pushed the blank project to a repo and I hardcoded a link to 1 specific product in the navbar. Just click the link that says “P-serie”. I would like it to have the behaviour as explained above but I couldn’t manage to make it work.

(https://github.com/DonKoko/test-frontity-cpt)

ni.bonev · 23 September 2020 16:13

As this never got answered but another post did, if someone is facing the same issue maybe this helps: Retrieve all posts of CPT without knowing slugs

I have “solved” the problem in another way as I was under time pressure so I haven’t tested this fully myself.

juanma · 23 September 2020 16:24

HI @ni.bonev,

Yes, you’re right, by default this will not work. The reason is the following:

Frontity creates a new handler for the custom post types here:

github.com

frontity/frontity/blob/bda0fab71c99b8e19775e45a0317a4ff1875b4af/packages/wp-source/src/actions.ts#L145



const patterns = isWpCom ? wpCom : wpOrg;
handlers.push(...patterns);

// Add handlers for custom post types.
state.source.postTypes.forEach(({ type, endpoint, archive }) => {
  // Single page
  handlers.push({
    name: type,
    priority: 10,
    pattern: concatPath(type, "/:slug"),
    func: postTypeHandler({ endpoints: [endpoint] }),
  });
  // Archive.
  if (archive)
    handlers.push({
      name: `${type} archive`,
      priority: 10,
      pattern: concatPath(archive),
      func: postTypeArchiveHandler({ type, endpoint }),
    });

There, you can see that this handler is matched when the URL is like concatPath(type, "/:slug"), which evaluates to something like /product/:slug or /my_custom_post_type/:slug

As you want to fetch the products on a path like domain.com/:slug, this is not going to work, because this path is matched by the default postHandler here:

github.com

frontity/frontity/blob/107d3543ce5463186809b7e6f50ca31ffbdc107d/packages/wp-source/src/libraries/patterns/wp-org.ts#L64


  },
  {
    name: "attachment from post by id",
    priority: 20,
    pattern: "/archives/:postId(\\d+)/:slug", // numeric
    func: attachment,
  },
  {
    name: "post type",
    priority: 30,
    pattern: "/(.*)?/:slug", // post or page or attachment
    func: postType,
  },
];

The good news is that you can fix it by overriding the default post type handler. We have cloned his repo and just added this and it works

// src/index.js
import { postTypeHandler } from "@frontity/wp-source/src/libraries/handlers";

const marsTheme = {
  // ... rest of the theme.
  actions: {
    theme: {
      init: ({ libraries }) => {
        libraries.source.handlers.push({
          name: "test handler",
          priority: 20,
          pattern: "/(.*)?/:slug", // post or page or attachment
          func: postTypeHandler({
            // Those are the default endpoints plus "product"
            endpoints: ["product", "posts", "pages", "media"],
          }),
        });
      },
    }
  }
}

Hope this helps!

ni.bonev · 2 October 2020 13:21

That is exactly what I was thinking. I was just not sure if it possible to ovveride/extend the functionality. Thanks for the help.

ni.bonev · 9 October 2020 14:21

Just wanted to say thanks again for this. I finally got the time to implement it and it works like a charm. I am excited to finish the project so I we can share with everybody.

ni.bonev · 30 June 2021 12:55

Hey @juanma ,

its me again, resurrecting this topic as I have hit a brick wall again and I cant solve it.
So intially when we started building this site, our idea was to handle the product_category pages as actual pages in wordpress and just render the embedded content.
We have however changed our mind and we want to take the approach of using the archives from the CPT.

So here are the questions I am failing to find the answers to:

Is it possible that have the url be structured domain.com/category-slug and let wp-source fetch the content. I haven’t been able to make this work. Do I maybe have to modify a handler or maybe create a new one?

EDIT: I have removed the second part of my questions as it is irrelevant now as I managed to fix this endpoint: /wp-json/wp/v2/product?product_cat=705 so the filtering works now.
The other part of the issue still remains is to make my product_cat links to work like this: domain.com/product-category-slug. When I try it now I can see the data that its fetching and recognizing its a product_cat

Just as a small summary, all those complexities are caused by the fact that we want most of our urls to be following this structure:

Any help will be appreciated. Thanks in advance.