Custom Handlebar Helpers: How to implement?

Developer help
1

Hey Guys,

I’m trying to create custom Handlebar helpers in my Ghost CMS v5.109.6 installation. I’ve written a helper, but I’m having trouble getting it to work. I’d love some guidance on how to implement it correctly. I’m struggling with getting it to work at all.

I’ve created a helper called user_local.js, placed it in the current/core/frontend/helpers/ directory and restarted Ghost. The code is as follows:

// # User Language / Local Helper
// Usage: `{{user_local}}`
//
// Outputs users language as string. Will strip region from local setting.

module.exports = function user_local() {
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale
  const locale = new Intl.Locale(navigator.language);

  return locale.language;
};

In a nutshell, I want to get the users current language setting to determine which blog posts to render. To check if this helper is working, I’ve added the following code to the top of my default.hbs template file:

{{log 'USER_LOCALE =' user_locale}}

But the development logs of my Ghost install keeps saying “USER_LOCALE = undefined”. I tried this with a “Hello World” helper too, that just returns a string - but with the same result. The theme engine doesn’t seem to recognize my custom helpers at all.

What I actually want to do is a match block based on the users language settings. E.g. like this:

{{!-- Match for user language / local --}}
{{#match user_locale "de"}}
    {{#get "posts" filter="tag:[hash-de]" order="published_at desc" page=pagination.page}}
        {{#foreach posts visibility="all"}}
            {{> loop/classic-article}}                  
        {{/foreach}}
    {{/get}}
{{else}}
    {{!-- Use the site local as default --}}
    {{#get "posts" filter="tag:[hash-{{@site.locale}}]" order="published_at desc" page=pagination.page}}
        {{#foreach posts visibility="all"}}
            {{> loop/classic-article}}                  
        {{/foreach}}
    {{/get}}
{{/match}}

Can someone please help me understand what I’m doing wrong? Is there a specific configuration or setup I need to perform to get custom helpers working in Ghost CMS?

Any guidance or advice would be greatly appreciated!

2

Here’s an example of adding a new helper:

In your case, I think you’ve got a problem with your thinking about how this is going to work, because navigator is a browser item. Handlebars helpers run on the server, so the navigator object probably doesn’t exist, and surely doesn’t know anything about the user’s browser even if it does.

3

OMG… Yeah, I totally ignored that helpers are executed on the server side. Big uff… So I guess there is no way to use browser-side calculated variables as input for the helpers? If we want to implement something like that, I guess we have to use the content API?

Another thing, I assumed that {{log hello_world}} would log the return value of my custom helper (hello_world in this case). When I just put <h1>{{hello_world}}</h1> it renders as expected, but the log still says “undefinied”. Is this the expected behavior?

4

Browsers /do/ make requests with language preferences included in headers, but punching information about request headers into a helper is probably a much bigger job than what you’re looking for. :)

1 Like
5

For all those who stumble over the same question, you just have to put the variable in brackets: {{log (hello_world)}}.

Ref.: Check post date against current date in Handlebars - #2 by vikaspotluri123