Как правильно внедрять верстку в шаблон компонента Битрикса?

Question

[afonovp]

Всем добрый день!
Начал изучение Битрикса. Практика - скачать шаблон интернет магазина (Bootstrap) и сделать сайт.
Проблема - внедрение верстки. У Битрикса есть курсы, даже видео (правда им лет 8), где объясняют как это делать. Например, необходимо сделать динамическое меню, подпункты которого берутся из разделов инфоблока.
На курсах рассказывают так: есть меню

<ul class="topmenu">
    <li><a href="">Home</a></li>
    <li><a href="" class="down">Blog</a>
      <ul class="submenu">
        <li><a href="">Category</a></li>
      </ul>
    </li>
    <li><a href="" class="down">Portfolio</a>
      <ul class="submenu">
        <li><a href="">Tags</a></li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>

Необходимо создать вызов компонента, и редактировать его шаблон (кастомный). С вызовом все понятно, а вот как сам шаблон корректировать - не совсем. Как я понял, в коде шаблона необходимо вставить верстку из index.php, и уже вместо "Home", "Category" и т.д. вставить переменную из массива, которая будет подставлять все значения и меню появится. Но вот этот само процесс не понятен - что вместо чего вставлять.
И самое главное - на реальных проектах нет таких простых меню. В шаблоне, который скачал меню состоит из, примерно, 500 строк и там разобраться, как внедрять верстку в шаблон компонента - не пойму.
Гуглил еще видео - там тоже использую максимально простые меню, что не подходит.

Вот шаблон, который использую, чтобы внедрить верстку - https://drive.google.com/file/d/1mnxotisJ3jKwhgs6I...

Левое-боковое меню не нужно, только верхнее.

Comments

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

У Битрикса есть курсы, даже видео (правда им лет 8)

Курсы вполне актуальные для начинающих. Курсы битрикса нужно пройти обязательно, это даст базовый битрикс опыт. С нуля в битрикс разобраться с созданием динамического меню, быстро можно только под руководством ментора. Если что-то не понятно нужно пропустить и читать дальше.
Курсы нужно пройти как учебник, прочитать, пройтись потрогать то о чём пишут, поковырять сам битрикс, код, потом пройтись повторно по непонятным моментам.
Чтобы добраться до сборки сайта и меню нужно месяца два, а то и три потратить на курсы.
Какой опыт у вас был до этого?
Обязательно пройдите этот курс https://academy.1c-bitrix.ru/education/?COURSE_ID=...

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

Вот шаблон, который использую, чтобы внедрить верстку

С коммерческого шаблона я бы не рекомендовал начинать. Поставьте демо мебельный сайт, далее в браузере сохраните с него вёрстку и попробуйте её внедрять, подглядывая в битрикс демо шаблон. После этого поставьте демо интернет-магазин и проделайте тоже самое, но сначала пройти этот курс https://academy.1c-bitrix.ru/education/?COURSE_ID=...

Answer 1

[koder_1]

Не очень понятно, в чем сложность.
В шаблоне компонента обычно есть массив $arResult, выводите его например так

echo "<pre>";
print_r($arResult);
echo "</pre>";

Это даст понимание какие данные в нем есть.

Шаблон копируете из стандартного битриксового, изучаете, как он работает и подставляете теги из вашей верстки.

Если видите список одинаковых тегов, то он выводится через цикл foreach, меню второго уровня можно выводить вложенным циклом foreach.

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

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

Answer 2

[Виктор Таран]

пропусти пока меню
делай остальное

Answer 3

[Coweb]

Твои пункты меню будут в template.php в массиве $arResult["ITEMS"]. Делай цикл по этому массиву. Найди в верстке меню повторяющийся участок кода, который отвечает за один пункт меню, и вставь этот участок в тело цикла.

В твоем примере такой участок
<li><a href="">Название пункта меню</a></li>
и, если есть подпункты, то

<li><a href="" class="down">Blog</a>
      <ul class="submenu">
        <li><a href="">Category</a></li>
      </ul>
    </li>

Поскольку у меню могут быть подпункты, то внутри цикла нужно поставить условие, которое будет проверять, является ли твой пункт меню (в данном случае первого уровня) родительским. Если истина, то добавляй в тело цикла код второго уровня.
Тут есть нюансы с тегами ul, которые отвечают за второй уровень меню, их долго описывать. Советую скопировать типовой шаблон меню с названием horizontalmenu, посмотреть, как он устроен, и вставить туда свои теги, либо второй вариант скопировать horizontalmenu и довести его верстку, чтобы было похоже на то, что у тебя в твоем шаблоне.