Hi, need some help to use custom helpers in child theme
-
Hello,
I need to customize links in my custom child template with a helper like :
//in my template file : <span data-apt="{function.obfuscate, someUrl}" />
I found some solutions on old topics but nothing in the documentation.
My first attempt was to use the app load hook:
// in the plugin.json file { "hook": "static:app.load", "method": "init" }, // in library.js const benchpress = require.main.require('benchpressjs'); .... library.init = async function (params) { app = params.app; const middleware = params.middleware; benchpress.registerHelper('obfuscate', function(data){ // custom code return 'mycustomcode'; }); .... };
My second attempt with a simple module and a require :
// in helpers.js (function (factory) { if (typeof module === 'object' && module.exports) { factory(require.main.require('benchpressjs')); } else { require(['benchpress'], factory); } })(function (Benchpress) { Benchpress.registerHelper('obfuscate', function (data) { return 'my-custom-result'; }); }); //in library.js require(./helpers.js);
And the pretty empty output trace for Benchpress object:
benchpress { "helpers": {}, "cache": {}, "globals": { "true": true, "false": false } }
Have you an idea ? A better way to add and use helpers ?
Thx
-
The helper has to be registered both on the client side and the server side.
-
I have added some traces on the Benchpress object :
{ precompile: [Function: precompile] { isNative: true, defaults: { minify: false, unsafe: false, native: true } }, __express: [Function: __express], evaluate: [Function: evaluate], compileRender: [Function: compileRender], compileParse: [Function: compileParse], runtime: [Function: runtime], helpers: { __escape: [Function: identity], displayMenuItem: [Function: displayMenuItem], buildMetaTag: [Function: buildMetaTag], buildLinkTag: [Function: buildLinkTag], stringify: [Function: stringify], escape: [Function: escape], stripTags: [Function: stripTags], generateCategoryBackground: [Function: generateCategoryBackground], generateChildrenCategories: [Function: generateChildrenCategories], generateTopicClass: [Function: generateTopicClass], membershipBtn: [Function: membershipBtn], spawnPrivilegeStates: [Function: spawnPrivilegeStates], localeToHTML: [Function: localeToHTML], renderTopicImage: [Function: renderTopicImage], renderDigestAvatar: [Function: renderDigestAvatar], userAgentIcons: [Function: userAgentIcons], buildAvatar: [Function: buildAvatar], register: [Function: register], logger: [Function: logger], obfuscate: [Function: obfuscate] }, registerHelper: [Function: registerHelper], cache: {}, globals: { true: true, false: false }, setGlobal: [Function: setGlobal], addGlobals: [Function: addGlobals], flush: [Function: flush], render: [Function: render], parse: [Function: parse], registerLoader: [Function: registerLoader] }
My two custom helper functions, logger and obfuscate, are visible, but the result template still show {function.obfuscate, 'testUrl'} .
-
I have found the problem, it was a bad theme declaration. My child theme was not encapsulate in
(function(module) { .... }(module));
Unfortunately, now i have a new probleme. It seems not possible to concatenate var in helper parameter like this :
{function.myHelper, {config.relative_path}/user/{posts.user.userslug}} or {function.myHelper, config.relative_path + '/user' + posts.user.userslug}
Any idea ?
-
Yeah that isn't possible. Instead you'll need to pass the individual values in as arguments and perform the concatenation in the helper itself.
BTW, I recommend you use the new helper syntax. It's easier to reason about.
https://github.com/benchpressjs/benchpressjs/blob/master/docs/helpers.md
-
yes, it's the solution i have chosen. Thx !