что значит натянуть на битрикс
Интегрцаия шаблона на 1С-Битрикс
В очередной раз, пытаясь найти себе программиста, который работал с CMS 1C-Bitrix с своем городе натыкаюсь на проблему…
Программисты есть, работавшие с разными бесплатными фреймворками по типу Joomla, WordPress и т.д., но когда дело доходит до Битрикса, все как один говорят: — «Ой, она платная, зачем мне это когда есть куча других бесплатных». И не хотят браться за изучение чего то нового.
Так начинал и я, за исключение одного, мне сразу показали, как что и почему. Но материала в сети и на хабре я так и нашел. По этому начну с простого, как обычному программисту владеющим знаниями PHP и хотя бы базовыми HTML, CSS, JS начать работать c Битрикс.
Про структуру каталогов шаблона говорить не буду, об этом можно почитать тут. Первое, с чем приходится сталкиваться, это интеграция HTML шаблона на CMS.
С помощью его можно установить демо данные. Нам это не нужно жмем «Отмена».
Все на этом этап установки заканчивается, переходим непосредственно к интеграции шаблона. Заходим в панель администрирования в раздел «Настройки». Далее спускаемся по дереву настоек: Настройки продукта — Шаблоны сайтов, жмем на кнопку «Добавить шаблон»
Открывается стандартная форма создания шаблона.
Придумываете ID (я обычно использую main), вписываете название шаблона. Поле «Описание» не обязательно, оно скорее сделано для разработчиков, чтоб не путать шаблоны, если их несколько.
Вот тут началось самое интересное. Обычно шаблон HTML страниц выглядит следующим образом:
Если у вас есть CSS, то переходим на вкладку «Стили шаблона» и вставляем его туда.
На данном этапе можно нажать «Сохранить» и посмотреть что получилось. Но так как у нас отсутствуют картинки и не прописаны правильные пути в HTML и CSS, то, скорее всего у вас отобразится просто скелет сайта.
Переходим к заключительной части и прописываем все необходимые переменные Битрикса. Открываем файл header.php и начинаем редактировать. Первое что нужно сделать это, подключить вывод шапки сайта:
Так же мы хотим видеть панель администратора сайта в публичной части сайта:
Чтоб отображался заголовок страницы, добавляем функцию ShowTitle();?> в соответствующий тег. В итоге мы получаем вот такой файл:
Не забываем редактировать пути в CSS, сохраняем все и можете смотреть на получившийся результат.
Ах, да, нужно еще применит созданный шаблон к сайту. Для этого идем в «Настройки продукта — Список сайтов — s1»
Выбираем созданный нами шаблон и жмем «Сохранить», и можем посмотреть результат проделанной работы.
На этом, конечно же, процесс не заканчивается. Но для начала вполне достаточно. В следующих статьях рассмотрим как добавить компонент к шаблону и его кастомизацию.
Что нужно знать программисту про интеграцию сайта и 1С
Нельзя просто взять и интегрировать сайт с 1С. (с) Народное творчество.
Цель написания поста – изложить всю информацию по теме человеческим языком.
Интеграция сайта на 1С-Битрикс: Управление сайтом и 1С — неисчерпаемый источник вопросов и проблем. На сайте идей для Битрикс в соответствующем разделе 16 страниц, на форуме про это больше 23 000 сообщений. В форме обращения в техподдержку Битрикса есть даже отдельный тип заявки «Обмен с 1С».
Считается, что интеграция 1С и сайта на Битриксе должна работать из коробки. Самые простые функции действительно можно запустить за час-два. А вот на доработку обмена можно потратить и 10, и 100 часов.
Доработка обмена сайта и 1С — это уже магия уровня «эксперт», пугает даже бородатого опытного разработчика. В этой статье мы поговорим о том, как происходит обмен данными между этими двумя монстрами и как можно расширять возможности этого обмена. Статья содержит множество технических деталей обмена и будет полезна в основном программистам, которые хотят разобраться в предмете.
В данной статье будет рассмотрена общая теория обмена между двумя IT-системами и два стандартных обмена между 1С и сайтом на 1С-Битрикс: обмен товарами и обмен справочниками.
Немного теории
Интеграция — обмен информацией между двумя IT-системами. Иногда называют просто обмен. Определяется форматом данных, протоколом (стандартом) передачи данных, алгоритмом работы
Формат = как выглядят данные (например, XML, YML, JSON, CSV).
Протокол = как данные оказываются в другом месте (например, HTTP, SIP, SMTP, FTP).
Алгоритм = что при этом происходит. Представляется блок-схемой или диаграммой UML Activity.
обмен товарами между самописной учетной системой и сайтом (протокол FTP, формат CSV);
парсинг курсов валюты с сайта ЦБ РФ (протокол HTTP, формат XML);
интеграция сайта с Яндекс.Маркет (протокол HTTP, формат YML).
Процедуру обмена можно разделить на 3 части:
Экспорт данных из системы А в требуемый формат
Импорт данных требуемого формата в систему Б.
Часто весь обмен называют «импорт» («загрузка») и «экспорт» («выгрузка»). Это не ошибка, по такой формулировкой говорящий показывает, точка зрения какой системы ему ближе. То, что для 1С экспорт товаров, для Битрикса импорт. В дальнейшем тексте статьи мы не будем использовать эти понятия, чтобы не порождать двусмысленности.
Резюме
Интеграция — обмен данными между двумя системами.
Формат — как выглядят данные.
Протокол — как передаются данные.
Стандартные возможности обмена 1С и Битрикса
«Из коробки» (без доработок программиста) работают 4 типа обмена:
товары из 1С на сайт (тип «catalog»);
справочники из 1С на сайт (тип «reference»);
пользователей/контрагентов из 1С на сайт (тип «sale»);
Протокол
Все взаимодействия между 1С и Битриксом проводятся по HTTP, синхронно. Т.о. 1С подобна браузеру, она «открывает» специальную страницу, отправляет данные (методами POST и GET) и получает текстовый ответ. Есть даже способ имитировать выгрузку из 1С браузером (и мы часто используем этот трюк во время разработки и отладки). Подробнее про отладку мы рассказали в предыдущей статье «Типовые ошибки интеграции между 1С и 1С-Битрикс».
В терминах сетевых взаимодействий 1С — клиент, а сайт — сервер. Обращения всегда инициируются на стороне 1С. В 1С есть настройки адреса сайта, сайт про 1С не знает ничего.
Протокол синхронный. 1С отправляет следующий запрос на сайт только после получения ответа на предыдущий (или получения ошибки таймаута).
Формат
Данные передаются в двух форматах.
Первый формат — текстовый для ответов сайта на запросы из 1С. Сайт выводит в первой строке ответа «success», если завершил некую процедуру, «progress», если продолжает ее выполнять и «error» или «failure», если была ошибка. В последующих строках могут быть дополнительные данные (зависит от каждого конкретного запроса).
Алгоритм
Подготовка к обмену
Выше мы уже сказали, что протокол обмена — синхронный HTTP. Все перечисленные типы обмена подразумевают выполнение нескольких запросов (шагов обмена) друг за другом. Первые два шага одинаковы для любого типа обмена, различия начинаются дальше
Натяжка верстки сайта на Битрикс. Интеграция шаблона сайта
Прилетела задачка. Необходимо натянуть готовую верстку сайта услуг на битрикс редакции Стандарт. В этой статье напишу, как подготовить шаблон сайта, а по компонентам и необходимому функционалу отдельно оставлю ссылки на другие статьи, дабы не растягивать статью. К ней всегда можно вернуться, если прилетит другая задача по интеграции верстки, и вспомнить порядок действий
Интегрируем шаблон сайтана битрикс
Подготавливаем путь для файлов шаблона, где будут лежать все файлы верстки, компонентов, языковые файлы, 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
Урок 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 чтобы можно быстро развернуть и перенести компоненты.
Отличается ли верстка под Битрикс от просто верстки?
Ничем не отличается. Верстальщик делает верстку программист натягивает её на движок. Бывают частные случаи, но достаточно редко и решаются эти вопросы уже по месту.
Например компонент хлебные крошки нельзя использовать внутри шаблона компонета, так как происходит неправильное кэширование в итоге верстка едет. Так же замечались баги при включенном автокомпозите, опять неправильно кэшируется страница, часть тегов срезается. И опять же эта проблема возникает с хлебными крошками.
А про то, что разработчиков на битрикс мало, очень сомневаюсь, платформа очень популярная, и разработчиков пруд пруди, а вот толковых грамотных специалистов в десятки, а то и сотни раз меньше. Если интресно можем пообщаться на данную тему лично (скайп, соц. сети) мой вк.
НО это вего лишь тонкости
По сути Движок они и в африке движок это тебе не шаблон. HTMl на прямую на него не влияет.
ДА и Всеже есть одно ограничение он любит закрвать незакрытые дивы, Особенно актуально для слайдеров и тд на js. в таком случае он разваливает DOM в режиме эрмитаж.
И да основная проблема битиркса это программисты, бтрикс отличная система кто-бы чего не говорил, и это говорит статистика он на 1 месте в мире после беплатных СМС.
Из минусов это Сложноть проффесионального инструмента. В следствие чего некомпетентность в нем достигает воистину королевских маштабов.
Проффесиональные инструменты требуют квалифицированных рук, как правило проблемма именно с ними, что уже выше описывал коллега.