Administrative interface

Overview of the MiniShop3 administrative interface in the MODX manager.

Access

Menu: Applications → MiniShop3

Interface structure

Resource pages

Page	Description
Category	Edit product category with product table
Product	Edit product card
Gallery	Product image management

Settings section

Menu: Applications → MiniShop3 → Settings

Tab	Description
Deliveries	Delivery methods
Payments	Payment methods
Vendors	Vendor directory
Links	Product link types
Options	Product options directory

See also: Settings

Utilities

Menu: Applications → MiniShop3 → Utilities

Tab	Description
Gallery	Thumbnail regeneration
Import	CSV product import
Product fields	Product card field configuration
Extra fields	Creating new fields
Grid columns	Table configuration
Model fields	Database model fields

See also: Utilities

Technologies

The MiniShop3 admin interface is built on two technologies:

Technology	Use
ExtJS 3.4	Main panels (orders, customers, ExtJS forms)
Vue 3 + PrimeVue	Modern components (category tables, settings, utilities)

Vue components are integrated into ExtJS via mount points and require the VueTools package.

Extending the interface

Adding CSS/JS

Use the msOnManagerCustomCssJs event:

<?php
switch ($modx->event->name) {
    case 'msOnManagerCustomCssJs':
        $page = $scriptProperties['page'];
        $controller = $scriptProperties['controller'];

        if ($page === 'product_update') {
            $controller->addCss('/assets/components/mycomponent/css/product.css');
            $controller->addLastJavascript('/assets/components/mycomponent/js/product.js');
        }
        break;
}

Custom table actions

Register actions via MS3ActionRegistry:

MS3ActionRegistry.register('myAction', async (data, gridId) => {
    // Your code
    return { success: true, refresh: true };
});

See also: Category — Adding actions