Что значит натянуть на битрикс
Урок 11. Создание (верстка) шаблона Bitrix
Приветствую мои читатели. Реши немного облагородить свой тестовый магазин и сверстать шаблон для Bitrix из готового HTML шаблона. Тема называется Electro и находится в свободном доступе в интернете. И вместе с этим я ещё раз покажу, как верстать или как говорят «натягивать» верстку на CMS Bitrix. А следующими статьями я так же сверстаю шаблон (правда немного другой шаблон) для wordpress. Но об этом чуть позже. А сейчас вот такой приятный шаблон мы сверстаем для нашего магазина StartShop Битрикс.
Скачать HTML исходники темы можно по ссылке.
Вот на основании этой HTML верстки мы и создадим свой шаблон для Bitrix.
В этой статье я не буду очень подробно описывать процесс создания шаблона (иначе получится очень большой объем текста), а верстку более простого шаблона я описывал в отдельном уроке Урок 3. Создание шаблона на 1С Битрикс.
Создание структуры шаблона Битрикс
В папке src я разместил исходники шаблона для удобства работы. Больше не для чего эта папка не нужна.
И первый кусок кода мы внесем в файл description.php задав название и описание нашего шаблона.
Верстка header.php
Как вы помните шаблон Битрикс разделен на два файла header.php и footer.php . А между ними вставляется контент. Подход староват, но и сам Битрикс не молодой.
В шапку вносится код отвечающий за подключение CSS стилей и JavaScript кода.
Но сначала нам нужно проверить инициирован ли движок Битрикса или к шаблону обратились по прямой ссылке. Этот код нужен для защиты.
После этого все картинки выведутся в шаблон.
Теперь сайт должен открываться как статическая страница.
Вот что получается.
Вывод меню Битрикс
Как получить этот код подробно описано в четвертом уроке Вывод меню Битрикс.
У меня путь до шаблона меню сформировался следующий: local/templates/electro/components/bitrix/menu/top/template.php
Из папки top я удалил все файлы и папки кроме файла самого шаблона template.php . В него достаточно было перенести только классы тега .
Код:
Вывод с лайдера Лучший товар
В файле index.php в корне сайта уже есть код отвечающий за вызов компонента слайдера.
Нужно скопировать новый шаблон в папку нашего шаблона electro и внести верстку. Привожу целиком код файла local/templates/electro/components/startshop/slider/best/template.php
Верстка footer.php
В футер мы вставим достаточно большой кусок когда от комментария и до конца индексного фала шаблона.
Изменений мы в нем делать пока не будет и весь я его приводить не буду, ниже будут ссылки к архивам.
Тут нужно обратить внимание на один момент. Все JavaScript файлы в шаблоне подключались в футере, а мы их, как вы помните, подключили в HEADER. И из-за этого наш слайдер не заработает. Но поскольку мы не просто прописали ссылки на скрипты, а подключили их средствами Bitrix, у нас есть возможность через настройки главного модуля перенести скрипты в конец страницы. Выполнить это можно установив соответствующий флажок в разделе Оптимизация CSS.
Далее приступаем к верстке каталога.
Верстка каталога
Поясню немного отдельные моменты.
Этим кодом мы через функцию CFile::ResizeImageGet масштабируем картинку под размер 200 на 200 пикселей.
Верстка детальной страницы товара
С детальной страницей поступаем точно так же, как и с каталогом. Копируем шаблон компонента bitrix:news.detail в наш шаблон electro. И совмещаем верстку с Битрикс.
В процессе верстки, т.к. у нас каталог достаточно простой, не нужные элементы я убираю. Да и не ставлю целей выполнить верстку полностью. Цель показать вам, как происходит процесс «натягивание» HTML шаблона на компоненты Битрикс.
Код детальной страницы располагается по пути local/templates/electro/components/bitrix/news/catalog-electro/bitrix/news.detail/.default/template.php .
А сам код я представлю ниже полностью:
Вот и все на этом я заканчиваю создание шаблона Битрикс. Ниже архив с исходными данными и готовый шаблон. А так же прикладываю полностью папку local чтобы можно быстро развернуть и перенести компоненты.
Натяжка верстки сайта на Битрикс. Интеграция шаблона сайта
Прилетела задачка. Необходимо натянуть готовую верстку сайта услуг на битрикс редакции Стандарт. В этой статье напишу, как подготовить шаблон сайта, а по компонентам и необходимому функционалу отдельно оставлю ссылки на другие статьи, дабы не растягивать статью. К ней всегда можно вернуться, если прилетит другая задача по интеграции верстки, и вспомнить порядок действий
Интегрируем шаблон сайтана битрикс
Подготавливаем путь для файлов шаблона, где будут лежать все файлы верстки, компонентов, языковые файлы, header.php и footer.php и остальные нужные проекту файлы Путь будет такой /local/templates/main/ Папку с шаблоном назовем «main» Работать будем с папкой local, а bitrix трогать вообще не будем. Разделим верстку страницы в битрикс на три части.
Файлы header.php и footer.php будут подключаться на каждой странице сайта, а index.php будет у каждой странице свой.
header.php
В файле /local/templates/main/header.php понадобятся следующие записи
footer.php
В файле /local/templates/main/footer.php понадобятся следующие записи
description.php
В файле /local/templates/main/description.php понадобятся следующие записи
index.php
В файле /index.php понадобятся следующие записи
.section.php
В файле /.section.php понадобятся следующие записи
Другие файлы и папки
В папке шаблона /local/templates/main/ также размещаются другие необходимые для работы файлы и папки
Подключение необходимых компонентов и другого функционала для окончанительной интеграции верстки на битрикс
На этом проекте были использованы следующие компоненты и функционал
Навыки и умения Знание PHP5, MySQL, JS, HTML5, CSS3. Работа с технологиями XML, AJAX, GIT, SOAP Большой опыт взаимодействия с сервером. Работа с 1C-BITRIX FRIMEWORK, BITRIX24
Настраиваем площадку Битрикс правильно: простые советы для сохранения душевного здоровья тимлида
Настройка любой площадки для CMS — это рутинный процесс, который должен быть доведен до автоматизма в каждой уважающей себя компании. А потому частенько воспринимается, как восход солнца — это происходит само собой. На самом деле, нельзя так относиться и надеяться на разработчиков, особенно если часть команды работает на субподряде. Они могут потратить кучу времени и денег проекта на переносах, багах и конфликтах кода.
Задача тимлида — создать команде среду для разработки и правильные условия для написания кода. Чтобы помочь с этим я решил опубликовать напоминалку, основанную на внутренних регламентах компании где я работаю.
Расскажу на примере архитектуры, которую используем мы: main — наша основная площадка для тестов и показов. В дополнение используем несколько площадок для каждого из разработчиков — d1, d2 и так далее. Настройкой среды для Битрикс-приложения в нашей компании занимается сисадмин. Здесь нет универсального способа настройки, поэтому подробности опущу.
Шаг 1. Разворачиваем ядро Битрикс (базовое или своей версии):
Проверить кодировки. Устанавливайте сайт СТРОГО в кодировке UTF-8. При проверке сайта (Инструменты – проверка системы) шестым пунктом проверки должно выводиться «Параметры настройки UTF».
Проверить ключи. Ни в коем случае не оставляйте сайт на демо-ключе. Нужно запрашивать некоммерческий ключ для разработки у менеджера проекта, а в случае непредставления — останавливать проект. Об этом должен позаботиться тимлид, иначе про ключ все забудут и в один прекрасный момент сайт перестанет работать.
Не забыть отключить допфункции. Запрет отправки почтовых сообщений на тестовой площадке. Если на странице задана константа ONLY_EMAIL и email из настроек почтового шаблона с ее значением не совпадает, то письмо не отсылать. Если мы хотим запретить посылать сообщения на всем сайте, то необходимо в файле bdconn.php установить константу define(«ONLY_EMAIL», «admin@site.ru«);
Поставить галку на версиях разработчиков. После установки продукта в админке нужно отметить, что сайт используется для разработки, а не для коммерческих целей.
Обновить до актуального состояния. Сразу после развертывания необходимо зайти в настройки Битрикс и установить все обновления системы, поскольку в аутсорс-продакшнах часто пользуются готовыми сборками (образами).
После разворачивания сайта необходимо пройти проверку системы и проверку тестирования конфигурации /bitrix/admin/site_checker.php?lang=ru. Ошибок и предупреждений не должно быть. По умолчанию агенты на тестовых площадках Extyl должны выполняться на хитах, а на бою переведены на cron (тимлид проекта решает, когда на тесте надо перевести агента на cron).
Шаг 2. Следим за тем, чтобы площадки для разработки не оказались в индексе поисковиков
Программисты, как правило, вообще не задумываются о поисковиках и последствиях индексации площадки для разработки. Нужно напоминать, что стенды разработки — это те же сайты в сети, а значит их видят роботы, Нам не нужно, чтобы служебная информация оказалась доступна в поиске. Сразу после установки не забываем изменить настройки на боевом сервере.
И в robots.txt прописать правило:
– запрещена индексация сайта;
Шаг 3. Устанавливаем модуль миграции сущностей БД
Когда у нас уже есть ядро и мы начали делать сайт, появляются данные, с которыми нужно работать и не терять их. Возникает необходимость переноса на бой и обратно изменений сущностей БД (инфоблоки, формы и т.д.).
Ничего не вводим руками, пользуемся миграциями. Причина — миграции дают возможность сделать все, что можно сделать руками, но при этом процесс можно в любой момент времени повторить. Когда команда состоит из нескольких разработчиков, количество забытых данных растет в геометрической прогрессии. Если у заказчика есть предпрод или сроки приемки затягиваются, то без миграций невозможно обойтись в принципе.
Для переноса изменения из БД теста на бой или наоборот надо сразу установить модуль миграции для разработчиков https://marketplace.1c-bitrix.ru/solutions/sprint.migration/
Не ленитесь и облегчите себе жизнь установкой мигратора. Он поможет восстановить работоспособность сайта, даже если кто-то удалил базу без возможности восстановления.
Шаг 4. Настраиваем Git
В современных реалиях без GIt не может существовать не один проект, даже очень маленький. Писать код без системы версионирования сегодня невозможно — командная работа на то и командная.
Сразу после развертывания Битрикс — надо установить Git на проект и правильно его настроить:
Не все должно попадать в репозиторий, настраиваем gitignore.
.gitignore может быть изменен и дополнен в зависимости от потребностей проекта.
Пара слов о гигиене процессов:
На предпроде должна быть включена ветка stage, а на бою master. В ветках stage и master мы не работаем.
Все ненужные страницы и разделы необходимо удалить перед первым коммитом.
В Git не должны попадать отладочные скрипты, логи, медиафайлы, регистрируемые в БД и др.
Очень важно первично правильно настроить Git и сделать площадку main (stage) чистой — без незакоммиченных файлов. Далее эта площадка будет копироваться на тестовые хосты, и если не выполнить эти предписания, то будут проблемы с тем, что невнимательные разработчики станут коммитить конфигурационные файлы, отладку, ядро и другие вещи, которые не должны попадать в Git. Вообще, когда в истории коммитов видно, как удаляют отладку или то, чего не должно там быть — это говорит о низкой квалификации разработчика. Подробнее о работе с Git я расскажу в следующей статье.
Шаг 5. Настраиваем CI/CD на проекте
CI/CD технология непрерывной интеграции и развертывания сегодня практически стандарт для отрасли, хотя единого алгоритма действий тут нет, и пожалуй быть не может — слишком много разных переменных для каждого проекта, каждый раз настраивать приходится по своему. Но общий алгоритм един — пишется код, покрывается тестами, отправляется в систему контроля версий (не обязательно Git), при поступлении нового коммита — тригерится запуск развертывания тестового окружения и самих тестов. Если все успешно — тригерится деплой артефактов на прод.
Разумеется, это только каркас, и этапов может быть гораздо больше, как и проверок (и автоматических и ручных) на возможность перехода к следующему этапу. Но в рамки этой статьи разбор CI/CD не укладывается, это отдельная и большая тема.
Большие проекты подразумевают настройку CI/CD, но процесс сильно зависит от потребностей проекта.
В этом мире всё, включая разработку, стремится к хаосу, а тимлиды его сдерживают и структурируют работу. Описанные мной шаги банальные, но, как ни странно, снимают огромное количество проблем. Не выполненные вовремя пункты инструкции ведут к негативу заказчика и потере драгоценного времени тимлида. Надеюсь, что материал поможет читателю сделать настройку площадок проще, а работу в команде продуктивнее.
Давайте продолжим обсуждение в комментариях?
3 урок: Варианты внедрения HTML шаблона в битрикс
Дополнительное видео
Урок, Варианты внедрения HTML шаблона в битрикс, это третье видео из серии уроков «Интеграция шаблона в систему 1С Битрикс». В данном видео речь пойдет о структуре сайта, файлов и папок. Разберем варианты интеграции таких шаблонов и выберем оптимальный вариант для себя.
Введение – HTML шаблоны в Битрикс
Более подробно об это, как формируется страница, я рассказывал в видео уроке «Структура сайта».
Давайте посмотрим нашу html верстку шаблона сайта.
Вы можете скачать архив и на практике, повторяя за мной, натянуть шаблон на 1С битрикс.
Открываем index.html и через фаербаг посмотрим структуру данной странички.
Сайт состоит из одной страницы и в данном случае реализовать установку шаблона можно несколькими способами:
Любой из этих вариантов имеет право на реализацию. Начинающий разработчик может все блоки поместить в рабочую область и это будет не совсем правильно, так как при редактировании такой страницы через визуальный редактор, можно нарушить структуру сайта. Желательно что бы в рабочей области не присутствовали теги оформления страницы.
Управление шаблонами, структура шаблона
Управление шаблонами в Битрикс осуществляется в административном разделе.
Перейдем в раздел администратора, далее выбираем >> Настройки продукта >> Сайты >> открываем Шаблоны сайтов. Тут видим один пустой шаблон, который устанавливали из Маркеплейса, открываем его.
Редактировать шаблон можно напрямую тут, но удобнее всего работать через FTP в своем редакторе.
Рядом с вкладкой шаблона находятся стили сайта, которые можно редактировать и стили шаблона. Так же, при необходимости можно подключить дополнительные файлы.
Откроем наш редактор PhpStorm и в нем директорию, в которой лежит шаблон сайта. Для этого переходим в папку bitrix >> templates, и текущий шаблон, рассмотрим подробнее присутствующие файлы.
Имеется файл description.php где содержится описание текущего шаблона. Файл template_styles.css в нем хранятся стили шаблона. Файл styles.css тут располагаются стили контента.
В папке templates также содержится дефолтный шаблон, или другими словами шаблон по умолчанию. Это обычный шаблон с отличительной особенностью, в данной папке размещенные компоненты будут доступны при их вызове в других шаблонах, а также файлы, картинки и так далее. Эту папку удобно использовать, когда есть несколько шаблонов и чтобы не прописывать для каждого один и тот же компонент, или стили, их можно все подключать из данной директории.
На этом вводный урок по «Вариантам внедрения HTML шаблона в битрикс» заканчиваю, в следующем видео внедрим верстку на сайт.
Верстка под битрикс и создание шаблона – особенности, проблемы, рекомендации
«Верстка для 1c-bitrix» — несколько преувеличенное высказывание, потому как любой html-макет можно адаптировать в шаблон для этой CMS. Но, не смотря на это, я попробую выделить несколько характерных особенностей, которые помогут при шаблонизации. А также будут рассмотрены некоторые типичные ошибки, приводящие к искажениям представления сайта в режимах «редактирование» и «разработка».
Чуть ли не половина проблем связана со всеми любимым старичком IE 6. Отказываться от него рано, он уверенно держит свои несколько % пользователей, к тому же его поддержка официально заявлена самим разработчиком. Хоть в 9й версии и обещают отказаться.
Общие принципы размещения стилей
В шаблоне битрикса по умолчанию под стили отводится 2 файла:
— в styles.css следует размещать правила, которые будут использоваться для оформления контента. Стили из этого файла подключает визуальный редактор. Желательно, чтобы правила styles.css не использовали имена классов\идентификаторы внешних по отношению к контенту блоков.
Например, пусть код html выглядит так
где в редактор передается содержимое div. Тогда абзац со стилем
при изменении будет показан красным цветом, в то время как с правилом
в редакторе текст отобразится цветом по умолчанию.
— в template_styles.css складываем все что связано с разметкой самого шаблона
На этапе верстки можно сразу наполнять оба файла, что ускорит работу в дальнейшем.
Названия стилей
Плавающие блоки в режиме разработки
По возможности для обтекаемых элементов следует задавать явную ширину. Если это не делать и в такой блок поместить компонент\включаемую область, то IE6 растянет его на 100%, сдвинув все остальные вниз.
Часто эксплорер смещает блоки друг под друга даже с фиксированными размерами. Такое происходит когда их сумма по горизонтали равна ширине родительского контейнера. Лечится несколькими способами:
Для всех компонентов из внешнего блока ставим автоматическую ширину пунктира выделения. Срабатывает не всегда.
Действует безотказно, но теряется пунктир вокруг компонентов слева и справа.
Overflow:hidden
Mozilla в элементах с этим свойством не показывает иконку компонента, если он находится вверху блока. Исправить можно сместив иконку вниз правилом
Фоновые изображения
Содержимое сайта в режиме разработки смещается относительно фона, если его установить для контейнера body. Следовательно бакграунд лучше ставить на первый вложенный блок.
Если IE6 не показывает фон какого-либо элемента, обычно помогает установка для него position:relative.
PS: у Вас может возникнуть вполне логичный вопрос – зачем нужны эти костыли для административных режимов да еще и в устаревшем браузере. Ответ прост – когда делаете для себя и точно знаете чем будете пользоваться, можно на многое закрыть глаза. При разработке сайтов на заказ, на мой взгляд, нужно делать максимально совместимые решения.