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

Step-by-step field and grid scenarios: Manager cookbooks.

See also: Utilities

Technologies

Technology	Use
Vue 3 + PrimeVue	Orders, customers, notifications, settings (settings.min.js), utilities, product tabs
ExtJS 3.4	Category/product resource shell in the MODX tree (Document / Settings / Access); product grids and “Product” tabs are Vue

Settings deep links: #tab-deliveries, #tab-payments, #tab-statuses, #tab-vendors, #tab-links, #tab-options.

Requires 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