Меню Рубрики

Установка готового шаблона в битрикс

Устанавливаем наш ШАБЛОН в 1С-Битрикс

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

Привет друзья, это продолжение к сери уроков, а точнее пятый урок по созданию landing page на CMS 1С-Битрикс.

Так как давно записывал предыдущие уроки, давайте повторно развернем платформу, и перенесем туда шаблон, с которым ранее работали.

Регистрируем Хостинг под 1С-Битрикс

Перейдем в раздел новостей, откроем статью 3 месяца бесплатного хостинга от МАКХОСТ и скопируем из нее промокод (8A93-0ECC-D7AD-4A76) . Затем переходим на Макхост и выбираем пункт в меню CMS хостинг, далее жмем на иконку 1С-Битрикс.

На следующем шаге проверяем заполненность данных, подтверждаем их. После успешно регистрации мы получаем письмо с логином и паролем для входа в панель Хостинга.

Авторизуемся и пополняем баланс на 100 рублей что бы нам активировали аккаунт.

Далее ждем пока аккаунт активируется, в это время получаем еще два письма, с подтверждение платежа и с уведомлением что на сайт загружен файл установки 1С-Битрикс.

После активации аккаунта переходим в настройки PHP и изменяем его конфигурацию под 1С-Битрикс.

Устанавливаем следующие параметры:

Запускаем установщик 1С-Битрикс. Просто копируем ссылку из письма и вставляем ее в браузерную строку.

Далее запускается мастер установки CMS 1С-Битрикс, выбираем нужную нам редакцию, в моем случае это редакция «Старт» и разворачиваем платформу на Макхосте с пустым шаблоном из Маркетплейс.

Устанавливаем ШАБЛОН из предыдущего урока

На данный момент мы установили пустой шаблон Битрикс, по этой причини видим белый экран. Переходим в административную часть, жмем на иконку Контент -> Файлы и папки -> bitrix -> templates . Создаем в данной директории пустую папку под шаблон с названием «lendtv». Переходим в нее и закачиваем шаблон из предыдущего урока. Распаковываем его и удаляем архив он нам больше не понадобиться.

Что бы шаблон подключился нам нужно выбрать его в настройках текущего сайта. Для этого переходим в Настройки -> Настройки продукта -> Сайта -> Список сайтов .

Открываем первый сайт, спускаемся в самый низ и в пункте «Шаблон сайта» выбираем шаблон который ранее мы копировали.

Переходим на главную страницу, сбрасываем ее кеш, и как видим шаблон успешно подключился.

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

источник

Урок 3. Создание шаблона 1С Битрикс (Foundation)

403 Forbidden You don’t have permission to access / on this server

Отлично! Начнем свое повествование с ошибки )). Дело в том, что я сам растерялся получив эту ошибку, уже думал у меня перестало работать Веб-окружение Битрикс или порт заблокировался. Но оказалось все проще, мы просто в прошлом уроке удалили файл index.php из папки сайта, а сервер по умолчанию не дает просматривать содержимое папки и выдает ошибку доступа.
По этому чтобы больше не пугаться и не пугать вас проверим работу веб-сервера apache командой phpinfo() .
Для этого создадим в корневой папке нашего проекта файл index.php и заполним его простым содержанием.

Вот такой у нас будет файл. И теперь если выполнить открытие сайта через веб-окружение мы уведем информацию о настройках php.

Устройство шаблона Битрикс

Минимальный набор шаблона Битрикс

Т.е. все что выше разделителя #WORK_AREA# попадает в header.php, а что ниже в файл footer.php. Вместо разделителя выводится контент сайта через какой-либо компонент, например news (новости).
Не очень понятная структура скажете вы. И я соглашусь. Например, в joomla примерно такое же устройство шаблона, как и в Bitrix, как бы это было не парадоксально. Но файл шаблона один, а вывод контента сделал через вызов специального компонента. Почему так не сделал Битрикс? Я думаю такое устройство шаблона эта дань традициям, ведь Битрикс поддерживает совместимость со всеми предыдущими своими редакциями. И в связи с этим они не могут поменять структуру шаблона, как основу проектирования сайтов.

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

