Roots Discourse

JS routing for custom post type

Hello,

I am trying to set up a JS route to a custom post type I created.

I created a file in scripts/routes/ called singleCommercialListings.js

Imported it in main.js

...

import singleCommercialListings from './routes/singleCommercialListings';

/** Populate Router instance with DOM routes */
const routes = new Router({
  // All pages
  common,
  // Home page
  home,
  // About Us page, note the change from about-us to aboutUs.
  aboutUs,
  // Gallery page
  gallery,
  // Commercial listings CPT
  singleCommercialListings,
});
...

I added the following code inside singleCommercialListings.js

export default {
  init() {
    // scripts here run on the DOM load event
    console.log('This is the single commercial listings page.');
  },
  finalize() {
    // scripts here fire after init() runs
  }
};

I read in the documentation that routing is based on the class name in the body so I tried a few variations for the route filename and import name but none worked.

Here are the classes for the body tag on the template page.

commerical_listings-template-default single single-commerical_listings postid-239 unit-130-robinson-crossing app-data index-data singular-data single-data single-commerical_listings-data single-commerical_listings-unit-130-robinson-crossing-data

Does anyone know what I am doing wrong? The class has an underscore in it so maybe I have to add an underscore to the filename or import name?

Any help is much appreciated!

Thank you.

You have a typo I believe :slight_smile: Almost went nuts myself testing your config which should work :smiley:

commerical -> commercial

1 Like

Dude. I can’ believe I missed that! :sweat:

Thank you for spotting my mistake.

Glad I could be of help!