Metadata JavaScript Mapper

The JAVASCRIPT_MAPPER display type lets you transform a metadata field's stored value into custom HTML on the fly. It's available on both PDP metadata blocks and comparison metadata fields.

• You write a function body only. Cloudshelf wraps your body as new Function('input', body) at runtime, so any code you paste must produce its output by return -ing from the top of the body. A standalone arrow expression like (metadata) => '<p>' + metadata + '</p>' parses and runs without throwing, but it just creates and discards an anonymous function — the wrapper's return value is undefined and your cell ends up empty. Same caveat for a full function () { ... } declaration: it parses, but the wrapping function still has no top-level return .
• You receive a single parameter named input , an object whose keys carry whatever context the mapper has at that site (input.metadata , input.variant , ...). New keys may be added in future, so destructure or read them defensively.
• Errors / wrong return types fall back to a safe rendering path; bugs in your mapper will not crash the page.

input.metadata carries whatever Cloudshelf has stored under the field's metadata key. Cloudshelf attempts JSON.parse first; if parsing fails the raw string is passed through.

input.variant is provided in PDP contexts only and is null when no variant has been selected yet. It is not present in comparison contexts.

A string. The string is sanitised with DOMPurify before being injected into the page, so safe HTML markup is allowed and unsafe attributes / scripts are stripped.

If your return value is not a string, it is coerced via String(value) .

Open the metadata field in the comparison or PDP edit sheet, set its display type to JavaScript Mapper , and click Edit Mapper. The editor pulls up to five recent values for that metadata key from your live catalogue (or accepts a manual JSON paste when no samples are available) and re-runs your mapper against the chosen sample on every keystroke. The rendered HTML appears in the Rendered output panel underneath the editor.

The metadata may be retailer-controlled, so always escape values you interpolate into HTML. The result is run through DOMPurify before rendering, but escaping at the source is the safer default.

• No module imports inside mapper code.
• Mapper execution is synchronous — await , Promise , setTimeout etc are not supported.
• Heavy computation on large metadata may impact PDP / comparison render performance.
• Preview output in the manager depends on the sample data you supply, and can differ from live runtime data.
• Always escape metadata values before interpolating them into HTML to prevent unintended markup rendering. The result already runs through DOMPurify, but escaping at the source is still the safe default.

• Blank output: ensure every code path returns a string.
• metadata is not defined : the legacy positional metadata argument is gone. Use input.metadata instead.
• SyntaxError: function statement requires a name : you've pasted a full function () { ... } declaration. Remove the outer function (...) and trailing } — the mapper is body-only.
• PDP variant data is missing: input.variant is only populated on PDP blocks, and is null until the shopper has actually selected a variant.