@friendsofshopware/jetpack

A rapid development framework for Shopware 6 Administration modules. Build complete CRUD interfaces for your entities with minimal code.

Installation

npm install @friendsofshopware/jetpack

Quick Start

Given a Shopware entity:

#[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:

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' }
            }
        }]
    })
});

Features

• 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

Documentation

For full documentation, visit our documentation site.

API Reference

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<string, ColumnOptions>	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 input
• textarea - Multi-line text input
• number - Numeric input
• checkbox - Boolean checkbox
• password - Password input
• url - URL input
• select - Single select dropdown
• multi-select - Multiple select dropdown

Snippets

Jetpack uses translation keys for all labels. Create snippet files with this structure:

{
    "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" }
                }
            }
        }
    }
}

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.