И чтобы у нас хоть что-то начало открываться давайте отредактируем файл index.php в корне сайта, заполнив его таким содержимым.

Магазин Start Shop

Внедрение собственной верстки в шаблон Битрикс

Копирование исходников шаблона

Теперь нужно подключить добавленный шаблон в админки Битрикса. Авторизуемся если вы этого ещё не сделали добавив адресной строке к адресу сайта bitrix/ . Например так http:/localhost:6449/bitrix/. Затем нужно авторизоваться, перейти в раздел администрирования Настройки продукта — Сайты — Список сайтов. Выбрать единственный сайт и открыть его на изменение.

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

Нажать Сохранить.
Но наша страничка не изменится. Во-первых в индексной страничке нет никаких данных, а во-вторых пока что в файлах Битрикс шаблона header.php и footer.php у нас пусто. Заполнением их мы и займемся в первую очередь.

Верстка шаблона Битрикс

Зеленым квадратом выделены данные которые попадут в шапку (header.php), синим, то что попадет в подвал (footer.php) и желтым выделен контент, т.е. то что будет выводится компонентом Битрикс, который мы разместим в файле index.php. При навигации по сайту переходя в разделы шапка и подвал будут оставаться всегда одинаковыми, а контент меняться на вывод содержимого файла index.php того раздела в который вы перешли.
Чтобы открыть файлы, которые мы будем верстать я их специально оставил в шаблоне. Это два файла ecommerce-grid-x.html и product-page-grid-x.html. Вы можете их просто открыть двойным кликом мыши в браузере. Использоваться в работе шаблона они не будут, но мы будем из них брать верстку и помещать в файлы шаблона Битрикс. Ну и сравнивать результат.

$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . ‘/js/vendor/jquery.js’);
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . ‘/js/vendor/foundation.min.js’);
?>

Ну а теперь вставим код меню, который в последствии мы заменим на вызов компонента Битрикс.
Код:

Вот такая панель появляется вверху если пользователь авторизовался, как администратор. Очень удобно и в дальнейшем мы её будем постоянно пользоваться.
.
На этом пока работу с head.php закончим и перейдем к foter.php. В подвал мы скопируем конец файла нашего исходного примера ecommerce-grid-x.html.
Код:

Vivamus Hendrerit Arcu Sed Erat Molestie

Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit.

источник

Урок 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 .
Код мы подготовим следующий (привожу весь).

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

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

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

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

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

источник

Интегрцаия шаблона на 1С-Битрикс

В очередной раз, пытаясь найти себе программиста, который работал с CMS 1C-Bitrix с своем городе натыкаюсь на проблему…

Программисты есть, работавшие с разными бесплатными фреймворками по типу Joomla, WordPress и т.д., но когда дело доходит до Битрикса, все как один говорят: — «Ой, она платная, зачем мне это когда есть куча других бесплатных». И не хотят браться за изучение чего то нового.

Так начинал и я, за исключение одного, мне сразу показали, как что и почему. Но материала в сети и на хабре я так и нашел. По этому начну с простого, как обычному программисту владеющим знаниями PHP и хотя бы базовыми HTML, CSS, JS начать работать c Битрикс.

Про структуру каталогов шаблона говорить не буду, об этом можно почитать тут. Первое, с чем приходится сталкиваться, это интеграция HTML шаблона на CMS.

Читайте также:  Установка закладок для хром

Допустим, у вас есть готовый HTML шаблон и вам его необходимо интегрировать с системой. Начнем с установки на сервер:

  1. Заходим на сайт Битрикса и качаем инсталлятор;
  2. Заливаем bitrixsetup.php на сервер и начинаем установку.
    Первое, что вам предлагает установочник, это выбрать редакцию:

