Can't match javascript route to woocommerce product archive page

So I’ve got Woocommerce working well with Sage. My issue is that I can’t get a page specific js route to load on the product archive page.

The actual page slug is /buy/ but the template it uses is archive-product.blade.php but I can’t get a route to load with it. I’ve tried buy.js/buy and archive-product.js/archiveProduct but none of them seem to load on the product archive page.

Hey @stevebasford - the routing isn’t based on the slug or the template name directly, but rather on the body class for the page. Check the body classes on the page and pick the most appropriate one as the name of your route (reformatting this-class to thisClass).

For example, this WooCommerce demo page has the class ‘post-type-archive-product’.

Drop a JS file with that name in your routes folder and then edit main.js to import it (where you see it importing Router, common, etc.) and then include the new route in the Router instance (where you see it list common, home, etc., within new Router()).

Make sure that you are defining an export properly in your new JS file (see the existing files for examples), and don’t forget to run yarn build after all that.

Let me know if that helps.

1 Like