Арсений Матыцин

Задай параметры функции (неплохо бы ещё прикрутить TS к проекту), если актуально, задай базовые значения или тернарники на присваивание.

Обычно такое реализуют в рамках маршрутизации либо бэком, либо на JS, в идеале на фреймворке.

Чтобы получить возможность во вьюхе менять контент можно использовать гриды, для обеспечения плоской структуры, будет проще управлять данными в любом исполнении, от шаблонизатора под бэком, так и на чистом JS.

Используя ванильку (JS) можно передать в data-атрибутах ID-шники блоков, которые должны появляться снизу и справа от сайдбара и активировать их, скрывая остальные, во время нажатия. Но это на уровне костыльного решения, табуляция выглядит и реализуется проще.

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

Чтобы элементы всегда были по обе стороны, их можно банально переставлять\клонировать и крутить. Дальше уже вопрос позиционирования. Так делают в принципе все карусели.

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

Но вообще я бы рекомендовал либо отдельные сборки, либо фреймворки, в которых есть, как ленивая подгрузка, так и из коробки отрисовка и удаление элементов.

1. Посмотри в ответе сервера, есть ли уже это значение.
2. Если нет, то запроси бэкенда на дополнение этого значения.
3. Если хочешь упороться, то можешь пройтись скриптом по всем страницам, чтобы получить сумму. Подойдет, если вывести значение ну очень надо, а бек добавят нескоро, но есть шанс повалить страницу запросами.

Дешево, просто и сердито — использовать библиотеки и фреймворки, например Vue или React, которые уже из коробки слушают изменяемые значения и могут рисовать новые.

Лучше для получения понимания, как это работает — использовать слушатели с триггерами перерисовки на VanillaJS.

Когда ты вызываешь функцию по событию, в неё «вкладывается» значение с событием. Которое ты и превентишь. Если хочешь вызывать напрямую, то либо убери отключение дефолтного экшна, либо поставь проверку на его наличие.

Если речь идет о сборке проекта или работе в окружении nodejs, то хватит простого require со ссылкой и присваивании его в переменную. Если же проект реализован в формате «обычного сайта», то поможет fetch, который должен запрашивать файл по «серверной» ссылке. Скажем, файл находится в корне проекта в директории assets/json, тогда ссылка будет выглядеть примерно https://domain.name/assets/json/file.json. При условии, конечно, что сервер отдаст файл и точка входа в домен соответствует с корнем проекта, как я привел в примере.

На стилях такое можно сделать, если разделить составляющие блоков на элементы и расположить их внутри гридовой сетки на dense. Тогда заголовки по строке будут зависеть от других заголовков, текстовое описание от других и т.д. Увы этот метод сложный и попахивает бредом.

Более разумно будет не пытаться проводить такую манипуляцию, или захардкодить высоту заголовка в две строки (лучше в одну). Или же прибегнуть к JS, который будет динамически высчитывать размер наибольшего заголовка в строке и соседним выдавать такую же фиксируя её. Вроде есть либа такая.

Минус хардкода размера заголовка в том, что если в ряду будут все в одну строку, то появится необоснованное пространство снизу, а JS при большом числе карточек нагрузит вычислительные мощности устройства.

Еще можно подождать, пока войдет в реализацию subgrid. Но с этим пока сложно.

Проверку проводить на уровне шаблонизатора.

На JS можно, конечно, но это на уровне... На плохом уровне. Но посмотреть как, можно тут, тут и тут.

Напиши функцию, объект или класс (по сути то, что в реакте или любом другом подобном фрейме или либе), который будет принимать параметра входящие и на выходе рисовать модалку с нужным контентом.

Как вариант решения → debounce.

Подключай скрипты в единичном количестве к странице.