Как добавить html файл на сайт битрикс

Обновлено: 02.07.2024

Загрузка файла на сайт - это довольно рядовой процесс. Но как загрузить пользовательский файл в свойство элемента инфоблока 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. чтобы все работало необходимо подключить созданный шаблон в админке сайта. По правде говоря все то, что я тут пишу - это порядок действий по натяжки верстки на битрикс для меня, при выполнении однотипной задачи, чтобы не держать все в голове.

Навыки и умения Знание 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:

При желании, панель администратора можно вывести и в подвале сайта (перед закрывающим тегом body). Это может помочь в том случае, если в шаблоне сайта используется абсолютное/фиксированное позиционирование элементов и верстка шаблона из-за этого конфликтует с панелью администратора.

Панель администратора отобразилась:

На этом закончим данный урок. В следующем уроке познакомимся с компонентами битрикса на примере компонента «Меню» и научимся создавать новые страницы сайта.

Читайте также: