Notice: You are browsing the documentation for PrestaShop 9, which is currently in development.
You might want to read the documentation for the current version, PrestaShop 8. Read the current version of this page
Tailored for module developers, this system allows you to use components we already use in the core without importing them. Here is the ADR where we decided what we should do to avoid this problem.
You are now able to use components we expose to the window.prestashop.component object without importing anything.
This object contains two attributes:
component which contain some components you can instantiate;instance which contains every instances of initiated components.It allows module developers to avoid importing path such as ../../../../admin-dev/themes/new-theme/js/components/translatable-field because it was making hard to add a CI in order to build the module.
There is an event sent after the execution of initPrestashopComponents which you can stick on: PSComponentsInitiated.
If you have the events package, you’ll be able to catch the event like this:
EventEmitter.on('PSComponentsInitiated', () => {
[...]
})
You are able to use a custom component following this example:
$(document).ready(function() {
window.prestashop.component.initComponents([
'TranslatableField',
'TinyMCEEditor',
'TranslatableInput',
]);
});
You are also able to initiate it manually:
EventEmitter.on('PSComponentsInitiated', () => {
window.prestashop.component.TranslatableField = MyCustomTranslatableField;
if (window.prestashop.component.instance.translatableField) {
window.prestashop.component.instance.translatableField = new window.prestashop.component.TranslatableField();
}
});
or even import your own components that you want to make usable globally:
EventEmitter.on('PSComponentsInitiated', () => {
window.prestashop.component.MyCustomComponent = MyCustomComponent;
window.prestashop.component.instance.myCustomComponent = new window.prestashop.component.MyCustomComponent();
});
| Component | Version |
|---|---|
| TranslatableField | 1.7.8 |
| TinyMCEEditor | 1.7.8 |
| TranslatableInput | 1.7.8 |
| TaggableField | 1.7.8 |
| ChoiceTable | 1.7.8 |
| EventEmitter | 1.7.8 |
| ChoiceTree | 1.7.8 |
| MultipleChoiceTable | 1.7.8 |
| GeneratableInput | 1.7.8 |
| CountryStateSelectionToggler | 1.7.8 |
| CountryDniRequiredToggler | 1.7.8 |
| TextWithLengthCounter | 1.7.8 |
| MultistoreConfigField | 1.7.8 |
| PreviewOpener | 1.7.8 |
| Router | 1.7.8 |
| Grid | 1.7.8 |
| ColorPicker | 8.0.0 |
| DateRange | 8.0.0 |
| DeltaQuantityInput | 8.0.0 |
| DisablingSwitch | 8.0.0 |
| FormFieldToggler | 8.0.0 |
| IframeClient | 8.0.0 |
| ModifyAllShopsCheckbox | 8.0.0 |
| ChangePasswordControl | 8.0.0 |
| EntitySearchInput | 8.1.7 |
From version 1.7.8 you can access both Grid component and its extensions, this should make working with modern controllers in your modules much easier.
| Component | Version |
|---|---|
| Grid | 1.7.8 |
| GridExtensions | 1.7.8 |
const grid = new window.prestashop.component.Grid(gridId);
grid.addExtension(new window.prestashop.component.GridExtensions.ColumnTogglingExtension());
| Extension | Version |
|---|---|
| AsyncToggleColumnExtension | 1.7.8 |
| BulkActionCheckboxExtension | 1.7.8 |
| BulkOpenTabsExtension | 1.7.8 |
| ChoiceExtension | 1.7.8 |
| ColumnTogglingExtension | 1.7.8 |
| ExportToSqlManagerExtension | 1.7.8 |
| FiltersResetExtension | 1.7.8 |
| FiltersSubmitButtonEnablerExtension | 1.7.8 |
| LinkRowActionExtension | 1.7.8 |
| ModalFormSubmitExtension | 1.7.8 |
| PositionExtension | 1.7.8 |
| PreviewExtension | 1.7.8 |
| ReloadListExtension | 1.7.8 |
| SortingExtension | 1.7.8 |
| SubmitBulkActionExtension | 1.7.8 |
| SubmitGridActionExtension | 1.7.8 |
| SubmitRowActionExtension | 1.7.8 |