Как использовать Select2 в теме BigCommerce Stencil - PullRequest
Новая
       28

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

0 голосов
/ 11 июня 2019

Я бы хотел использовать библиотеку jQuery select2 в моей теме Stencil для своего магазина BigCommerce. Как бы я поступил так?

1 Ответ

1 голос
/ 11 июня 2019

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

  1. Добавьте Select2 в свой пакет. Json npm install select2 --save
  2. Добавьте Select2 в свой веб-пакетconfig resolv / alias 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 class для любых select элементов, которые вы хотите запустить на
    5. Run $('.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}}
...