External site (Shopify) pages in navigation

I am working on a content site which will site alongside a Shopify storefront and would like to list out categories from the shop in my Kirby site nav.

I can set up a page on the Shopify side which just lists nav items, but need to figure out how to ingest it into Kirby. I was thinking some kind of custom field which when triggered would do an Ajax request (they will have same TLD) to fetch items as HTML and save it. To create the smoothest process, refer to do this all on backend, rather then front end.

Any ideas, input, advice is welcome.

1 Like

You could probably make a custom page over in Shopify, which through liquid forms your custom navigation in json format and then get it with the remote class from the Kirby Toolkit to form an navigation in Kirby.

By TLD i think you mean domain, but something like, store.example.com for Shopify and example.com for your Kirby installation right? :blush:

Thanks Jimmy. Sounds like 100% custom field is going to be required. I’ll look into the toolkit reference you passed along.

Yup, TLD means top level domain. I’m just saying that an Ajax call to fetch the contents would work. Think this will be the route I take it.

I think Jimmy’s saying not to use an AJAX call, but a call on the server side prior to rendering the page from your kirby site.

I’d add to this with caching the response from Shopify, too, instead of calling it on every page load. Cache it for a couple hours and maybe set up a simple panel widget to allow an editor to clear the cache manually if necessary.

Caching it for even as short as an hour will go a long way in saving server resources.

I’m thinking I want it to be on-demand through the backend Panel. That way it only updates when an administrator tells it to. The categories will very seldom change, so no need to constantly be polling for new data.

If the categories seldom change, I’d probably just set up a structure field in Site Options blueprints/site.[yml|php] to hold the category links.

Each item could be a “Shop Category” and would hold a menu label and a category ID or URL. The URL would just be a straight link to the Shopify category page.

Editors can reorder the items, add/remove them, etc.

Then in your menu, just loop through them and spit out the links.

This way you can avoid having to call Shopify remotely and avoid having some separate page on Shopify that exists just to spit out that data… just keep it static. Change it in the future when the need arises.

Just my two cents, though; I’d keep it as simple as possible.

1 Like