Warning: You are browsing the documentation for PrestaShop 1.7, which is outdated.
You might want to read an updated version of this page for the current version, PrestaShop 8. Read the updated version of this page
It’s a new system available since the 1.7.8 version mainly created for module developers, which allow you to use components we already use in the core without importing it. 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 |
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 |