Jetpack is a rapid development framework for Shopware 6 administration.
npm install @friendsofshopware/jetpackA rapid development framework for Shopware 6 Administration modules. Build complete CRUD interfaces for your entities with minimal code.
``bash`
npm install @friendsofshopware/jetpack
Given a Shopware entity:
`php
#[AutoconfigureTag('shopware.entity')]
#[\Shopware\Core\Framework\DataAbstractionLayer\Attribute\Entity('store')]
class StoreEntity extends Entity
{
#[PrimaryKey]
#[Field(type: FieldType::UUID)]
public string $id;
#[Field(type: FieldType::STRING, translated: true)]
public ?string $name = null;
#[Translations]
public ?array $translations = null;
}
`
Create a complete Administration module:
`javascript
import {
registerEntityModule,
registerDetailComponent,
registerListingComponent
} from '@friendsofshopware/jetpack';
registerEntityModule({
entity: 'store',
showInSettings: true,
listingComponent: registerListingComponent({
entity: 'store',
columns: {
name: { linkToDetail: true }
}
}),
detailComponent: registerDetailComponent({
entity: 'store',
cards: [{
name: 'general',
fields: {
name: { type: 'text' }
}
}]
})
});
`
- Declarative Configuration - Define modules with simple configuration objects
- Automatic Listing Pages - Sorting, pagination, and language switching out of the box
- Automatic Detail Pages - Form validation and error handling included
- Translation Support - Built-in support for translatable entities
- Type-Safe - Full TypeScript support with comprehensive type definitions
For full documentation, visit our documentation site.
#### registerEntityModule(options)
Registers a complete Administration module with routing and navigation.
| Option | Type | Required | Default | Description |
|--------|------|----------|---------|-------------|
| entity | string | Yes | - | Entity name |listingComponent
| | string | Yes | - | Component from registerListingComponent |detailComponent
| | string | Yes | - | Component from registerDetailComponent |color
| | string | No | #9AA8B5 | Module color |icon
| | string | No | regular-envelope | Module icon |showInNavigation
| | boolean | No | true | Show in main navigation |showInSettings
| | boolean | No | false | Show in settings |navigationParentModule
| | string | No | sw-customer | Parent module for navigation |
#### registerListingComponent(options)
Creates a listing page component.
| Option | Type | Required | Description |
|--------|------|----------|-------------|
| entity | string | Yes | Entity name |columns
| | Record | Yes | Column configuration |showSearchBar
| | boolean | No | Show search bar |
Column Options:
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| linkToDetail | boolean | false | Link to detail page |sortable
| | boolean | true | Allow sorting |width
| | string | 'auto' | Column width |align
| | 'left' \| 'right' | 'left' | Text alignment |visible
| | boolean | true | Column visibility |inlineEdit
| | 'string' \| 'number' | - | Enable inline editing |
#### registerDetailComponent(options)
Creates a detail/create page component.
| Option | Type | Required | Description |
|--------|------|----------|-------------|
| entity | string | Yes | Entity name |cards
| | CardOptions[] | Yes | Card configuration |labelProperty
| | string | No | Property for entity description (default: 'name') |
Field Types:
- text - Single-line text inputtextarea
- - Multi-line text inputnumber
- - Numeric inputcheckbox
- - Boolean checkboxpassword
- - Password inputurl
- - URL inputselect
- - Single select dropdownmulti-select
- - Multiple select dropdown
Jetpack uses translation keys for all labels. Create snippet files with this structure:
`json``
{
"jetpack-store": {
"title": "Stores",
"list": {
"actions": { "create": "Create store", "edit": "Edit" },
"columns": { "name": "Name" }
},
"detail": {
"actions": { "save": "Save" },
"cards": {
"general": {
"title": "General",
"fields": { "name": "Name" }
}
}
}
}
}
MIT
Contributions are welcome! Please feel free to submit a Pull Request.