← ClaudeAtlas

init-js-componentslisted

Initialize and use PrestaShop's global JS components via initComponents(). Covers TranslatableInput, ChoiceTree, TinyMCEEditor, TaggableField, and all other available components. Components activate based on data-* attributes in the DOM. Trigger: "initialize components for {Domain}", "enable components for {Domain}", "add components to {Domain} form".
jeffsenso/prestashop-skills · ★ 4 · Web & Frontend · score 76
Install: claude install-skill jeffsenso/prestashop-skills
# init-js-components Read `@.ai/Component/Javascript/CONTEXT.md` for the full component list and initialization pattern. ## How initComponents works ```typescript window.prestashop.component.initComponents([ 'TranslatableInput', 'TinyMCEEditor', ]); ``` - Components are registered on `window.prestashop.component` - `initComponents` creates instances and stores them in `window.prestashop.instance` - Components activate automatically by scanning the DOM for matching `data-*` attributes - Only initialize components the page actually uses ## Common form components ### TranslatableInput / TranslatableField For multilingual fields. The Symfony `TranslatableType` renders the DOM with proper `data-*` attributes; this component adds the language tab switching UI. ### TinyMCEEditor For rich text fields (`FormattedTextareaType`). Initializes the WYSIWYG editor on matching textareas. ### ChoiceTree For hierarchical selectors (categories, groups). Call `.enableAutoCheckChildren()` if parent selection should auto-select children. ```typescript new window.prestashop.component.ChoiceTree('#category-tree-selector').enableAutoCheckChildren(); ``` ### TaggableField For tag inputs with autocomplete. Used with `TaggableType` form type. ### EntitySearchInput For autocomplete search fields that reference other entities (e.g. search for a product by name). ### GeneratableInput For fields auto-generated from another (e.g. URL slug from name). Uses `TextToLinkRewriteCopier` pattern. #