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

Question

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

类似于我们在这里看到的：

Answer 1

如上所示，要完成向 variantForm 添加 <select>，我们需要编辑或扩展三个文件，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

Edit/extend products.js 架构文件添加您的 select 除了我们只需要添加这些部分：

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

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

第 2 步

将您的辅助函数添加到 variantForm.js，returns 您的 selection 的选项对象。在 Template.variantForm.helpers({}) 内添加：

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

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

步骤 3

最后一步。让我们最后添加 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 for the changes to the schema to take effect, but WARNING, this will wipe your local development database. See the note in the RC Docs about having to do frequent resets in the "Creating a Plugin" 文章。

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

How do I add a <select> input to the product variantForm in Reaction Commerce?

meteor

meteor-autoform

步骤 1

第 2 步

步骤 3