LIGHTWEIGHT TEMPLATES
Yes. [%% field_name %%] is replaced in all three tabs - HTML/JSX, CSS and JS - before the template is delivered to the browser. The editor offers content-field autocompletion in all three as well.
Two things to keep in mind, both because the substitution is purely textual:
// The field holds a bare string: spring-sale
// ✅ quote it - becomes const campaign = "spring-sale";
const campaign = "[%% campaign_id %%]";
// ✅ backticks work too, and let you mix in more text
const label = `Campaign: [%% campaign_id %%]`;
// ❌ unquoted - becomes const campaign = spring-sale;
const campaign = [%% campaign_id %%];
// The field holds a JS literal: ["news", "sports"]
// ✅ no quotes needed - becomes const ids = ["news", "sports"];
const ids = [%% topic_ids %%];
// ✅ or quote and parse - safer when the value may contain quotes
const ids = JSON.parse(`[%% topic_ids %%]`);
-
Whether the token needs quotes depends on the field's value. If the field holds a bare string, quote it - otherwise the substituted text is not valid JS:
const c = [%% campaign_id %%];becomesconst c = spring-sale;. If the field already holds a valid JS literal - an array, an object, a number,true- the token can stand on its own without quotes. When the value may itself contain quotes, wrap it in backticks andJSON.parseit. -
A field that does not exist becomes an empty string, not an error and not the token itself. A typo in a field name therefore yields
""at runtime, which is easy to mistake for a data problem. Check the spelling against the Content fields list in the editor.
Editor features, including the content-field picker: Lightweight templates editor.