Выбираете нужный вам дистрибутив (как правило это «Управление сайтом»), если у вас есть ключ, то вводите его, и нажимаете «Загрузить». Процесс пошел…

Если распаковка прошла успешно, значит, вы видите приветственное окно установки

Нажимаем «Далее», принимаем лицензионное соглашение, устанавливаем сайт в кодировке UTF-8 (или нет, по желанию)

Следующее с чем сталкиваются начинающие программисты это «Обязательные параметры системы», а именно:

Для решения этой проблемы заходим на сервер, открываем файл .htaccess и находим там следующие строки

Раскомментируем их. Жмем F5 и все работает… Если все же не заработало (а такое иногда бывает), то пишите обращение в тех. поддержку хостинга.

Следующий этап установка базы данных. Тут я думаю расписывать не надо. Поэтому идем далее. Если все хорошо, то вы увидите процесс установки Битрикса:



Добрались до выбора решения, предлагаемые Битриксом. Так как нам нужна чистая система без каких либо дополнений выбираем «Демо-сайт для разработчиков»



Далее нас приветствует стандартный «Мастер»

С помощью его можно установить демо данные. Нам это не нужно жмем «Отмена».

Все на этом этап установки заканчивается, переходим непосредственно к интеграции шаблона. Заходим в панель администрирования в раздел «Настройки». Далее спускаемся по дереву настоек: Настройки продукта — Шаблоны сайтов, жмем на кнопку «Добавить шаблон»

Открывается стандартная форма создания шаблона.

Придумываете ID (я обычно использую main), вписываете название шаблона. Поле «Описание» не обязательно, оно скорее сделано для разработчиков, чтоб не путать шаблоны, если их несколько.

Вот тут началось самое интересное. Обычно шаблон HTML страниц выглядит следующим образом:

Тут главное понимать, что относится к шаблону, а что к контентной части. В данном примере контентная часть начинается между тегом section . Поэтому копируем шаблон в поле «Внешний вид шаблона сайта». Между тегом вставляем служебную директиву #WORK_AREA# . В итоге ваш шаблон будет выглядеть вот так:

Если у вас есть CSS, то переходим на вкладку «Стили шаблона» и вставляем его туда.

На данном этапе можно нажать «Сохранить» и посмотреть что получилось. Но так как у нас отсутствуют картинки и не прописаны правильные пути в HTML и CSS, то, скорее всего у вас отобразится просто скелет сайта.

Далее, я обычно редактирую файлы уже через FTP. Открываете свой текстовый редактор (у меня Notepad++, поэтому буду писать не его примере) и заходите на сервер. Весь шаблон Битрикс располагается по адресу /bitrix/templates/название_шаблона/ , если у вас есть картинки или дополнительные файлы стилей, JS скрипты и т.д., то копируете всё в эту папку.

Переходим к заключительной части и прописываем все необходимые переменные Битрикса. Открываем файл header.php и начинаем редактировать. Первое что нужно сделать это, подключить вывод шапки сайта:

Так же мы хотим видеть панель администратора сайта в публичной части сайта:

Чтоб отображался заголовок страницы, добавляем функцию ShowTitle();?> в соответствующий тег. В итоге мы получаем вот такой файл:

Кстати забыл сказать, если всё таки есть дополнительные файлы, будь то JS, CSS, favicon и так далее, то чтоб не прописывать полный длинный путь /bitrix/…/ есть специальная константа SITE_TEMPLATE_PATH . Её и вставляем на нужные места:

Не забываем редактировать пути в CSS, сохраняем все и можете смотреть на получившийся результат.
Ах, да, нужно еще применит созданный шаблон к сайту. Для этого идем в «Настройки продукта — Список сайтов — s1»

Выбираем созданный нами шаблон и жмем «Сохранить», и можем посмотреть результат проделанной работы.

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

источник

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

Adblock
detector