WP-source not making request to extra postTypes

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

1 Like

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

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:

  1. domain.com/:product_id - NOT possible
  2. 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)

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.

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:

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:

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 :slight_smile:

// 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!

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

1 Like

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.

3 Likes