Страница товара

Редактирование товара в административной панели MiniShop3.

Обзор

Страница редактирования товара (msProduct) объединяет стандартный функционал MODX с расширенными возможностями для e-commerce:

Редактируемые секции с полями товара
Галерея изображений с drag-and-drop загрузкой
Связи между товарами
Опции и характеристики
Дополнительные категории

Структура вкладок

Документ

Стандартная вкладка MODX с основными полями ресурса:

Поле	Описание
`pagetitle`	Название товара
`longtitle`	Расширенный заголовок
`description`	Meta description
`introtext`	Краткое описание
`content`	Полное описание
`alias`	URL-псевдоним
`parent`	Родительская категория

Данные товара

Вкладка с полями товара, сгруппированными по секциям. Использует Vue 3 компонент для гибкого отображения.

Стандартные секции:

Секция	Поля
Основные данные	`article`, `price`, `old_price`, `weight`
Наличие	`remains`, `new`, `popular`, `favorite`
Характеристики	`color`, `size`, `vendor`, `made_in`, `tags`

Настройка

Секции и поля настраиваются через Утилиты → Поля товара.

Галерея

Управление изображениями товара:

Загрузка через drag-and-drop
Сортировка перетаскиванием
Установка главного изображения
Редактирование описания

Подробнее: Галерея товара

Связи

Настройка связей между товарами:

Тип связи	Описание
Сопутствующие	Аксессуары, комплектующие
Похожие	Аналогичные товары
Рекомендуемые	Персональные рекомендации

Категории

Дополнительные категории товара. Товар может принадлежать нескольким категориям помимо основной (parent).

Опции

Значения опций товара (если настроены в Настройки → Опции):

Цвета
Размеры
Материалы
Любые кастомные опции

Архитектура секций и полей

Хранение данных

Конфигурация полей хранится в базе данных:

Таблица	Описание
`ms3_page_sections`	Секции (разделы) страницы
`ms3_product_fields`	Поля товара с настройками

Модель msPageSection

Секция — это контейнер для группировки полей.

Поля модели:

Поле	Тип	Описание
`id`	int	ID секции
`page_key`	string	Ключ страницы (`product_data`)
`section_key`	string	Уникальный ключ секции
`lexicon_key`	string	Ключ лексикона для названия
`label`	string	Название (если без лексикона)
`hidden`	bool	Скрыта ли секция
`sort_order`	int	Порядок сортировки

Модель msProductField

Поле товара с настройками отображения.

Поля модели:

Поле	Тип	Описание
`id`	int	ID поля
`name`	string	Системное имя поля
`label`	string	Отображаемое название
`description`	string	Подсказка
`xtype`	string	Тип виджета
`section`	int	ID секции
`visible`	bool	Видимость
`required`	bool	Обязательность
`sort_order`	int	Порядок в секции
`width`	int	Ширина в процентах
`config`	json	Дополнительные настройки
`is_system`	bool	Системное поле
`is_default`	bool	Поле по умолчанию

Управление секциями

Создание секции

Через интерфейс:

Откройте Утилиты → Поля товара
Нажмите "Добавить секцию"
Заполните:
- Ключ секции — уникальный идентификатор (латиница, например seo)
- Ключ лексикона — для многоязычных названий (например ms3_section_seo)
- Название — отображаемое название
Сохраните

Через API:

POST /api/mgr/config/sections/product_data

json

{
  "section_key": "seo",
  "lexicon_key": "ms3_section_seo",
  "label": "SEO",
  "hidden": false,
  "sort_order": 100
}

Через PHP:

php

$section = $modx->newObject('MiniShop3\\Model\\msPageSection');
$section->fromArray([
    'page_key' => 'product_data',
    'section_key' => 'seo',
    'lexicon_key' => 'ms3_section_seo',
    'label' => 'SEO',
    'hidden' => false,
    'sort_order' => 100
]);
$section->save();

Редактирование секции

Кликните на иконку редактирования рядом с секцией
Измените параметры
Сохраните

Удаление секции

Внимание

При удалении секции все её поля перемещаются в раздел "Без секции" (section = 0).

Сортировка секций

Перетащите секции в нужном порядке в левой панели.

Управление полями

Добавление нового поля

Новые поля добавляются через Утилиты → Дополнительные поля. Это создаёт:

Колонку в таблице ms3_product_data
Запись в ms3_product_fields

Настройка существующего поля

Через интерфейс:

Откройте Утилиты → Поля товара
Выберите секцию
Кликните на поле для редактирования
Настройте параметры:

Параметр	Описание
Название	Отображаемый label
Описание	Подсказка под полем
Секция	Принадлежность к секции
Тип виджета	Тип элемента формы
Видимость	Показывать/скрывать
Ширина	Ширина в % (50 = половина)

Через API:

PUT /api/mgr/config/page-fields/product_data

json

{
  "name": "article",
  "label": "Артикул товара",
  "section": 1,
  "visible": true,
  "sort_order": 0,
  "width": 50
}

Перемещение поля между секциями

Откройте редактирование поля
Выберите новую секцию в выпадающем списке
Сохраните

Или измените section через API.

