Как добавить html файл на сайт битрикс
Загрузка файла на сайт - это довольно рядовой процесс. Но как загрузить пользовательский файл в свойство элемента инфоблока bitrix через форму?
В официальной документации сказано, что для загрузки файла надо передать свойству описывающий его массив:
"DETAIL_PICTURE" => CFile::MakeFileArray( $_SERVER["DOCUMENT_ROOT"] . "/image.jpg" )
Функция CFile::MakeFileArray служит для создания такого описания. Но если загружать файл через форму с input type="file", то он попадает далеко не в самое приятное место, в папку /tmp/. А если сохранять файл из /tmp/ через MakeFileArray, то появится проблема с его именем и расширением. Потому что загруженный файл имеет автоматически сгенерированное имя в виде случайного набора символов.
Но если вчитаться в документацию, то можно заметить следующее:
MakeFileArray формирует массив описывающий файл. Структура массива аналогична структуре массива $_FILES[имя]
Поэтому нет никакой необходимости вообще применять эту функцию. Можно сразу же передавать свойству "файл" значение $_FILES['FILE']. Тогда код создания элемента с файлом будет выглядеть так
$el = new CIBlockElement;
$arProp = Array("IBLOCK_ID" => 'ID',
"NAME" => 'NAME',
"PROPERTY_VALUES" => array("FILE" => $_FILES['FILE']
)
);
$element_id = $el->Add($arProp);
Не стоит забывать про валидацию данных: необходимо проверять размер и расширение файла перед загрузкой. Заодно не забудьте установить в свойствах инфоблока, у поля FILE, допустимые расширения файлов:
P.S.
Описание как сделать интерактивную проверку размера и расширения файла через js/jq скрипт можно найти в статье "Размер и тип файла в input file".
Урок, Варианты внедрения HTML шаблона в битрикс, это третье видео из серии уроков «Интеграция шаблона в систему 1С Битрикс». В данном видео речь пойдет о структуре сайта, файлов и папок. Разберем варианты интеграции таких шаблонов и выберем оптимальный вариант для себя.
Введение – HTML шаблоны в Битрикс
Более подробно об это, как формируется страница, я рассказывал в видео уроке «Структура сайта».
Давайте посмотрим нашу html верстку шаблона сайта.
Вы можете скачать архив и на практике, повторяя за мной, натянуть шаблон на 1С битрикс.
Открываем index.html и через фаербаг посмотрим структуру данной странички.
Сайт состоит из одной страницы и в данном случае реализовать установку шаблона можно несколькими способами:
1. В рабочую область, нечего не помещать, распределяем блоки между footer.php и header.php .
2. Мы убираем весь код в header.php до секции section (блок счетчик), остальное до тега footer помещаем в рабочую область, оставшийся код в footer.php .
3. Другой вариант, поместить в рабочую область только блок «Характеристика», код выше характеристики в header , а ниже характеристики в footer .
Любой из этих вариантов имеет право на реализацию. Начинающий разработчик может все блоки поместить в рабочую область и это будет не совсем правильно, так как при редактировании такой страницы через визуальный редактор, можно нарушить структуру сайта. Желательно что бы в рабочей области не присутствовали теги оформления страницы.
Давайте разделим верстку для нашей интеграции шаблона. Как видите все рабочие блоки, мы включили в header , а нижнею часть в сам footer .
Управление шаблонами, структура шаблона
Управление шаблонами в Битрикс осуществляется в административном разделе.
Перейдем в раздел администратора, далее выбираем >> Настройки продукта >> Сайты >> открываем Шаблоны сайтов. Тут видим один пустой шаблон, который устанавливали из Маркеплейса, открываем его.
Редактировать шаблон можно напрямую тут, но удобнее всего работать через FTP в своем редакторе.
Рядом с вкладкой шаблона находятся стили сайта, которые можно редактировать и стили шаблона. Так же, при необходимости можно подключить дополнительные файлы.
Откроем наш редактор PhpStorm и в нем директорию, в которой лежит шаблон сайта. Для этого переходим в папку bitrix >> templates, и текущий шаблон, рассмотрим подробнее присутствующие файлы.
В шаблоне мы видим основные файлы как header.php и footer.php . без которых система работать не будет. Весть контент до рабочей области лежит в header.php , а после рабочей области весть контент располагается footer.php .
Имеется файл description.php где содержится описание текущего шаблона. Файл template_styles.css в нем хранятся стили шаблона. Файл styles.css тут располагаются стили контента.
В папке templates также содержится дефолтный шаблон, или другими словами шаблон по умолчанию. Это обычный шаблон с отличительной особенностью, в данной папке размещенные компоненты будут доступны при их вызове в других шаблонах, а также файлы, картинки и так далее. Эту папку удобно использовать, когда есть несколько шаблонов и чтобы не прописывать для каждого один и тот же компонент, или стили, их можно все подключать из данной директории.
На этом вводный урок по "Вариантам внедрения HTML шаблона в битрикс" заканчиваю, в следующем видео внедрим верстку на сайт.
Прилетела задачка. Необходимо натянуть готовую верстку сайта услуг на битрикс редакции Стандарт. В этой статье напишу, как подготовить шаблон сайта, а по компонентам и необходимому функционалу отдельно оставлю ссылки на другие статьи, дабы не растягивать статью. К ней всегда можно вернуться, если прилетит другая задача по интеграции верстки, и вспомнить порядок действий
Интегрируем шаблон сайтана битрикс
Подготавливаем путь для файлов шаблона, где будут лежать все файлы верстки, компонентов, языковые файлы, header.php и footer.php и остальные нужные проекту файлы Путь будет такой /local/templates/main/ Папку с шаблоном назовем "main" Работать будем с папкой local, а bitrix трогать вообще не будем. Разделим верстку страницы в битрикс на три части.
- Первую положим в header.php
- Вторую положим в index.php
- Третью положим в footer.php
Файлы header.php и footer.php будут подключаться на каждой странице сайта, а index.php будет у каждой странице свой.
header.php
В файле /local/templates/main/header.php понадобятся следующие записи
- if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); Данная строчка указывается в начале файла, для секюртости. Чтобы не могли открыть данный файл на прямую из браузера, без подключения ядра битрикса
- IncludeTemplateLangFile(__FILE__);Подключаются языковые файлы для шаблона
- $APPLICATION->ShowTitle();Отображение заголовка страницы из $APPLICATION->SetTitle("title")
- $APPLICATION->ShowHead();Выводит необходимый функционал в head
- $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/index.css");Подключается к шаблону файлы стилей, например для объединения
- $APPLICATION->ShowPanel();Подключает панель битрикса
- SITE_TEMPLATE_PATH;Содержит путь до шаблона, без последнего слеша, в частности /local/templates/main
- $APPLICATION->ShowTitle(false);Отображение заголовка страницы из $APPLICATION->SetPageProperty("title")
- $APPLICATION->GetCurPage(false) === '/';Необходим, если главная страница отличается от внутренней по верстке
footer.php
В файле /local/templates/main/footer.php понадобятся следующие записи
- if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();Рассмотрено выше
- IncludeTemplateLangFile(__FILE__);Рассмотрено выше
- $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/index.js");Подключается к шаблону файлы скриптов, например для объединения
- SITE_TEMPLATE_PATH;Рассмотрено выше
- $APPLICATION->GetCurPage(false) === '/';Рассмотрено выше
description.php
В файле /local/templates/main/description.php понадобятся следующие записи
- if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); //Рассмотрено выше
- IncludeTemplateLangFile(__FILE__); //Рассмотрено выше
- $arTemplate = Array("NAME"=>GetMessage('T_DEFAULT_DESC_NAME'), "DESCRIPTION"=>GetMessage('T_DEFAULT_DESC_DESC')); //Записываем имя шаблона и описание. T_DEFAULT_DESC_NAME и T_DEFAULT_DESC_DESC их значения лежат в языковых фалах в виде $MESS ['T_DEFAULT_DESC_NAME'] = "Главный шаблон";.
index.php
В файле /index.php понадобятся следующие записи
- require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php"); //Подключение шапки
- require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php"); //Подключение подвала
.section.php
В файле /.section.php понадобятся следующие записи
- $sSectionName = "Webpack app"; //Имя раздела в админ панели
- $arDirProperties = array("title" => "Webpack app", "description" => "", "keywords" => "", "robots" => ""); //Свойства раздела,используются как $APPLICATION->SetPageProperty("title")
Другие файлы и папки
В папке шаблона /local/templates/main/ также размещаются другие необходимые для работы файлы и папки
- components папка с компонентами -> bitrix пространство имен -> menu название компонента -> top имя шаблона -> template.php и др файлы компонента
- css -> index.css и другие файлы со стилями
- fonts ->файлы со шрифтами
- img ->файлы с изображениями
- include ->файлы подключаемые с помощью компонента $APPLICATION->IncludeComponent("bitrix:main.include", "", Array(), false);
- js -> index.js и другие файлы со скриптами
- lang -> en/ru -> description.php и другие файлы соименные файлы, где необходимо используется конструкция вида GetMessage('T_DEFAULT_DESC_NAME')
Подключение необходимых компонентов и другого функционала для окончанительной интеграции верстки на битрикс
На этом проекте были использованы следующие компоненты и функционал
P.S. чтобы все работало необходимо подключить созданный шаблон в админке сайта. По правде говоря все то, что я тут пишу - это порядок действий по натяжки верстки на битрикс для меня, при выполнении однотипной задачи, чтобы не держать все в голове.
Работаю © 2012 - 2021 год
Все права защищены
Навыки и умения Знание PHP5, MySQL, JS, HTML5, CSS3. Работа с технологиями XML, AJAX, GIT, SOAP Большой опыт взаимодействия с сервером. Работа с 1C-BITRIX FRIMEWORK, BITRIX24
Создаем шаблон сайта в настройках
На вкладке «Администрирование» идем в Настройки=>Настройки продукта => Сайты => Шаблоны сайтов и нажимаем кнопку «Добавить шаблон»:
В открывшейся форме заполняем поля на вкладке «Шаблон»:
ID – идентификатор шаблона (а также название папки шаблона), используем латинские буквы/цифры. Пусть будет alfavitka
Название – как хотим, так и называем, например, Учебный шаблон
Описание – необязательное поле, заполняем по желанию. Я введу Создаем шаблон с нуля
Порядок – порядок отображения шаблона в списке шаблонов (можно не заполнять)
Тип – выбираем «Шаблон сайта»
Вкладки «Стили сайта» и «Стили шаблона» предназначены для добавления стилей, но их мы тоже пока что оставим пустыми.
Обязательные поля мы заполнили, сохраняем шаблон:
Отлично, он появился в списке шаблонов:
Теперь зайдем в настройки сайта и установим наш (пока еще пустой) шаблон. Настройки => Настройки продукта => Сайты => Список сайтов => Кликаем на ID сайта, чтобы перейти к его настройкам:
Проматываем страницу к блоку «Шаблон сайта», в первом поле выбираем наш шаблон и сохраняем изменения:
Знакомимся со структурой шаблона
Давайте посмотрим, из чего состоит созданный нами шаблон. Для этого по FTP перейдем в папку шаблона. В Битриксе шаблоны сайта лежат в папке /bitrix/templates/ , если мы зайдем туда – увидим следующий набор папок:
Это три шаблона, которые сейчас есть у нас на сайте.
.default – папка шаблона сайта по-умолчанию: он подключается, если нет никаких других шаблонов (именно он использовался Битриксом до тех пор, пока мы не создали и не выбрали в настройках наш собственный шаблон).
landing24 – папка стандартного шаблона, который используется для создания лэндингов в рамках Битрикса (этот функционал в рамках данного курса мы рассматривать не будем).
alfavitka – это папка нашего шаблона (совпадает с ID шаблона, который мы указали при его создании).
Зайдем в папку нашего шаблона и видим следующий набор файлов:
Быстренько разберемся, для чего нужен каждый из этих файлов.
.styles.php – файл для описания стилей, которые используются в визуальном редакторе Битрикса (с ним мы разберемся в следующих уроках).
description.php – здесь хранится текстовое название шаблона, описание и другая информация:
footer.php – содержит код подвала сайта.
header.php – содержит код шапки сайта.
Сейчас эти файлы пустые, потому что на этапе создания шаблона мы не внесли в них никакой код.
styles.css – содержит стили сайта (с этим файлом мы разберемся в следующих уроках).
template_styles.css – содержит стили шаблона сайта.
Эти файлы также пустые, т.к. при создании шаблона их мы не заполняли.
Вставляем HTML в шаблон и на главную страницу
Для начала нужно мысленно разбить нашу верстку на 2 части: на шапку и подвал. Открываем файл с версткой index.html и ищем контент (ту часть верстки, которая будет уникальная для каждой страницы сайта). В нашем случае контент выглядит следующим образом:
Всё, что выше контента – вставляем в файл шаблона header.php, весь код под контентом – в файл footer.php
Заголовок h1 тоже можно отнести к контенту, но т.к. этот тег у нас будет на каждой странице сайта – вынесем его в шапку.Главная страница нашего сайта немного изменилась:
Т.к. в нашей верстке есть контент для главной страницы – давайте вставим его на главную страницу нашего сайта. Через FTP-менеджер идем в корень сайта и открываем файл index.php, видим следующее содержимое:
Очень грубо говоря: в первых четырех строчках подключается шапка сайта (и ядро битрикса) и устанавливается заголовок страницы. Последняя строчка подключает подвал сайта (и кое-какие служебные скрипты).
Между этими строчками и содержится контент страницы. Давайте заменим его на контент из верстки, получим следующее:
Главная страница сайта стала еще чуть более информативной:
Подключаем стили и скрипты
Верстку мы добавили, теперь подключим стили и скрипты. В нашем HTML шаблоне есть папка css-js, которая содержит файлы CSS-стилей и JS-скриптов. Давайте загрузим ее в папку Битрикс шаблона /bitrix/templates/alfavitka :
В header.php у нас есть 2 файла со стилями:
Файл bootstrap.min.css – это файл-библиотека, который в будущем мы точно не будем редактировать. Поэтому подключаем его как дополнительный файл стилей. Для подключения дополнительных файлов со стилями в Битриксе используется следующий код:
В нашем случае код будет иметь следующий вид:
Константа SITE_TEMPLATE_PATH в Битриксе содержит путь к папке текущего шаблона сайта. Поэтому всегда используем данную константу при подключении стилей/скриптов из папки шаблона.Секция head в нашем шаблоне теперь выглядит следующим образом:
Теперь разберемся со вторым подключаемым файлом стилей styles.css – он содержит стили шаблона, которые мы в перспективе точно будем редактировать. Поэтому стили из этого файла мы вставляем в файл шаблона template_styles.css. Сам файл styles.css из папки css-js можем удалить. Также удаляем подключение этого файла из секции head, в итоге она выглядит следующим образом:
Отлично, мы передали Битриксу информацию о всех наших стилях, осталось вывести их в шаблоне. Для этого воспользуемся следующим кодом:
Этот код выводит не только все подключенные CSS-стили, но и JS-скрипты, а также мета-теги Content-Type, robots, keywords, description. Вставляем этот код в самый конец секции head, в итоге она выглядит следующим образом:
Обратите внимание, что мы нигде не подключали файл стилей шаблона template_styles.css, т.к. этот файл автоматически подключается Битриксом.С подключением стилей мы разобрались, наш шаблон приобретает более-менее приемлемый вид:
Теперь давайте подключим JS-скрипты. В файле footer.php у нас есть две строчки со скриптами:
Как и в случае со стилями, для подключения JS-скриптов в Битриксе есть своя функция:
В нашем случае подключение скриптов будет выглядеть следующим образом:
Также давайте перенесем подключение скриптов из подвала в шапку.
Обычно JS-скрипты переносят в подвал сайта, чтобы они не замедляли скорость загрузки сайта. Как в Битриксе перенести подключение скриптов в конец сайта – разберемся в одном из следующих уроков.В итоге секция head будет выглядеть следующим образом:
Теперь на мобильных размерах экрана меню будет разворачиваться/сворачиваться при клике на иконку «гамбургера»:
Прописываем актуальные пути к картинкам
Сейчас у нас на сайте есть две картинки, которые не отображаются. Во-первых, нам нужно загрузить их на хостинг: из локального HTML шаблона загружаем папку images в папку шаблона на нашем хостинге:
Теперь, чтобы картинки отобразились у нас на сайте, в атрибуте src каждому тегу img нужно указать актуальный путь к файлу изображения. Обе картинки теперь лежат в папке images внутри папки шаблона. Как вы уже догадались, здесь нам опять поможет константа SITE_TEMPLATE_PATH. Код подключения логотипа теперь выглядит так:
Аналогично используем SITE_TEMPLATE_PATH для получения пути картинки в контенте на главной странице (файл index.php в корне сайта):
Во втором случае не очень уместно подключать картинку из папки шаблона, т.к. изображение относится к контенту конкретной страницы => оно не должно быть привязано к какому-либо шаблону (ведь в будущем у сайта может поменяться шаблон, а значит, что это изображение может оказаться недоступным). Но пока оставим всё как есть, а в следующих уроках разберем правильный вариант добавления картинки в контент страницы.В итоге наша главная страница выглядит следующим образом:
Выводим панель администратора
Напоследок давайте выведем панель администратора в самое начало страницы. Для вывода панели администратора в Битриксе используется следующий код:
Разместим этот код в header.php сразу после открывающего тега body:
Панель администратора отобразилась:
На этом закончим данный урок. В следующем уроке познакомимся с компонентами битрикса на примере компонента «Меню» и научимся создавать новые страницы сайта.
Читайте также: