Меню Рубрики

Установка верстки на битрикс

Натяжка верстки сайта на Битрикс. Интеграция шаблона сайта

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

Интегрируем шаблон сайтана битрикс

Подготавливаем путь для файлов шаблона, где будут лежать все файлы верстки, компонентов, языковые файлы, 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 — 2020 год
Все права защищены

Навыки и умения Знание 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 . В него достаточно было перенести только классы тега .
Код:

Вывод с лайдера Лучший товар

Теперь выведем слайдер. Для слайдера мы воспользуемся нашим компонентом, который мы создали в рамках уроков по Bitrix (Урок 9. Создание собственного компонента слайдера для интернет-магазина на Битрикс). Прелесть компонентов в том, что они универсальны и достаточно сделать для них новый шаблон и можно использовать в другом месте или на другом сайте.
Единственное компонент пришлось немного доработать и добавить вывод цены из свойства инфоблока ( «PROPERTY_ACCOUNT» , «PROPERTY_PRICE» ).

В файле index.php в корне сайта уже есть код отвечающий за вызов компонента слайдера.

Нужно скопировать новый шаблон в папку нашего шаблона electro и внести верстку. Привожу целиком код файла local/templates/electro/components/startshop/slider/best/template.php

Верстка footer.php

В футер мы вставим достаточно большой кусок когда от комментария и до конца индексного фала шаблона.

Изменений мы в нем делать пока не будет и весь я его приводить не буду, ниже будут ссылки к архивам.
Тут нужно обратить внимание на один момент. Все JavaScript файлы в шаблоне подключались в футере, а мы их, как вы помните, подключили в HEADER. И из-за этого наш слайдер не заработает. Но поскольку мы не просто прописали ссылки на скрипты, а подключили их средствами Bitrix, у нас есть возможность через настройки главного модуля перенести скрипты в конец страницы. Выполнить это можно установив соответствующий флажок в разделе Оптимизация CSS.

Далее приступаем к верстке каталога.

Верстка каталога

Для каталога мы используем комплексный компонент Новости (bitrix:news). Он уже размещен в папке catalog нашего сайта. Нам, как и всегда нужно скопировать шаблон компонента в наш шаблон. И на эту тему у меня так же есть подробный Урок 6. Вывод каталога товаров в Битрикс.
Работать мы будем с файлом local/templates/electro/components/bitrix/news/catalog-electro/bitrix/news.list/.default/template.php .
Код мы подготовим следующий (привожу весь).

Читайте также:  Установка abs на уаз патриот

Поясню немного отдельные моменты.

Этим кодом мы через функцию CFile::ResizeImageGet масштабируем картинку под размер 200 на 200 пикселей.

Верстка детальной страницы товара

С детальной страницей поступаем точно так же, как и с каталогом. Копируем шаблон компонента bitrix:news.detail в наш шаблон electro. И совмещаем верстку с Битрикс.
В процессе верстки, т.к. у нас каталог достаточно простой, не нужные элементы я убираю. Да и не ставлю целей выполнить верстку полностью. Цель показать вам, как происходит процесс «натягивание» HTML шаблона на компоненты Битрикс.
Код детальной страницы располагается по пути local/templates/electro/components/bitrix/news/catalog-electro/bitrix/news.detail/.default/template.php .
А сам код я представлю ниже полностью:

Вот и все на этом я заканчиваю создание шаблона Битрикс. Ниже архив с исходными данными и готовый шаблон. А так же прикладываю полностью папку local чтобы можно быстро развернуть и перенести компоненты.

источник

Установка верстки на битрикс

Евгений Смолин: Сам кувыркался с непонятками (пока курсы учебные не прочитал и руками не попробовал то, что там написано). Битрикс из тех систем, где изучение «методом тыка» не очень эффективно без предварительного изучения учебных курсов. Уважаемые новички, потратьте немного своего драгоценного времени, пройдите пару-тройку учебных курсов и масса вопросов просто испарится — там есть ответы на множество вопросов.

Курс для разработчиков — продолжение линейки учебных курсов по Bitrix Framework. Получение сертификата по курсу рекомендуется после успешной сдачи тестов по всей линейке курсов, так как без понятия о работе Контент-менеджера и Администратора создание успешных сайтов будет затруднено.

