Как использовать Select2 в теме BigCommerce Stencil

Чтобы выполнить это в теме Cornerstone, выполните следующие действия.

1. Добавьте Select2 в ваш package.json npm install select2 --save
2. Добавьте Select2 в разрешение/псевдоним конфигурации вашего веб-пакета 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}}