Как использовать JavaScript с Bitrix?

Question

[Flipflap]

Всем привет. Как с помощью JS влиять на элементы Bitrix?

Например, я хочу, чтобы по клику на какой-то объект, пусть, например [SECTION_ID], происходило действией.

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

Comments

[Александр Маджугин]

Что значит не имеет стандартного html вида?

[Flipflap]

Александр Маджугин, в прямом, там меню свёрстано не списком на html, а выводится массивом на php

[Александр Маджугин]

Flipflap, вы уверены что вообще понимаете как формируется меню в битрикс и концепцию компонентов битрикс?

[Алексей Уколов]

«Массив на php» генерирует какую-то html-разметку всё равно.

[Flipflap]

Александр Маджугин, Нет, я его недавно начал изучать. Если знаете ответ, пожалуйста - помогите. Если нет, то не надо пытаться выяснить чужие познания. Для чего это? Я же за помощью обращаюсь, а это дело добровольное

[Flipflap]

Алексей Уколов, Ну да, только класс у всех одинаковый(

[Ярослав Александров]

Flipflap, какой вам можно дать ответ если у вас знаний не хватает даже вопрос сформулировать. Приложите скриншоты, участки кода.

Answer 1

[Александр Маджугин]

Flipflap, затем что вы делаете утверждения не соотвествующие действительности.
Зачем вот это вот:

там меню свёрстано не списком на html, а выводится массивом на php

?
Если не понимаете как формируется меню лучше спросить как это происходит.

На основе массива php компонентом menu по шаблону указанному для этого компонента, генерируется html блок представления меню.

Вы можете добавить нужные вам классы как непосредственно в шаблоне (для всех пунктов) так и изменить шаблон так, чтобы он мог управляться параметрами из массива PHP, чтобы устанавливать различные классы для разных пунктов.

Вам нужно найти шаблон на базе которого генерируется меню.

Рискну предположить что он где-то там: /local/.default/components/bitrix/menu/...
Но вомзожно и по другому пути - все зависит от того кто и как кастомизировал сайт.

Comments

[Flipflap]

/bitrix/components/bitrix/lists.menu - может быть он ?

[Александр Маджугин]

Flipflap, во-первых это путь в ядре. Там ничего править не надо. Забутьте по папку /bitrix если у вас есть /local
Если /local нет то смотрите в папке /bitrix/templates, но не за ее пределами.

А это сам компонент https://dev.1c-bitrix.ru/user_help/components/cont...
И нет - скорее всего не он формирует у вас меню.

[Flipflap]

Александр Маджугин, Видимо, это оно.
<

? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); ?>
<? $this->setFrameMode(true); ?>
<? if (count($arResult) < 1) { return; } ?>
<ul class="uldepth_level_0"><?
	$previousLevel = 0;
	foreach($arResult as $arItem):
		if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):
			echo str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));
		endif;
		if ($arItem["IS_PARENT"]):
			?><li class="depth_level_<?=$arItem["DEPTH_LEVEL"];?><? if ($arItem["SELECTED"]) { echo ' selected active'; } ?>"><span><i></i>
                <a href="<?=$arItem["LINK"];?>" class="<?if(strpos($_SERVER["REQUEST_URI"], $arItem["LINK"]) !== false):?>active_item <?endif;?>depth_level_<?=$arItem["DEPTH_LEVEL"];?><? if ($arItem["SELECTED"]) { echo ' selected'; } ?>"><?=$arItem["TEXT"];?></a>
            <span class="icon span_depth_level_<?=$arItem["DEPTH_LEVEL"];?>"></span></span>
				<ul class="uldepth_level_<?=$arItem["DEPTH_LEVEL"];?>"><?
		else:
			?><li class="depth_level_<?=$arItem["DEPTH_LEVEL"];?><? if ($arItem["SELECTED"]) { echo ' selected active'; } ?>"><a href="<?=$arItem["LINK"];?>" class="<?if(strpos($_SERVER["REQUEST_URI"], $arItem["LINK"]) !== false):?>active_item <?endif;?>depth_level_<?=$arItem["DEPTH_LEVEL"];?><? if ($arItem["SELECTED"]) { echo ' selected'; } ?>"><?=$arItem["TEXT"];?></a></li><?
		endif;
		$previousLevel = $arItem["DEPTH_LEVEL"];
	endforeach;?>
	<? if ($previousLevel > 1) {
		echo str_repeat("</ul></li>", ($previousLevel-1) );
	} ?>
</ul>

Но как задать класс конкретному пункту меню, чтобы вызвать его с помощью JS, если тут общая формула, и задать новый класс - означает задать его ко всем пунктам?

[Александр Маджугин]

Воспользуйтесь параметрами пункта меню
Вот тут подробно как это сделать: https://camouf.ru/blog-note/878/

Answer 2

[ZardoZAntony]

Прочитать бесплатный курс разработчика для bitrix, хотя бы что такое шаблоны и как их применять.
Скорее всего это потянет за собой отсутствие знаний js и php.

А так без проблем: копируете шаблон компонента меню в свою тему или в local/templates/.default/, . Изменяете его под себя как душе угодно. Добавляете классов в вашем случае.

Answer 3

[Алексей Уколов]

Вы можете либо шаблон поменять, чтобы добавить кастомные классы или через css-селекторы найти элемент или через содержимое тега в javascript.

Comments

[Flipflap]

Содержимое тега? Как это сделать?

[Алексей Уколов]

Получить все теги и перебором найти нужный, проверяя содержимое.

Answer 4

[Антон]

JavaScript работает на клиенте в браузере с элементами html. Вы хотите воздействовать на массив php.
Оберните элементами html результат php и обвесьте js.