Чтобы научиться программировать в Bitrix Framework, нет необходимости изучать всю линейку курсов. Но есть моменты, которые необходимо знать разработчикам о системе, они раскрыты в начальных курсах:

  • Интерфейс программы — в главе Элементы управления курса Контент-менеджер.
  • Компоненты 2.0 (начальные сведения) в главе Компоненты 2.0 (начальные сведения) курса Контент-менеджер.
  • Информационные блоки — в главе Информационные блоки (начальные сведения) курса Контент-менеджер.
  • Управление доступом к файлам, элементам контента, модулям и другие права доступа в главе Управление доступом курса Администратор. Базовый.
  • Работа с инструментами системы — в главе Работа с инструментами курса Администратор. Базовый.
  • Модуль Поиск — в главе Поиск курса Администратор. Базовый.
  • Вся информация по администрированию модулей размещена в курсах:
    • Администрирование. Модули — модули «1С-Битрикс: Управление сайтом»
    • Администратор. Бизнес — модули «1С-Битрикс: Управление сайтом», связанные с коммерческой деятельностью в Интернете.
    • Администратор «1С-Битрикс: Корпоративный портал» — модули «1С-Битрикс: Корпоративный портал»

    По завершению изучения этого курса можно продолжить изучение работы в продуктах Bitrix Framework по следующим курсам:

  • Бизнес-процессы — настройка и создание бизнес-процессов.
  • Бот платформа Битрикс24 — приложения, основанных на чатах в веб-мессенджере.
  • Маркетплейс Битрикс24 — приложения для коробочной и облачной версий Битрикс24.
  • Маркетплейс Bitrix Framework — расширение функционала проектов на основе Bitrix Framework с помощью сторонних модулей и решений.
  • Многосайтовость — система многосайтовости и принципы работы с многосайтовой конфигурацией.

Начальные требования к подготовке

Для успешного изучения курса и овладения мастерством разработки сайтов на Bitrix Framework необходимо владеть (хотя бы на начальном уровне):

  • основами PHP, баз данных;
  • основами HTML, CSS.

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

На каждой странице курса авторизованный на сайте посетитель может дать комментарий к содержимому страницы. Комментарий — не форум, там не ведётся обсуждений или разъяснений. Это инструмент для сообщений нам об ошибках, неточностях. Для отправки комментария воспользуйтесь расположенной в правом нижнем углу окна браузера кнопкой:

Читайте также:  Установка ливневки в брусчатку

Для преподавания оффлайн

Если данный курс берётся в качестве основы для оффлайного преподавания, то рекомендуемая продолжительность: 5 дней (40 академических часов).

Примечание: В тексте курса вы встретите цитаты, высказанные в разное время разработчиками системы и разработчиками проектов на базе Bitrix Framework. Надеемся, что такие неформальные замечания внесут некоторое разнообразие в процесс изучения. Заодно опытные специалисты поделятся и своим опытом.

Имена авторов цитат даются в том написании, в каком авторы зарегистрировали себя на сайте «1С-Битрикс».

Скачать материалы курса в формате CHM. Файлы формата CHM обновляются ежемесячно, тем не менее, возможно некоторое отставание их от онлайновой версии курса.

Чтобы отключить подобное отношение к файлу необходимо:

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

Отсутствие кнопки Разблокировать возможно в двух случаях:

  1. Файл лежит не локально, а на сетевом ресурсе.
  2. Если файл лежит на локальном диске, но путь к нему содержит спецсимволы (# и прочие).

источник

Что значит «опыт верстки под битрикс, вордпресс и т. д.»?

1. Заказывают верстку, подразумевают создание шаблона/темы для CMS. По хитрости, по не знанию, по глупости — не важно. Важно не подписаться пилить это по цене только верстки.

Верстка — это когда макет превращается в набор html/css/js файлов.

Да, могут быть вариации. Может быть сразу под движок: Smarty, Twig, Jade, или все шаблоны в Handlebars, или сразу чтобы всё под Angular было. Но это всё частные случаи, требующие более высокой квалификации, или находящиеся уже где-то во front-end разработке.

2. Просят учесть особенности CMS.

Маленьких нюансов может быть много.

Вот Битрикс, например, и его Эрмитаж (тыкнул в блок — тут же его отредактировал если по простому). Где-то лишняя обертка элемента, чтобы в режиме редактирования не разваливалось. Везде — z-index меньше 1000, чтобы Эрмитаж не перекрывало.

WordPress вообще генерирует огромное количество своих классов. Взять те же навигационные меню. Использовать их = наплевать на все эти ваши БЭМ и прочее.
И т.д.

Если я верстал и без проблем натягивал свои макеты на WordPress — могу ли сказать что у меня есть опыт верстки под WordPress?

Могу.
Так же как могу сказать что есть опыт верстки под Drupal (не знаю натягивали ли какие-то из моих работ на Drupal, но чё бы нет).

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

Когда ему движок выдаст меню в виде

Но я не считаю это своей проблемой.
Когда понадобилось, оказалось нет ничего сложного 1 раз потратить время и написать свой вывод меню в WordPress, чтобы можно было любую верстку натянуть. Почему так не может сделать тот кто натягивает? Почему в ТЗ об этом не предупредили?

Уменьшает ли «опыт верстки под CMS» время верстки?
Если не были оговорены нюансы (те же меню WP) — то нет.
Может увеличиться время натягивания верстки на движок, но это уже проблемы заказчика, который не озвучил требования заранее.

Таким образом, хотя в идеале на движок должно быть возможным натянуть любую верстку, действительно некоторые имеют CMS особенности.
Об этих особенностях следует договариваться заранее. Должно быть конкретное ТЗ на верстку.
В остальном как правило речь об «опыте верстки под %CMS%» — просто болтовня.

источник

Добавить комментарий

Adblock
detector