如何在 BigCommerce Stencil 主题中使用 Select2

Question

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

Answer 1

为了在 Cornerstone 主题上完成此操作，您需要执行以下步骤。

将 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. 创建自定义 product-view 模板
3. 为产品选项dynamicComponent创建自定义替换
4. 将 select2 class 添加到您想要的任何 select 元素运行 on
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}}

如何在 BigCommerce Stencil 主题中使用 Select2

How do I use Select2 in a BigCommerce Stencil theme

npm

jquery-select2

bigcommerce