Сортировка полей

Перетащите поля в нужном порядке внутри секции.

Скрытие поля

Откройте редактирование поля
Снимите флаг "Видимость"
Сохраните

Поле останется в базе данных, но не будет отображаться в карточке товара.

Типы виджетов (xtype)

Стандартные

Тип	Описание	Использование
`textfield`	Однострочное текстовое поле	Артикул, название
`numberfield`	Числовое поле	Цена, вес
`textarea`	Многострочное поле	Описание
`xcheckbox`	Флажок	new, popular, favorite

Комбобоксы MiniShop3

Тип	Описание
`ms3-combo-vendor`	Выбор производителя
`ms3-combo-category`	Выбор категории
`ms3-combo-autocomplete`	Автодополнение из списка
`ms3-combo-options`	Выбор из значений опций

Расширенные

Тип	Описание
`modx-combo-browser`	Выбор файла через Media Browser
`datefield`	Выбор даты
`timefield`	Выбор времени
`htmleditor`	WYSIWYG редактор

Системные настройки

Настройка	Описание	По умолчанию
`ms3_product_tab_extra`	Показывать вкладку данных	`true`
`ms3_product_tab_gallery`	Показывать вкладку галереи	`true`
`ms3_product_tab_links`	Показывать вкладку связей	`true`
`ms3_product_tab_options`	Показывать вкладку опций	`true`
`ms3_product_tab_categories`	Показывать вкладку категорий	`true`
`ms3_product_remember_tabs`	Запоминать активную вкладку	`true`
`ms3_product_main_fields`	Поля вкладки "Документ"	pagetitle, longtitle, ...
`ms3_product_extra_fields`	Дополнительные поля	price, article, ...

API Endpoints

Конфигурация полей

Получить все поля:

GET /api/mgr/config/page-fields/product_data

Ответ:

json

{
  "success": true,
  "object": {
    "fields": [
      {
        "name": "article",
        "label": "Артикул",
        "xtype": "textfield",
        "section": 1,
        "visible": true,
        "sort_order": 0,
        "width": 50
      }
    ],
    "sections": {
      "1": {
        "id": 1,
        "section_key": "main",
        "label": "Основные данные",
        "sort_order": 0
      }
    }
  }
}

Сохранить поле:

PUT /api/mgr/config/page-fields/product_data

Секции

Получить секции:

GET /api/mgr/config/sections/product_data

Создать секцию:

POST /api/mgr/config/sections/product_data

Обновить секцию:

PUT /api/mgr/config/sections/product_data/{id}

Удалить секцию:

DELETE /api/mgr/config/sections/product_data/{id}

Данные товара

Получить данные:

GET /api/mgr/product-data/{product_id}

Сохранить данные:

PUT /api/mgr/product-data/{product_id}

Примеры настройки

Создание секции "SEO"

Создайте секцию:
- Ключ: seo
- Название: SEO
Добавьте лексикон (опционально):

php

// lexicon/ru/product.inc.php
$_lang['ms3_section_seo'] = 'SEO';

// lexicon/en/product.inc.php
$_lang['ms3_section_seo'] = 'SEO';

Переместите поля longtitle и description в секцию SEO

Скрытие ненужных полей

Для магазина одежды с опциями (цвет, размер отдельно):

Откройте поле color
Снимите "Видимость"
Повторите для size

Изменение ширины полей

Сделать поле article на всю ширину:

Откройте редактирование поля
Установите ширину 100
Сохраните

Два поля в ряд — установите каждому ширину 50.

Добавление кастомного поля

Откройте Утилиты → Дополнительные поля
Выберите модель msProductData
Создайте поле:
- Имя: warranty_months
- Тип: INT
- xtype: numberfield
Сохраните (создастся колонка в БД)
Откройте Утилиты → Поля товара
Переместите поле в нужную секцию
Настройте label и описание

Расширение через плагины

Событие msOnManagerCustomCssJs

Позволяет добавить свой CSS/JS на страницу товара:

php

<?php
// Плагин: MyProductExtension
// События: msOnManagerCustomCssJs

if ($modx->event->name !== 'msOnManagerCustomCssJs') return;

$page = $modx->event->params['page'] ?? '';

if ($page === 'product_update' || $page === 'product_create') {
    $modx->regClientCSS('/assets/components/mycomponent/css/product.css');
    $modx->regClientStartupScript('/assets/components/mycomponent/js/product.js');
}

Расширение Vue компонента

Через Plugin Registry можно добавить свои виджеты:

javascript

// assets/components/mycomponent/js/product.js

document.addEventListener('DOMContentLoaded', () => {
  if (window.MS3PluginRegistry) {
    // Регистрация кастомного xtype
    MS3PluginRegistry.registerWidget('my-custom-field', {
      component: MyCustomFieldComponent,
      props: ['field', 'modelValue']
    })
  }
})

Связанные страницы

Утилиты: Поля товара — настройка отображения полей
Утилиты: Дополнительные поля — создание новых полей
Утилиты: Поля модели — управление полями из БД
Галерея товара — система изображений
Системные настройки — все настройки компонента

handyShop

Утилиты

Настройки

Утилиты