npm - 如何在 BigCommerce Stencil 主题中使用 Select2

Question

我想在我的 BigCommerce 商店的 Stencil 主题上使用 jQuery select2 库。我该怎么做呢？

标签： npmjquery-select2bigcommerce

Answer 1

为了在 Cornerstone 主题上完成此操作，您将按照以下步骤操作。

1. 将 Select2 添加到您的 package.jsonnpm install select2 --save
2. 将 Select2 添加到您的 webpack 配置解析/别名select2: path.resolve(__dirname, 'node_modules/select2/dist/js/select2.min.js'),
3. 在您希望使用它的地方导入库（例如 product.js）import 'select2';
4. 导入 Select2 css@import "../../node_modules/select2/src/scss/core";
5. 现在您需要调用select2()您希望它运行的任何字段。我通过
   1. 创建自定义产品模板
   2. 创建自定义产品视图模板
   3. dynamicComponent为产品选项创建自定义替换
   4. 将类添加到您希望它运行的select2任何元素select
   5. $('.select2').select2();在 product.js 中运行onReady
   6. 最后，您需要修复 CSS 以使 select2 正确显示。尝试.select2 {font-size: $input-small-fontSize;}

由于这其中最棘手的部分是自定义dynamicComponent模板，这就是我所做的

{{#if this.type "===" "Configurable_PickList_Set"}}
    {{#if this.partial "===" "set-radio"}}
        {{> components/products/options/set-radio this }}
    {{/if}}
    {{#if this.partial "===" "set-rectangle"}}
        {{> components/products/options/set-rectangle this }}
    {{/if}}
    {{#if this.partial "===" "set-select"}}
        {{> components/products/options/set-select this select2="true" }}
    {{/if}}
{{else}}
    {{{dynamicComponent 'components/products/options'}}}
{{/if}}