Question

我想在BigCommerce商店的Stencil主题上使用jQuery select2库。我将如何去做？

Answer 1

为了在基石主题上实现此目的，您将按照以下步骤操作。

将Select2添加到package.json npm install select2 --save
将Select2添加到您的webpack配置中resolve / alias select2: path.resolve(__dirname, 'node_modules/select2/dist/js/select2.min.js'),
将库导入到要使用的库中（例如product.js）import 'select2';
导入Select2 css @import "../../node_modules/select2/src/scss/core";
现在，您需要在要对其运行的任何字段上调用select2()。我做到了
1. 创建自定义产品模板
2. 创建自定义产品视图模板
3. 为dynamicComponent创建产品选项的自定义替换
4. 将select2类添加到您要在其上运行的任何select元素中
5. 在product.js $('.select2').select2();内部运行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}}

如何在BigCommerce模具主题中使用Select2

1 个答案: