如何在 Reaction Commerce 中向产品 variantForm 添加 <select> 输入？答案

【问题标题】：How do I add a <select> input to the product variantForm in Reaction Commerce?如何在 Reaction Commerce 中向产品 variantForm 添加 <select> 输入？
【发布时间】：2016-09-27 18:07:12
【问题描述】：

如何在产品varientForm 中获得<select> 下拉菜单？

有点像我们在这里看到的：

【问题讨论】：

标签： meteor meteor-autoform

【解决方案1】：

如上所示，要完成将<select> 添加到variantForm，我们需要编辑或扩展三个文件，variantForm.html、variantForm.js 和products.js 架构：

在<select> 的AutoForm live example 中，我们看到如下架构：

{
  typeTest: {
    type: String,
    optional: true,
    autoform: {
      type: "select",
      options: function () {
        return [
          {label: "2013", value: 2013},
          {label: "2014", value: 2014},
          {label: "2015", value: 2015}
        ];
      }
    }
  }
}

和一个看起来像这样的Blaze HTML 模板：

{{#autoForm id="types2" schema=typesSchema2}}
  {{> afFormGroup name="typeTest" type="select" options=optionsHelper}}
  <div class="form-group">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
{{/autoForm}}

步骤 1

编辑/扩展products.js架构文件添加您的选择，除了我们只需要添加这些部分：

typeTest: {
  type: String,
  optional: true,
  autoform: {
    type: "select"
  }
},

Reaction Commerce 忽略了 AutoForm 中的 optionHelper 函数，正如我们在上面的示例中看到的那样。我保留autoform: { type: "select" } 只是为了表达意图。有关以这种方式修改的 product.js 架构的真实示例，请参阅 here。

第二步

将您的辅助函数添加到返回您选择的选项对象的variantForm.js。里面Template.variantForm.helpers({})加：

variantTypeOptions: function (){
  return [
    {label: "Default", value: 2013},
    {label: "Height & Weight", value: "Height & Weight"}
  ];
},

漂亮而简单（类似于 AutoForm 示例），这些成为我们在上面的屏幕截图中看到的选择选项。真实世界的例子here。

第三步

最后一步。让我们最后将 Blaze 模板 HTML 添加到 variantForm.html：

<div class="form-group{{#if afFieldIsInvalid name='variantType'}} has-error{{/if}}">
  <label class="control-label">{{afFieldLabelText name='variantType'}}</label>
  {{>afFieldInput name='variantType' type="select" options=variantTypeOptions}}
  {{#if afFieldIsInvalid name='variantType'}}
    <span class="help-block">{{afFieldMessage name='variantType'}}</span>
  {{/if}}
</div>

我们的重点是：

{{>afFieldInput name='variantType' type="select" options=variantTypeOptions}}

真实世界的例子here。

结束语

您可能需要执行rc reset 才能使对架构的更改生效，但是警告，这将擦除您的本地开发数据库。请参阅“Creating a Plugin”文章中关于必须频繁重置的 RC 文档中的注释。

【讨论】：