Как сделать горячие клавиши и быстрые действия в личном кабинете через JavaScript

Как сделать горячие клавиши и быстрые действия в личном кабинете через JavaScript

Ваши менеджеры работают в личном кабинете целыми днями. Каждый лишний клик, каждое лишнее движение мышки снижает производительность. А что если сделать горячие клавиши? Нажал F2 — открылось редактирование заказа, Ctrl+S — сохранил. Или добавить кнопку «Дублировать заказ» — чтобы не вводить всё заново. Всё это можно сделать на Falcon Space с помощью JavaScript, не трогая ядро.

Расскажу, как добавить кастомные JS-скрипты в личный кабинет, ускорить работу сотрудников и снизить количество ошибок.

Где размещать кастомный JavaScript

В Falcon Space есть два способа:

Вы также можете подключить внешний JS-файл (загрузить его в папку сайта).

Важно: скрипты выполняются после загрузки DOM. Вы можете использовать jQuery (он уже подключён в платформе).

Пример 1: горячие клавиши для страницы заказов

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

<script>
$(document).keydown(function(e) {
    if (e.key === 'F2') {
        e.preventDefault();
        var selectedRow = $('table.datagrid tr.selected');
        if (selectedRow.length) {
            var editUrl = selectedRow.find('a.edit-button').attr('href');
            if (editUrl) window.location.href = editUrl;
        }
    }
});
</script>

Менеджеры могут выделить заказ мышкой и нажать F2 — открывается форма редактирования. Не нужно искать кнопку.

Аналогично Ctrl+S для сохранения формы:

$(document).keydown(function(e) {
    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
        e.preventDefault();
        $('form[data-type="edit"] button[type="submit"]').click();
    }
});

Пример 2: кнопка «Дублировать заказ»

На странице заказа (карточке) добавим кнопку, которая вызывает процедуру копирования:

<button id="duplicateOrder" class="btn btn-secondary">Дублировать заказ</button>
<script>
$('#duplicateOrder').click(function() {
    var orderId = $('#order_id').val();
    $.post('/api/duplicate_order', { order_id: orderId }, function(response) {
        if (response.success) {
            window.location.href = '/edit_order?id=' + response.new_order_id;
        } else {
            alert('Ошибка: ' + response.error);
        }
    });
});
</script>

А на сервере пишем SQL-процедуру duplicate_order, которая копирует записи в таблицах.

Экономия времени: менеджер раньше тратил 2 минуты на создание нового заказа по образцу, теперь 5 секунд.

Пример 3: автозаполнение адреса по индексу

На форме оформления заказа поле «Индекс». Пользователь вводит индекс, скрипт подставляет город и улицу через API DaData:

<script src="https://cdn.jsdelivr.net/npm/suggestions-jquery@22.6.0/dist/js/jquery.suggestions.min.js"></script>
<script>
$('#postal_code').suggestions({
    token: 'YOUR_API_TOKEN',
    type: 'POSTAL_CODE',
    onSelect: function(suggestion) {
        $('#city').val(suggestion.data.city);
        $('#street').val(suggestion.data.street);
        $('#house').val(suggestion.data.house);
    }
});
</script>

Требуется зарегистрироваться в сервисе DaData (есть бесплатный тариф). Менеджеру не нужно вручную вводить адрес.

Пример 4: выделение просроченных заказов цветом

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

<script>
$('table.datagrid tr').each(function() {
    var deadline = $(this).find('.deadline-date').text();
    if (deadline && new Date(deadline) < new Date()) {
        $(this).addClass('table-danger');
    }
});
</script>

Менеджер сразу видит проблемные заказы.

Как не навредить

JavaScript — мощный инструмент, но есть риски:

Мы рекомендуем тестировать скрипты на тестовом стенде, прежде чем включать на продакшене.

Сколько стоит разработка кастомных JS-скриптов

Если заказываете у нас:

Если у вас есть свой JS-специалист, он сделает это бесплатно по инструкции.

Кастомный JS — это простой способ повысить удобство личного кабинета без доработок серверной части. Не бойтесь добавлять скрипты, но делайте это аккуратно.

Страница-источник на сайте falconspace.ru