В данной статье я хочу рассказать, как простым способом немного облегчить себе жизнь, заполняя сайт на движке WebAsyst, сразу переходя к редактированию товаров и имея возможность снимать все чекбоксы на странице. А так же потенциально сэкономить 500 руб на покупке плагина, который исправляет одну из этих проблем.

Предисловие

Я работаю в сфере создания и продвижения сайтов, и для интернет-магазинов мы в основном прибегаем к движку Webasyst. Ничего плохого не могу про него сказать, но вот за год заполнения сайтов на нём я понял, что меня раздражают 2 вещи, о которых я расскажу дальше.
И как-то раз я решил посмотреть в код самой админке и попробовать исправить то, что мне не нравится.

Переход к редактированию товара при нажатии на него в админке

Вот так выглядит список товаров:



Дело в том, что если в списке товаров просто нажать на его название, то открывается вот такое промежуточное окно:



В нём можно перейти к редактированию фотографий или сменить название… А при нажатии на кнопку «редактировать» осуществляется переход непосредственно к редактированию.



Может кому-то это удобно. Кому-то но не мне.

Исследуем

Если посмотреть на ссылку, то становится ясно, что промежуточная страница имеет адрес

https://сайт/webasyst/shop/?action=products#/product/idтовара

А страница редактирования это тоже самое + /edit в конце.

Исправляем

Довольно не трудно оказалось найти шаблон страницы отображения списка товара, он расположен по адресу:

/сайт/wa-apps/shop/templates/actions/products/

Там 3 файла, название которых начинается с product_list_. Все они рисуют админку в 3-х вариациях:



Отображение товаров в виде таблицы, иконок и таблицы с артикулами. Я пользуюсь только видом таблицы, так что мой выбор — это файл

product_list_table.html

Открыв инспектор страницы браузера в админке выяснил, что ссылки на товары выглядят примерно так:

<td class="drag-handle s-product-name">
    <a href="#/product/6037">
        <div>Готика. Орех стекло<i class="shortener"></i></div>
    </a>
</td>

Нашел в вышеупомянутом файле строчку:

<td class="drag-handle s-product-name">
    <a href="#/product/{%#p.id%}/">
        <div>{%#p.name%}<i class="shortener"></i></div> 
    </a>
</td>

и дописал в конце edit, получилось так:

<td class="drag-handle s-product-name">
    <a href="#/product/{%#p.id%}/edit">
        <div>{%#p.name%}<i class="shortener"></i></div> 
    </a>
</td>

И это сработало.

К слову, я видел на просторах Инсталлера плагин, который нужен для той же задачи, но стоит он 500 руб.

Чекбоксы

На сайте, который чаще всего приходится заполнять, различные дополнительные комплектующие для дверей реализованные с помощью «Услуг». Каждый товар (дверь) соотнесён со своей категорией, а поскольку назначить услугу категории нельзя, то все товары еще разбиты по сортировке на различные типы товаров, которые, как правило дублируют категории.

То есть всё, что есть внутри категории «один» принадлежит типу товара «один». Но есть и исключения, когда цена комплектующих в одной категории отличается в зависимости от цвета двери и т.д. Тогда создаются типы товаров «один.1» «один.2» и т.п. И для каждого типа нужно создавать свои услуги со своими ценами.

Вид в админке:



Вид на сайте:



Таких услуг требовалось создавать очень много, а отмечать нужно было от 1 до 5 чекбоксов, и по-умолчанию, при создании новой «услуги», все чекбоксы в списке типов товаров уже были отмечены. По началу снимал все вручную, оставляя нужные, но конечно времени на снятие около сотни чекбоксов уходило много и я начал писать в консоль при каждом создании «услуги» код:

$('body input:checkbox').prop('checked', false);

Этот код снимает все отмеченные чекбоксы на странице. Это работало, но всё равно было не очень удобно. По этому я видел 2 варианта: править код, что бы при создании услуги чекбоксы появлялись в снятом состоянии, а не в отмеченном или добавить в интерфейс админки кнопку «снять все чекбоксы».

Мои познания в JS крайне малы, поэтому я выбрал второй способ.

Нашел файл отрисовки интерфейса редактирования услуг:

/сайт/wa-apps/shop/templates/actions/services/Services.html

А в нём код кнопки «Удалить услугу»:

<li>
    <a href="#" class="s-delete-service">
        <i class="icon16 delete"></i>
        [`Delete this service`]
    </a>
</li>

Недолго думая добавил кнопку прямо рядом с текущей одинокой «удалить», разместив ниже код:

<li>
    <input type="button" value="Убрать все чекбоксы" onClick="$('body input:checkbox').prop('checked', false);" />
</li>

При нажатии исполняется вышеупомянутый JS код и все работает.

До нажатия:


После нажатия:


Возможно это всё можно было решить проще, но я решил, как смог. Надеюсь кому-нибудь это будет полезно.