在AnQiCMS中为产品详情页添加自定义参数和规格,能够让您的产品信息呈现得更详尽、更专业。无论是电子产品的技术参数,还是服装的尺码、颜色选项,通过灵活的内容模型,您都可以轻松实现这些个性化的展示需求。接下来,我们将一步步了解如何在AnQiCMS中设置、填写并最终在您的产品详情页展示这些自定义的参数和规格。


第一步:在后台定义产品自定义参数

要开始为产品添加自定义参数,我们首先需要在AnQiCMS的后台定义这些参数的结构。这主要通过内容模型功能来完成。

您可以进入后台的“内容管理”部分,然后选择“内容模型”。在这里,您会看到系统内置的“产品模型”。点击编辑进入产品模型设置界面,或者如果您有特殊需求,也可以选择创建一个全新的自定义模型。

在模型设置页面,一个非常关键的部分就是“内容模型自定义字段”。这里是您定义产品各项参数的地方。点击添加字段,您可以为每个参数设定以下内容:

  • 参数名:这是这个参数在前台页面展示给用户看的名称,例如“处理器型号”、“内存容量”或者“颜色选项”。
  • 调用字段:这是一个技术名称,用于在模板中调用该参数。建议使用简洁的英文字母,例如processorModelcolorOptions
  • 字段类型:AnQiCMS提供了多种字段类型,以适应不同数据的录入和展示需求。您可以选择:
    • 单行文本:适用于短文本信息,如型号名称。
    • 数字:适用于价格、库存或尺寸等数字信息。
    • 多行文本:适用于产品特色、简要介绍等较长文本。
    • 单项选择:提供预设选项,用户只能选择其中一项,例如“是/否”或单一颜色。
    • 多项选择:提供预设选项,用户可以选择多项,例如多种附赠配件。
    • 下拉选择:提供一个下拉菜单供用户选择,例如产品系列的特定分类。
  • 是否必填:您可以根据需要设置该参数是否必须填写。
  • 默认值:为字段设置一个初始值。对于单项选择、多项选择和下拉选择类型,这里输入的每行内容都会成为一个独立的选项。

完成所有自定义字段的设置后,记得保存您的内容模型,这样新的参数定义就生效了。

第二步:为产品填写自定义参数值

定义好产品参数的结构后,接下来就是为具体的产品填写这些参数值。

您可以前往“内容管理”下的“发布文档”页面来创建新产品,或者编辑一个已有的产品。在发布或编辑产品时,请务必在“所属分类”中选择一个使用您刚才配置的“产品模型”的分类。

选择好分类后,您会注意到页面下方出现一个名为“其他参数”的折叠框。展开这个折叠框,您就能看到“更多模型自定义字段”部分,其中列出了您在第一步中定义的所有自定义参数。根据每个字段的类型,您可以输入文本、数字,或从预设的选项中进行选择。例如,对于“颜色选项”字段,您可以在下拉菜单中选择白色,或在多选框中勾选多种颜色。

细致地填写完产品的各项自定义参数后,点击页面的保存或发布按钮,您的产品就携带着这些丰富的信息成功入库了。

第三步:在产品详情页显示自定义参数和规格

最后一步也是最关键的一步,是将您在后台设置并填写好的自定义参数展示在产品详情页面上。AnQiCMS的模板系统提供了强大的标签功能,让这个过程变得非常直观。

通常,产品详情页的模板文件位于您当前使用的模板包的product/detail.html(如果您的模型表名是product)。您需要编辑这个文件来添加显示自定义参数的代码。

AnQiCMS主要提供了两种方式来展示这些自定义字段:

方式一:循环展示所有自定义参数

如果您希望将所有自定义参数统一列出,例如在一个“规格参数”或“产品特点”区域,那么使用archiveParams标签是最方便的选择。这个标签会自动获取当前产品的所有自定义参数,并允许您遍历它们。

以下是一个代码示例,展示了如何使用archiveParams标签:

<div class="product-specs">
    <h2>产品规格参数</h2>
    {% archiveParams params %}
    {% if params %} {# 判断是否存在自定义参数 #}
    <table>
        <tbody>
        {% for item in params %}
        <tr>
            <th>{{item.Name}}:</th> {# 参数名,例如“处理器型号” #}
            <td>{{item.Value|safe}}</td> {# 参数值,例如“Intel i7-12700K”,注意|safe过滤器以防HTML内容 #}
        </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p>暂无详细参数信息。</p>
    {% endif %}
    {% endarchiveParams %}
</div>

在这个例子中,archiveParams params会把当前产品的自定义参数作为一个数组赋值给params变量。然后,我们通过for item in params循环遍历每一个参数。item.Name会输出参数的名称(如“处理器型号”),item.Value则会输出您在后台填写的值。|safe过滤器在这里很重要,它能确保如果您的自定义字段中包含了HTML内容(比如多行文本