init-js-componentslisted
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.
#