Как в Ocstore поменять стиль выбора главной категории?

В Ocstore главная категория выбирается в выпадающем списке, что жутко неудобно https://disk.yandex.com/i/9_-tQy-InNbtNA
То есть в product_twig надо поменять select на input, но не совсем понятно как именно поменять внутри у них код для правильного выбора.

Код:

Обычная --------

              <div class="form-group">
                <label class="col-sm-2 control-label" for="input-category"><span data-toggle="tooltip" title="{{ help_category }}">{{ entry_category }}</span></label>
                <div class="col-sm-10">
                  <input type="text" name="category" value="" placeholder="{{ entry_category }}" id="input-category" class="form-control" />
                  <div id="product-category" class="well well-sm" style="height: 150px; overflow: auto;"> {% for product_category in product_categories %}
                    <div id="product-category{{ product_category.category_id }}"><i class="fa fa-minus-circle"></i> {{ product_category.name }}
                      <input type="hidden" name="product_category[]" value="{{ product_category.category_id }}" />
                    </div>
                    {% endfor %}</div>
                </div>
              </div>
              
              
Главная --------
                            <div class="form-group">
            <label class="col-sm-2 control-label" for="select-main_category_id"><span data-toggle="tooltip" title="{{ help_main_category }}">{{ entry_main_category }}</span></label>
            <div class="col-sm-10">
            <select name="main_category_id" class="form-control">
                <option value="0" selected="selected">{{ text_none }}</option>
                {% for category in categories %}
                  {% if category.category_id == main_category_id %}
                    <option value="{{ category.category_id }}" selected="selected">{{ category.name }}</option>
                    {% else %}
                    <option value="{{ category.category_id }}">{{ category.name }}</option>
                  {% endif %}
                {% endfor %}
            </select>
            </div>
            </div>

 

Не надо так делать.. лучше сделайте поиск по select https://github.com/select2/select2

 

спасибо, а может где инструкция на русском есть, как устанавливать и использовать?

 

Поищите в интернете.

 

Переводчик вам зачем?

 

Установка в админке (Расширения- Установка расширений).
После этого обновить кэш модификаторов (Расширения - Модификаторы --> синяя иконка справа вверху.).

 

Лучше отказаться от загрузки js-сок со сторонних ресурсов

 

Можно скопировать в виде файлов. В ocmod все есть(пути, названия итд), лишь бы было желание.

 

Да всё супер, отлично работает, то что нужно, искал неделю решение, спасиб!

 

Пожалуйста, поясните, что конкретно было сделано??? Установил Select2.ocmod.zip, который выложил Tom, результата никакого...
Расскажите, пожалуйста, что конкретно вы сделали?

 

А что вы ожидали увидеть после установки?

 

Я предполагал, что будет поиск по Select. Как вы и писали.
Вижу, что добавился модификатор, вижу строки в коде со ссылками на библиотеки.

Чего не хватает? Нужно в product_form.twig добавить какой-то стиль или что?

 

Модификатор работает с элементами типа select. После установки , нужно обновить кеш модификаторов. После чего в селект появится поле поиска. Достаточно начать вводить название нужной категории и в выпада́ющем списке будут оставаться только категории содержащие данные которые вы ввели. Ну или сразу появится нужная категория, если название уникально.

Так же можно внести правки в сам файл admin/view/template/catalog/product_form.twig , не устанавливая модификатор.
Перед {{ footer }} добавить

Код:

                <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
                <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css" rel="stylesheet" />
                <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/i18n/ru.js"></script>
                <script type="text/javascript">
                $(document).ready(function() {
                $("select").select2();
                language: "ru"
                });
                </script>
                <style type="text/css">
                .select2-dropdown { z-index: : 1 !Important;}
                .select2-container {width:100% !Important;}
                .select2-container .select2-selection--single {height: 35px !Important;}
                .select2-container--default .select2-selection--single {border: 1px solid #ccc !Important;border-radius: 3px !Important;}
                .select2-container--default .select2-selection--single .select2-selection__arrow b {margin-top: 1px!Important;}
                }</style>

 

Да, все так и делал. И модификатором пробовал, и просто код размещать. Поиска нет ((( Версия ocStore 3.0.3.7

ЧТо может быть не так?

 

Смотрите что в исходном коде страницы и консоли браузера.

 

Я не понимаю, что должно быть? Данному селекту должен присвоиться новый класс select2? Или что?

 

Да. Select2 .
Ctrl+U , откроется исходный код страницы, где должно быть то что в модификаторе (подключение скриптов и стилей).

 

Да это я понимаю ))) Я же выше скины кидал. Сам код со стилями и ссылками на библиотеки (внизу страницы) есть. Но ничего от этого не меняется

 

Покажите пожалуйста, как у вас выглядит этот код после применения модификатора

<label class="col-sm-2 control-label" for="select-main_category_id"><span data-toggle="tooltip" title="{{ help_main_category }}">{{ entry_main_category }}</span></label>
<div class="col-sm-10">
<select name="main_category_id" class="form-control">
<option value="0" selected="selected">{{ text_none }}</option>
{% for category in categories %}
{% if category.category_id == main_category_id %}
<option value="{{ category.category_id }}" selected="selected">{{ category.name }}</option>
{% else %}
<option value="{{ category.category_id }}">{{ category.name }}</option>
{% endif %}
{% endfor %}
</select>

 

Код:

              <div class="form-group">
            <label class="col-sm-2 control-label" for="select-main_category_id"><span data-toggle="tooltip" title="{{ help_main_category }}">{{ entry_main_category }}</span></label>
            <div class="col-sm-10">
            <select name="main_category_id" class="form-control">
                <option value="0" selected="selected">{{ text_none }}</option>
                {% for category in categories %}
                  {% if category.category_id == main_category_id %}
                    <option value="{{ category.category_id }}" selected="selected">{{ category.name }}</option>
                    {% else %}
                    <option value="{{ category.category_id }}">{{ category.name }}</option>
                  {% endif %}
                {% endfor %}
            </select>
            </div>
            </div>