Сайдбар с независимой прокруткой в Webasyst 1.3

При помощи плагинов можно решить многие задачи. Но бывают ситуации, когда приходится прибегать к правке системного кода ShopScript. Это можно требоваться в случае сложности или невозможности решения задачи при помощи плагина и браузерных скриптов. На практике к нему прибегают и пользователи, которые хотят подправить функциональность админки без необходимости изучать разработку плагинов. Один из таких примеров мы и рассмотрим.

При работе с товарами в Webasyst 1.3 определённое неудобство вызывает одновременная прокрутка сайдбара с товарными категориями и таблицы с товаром. Сделаем так, чтобы сайдбар прокручивался независимо от страницы, что повысит удобство работы в старом интерфейсе.

При наведении мыши на сайдбар могут появляться фиксированные панели вверху ("перетащить товары сюда") и внизу (изменение ширины сайдбара). Эти панели предлагают дополнительную функциональность, но нам она не нужна. Уберём эти панели.

Общий подход для решения задач такого плана следующий:

Для поиска фиксированных панелей открываем панель инструментов разработчика в браузере по F12, щелкаем правой кнопкой на целевом элементе (фиксированный блок категорий), в появившемся диалоге выбираем команду "Исследовать элемент". Определяем id родительского блока - "s-fixed-blocks".

Теперь предстоит самое сложное - найти в коде, где этот элемент фиксируется. Для этого можно воспользоваться поиском строки на сервере, но лучше иметь локальную копию всего сайта. В ней поиск будет производиться быстрее, да и наличие самой копии необходимо.

Обращаем внимание на то, что панели появляются при прокрутке страницы. Значит, при помощи стилей решить вопрос не получится. Действие происходит в каком-то JavaScript файле.

После просмотра выдачи находим интересующий код в файле wa-apps\shop\js-legacy\product\list.js

В начало функции setFixed() добавляем оператор выхода из функции, чтобы код внутри неё не выполнялся и не отображал фиксированные панели.

Панель изменения ширины отображается при наведении мыши на сайдбар. Такое действие реализуется при помощи стиля и нужно найти файл CSS. При помощи поиска по id данной панели находим строку #s-sidebar:hover .s-sidebar-width-control { opacity: 1; } в файле wa-apps\shop\css-legacy\shop.css, которую нужно закомментировать.

Мы получили "чистый" сайдбар, который нужно отредактировать так:

Растянуть его на всю достиупную высоту
Зафиксировать верхнюю координату Y с учётом прокрутки страницы и скрытия главного меню админки
Добавить вертикальную полосу прокрутки

Для простоты можно все эти действия отладить при помощи браузерного скрипта в Tampermonkey. Затем можно их будет перенести в плагин. Возьмём готовый скрипт фиксации панели из статьи Webasyst 1.3: закрепление правой панели в каталоге товаров

Скрипт для фиксации правой панели

Добавим в него требуемый функционал

// ==UserScript==
// @name         Webasyst 1.3 фикс правой панели
// @namespace    http://tampermonkey.net/
// @version      2024-06-27
// @description  
// @author       
// @match        https://ДОМЕН/webasyst/shop/?action=products
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

function setPosition(){
        $('#s-product-list-toolbar').css({
            'position': 'sticky',
            'top': '12px',
        });
    }
  
    //+++ код для фиксации сайдбара

let waHeader = $('#wa-header').outerHeight();
    let mainHeight = $('#mainmenu').outerHeight();
    let topX = waHeader + mainHeight;
  
    $(window).scroll(function() {

setSidebarTop();
    });

function setSidebarTop(){
        let scrollTop = $(window).scrollTop();
        let top = topX - scrollTop;

if(scrollTop > waHeader){

top = mainHeight;
        }
        $('#s-sidebar').css({
            'top': `${top}px`,
        });
        $('#s-product-list-toolbar').css({
            'top': `${top}px`,
        });
    }

function fixSidebar(){

$('#s-sidebar').css({
            'position': 'fixed',
            'top': `${topX}px`,
            'bottom': '0',
            'overflow-y':'scroll',
            'padding-top':'0',
            'padding-bottom':'0',
        });
        setSidebarTop();
    }

//--- код для фиксации сайдбара
  
    let observer = new MutationObserver(mutationRecords => {
        setPosition();
        fixSidebar();
    });

observer.observe(document, {
        childList: true,
        subtree: true,
    });

})();

В функции инициализации fixSidebar происходит первоначальная настройки стиля сайдбара, а в функции setSidebarTop - изменение верхнего положения сайдбара с учетом прокрутки страницы.