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

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

为了在基石主题上实现这一点，您将遵循以下步骤

将Select2添加到软件包中。json

npm安装Select2——保存

将Select2添加到您的网页配置resolve/alias

Select2:path.resolve（\uu dirname，'node\u modules/Select2/dist/js/Select2.min.js'），

导入您希望使用的库（例如product.js）

Import'select2'

导入Select2 css

@Import./../node_modules/Select2/src/scss/core”

现在，您需要在任何要运行它的字段上调用

select2（）。我是通过
创建自定义产品模板
创建自定义产品视图模板
为产品选项的
dynamicComponent
创建自定义替换
将
select2
类添加到要在其上运行的任何
select
元素中
运行
$（'.select2'）.select2（）
inside product.js
onReady
最后，您需要修复CSS，以便select2正确显示。尝试
。选择2{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}}