# Hyvä CMS 自定义字段类型创建器 ## 概述此技能指导为 Hyvä CMS 组件创建自定义字段类型和字段处理程序。自定义字段类型通过 CMS 编辑器界面的专用输入控件扩展了内置字段类型（文本、文本区域、选择等）。 **两种类型的自定义字段：** 1. **基本自定义字段类型**：具有直接数据输入的自定义输入控件（例如，日期范围、颜色选择器、自定义验证） 2. **Field Handler**：具有复杂交互的增强型 UI（例如，带有图像的产品选择器、可搜索下拉菜单、链接配置模式） **命令执行：** 对于需要在开发环境（例如“bin/magento”）内运行的命令，请使用“hyva-exec-shell-cmd”技能来检测环境并确定适当的命令包装器。 ## 工作流程 ### 第 1 步：模块选择如果提示中尚未指定，请确定在何处创建自定义字段类型： **选项 A：新模块** 使用“hyva-create-module”技能： * `依赖项`: `["Hyva_CmsBase", "Hyva_CmsLiveviewEditor"]` * `composer_require`: `{"hyva-themes/commerce-module-cms": "^1.0"}` **选项 B：现有模块** 验证模块是否具有所需的依赖项： * `etc/module.xml` 中的 `Hyva_CmsBase` 和 `Hyva_CmsLiveviewEditor` * `composer.json` 中的 `hyva-themes/commerce-module-cms` 如果需要，添加缺少的依赖项。 ### 第 2 步：字段类型详细信息收集有关自定义字段类型的信息： 1. **字段类型名称**（小写标识符，例如`date_range`、`product_selector`、`color_picker`） 2. **目的**（收集哪些数据？） 3. **用户界面模式**： * **基本字段**：带验证的简单输入（日期选择器、模式输入、增强文本字段） * **内联处理程序**：增强字段区域的控制（可搜索下拉列表、颜色选择器） * **模态处理程序**：用于复杂选择的单独对话框（产品选择器、链接生成器、媒体库） 4. **数据结构**（简单字符串、JSON对象、数组？） 5. **验证要求**（模式、必需、自定义规则？） ### 步骤 3：实施模式选择基于步骤 2 中确定的 UI 模式： **模式 A：基本自定义字段类型** 对于具有自定义 HTML5 验证或专用输入控件的简单输入： * 该字段的单个模板文件 * 没有单独的处理程序模式 * 示例：日期范围选择器、自定义模式验证、滑块输入 **模式 B：内联字段处理程序** 对于保留在现场区域的增强控制： * 带有 Alpine.js 组件的单个模板文件 * 没有单独的处理程序模式 * 示例：可搜索的选择下拉菜单、带有样本的颜色选择器 **模式 C：基于模态的字段处理程序** 对于需要更多空间的复杂选择界面： * 字段模板（显示选择+触发按钮） * 处理程序模态模板（具有完整 UI 的单独对话框） * 处理程序的布局 XML 注册 * 示例：产品选择器、链接配置、媒体库有关每种类型的详细实现模式和代码示例，请参阅“references/handler-patterns.md”。 ### 步骤 4：生成字段模板在“view/adminhtml/templates/field-types/[field-type-name].phtml”处创建字段模板。 **所需模板元素：** 1. 具有正确 ID 的字段容器：`field-container-{uid}_{fieldName}` 2. 输入名称为“{uid}_{fieldName}”的元素 3. 验证消息容器：`validation-messages-{uid}_{fieldName}` 4. 值更改时调用 `updateWireField()` 或 `updateField()` 5. 通过 `$magewire->errors` 处理错误状态 6. **重要**：对字段值使用 null 合并： `$block->getData('value') ?? ''`（不是类型转换）使用“assets/templates/”中的适当模板： * `basic-field.phtml.tpl` \- 基本自定义字段类型 * `inline-handler.phtml.tpl` \- 内联增强控制 * `modal-field.phtml.tpl` \- 模态处理程序字段模板有关详细的模板要求和模式，请参阅“references/template-requirements.md”。 ### 步骤 5：生成处理程序模态（如果需要）仅对于基于模式的处理程序，在“view/adminhtml/templates/handlers/[handler-name]-handler.phtml”处创建处理程序模板。 **处理程序模态结构：** 1. 带有 Alpine.js 组件和 open:flex 类的 `

海沃 Cms 自定义字段

包含技能