План разработки компонента 1С-Битрикс

В четвертом уроке я показывал как внедрить HTML верстку в 1С-Битрикс, подключали картинки, счетчик, стили, перенесли все файлы верстки и теперь у нас сайт загружается из данной CMS.

Возникает следующий вопрос. Что делать дальше?

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

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

Так вот, следующий этап, с которым вы должны определиться, какими элементами на странице хотите управлять через функционал 1С-битрикс. То есть, какие элементы оставить статические, какие сделать динамические и все это нужно связать с CMS системой.

Каким образом делать эту связку?

Конечно при помощи компонентов. Не в коем случае нельзя писать прямые запросы к базе данных на самой странице, при помощи АПИ доставать эти данные из инфоблоков. Все это делается только при помощи компонентов.

Кто не знает что такое компоненты! Почитайте документацию Битрикс.

Да, там много информации, вам понадобится время, что бы это все прочитать, осмыслить, отработать и если оно у вас есть, то дерзайте грызть этот гранит 1С Битрикс. У кого времени нет, для тех есть мой платный курс «Программирование: Новый взгляд на 1С-Битрикс» который поможет вам уложить данную информацию за 4 часа.

Откройте мой первый урок из данного курса который в открытом доступе и вы из него поймете, какую суть играют компоненты в данной CMS.

Разработка компонента (ПЛАН действий)

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

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

1. - Определяемся, какими элементами мы хотим управлять в шапке;
2. - Описываем параметры настроек компонента;
3. - Описываем логику компонента;
4. - Выводим динамическую информацию в шаблоне компонента.

1 - Определяемся какими элементами хотим управлять

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

• Начинаем с фоновой картинки. Хотим ее изменять! Я думаю что да;
• Логотип. Сделаем возможность менять его в компоненте;
• Заголовки;
• Счетчик;
• Форма подписки с заголовком;
• Блок с социальными иконками.

Всеми этими элементами мы хотим управлять через компонент.

Следующий вопрос, который вы должны задать себе. Где сохранять информацию? Будет ли это настройки параметров компонента или отдельный инфоблок, это мы сейчас с вами разберем.

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

Для логотипа, заголовков и счетчика, инфоблоки нам не нужны все это можно сохранять в настройках компонента. Конечно, можно создать инфоблок под один элемент "шапки", все это запихать в него, но сразу подумайте, а зачем вам это нужно! Зачем вам нужны лишние запросы к Базе Данных?

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

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

С блоком с социальных иконок тут нужно подумать. Наверняка заказчик захочет задавать не только ссылками, но и менять сами иконки. Тут так же все можно реализовать через параметры настроек компонента, а как это делать вы узнаете далее.

Переносим шаблон в папку local

Прежде чем, что-то разрабатывать, давайте весь наш код отделит от ядра 1С Битрикс. Для этого создадим отдельную директорию local, куда перенесем текущий шаблон. В дальнейшем все разработки будем делать в ней.

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

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

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

Так как мы планируем писать свои компоненты, то в директории local под них создаем папку components.  Внутри ее делаем отдельную папку под наше пространство имен dws. В ней создаем папку под компонент который назовем home.page (главная страница).

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

Оставить комментарий: