NotNight

Большая схематичность пошла бы на пользу -нарисуйте структуру текущую и будущую, какой хотите достигнуть.
Но в общем, и если я правильно понял, вам нужна новая страница, на которой карточки/подкатегории можно легко вывести при помощи сниппета pdoresources.
Что касается самого меню - тут зависит от того, как оно у вас генеририруется -если автоматически(например, через pdoMenu),то не составит труда настройками включить/исключить/видоизменить настройки в нем.

1. лучше не класс удалять, а сам слайдер отключить. У него есть метод unslick
2. Не нужно ширину чекать, лучше использовать matchMedia и в нем переключать слайдер

Если блоков будет несколько, то кнопка будет открывать только первый.
Нужно сделать связь между ними

<button class="open" data-target="b1">Open1</button>
<button class="open" data-target="b2">Open2</button>
<div class="hidden-block" id="b1">
  <ul>
    <li>Первый</li>
  </ul>
  <button class="close">Close</button>
</div>
<div class="hidden-block" id="b2">
  <ul>
    <li>Второй</li>
  </ul>
  <button class="close">Close</button>
</div>

// 1. Константа, значение не меняется
// 2. Это кнопка, а не блок (название фиговое)
// 3. Их может быть несколько на странице
const openButtons = document.querySelectorAll('.open');

// Закрывашка находится внутри блока, поэтому искать ее нужно именно внутри блока
// чтобы она закрывала только свой блок. Это выкидываем
// let backBlock = document.querySelector('.close');

// Вешаем клики на все открывашки
openButtons.forEach(btn => {
  btn.addEventListener('click', e => {  
    // дергаем ID из data-атрибута
    const targetId = e.target.dataset.target;
    document.getElementById(targetId).classList.add('open-hidden-block');
  });
});

// Перебираем все блоки и ищем в них закрывашки
document.querySelectorAll('.hidden-block').forEach(block => {
  const closer = block.querySelector('.close');
  closer.addEventListener('click', () => {
    block.classList.remove('open-hidden-block');
  });
});

Ошибка:
Не правильно, что backBlock.addEventListener добавляется внутри обработчика клика. Т.е. каждый раз, как нажимаем на openBlock, вешается ещё и ещё один обработчик на backBlock. Достаточно один раз, заранее, так же как сейчас openBlock.addEventListener

Мелочи:

1. openBlock и backBlock не меняются, их можно вместо let объявить const
   
2. внутри обработчиков событий снова и снова искать document.querySelector('.hidden-block') наверное, не имеет смысла, достаточно один раз, заранее

   const hiddenBlock = document.querySelector('.hidden-block');

   и далее обращаться к этой константе hiddenBlock.
   

Культура:
Хорошо бы песочницу на CodePen, где можно вживую проверить работу этого кода. И вставить её в сам вопрос, через кнопку [ + ]

Видимо, не указан &parents, по умолчанию из текущего ресурса ищет. Также можно дополнительно ограничить выборку параметром &templates, pdoPage наследует общие параметры pdoTools, смотрите здесь: https://docs.modx.pro/komponentyi/pdotools/obshhie...

получайте корзину привязаную к FUSER - это индетификатор текущего пользователя, независимо авторизовался он или нет

$fuser = Sale\Fuser::getId();
$basket = \Bitrix\Sale\Basket::create($siteId);
$basket->setFUserId($fuser);

https://dev.1c-bitrix.ru/learning/course/index.php...

Сергей Соколов прав, можно сделать за один проход:

let arr = [2,1,3,5,2,7,1,4];
let min = arr[0], max = arr[0];
for(let i of arr) {
  if(min > i) min = i;
  if(max < i) max = i;
}
console.log('Result is: ' + (max-min));

Наверное, запутал этот пример с отрицательными:

console.log(work([-10, -20, -40])); // -40 - (-10) = -30 => 30

Тут переставили местами зачем-то max и min. Но с отрицательными значениями ничего особенного. Из максимального -10 вычитаем - минимальное -40:
-10 - (-40) == -10 + 40 == 30
Никаких if..else, Math.abs() и TensorFlow )

без reduce и т.д.

Тогда и без Math.max() / Math.min()

Один раз пройти по массиву. Сначала и max и min равны первому элементу.
Когда в массиве всего один элемент, так ведь и будет: он и наибольший и наименьший.

Идём по элементам массива. Очередной сравниваем с max. Если очередной больше, то обновляем max. Та же логика с min.

Этот способ и алгоритмически быстрее встроенных Math.max() + Math.min(),
т.к. решает обе задачи за 1 проход по массиву.

У Math не один метод https://developer.mozilla.org/ru/docs/Web/JavaScri...

Писал тут, все что тебе нужно и даже больше
https://klondike-studio.ru/standards/standartnyy-h...

Неплохое описание цикла for на Mozilla Developers Network (на русском).

Попробую своими словами. Внутри for( ... ) находится три выражения:

1. начальное состояние
   
2. проверяемое условие
   
3. действие на каждом цикле
   

Для сравнения, в цикле while() из этого зоопарка присутствует только условие.

Простой пример:

for( i = 0; i < 2; i = i + 1) {
  console.log( i ); // выводит значение i в консоль
}

Один раз в начале выполняется первая часть, «начальное состояние» i = 0.
Проверяется условие i < 2.
Всё в порядке? – «ныряем» внутрь. Выполняется console.log() и выводится 0.

Теперь выполняется третье выражение: i = i + 1.
Снова проверяется условие i < 2 и если всё ок, снова ныряем.
Выводится 1.

Опять выполняется третье выражение i = i + 1, но условие уже не проходит проверку, т.к. i стало равно 2.
Всё, цикл закончен.

Такой же цикл с while() выглядел бы так:

i = 0;
while( i < 2 ) {
  console.log( i );
  i = i + 1;
}

Т.е. for() это просто более компактная запись довольно типичного цикла.

Отложить загрузку на 5 секунд - выход, но грубоватый (имхо конечно). Я делаю по-другому - оборачиваю код в скролл-ивент + задержка в 1 секунду. То есть, сайт загрузился быстро, и как только пользователь начал скроллить хоть чуть-чуть - секундный таймаут и загрузка дополнительных ресурсов. Гугл доволен, пользователи вообще не замечают задержки:

var fired = false;

window.addEventListener('scroll', () => {
    if (fired === false) {
        fired = true;
        
        setTimeout(() => {
            // Здесь все эти тормознутые трекеры, чаты и прочая ересь,
            // без которой жить не может отдел маркетинга, и которые
            // дико бесят разработчиков, когда тот же маркетинг приходит
            // с вопросом "почему сайт медленно грузится, нам гугл сказал"
        }, 1000)
    }
});

NotNight Напишите, как называется шаблон? если "клубный" какой-то, то у них есть документации по своим шаблонам.
Если самописный, то по мимо добавления в xml нужно добавить в php вывод позиции
вот в предыдущем вопросе отвечал как это сделать, там достаточно просто.
https://qna.habr.com/q/1174582
Там в ответе про переопределение модуля тоже написал, чтобы свою верстку сделать можно было.