客户经常抱怨CMS难以使用。问题通常在于向客户提供未经修改的“出厂”编辑屏幕。我们可以做得更好。在这个例子中，我们将为客户量身定制一个复杂的编辑屏幕，使其更加精简。这里展示的技术可以应用于任何扩展和任何有特定需求的客户。

RedShop是一个非常功能丰富的电子商务组件，因此其产品编辑屏幕包含了几个相互关联的选项卡，包含数十个利用组件所有功能的字段。所有这些选项都是必需的，并且对于开发者来说非常强大。但客户期望看到的是一个更加简单直观的编辑屏幕。

客户只想看到与其项目相关的字段，并且这些字段应该按照客户的业务流程组织。让我们根据一个理论客户来调整产品详情屏幕。

我们得到的初始“出厂”屏幕

第一步是复制编辑屏幕的视图，并将这个副本放入覆盖原始文件的文件夹中。如果您不熟悉这种做法，请参阅这篇文章。

请注意，我们正在编辑一个在后台使用的视图，因此覆盖文件必须放置在管理模板中。

对于这个例子，这里是需要移动的文件
/administrator/components/com_redshop/views/product_detail/tmpl/default.html

假设我们使用的是Bluestork管理模板，将副本放在这里
/administrator/templates/bluestork/html/com_redshop/product_detail/default.html

对这个视图的所有编辑都将在这个新文件（在管理模板下）上进行。

人们可能会想删除不需要的字段和标签。在做之前请三思。如果以后客户需要额外的功能（这种情况确实会发生），您将需要找到并仔细替换所需的字段。在我看来，更好的做法是保留每个字段的位置，并使用CSS类标记每个字段，以指示该字段应如何显示。

让我们创建四个CSS类来区分显示字段的四种方式：f_Required, f_Important, f_Optional, f_NotUsed。

我使用这些CSS类的名称前缀有两个原因：减少重用类名的可能性，并指定上下文。在这里，“f_”代表应用于字段的类。

我还将创建用于标签的类：t_Important, t_Optional, t_NotUsed。

在这个文件中，每个字段都包含在一个表格行中，因此对于每个包含字段的 <tr>，我都为该字段添加适当的类。同样，我也为每个标签应用适当的类。

<tr id="f_published" class="f_Required"> ... </tr>
<tr id="f_product-template" class="f_Important"> ... </tr>
<tr id="f_product-on-sale" class="f_Optional"> ... </tr>
<tr id="f_product-special" class="f_NotUsed"> ... </tr>

我们将CSS规则隔离到自己的CSS文件中。这使得它们在项目间更具可重用性。为了包含这个新的CSS文件，我们在我们正在覆盖的视图文件顶部添加两行代码

$document   = JFactory::getDocument();
$document->addStyleSheet('templates/'.$template.'/css/redshop_product-detail.css');

在指定的目录中创建该文件后，我们创建样式规则。按您的喜好进行样式设置。但如果你想要指定字段的多级（必需与可选），使字段层次结构直观明了。

以下是我在使用的一段代码示例。

table.admintable .f-Required td.key{background:#333; color:#fff;}

当然，要从编辑表单中“删除”字段，请使用

{display:none;}

如果安全性是一个问题，您可能想要用PHP代码来不传输敏感字段，而不是使用这个CSS技巧。

现在让我们看看编辑屏幕看起来怎么样

试着从非技术客户的视角来看这个屏幕。只显示需要的标签和字段——而且我们显示的比开箱即用的要少得多。直观地可以识别字段之间的重要性差异。

不要停下来。尽管表单包括“提示”图标，但有时在字段的标签旁边添加一些额外的文本可以帮助不常使用的用户。一种简单的方法就是将文本附加到标签上。通过使用 <small> 标签包围这个额外的“帮助”文本，我们可以创建一个CSS规则来适当地格式化这些文本

table.admintable .f-Required td.key label small{font-family:arial, sans-serif; font-size:10px; font-weight:normal; line-height:1.15em; color:#999;}

显示的帮助文本可能比分离的纸质文档更有效。

更重要的是，我们可以复制代码来重新排列字段顺序，并在标签之间移动字段。我们这样做是为了适应工作流程。在下面的屏幕截图上，观察我们所做的两个更改。

首先（红色），我们将自定义字段系列移到了前一个标签，并消除了现在为空的标签。为什么让产品管理员在标签之间来回点击呢？

其次（绿色），我们复制了显示缩略图的代码，将其包含在主标签中。这样，用户可以直观地将正在编辑的产品与产品图片快速联系起来，并识别是否缺少产品图片。

看看这个添加如何让客户从初始屏幕中获得更好的产品概览。

每个项目和其业务规则都与其他的不同。我们可以使用相同的方法来定制编辑屏幕，但很多时候，对于任何特定的客户，我们都会得到不同的结果。以下是针对不同客户定制的相同产品详情屏幕。

如果客户投诉我们交付了一个难以使用的系统，他们的大部分挫败感可能来自于我们提供的全面编辑屏幕。强大的扩展必须为开发者提供全面的表单，但我们不必以这种方式向客户交付。我们可以做得更好。我们应该这么做。