Как изменить код страницы битрикс - Исправление ошибок и поиск оптимальных решений проблем

Просмотров: 30422
Дата последнего изменения: 11.01.2023

Сложность урока:

4 уровень — сложно, требуется сосредоточиться, внимание деталям и точному следованию инструкции.

Недоступно в лицензиях:

Ограничений нет

Ранее

Создание шаблона – первый шаг в интеграции дизайна.

Примечание: Ранее можно было задавать внешний вид шаблона сайта с помощью визуального редактора. С версии 14.0 работа выполняется без визуального редактора.

Подробнее…

мы создали папку шаблона сайта. Однако для корректного отображения шаблона на сайте нужно еще адаптировать вёрстку, подключив все стили и js-файлы в шапке и подвале сайта, а также прописав новые пути до картинок и объектов.

Необходимо выполнить три важных шага:

Редактирование шапки сайта (header.php)
Редактирование подвала сайта (footer.php)
Подключение шапки и подвала (index.php), добавление контента

1. Редактирование шапки сайта (header.php)

В папке шаблона откроем файл header.php в режиме редактирования как PHP.
Первой строкой пропишем служебный код (защита от подключения файла напрямую без подключения ядра):
```
<? if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); ?>
```
Внутри тегов <head> добавим следующие строки:
- Код отображения заголовка страницы:
```
<title><? $APPLICATION->ShowTitle(); ?></title>
```
- Код вывода в шаблоне сайта основных полей тега <head> (мета-теги Content-Type, robots, keywords, description; стили CSS; скрипты):
```
<? $APPLICATION->ShowHead();  ?>
```
После открывающего тега <body> пропишем код для отображения административной панели <? $APPLICATION->ShowPanel(); ?> . В связи с особенностями данного html-макета заключим код отображения панели в теги <div> (панель будет отображаться внизу страницы), иначе административная панель «наедет» на меню:
```
<div id="panel">
    <? $APPLICATION->ShowPanel(); ?> 
</div>
```
Во все строках, где есть обращение к файлам, добавим в начале пути константу

<?=SITE_TEMPLATE_PATH?>

Возвращает путь до текущего подключённого шаблона сайта без последнего слеша.

и слеш /.

Рассмотрим на примере блока :
```
  
  <script src="<?=SITE_TEMPLATE_PATH?>/vendor/jquery/jquery.min.js"></script>
  <script src="<?=SITE_TEMPLATE_PATH?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
```
Сохраним изменения.

Пример отредактированного файла header.php с комментариями

Примечание: css-стили в шапке сайта предпочтительнее подключить с помощью метода Asset::addCss() ядра D7.

Пример файла header.php с комментариями

2. Редактирование подвала сайта (footer.php)

Подвал сайта почти

не нуждается в изменениях

Проверьте обязательно наличие строки <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();?> в начале файла.

. Необходимо только в строках, обращающихся к файлам, добавить в начале пути константу

<?=SITE_TEMPLATE_PATH?>

Возвращает путь до текущего подключённого шаблона сайта без последнего слеша.

со слешем / и сохранить изменения.

Пример отредактированного файла footer.php

3. Подключение шапки и подвала (index.php), добавление контента

Необходимо удостовериться в подключении на странице вывода файлов header.php и footer.php.
Для этого в файле главной страницы сайта

index.php

(Контент > Структура сайта > Файлы и папки > index.php)

сверим следующие конструкции:
- первая строка: <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?>
- последняя строка: <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
Добавим

статический

Т.е. для изменения контента страницы нужно будет вновь отредактировать вручную код страницы index.php.

контент.

Откроем файл с подготовленной вёрсткой (index.html) и скопируем код между шапкой (header) и подвалом сайта (footer) — тот, который мы в пункте 1 заменяли на #WORK_AREA#, то есть контент сайта.

Настроим пути к картинкам. Пропишем в существующих путях уже знакомую константу <?=SITE_TEMPLATE_PATH?>/.

Пример отредактированного файла index.php с комментариями

Удобнее, разумеется, настроить вывод динамической информации и работать с ним. Подробнее об этом в

следующем уроке.

В предыдущем уроке мы создали шаблон главной страницы сайта. Однако пока вся информация на сайте — статическая, и для внесения любых изменений придется править главную страницу index.php. Это не очень удобно, если информация на сайте должна постоянно обновляться. И при этом слишком громоздко.

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

Подробнее…

Готово! Теперь осталось только

назначить

Откройте в Административном разделе страницу Настройки > Настройки продукта > Сайты > Список сайтов. С помощью меню действий откройте для редактирования нужный сайт.

Выберите шаблон, который вы хотите применить и условия.

Подробнее…

созданный шаблон для тестового сайта и посмотреть результат.

Примечание:
Всегда можно изменить шапку или подвал сайта, перенеся требуемую часть кода из индексной страницы в файл header.php или footer.php.

Пример: перенос блока «Связаться с нами» в footer.php

Источник

На сайте, на всех страницах кроме главной, надо поменять задний фон. Сайт на Битриксе. На главной странице нужно только немного изменить код, но я не могу его найти. css есть, а html нет. Где искать файл с исходным кодом главной в Битриксе?

Вопрос задан

более трёх лет назад
35877 просмотров

Тело главной страницы находится здесь $_SERVER[‘DOCUMENT_ROOT’].’/index.php’.

Если вам нужно добавить стили только для главной страницы сайта, то проще всего добавить в шаблон сайта условие:

<?php
$curPage = $APPLICATION->GetCurPage(true);
if (
            $curPage == SITE_DIR."index.php"
){?>

<style type="text/css">
  <!--
  стили для главной страницы
  -->
  </style>

<?}?>

вообще лучше стили вынести в отдельный файлик:

<link rel="stylesheet" type="text/css" href="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH."/for_index_page.css")?>" />

Пригласить эксперта

Вот здесь исходник шаблона находится:
Администрирование->Настройка->Сайты->Шаблоны сайтов

Я, блин, час искал где редактируется текст на главной. Оказывается есть режим правки, который надо было включить и кликнуть по тексту для редактирования. Там и файл будет виден куда текст сохраняется — в моем случае это был /mysite.ru/public_html/smt_include/content_main.php

Показать ещё
Загружается…

10 февр. 2023, в 16:23

300 руб./за проект

10 февр. 2023, в 16:12

1000 руб./за проект

10 февр. 2023, в 16:11

50000 руб./за проект

Минуточку внимания

Источник

0 / 0 / 0

Регистрация: 27.11.2014

Сообщений: 8

09.02.2015, 15:54. Показов 20180. Ответов 4

Добрый день.
С помощью инструментов разработчика в Хроме (Ctrl + U) вижу исходный код страницы, который хочу отредоктировать.
А через админку не могу его найти. Есть ли где-то код в том же виде как и в панели раззработчиков? Там только php нахожу, но он другой.

__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь

433 / 352 / 259

Регистрация: 29.11.2011

Сообщений: 628

09.02.2015, 16:09

1. Включаете режим «Правки», на странице появятся области выделяемые рамками серого цвета.
2. Наводите курсором мыши на необходимую область (компонент) — появится меню с иконкой «шестеренки», кликаете чуть правее на выпадающий список, и в открывшемся меню выбираете «Редактировать шаблон компонента».

Миниатюры

0 / 0 / 0

Регистрация: 27.11.2014

Сообщений: 8

09.02.2015, 16:20

[ТС]

Таким способом можно редактировать только отдельные компоненты страницы, а мне надо изменить саму страницу. Конкретнее: у меня футер состоит из двух блоков, стоит задача обернуть его в div, чтобы был один общий блок.

433 / 352 / 259

Регистрация: 29.11.2011

Сообщений: 628

09.02.2015, 17:24

Сообщение было отмечено Iceland как решение

Решение

Сообщение от Iceland

мне надо изменить саму страницу. Конкретнее: у меня футер

1. Определяете название шаблона вашего сайта
2. В файловом менеджере битрикса (или по FTP) находите папку с названием шаблона сайта, и редактируете футер.

Миниатюры

436 / 404 / 111

Регистрация: 15.02.2012

Сообщений: 1,715

10.02.2015, 11:52

через файловый менеджер битрикса я бы не рекомендовал менять файлы footer и header, особенно ни в коем случае не использовать визредактор(чревато последствиями). Шаблон сайта лучше редактировать или через настройки-сайты-шаблоны сайтов или через FTP.

IT_Exp

Эксперт

87844 / 49110 / 22898

Регистрация: 17.06.2006

Сообщений: 92,604

10.02.2015, 11:52

Помогаю со студенческими работами здесь

Как искать html код
Требуется искать сайты по html коду. Есть ли какая нибудь возможность через пс или программно с…

Где искать единомышлеников?
Добрый день.

Итак — я тупой глупый школьник, которому приспичело побыть мега крутым…

Где искать резистор
Сгорел резистор на сабвуфере 1.8 KОм, +/-5%, есть несколько блоков питания и много материнских…

Где искать вреда?
такая ерунда — вчера решил поставить на комп браузер Амиго, да видно скачал какой то левый.
как…

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Источник

14 мая 2018

Приветствую мои читатели. Реши немного облагородить свой тестовый магазин и сверстать шаблон для Bitrix из готового HTML шаблона. Тема называется Electro и находится в свободном доступе в интернете. И вместе с этим я ещё раз покажу, как верстать или как говорят «натягивать» верстку на CMS Bitrix. А следующими статьями я так же сверстаю шаблон (правда немного другой шаблон) для wordpress. Но об этом чуть позже. А сейчас вот такой приятный шаблон мы сверстаем для нашего магазина StartShop Битрикс.

Скачать HTML исходники темы можно по ссылке.

Вот на основании этой HTML верстки мы и создадим свой шаблон для Bitrix.
В этой статье я не буду очень подробно описывать процесс создания шаблона (иначе получится очень большой объем текста), а верстку более простого шаблона я описывал в отдельном уроке Урок 3. Создание шаблона на 1С Битрикс.

Особенность данного шаблона он сделан на CSS Bootstrap, а мы до этого использовали CSS Foundation (Урок 1).
Разделем нашу работу на несколько этапов:

Создание структуры шаблона Битрикс.
Верстка header.php.
Верстка footer.php.
Верстка каталога.
Верстка детальной страницы товара.

Создание структуры шаблона Битрикс

Первое, что мы сделаем, создадим папку electro в папке наших шаблонов (local/templates/electro) и перенесем из исходников шаблона electro папки в наш шаблон. Дополнительно создадим необходимые для работы шаблона Bitrix файлы:

Минимальный и достаточный набор файлов для работы шаблона Битрикс следующий:

description.php — файл описания шаблона. Это описание будет отображаться в административной части битрикс (в админки).
styles.css — это стили которые будут использоваться при редактировании контента (нужен контент менеджеру, у нас будет пустым)
template_styles.css — основной файл css-стилей шаблона (в нем будем создать собственные стили)
header.php — файл содержит шапку шаблона
footer.php — файл содержит подвал шаблона (в этих файлах мы будем редактировать шаблон)

В итоге у нас получится следующая структура:

В папке src я разместил исходники шаблона для удобства работы. Больше не для чего эта папка не нужна.
И первый кусок кода мы внесем в файл description.php задав название и описание нашего шаблона.

Код:

<?
$arTemplate = array (
  'NAME' => 'Шаблон Electro (StartShop)',
  'DESCRIPTION' => 'Шаблон Electro для интернет магазина StartShop',
  'SORT' => '',
  'TYPE' => '',
);

Далее возьмемся за шапку шаблона файл header.php.

Верстка header.php

Как вы помните шаблон Битрикс разделен на два файла header.php и footer.php. А между ними вставляется контент. Подход староват, но и сам Битрикс не молодой.
В шапку вносится код отвечающий за подключение CSS стилей и JavaScript кода.

Но сначала нам нужно проверить инициирован ли движок Битрикса или к шаблону обратились по прямой ссылке. Этот код нужен для защиты.

Код:

<?php
if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)    die();
?>

А затем открываем тег HEAD и подключаем все стили и скрипты. А так же инициируется запуск панели управления Битрикс. Стили и скрипты я взял из файла index.html шаблона electro.
Код:

<?php
use BitrixMainPageAsset;
if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)    die();
$asset = Asset::getInstance();
?>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><?$APPLICATION->ShowTitle();?></title>
    <?$APPLICATION->ShowHead();?>
    <?
    $asset->addCss(SITE_TEMPLATE_PATH."/css/bootstrap.min.css");
    $asset->addCss(SITE_TEMPLATE_PATH."/css/slick.css");
    $asset->addCss(SITE_TEMPLATE_PATH."/css/slick-theme.css");
    $asset->addCss(SITE_TEMPLATE_PATH."/css/nouislider.min.css");
    $asset->addCss(SITE_TEMPLATE_PATH."/css/font-awesome.min.css");
    $asset->addCss(SITE_TEMPLATE_PATH."/css/style.css");

    $asset->addJs(SITE_TEMPLATE_PATH . 'https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/jquery.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/bootstrap.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/slick.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/nouislider.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/jquery.zoom.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/main.js');
    ?>
</head>  
<body>  
<?$APPLICATION->ShowPanel();?>

Обратите внимание скрипты я подключил уже по нового через модуль BitrixMainPageAsset.
А теперь уже вставляем основную верстку. Для этого нам придется разделить файл index.html на 2 части. До комментария <!— FOOTER —> перенести в header.php, а остальное в footer.php. Скрипты из футера я подключил в шапке дублировать их в футере не нужно.
Ну а теперь самый сложный этап вывести вместо блоков HTML шаблона наш контент.
Для начала разберемся с путями к картинкам. Нужно в строках вида: <img src=»./img/logo.png» alt=»»> вставить путь к шаблону через специальную константу SITE_TEMPLATE_PATH.

Код:

<img src="<?=SITE_TEMPLATE_PATH?>/img/shop01.png" alt="">

После этого все картинки выведутся в шаблон.
Теперь сайт должен открываться как статическая страница.

Вот что получается.

Теперь реализуем вывод следующих блоков:

Меню Битрикс.
Слайдер Лучший товар.

Вывод меню Битрикс

Для вывода меню найдите в файле header.php комментарий <!— NAV —> и вставьте место HTML код вызова компонента bitrix:menu меню:
Код:

<?$APPLICATION->IncludeComponent(
"bitrix:menu",
".default",
array(
    "ALLOW_MULTI_SELECT" => "N",
    "CHILD_MENU_TYPE" => "left",
    "DELAY" => "N",
    "MAX_LEVEL" => "1",
    "MENU_CACHE_GET_VARS" => array(
    ),
    "MENU_CACHE_TIME" => "3600",
    "MENU_CACHE_TYPE" => "N",
    "MENU_CACHE_USE_GROUPS" => "Y",
    "ROOT_MENU_TYPE" => "top",
    "USE_EXT" => "N",
    "COMPONENT_TEMPLATE" => ".default"
),
false
);?>

После этого надо скопировать шаблон компонента меню и уже править его.

Как получить этот код подробно описано в четвертом уроке Вывод меню Битрикс.

У меня путь до шаблона меню сформировался следующий: local/templates/electro/components/bitrix/menu/top/template.php
Из папки top я удалил все файлы и папки кроме файла самого шаблона template.php. В него достаточно было перенести только классы тега <UL>.
Код:

<?
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<?if (!empty($arResult)):?>
    <ul class="main-nav nav navbar-nav">

<?
foreach($arResult as $arItem):
   if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) 
      continue;
?>
   <?if($arItem["SELECTED"]):?>
      <li><a href="<?=$arItem["LINK"]?>" class="selected"><?=$arItem["TEXT"]?></a></li>
   <?else:?>
      <li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
   <?endif?>
   
<?endforeach?>

</ul>
<?endif?>

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

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

Код:

$arSelect = Array("ID", "NAME", "PREVIEW_PICTURE", "DETAIL_PAGE_URL", "PROPERTY_".$arParams["PROPERTY_CODE"], "PROPERTY_ACCOUNT", "PROPERTY_PRICE");
$arFilter = Array("IBLOCK_ID" => IntVal($arParams["IBLOCK_ID"]), "ACTIVE"=>"Y", "PROPERTY_".$arParams["PROPERTY_CODE"]."_VALUE" => 'Да');
$res = CIBlockElement::GetList(Array(), $arFilter, false, false, $arSelect);
while($arFields = $res->GetNext())
{
   $arResult[] = $arFields;   
}
$this->includeComponentTemplate();

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

Код:

<?$APPLICATION->IncludeComponent("startshop:slider", "best", Array(
   "AJAX_MODE" => "N",
      "AJAX_OPTION_ADDITIONAL" => "",
      "AJAX_OPTION_HISTORY" => "N",
      "AJAX_OPTION_JUMP" => "N",
      "AJAX_OPTION_STYLE" => "Y",
      "FIELD_CODE" => array(
         0 => "DETAIL_PICTURE",
         1 => "",
      ),
      "IBLOCK_ID" => "13",   // Инфобок
      "IBLOCK_TYPE" => "StartShop",  // Тип инфоблока
      "PROPERTY_CODE" => "BEST", // Укажите свойство по которому будет фильтроваться товары для слайдера
      "COMPONENT_TEMPLATE" => ".default"
   ),
   false
);?>

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

Код:

<?
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
//pr($arResult);
?>
<!-- Products tab & slick -->
<div class="col-md-12">
    <div class="row">
        <div class="products-tabs">
            <!-- tab -->
            <div id="tab1" class="tab-pane active">
                <div class="products-slick" data-nav="#slick-nav-1">
                    <?foreach ($arResult as $item):
                        $file = CFile::ResizeImageGet($item["PREVIEW_PICTURE"], array('width' => 300,'height' => 300), BX_RESIZE_IMAGE_EXACT, true);
                        ?>
                    <!-- product -->
                    <div class="product">
                        <div class="product-img">
                            <img width="300px" height="300px" src="<?=$file['src']?>" alt="">
                            <div class="product-label">
                                <span class="new">NEW</span>
                            </div>
                        </div>
                        <div class="product-body">
                            <p class="product-category">Category</p>
                            <h3 class="product-name"><a href="<?=$item['DETAIL_PAGE_URL']?>"><?=$item['NAME']?></a></h3>
                            <div class="product-rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                            </div>
                            <div class="product-btns">
                                <button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button>
                                <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button>
                                <button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick view</span></button>
                            </div>
                        </div>
                        <div class="add-to-cart">
                            <button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to cart</button>
                        </div>
                    </div>
                    <!-- /product -->
                    <?endforeach;?>
                </div>
                <div id="slick-nav-1" class="products-slick-nav"></div>
            </div>
            <!-- /tab -->
        </div>
    </div>
</div>
<!-- Products tab & slick -->

Верстка footer.php

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

Код:

<!-- NEWSLETTER -->
<div id="newsletter" class="section">

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

После такой манипуляции скрипты заработают и заработает наш слайдер.

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

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

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

Код:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>
<!-- SECTION -->
<div class="section">
    <!-- container -->
    <div class="container">
<div class="row">

    <?foreach($arResult["ITEMS"] as $item):?>
        <?
        $file = CFile::ResizeImageGet($item["PREVIEW_PICTURE"]["ID"],array('width' => 200,'height' => 200), BX_RESIZE_IMAGE_EXACT, true);
        $item["PREVIEW_PICTURE"]['WIDTH'] = $file['width'];
        $item["PREVIEW_PICTURE"]['HEIGHT'] = $file['height'];
        $item["PREVIEW_PICTURE"]['SRC'] = $file['src'];
        ?>
        <?//Включает возможность изменять элемент из публички
        $this->AddEditAction($item['ID'], $item['EDIT_LINK'], CIBlock::GetArrayByID($item["IBLOCK_ID"], "ELEMENT_EDIT"));
        $this->AddDeleteAction($item['ID'], $item['DELETE_LINK'], CIBlock::GetArrayByID($item["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('Подтверждаете удаление?')));
        ?>
            <!-- product -->
            <div class="col-md-4 col-xs-6">
                <div class="product" id="<?=$this->GetEditAreaId($item['ID']);?>">
                    <div class="product-img">
                        <img src="<?=$item['PREVIEW_PICTURE']['SRC']?>" alt="">
                        <div class="product-label">
                            <span class="new">NEW</span>
                        </div>
                    </div>
                    <div class="product-body">
                        <p class="product-category">Category</p>
                        <h3 class="product-name"><a href="<?=$item['DETAIL_PAGE_URL']?>"><?=$item['NAME']?></a></h3>
                        <h4 class="product-price"><?=$item['PROPERTIES']['PRICE']['VALUE']?></h4>
                        <div class="product-rating">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </div>
                    </div>
                    <div class="add-to-cart">
                        <button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i>Купить</button>
                    </div>
                </div>
            </div>
        <!-- /product -->
    <?endforeach;?>
        </div>
        <!-- /row -->
        <?if($arParams["DISPLAY_BOTTOM_PAGER"]):?>
            <br /><?=$arResult["NAV_STRING"]?>
        <?endif;?>
    </div>
    <!-- /container -->
</div>
<!-- /SECTION -->

Вместе с комплексным компонентом всегда копируются все простые компоненты (список, форма поиска, rss и др.). Их все смело можно удалить, чтобы не захламляли шаблон. Ведь и так не просто разбираться в дереве шаблонов компонентов Битрикса. А если потребуется их всегда можно создать индивидуально и доработать.
Каталог получился у нас следующий.

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

Код:

        $file = CFile::ResizeImageGet($item["PREVIEW_PICTURE"]["ID"],array('width' => 200,'height' => 200), BX_RESIZE_IMAGE_EXACT, true);
        $item["PREVIEW_PICTURE"]['WIDTH'] = $file['width'];
        $item["PREVIEW_PICTURE"]['HEIGHT'] = $file['height'];
        $item["PREVIEW_PICTURE"]['SRC'] = $file['src'];

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

Код:

        <?//Включает возможность изменять элемент из публички
        $this->AddEditAction($item['ID'], $item['EDIT_LINK'], CIBlock::GetArrayByID($item["IBLOCK_ID"], "ELEMENT_EDIT"));
        $this->AddDeleteAction($item['ID'], $item['DELETE_LINK'], CIBlock::GetArrayByID($item["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('Подтверждаете удаление?')));

Здесь мы подключаем экшены к элементам каталога, чтобы была возможность изменять, добавлять и удалять элементы непосредственно из публичной части.
Ещё раз напомню все специфичные моменты для Битрикса описаны в уроке, на который я дал ссылку выше.
А далее уже приступим к детальной страницы или карточки товара, как принято называть.

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

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

Код:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>
<?
$file = CFile::ResizeImageGet($arResult["PREVIEW_PICTURE"]["ID"],array('width' => 300,'height' => 300), BX_RESIZE_IMAGE_PROPORTIONAL , true);
$arResult["PREVIEW_PICTURE"]['WIDTH'] = $file['width'];
$arResult["PREVIEW_PICTURE"]['HEIGHT'] = $file['height'];
$arResult["PREVIEW_PICTURE"]['SRC'] = $file['src'];

$file = CFile::ResizeImageGet($arResult["PREVIEW_PICTURE"]["ID"],array('width' => 100,'height' => 100), BX_RESIZE_IMAGE_PROPORTIONAL , true);
$arResult["PREVIEW_PICTURE_MIN"]['WIDTH'] = $file['width'];
$arResult["PREVIEW_PICTURE_MIN"]['HEIGHT'] = $file['height'];
$arResult["PREVIEW_PICTURE_MIN"]['SRC'] = $file['src'];

//pr($arResult);
?>
<!-- SECTION -->
<div class="section">
    <!-- container -->
    <div class="container">
        <!-- row -->
        <div class="row">
            <!-- Product main img -->
            <div class="col-md-6">
                <div id="product-main-img">
                    <div class="product-preview">
                        <img src="<?=$arResult['PREVIEW_PICTURE']['SRC']?>" alt="">
                    </div>
                </div>
            </div>
            <!-- /Product main img -->

            <!-- Product details -->
            <div class="col-md-6">
                <div class="product-details">
                    <h2 class="product-name"><?=$arResult["NAME"]?></h2>
                    <div>
                        <div class="product-rating">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                        </div>
                        <a class="review-link" href="#">10 Review(s) | Add your review</a>
                    </div>
                    <div>
                        <h3 class="product-price"><?=$arResult['PROPERTIES']['PRICE']['VALUE']?></h3>
                        <span class="product-available">In Stock</span>
                    </div>
                    <p><?=$arResult["FIELDS"]["PREVIEW_TEXT"]?></p>

                    <div class="product-options">
                        <label>
                            Size
                            <select class="input-select">
                                <option value="0">X</option>
                            </select>
                        </label>
                        <label>
                            Color
                            <select class="input-select">
                                <option value="0">Red</option>
                            </select>
                        </label>
                    </div>

                    <div class="add-to-cart">
                        <div class="qty-label">
                            Qty
                            <div class="input-number">
                                <input type="number">
                                <span class="qty-up">+</span>
                                <span class="qty-down">-</span>
                            </div>
                        </div>
                        <button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i>Купить</button>
                    </div>
                </div>
            </div>
            <!-- /Product details -->

            <!-- Product tab -->
            <div class="col-md-12">
                <div id="product-tab">
                    <!-- product tab nav -->
                    <ul class="tab-nav">
                        <li class="active"><a data-toggle="tab" href="#tab1">Описание</a></li>
                        <li><a data-toggle="tab" href="#tab2">Характеристики</a></li>
                    </ul>
                    <!-- /product tab nav -->

                    <!-- product tab content -->
                    <div class="tab-content">
                        <!-- tab1  -->
                        <div id="tab1" class="tab-pane fade in active">
                            <div class="row">
                                <div class="col-md-12">
                                    <p><?=$arResult["PREVIEW_TEXT"]?></p>
                                </div>
                            </div>
                        </div>
                        <!-- /tab1  -->

                        <!-- tab2  -->
                        <div id="tab2" class="tab-pane fade in">
                            <div class="row">
                                <div class="col-md-12">
                                    <p><?=$arResult["DETAIL_TEXT"]?></p>
                                </div>
                            </div>
                        </div>
                        <!-- /tab2  -->
                    </div>
                    <!-- /product tab content  -->
                </div>
            </div>
            <!-- /product tab -->
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->
</div>
<!-- /SECTION -->

Подробнее создание детальной страницы я описывал в одном из предыдущих уроков Урок 8. Создание детальной страницы товара в Битрикс.
Результат на скрине.

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

Исходные HTML фалы: electro.zip
Созданный шаблон для Битрикс: template-electro.zip
Полностью папка local (все сразу): local-electro.zip
Результат можно посмотреть здесь Магазин StartShop.

От автора:
В этой статье я рассмотрел,
как создаются шаблоны Битрикс. Тема эта, наверное, самая востребованная. В следующих
статьях я хочу тоже самое проделать для wordpress, чтобы понять, как происходит
создание шаблона там и сравнить с Битрикс. Так что подписывайтесь, чтобы не
пропустить думаю будет интересно, особенно тем, кто кроме Битрикса с другими
движками не работал. До новых встреч.

Источник

Видео урок по Создание HTML шаблона в 1С Битрикс, это четвертое видео из серии уроков «Интеграция шаблона в систему 1С Битрикс».

В видео мы с Вами разберем:

Как перенести готовую верстку HTML шаблона в Битрикс
Подключим скрипты и перенесем структуру сайта в битрикс
Подключим языковые файлы и проверим, как это работает
Разберем часто встречающие ошибки

Создаем шаблон через административный раздел

Мы не будем использовать текущий установленный шаблон из маркеплейса, а создадим свой с нуля на примере того что есть сейчас. Для этого перейдем в административную часть сайта, Настройки, Настройки продуктов, выбираем Шаблоны сайтов. Добавляем новый шаблон.

Задаем основные настройки шаблона, ID пропишем «lendtv», в поле название «Лендинг», в описании прописываем «Наш шаблон лендинга», порядок указываем «1», Тип оставляем по умолчанию «Шаблон сайта». Спускаемся ниже.

В данное поле, нам нужно вставить код нашей HTML страницы, который будет разделен макросом #WORK_AREA#, верхняя часть у нас пойдем в header.php, а нижняя часть после макроса в файл footer.php.

Открываем нашу страницу верстки HTML шаблона в редакторе, выделяем код, копируем и вставляем в нашу форму. Мы с Вами условились, что все рабочие блоки отнесем в header. Для этого спускаемся до закрытия секции </section><!— /#contact-page —>. Ставим курсор между section и footer, жмем #WORK_AREA#, добавился маркер.

При помощи вставки данного маркера система Битрикс создаст автоматически файлы header.php и footer.php с размещенным в них нашим кодом. Вкладку «Стили сайта» оставляем пустой, в «Стили шаблона» копируем наш основной код стилей из файла style.css, и сохраняемся.

Далее все работы будем проводить через FTP.

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

Пропишем код проверки

Для примера откроем наш установленный шаблон из маркеплейса и скопируем код для проверки константы «B_PROLOG_INCLUDED», эта константа запрещает запуск данного файла без подключения ядра Битрикс.

if(!defined(‘B_PROLOG_INCLUDED’) || B_PROLOG_INCLUDED !== true) die(); // проверка

Подключение перевода

Подключаем ленговские файлы, отвечающие за перевод нашего шаблона. Вставляем данный код.

IncludeTemplateLangFile(__FILE__); // перевод файлов

Пример:

<?
if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)	die(); // проверка
IncludeTemplateLangFile(__FILE__); // перевод файлов
?>

Подключаем скрипты

Затем, чтобы отображались наши мето-данные, мы задействуем метод «ShowHead», он выведет наши мета данные страниц, а также подключит скрипты из шаблона. Заменяем <meta charset=»UTF-8″> на вызов метода.

<html lang="en-US">

$APPLICATION->ShowHead(); // подключения скриптов со страницы шаблона

<?$APPLICATION->ShowHead(); // подключения скриптов со страницы шаблона?>

Подключение title

Следующим этапом подключаем title при помощи метода «ShowTitle».

$APPLICATION->ShowTitle(); // вывод title

<title><?$APPLICATION->ShowTitle();?></title>

Подключение директорий файлов

Затем укажем путь к нашим файлам при помощи константы «SITE_TEMPLATE_PATH», она помогает определить директорию, где они находятся.

<?=SITE_TEMPLATE_PATH?> // путь к директории шаблона (обязательно поставить флешь в конце).

<!--[if lt IE 9]>
	<script src="<?=SITE_TEMPLATE_PATH?>/js/html5shiv.js"></script>
	<script src="<?=SITE_TEMPLATE_PATH?>/js/respond.js"></script>
<![endif]-->

Вставляем константу к нашим стилям шаблона и обязательно за ней, вставляем флешь. У файла style.css мы код перенесли в templates_styles.css поэтому, он нам не нужен, и можем его удалить.

Укажем данную константу по всему шаблону у подключаемых файлов скриптов, стилей, картинок. Поместим favicon в основную директорию шаблона, заменим в атрибуте type=»png» на x-icon и укажем расширение файла .ico.

<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="<?=SITE_TEMPLATE_PATH?>/favicon.ico">

При помощи данного сервиса
http://www.tools.dynamicdrive.com/favicon/ преобразуем ее в наше расширение и зальем в основную директорию, а favicon.png удалим.

Не забываем в footer.php прописать подключение файлов к текущему шаблону.

<?
if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)	die(); // проверка
IncludeTemplateLangFile(__FILE__); // перевод файлов
?>
	<footer class="footer">
		<div class="container">
			<div class="row">
				<div class="col-sm-12 text-center">
					<p>&copy; 2017 <strong><a href="#"><?=GetMessage('COPY_DWS')?></a></strong>. <?=GetMessage('COPY_RIGHTS')?> <strong><a href="#" >Dwstroy.ru</a></strong></p>
				</div>
			</div>
		</div>
	</footer><!-- /.footer -->

	<!-- JS -->
	<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery.min.js"></script><!-- jQuery -->
	<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/bootstrap.min.js"></script><!-- Bootstrap -->
	<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/s/countdown.js"></script><!-- Countdown -->
	<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery.ajaxchimp.js"></script><!-- ajaxchimp -->
	<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/scripts.js"></script><!-- Scripts -->

</body>
</html>

Подключение административной панели

Далее сразу за тегом body, подключаем административную панель при помощи метода «ShowPanel».

$APPLICATION->ShowPanel();//панель админки

<?$APPLICATION->ShowPanel();//панель админки?>

Выносим языковое фразы

Теперь вынесем языковые файлы, которые будем подключать без компонентов, то есть напрямую через шаблон. Для этого создадим соответствующею директорию, где они будут храниться. Создаем папку lang, в ней поддиректории ru и en.

Открываем директорию ru и создаем в ней файл, с которого будем выносить языковые фразы, пишем header.php. В основном шаблоне смотрим, что нам нужно вынести в ленговские файлы. Возьмем из header.php шаблона заголовки наших блоков, открываем leng, формируем массив с первой нашей фразой «В настоящее время мы работаем над удивительным проектом» с ключом «WORKING_PROJECT», а в header.php пропишем вместо фразы функцию «GetMessage» с нашим ключом «WORKING_PROJECT».

Далее вынесем «Характеристика», прописываем массив с ключом «CHARACTERISTIC» и вставляем функцию «GetMessage» где передаем параметр данного ключа.

Затем заменим заголовок «Контакт», создаем массив с ключом «CONTACT», и меняем заголовок на функцию с нашим ключом.

<?
$MESS['WORKING_PROJECT'] = "В настоящее время мы работаем над удивительным проектом";
$MESS['CHARACTERISTIC'] = "Характеристика";
$MESS['ABOUT_US'] = "О нас";
$MESS['CONTACT'] = "Связаться";
?>

<?=GetMessage('WORKING_PROJECT')?>
<?=GetMessage('CHARACTERISTIC')?>
<?=GetMessage('ABOUT_US')?>
<?=GetMessage('CONTACT')?>

Добавляем фразы в footer.php

Переходим в footer, тут можно вывести данный блок как есть через включаемую область, но для примера давайте вынесем эти фразы в Leng. Переходим в директорию ru и создаем новый файл с названием, у которого будем выносить фразы, пишем footer.php. В нем создаем массив с нашей фразой «ДАЛЬВЕБСТРОЙ» с ключом «COPY_DWS» и вставляем функцию «GetMessage» в основной файл с нашим параметром ключа.

<?
$MESS['COPY_DWS'] = "ДАЛЬВЕБСТРОЙ";
$MESS['COPY_RIGHTS'] = "Все Права Защищены. Разработанный";
?>
<?=GetMessage('COPY_DWS')?>
<?=GetMessage('COPY_RIGHTS')?>

Английская версия языковых файлов

Для английской версии, нам нужно создать в директории en соответствующие файлы с такими же массивами только с английским переводом.

Копируем массив из файла header, переходим в нашу директорию en, создаем файл header.php, вставляем массив и вставляем переведенные фразы.

<?
$MESS['WORKING_PROJECT'] = "We are currently working on an amazing project";
$MESS['CHARACTERISTIC'] = "Characteristic";
$MESS['ABOUT_US'] = "About us";
$MESS['CONTACT'] = "Contact";
?>

Тоже проделаем с footer, копируем массив, переходим в директорию en, и создаем файл footer.php в который вставляем наш массив и переводим фразы.

<?
$MESS['COPY_DWS'] = "DALVEBSTROY";
$MESS['COPY_RIGHTS'] = "All rights reserved. Designed";
?>

Включим шаблон в настройках сайта

Перейдем в административный раздел, Настройки продукта, Cайты, Список сайтов, открываем текущий сайт, спускаемся в самый низ и в Шаблонах укажем наш созданный шаблон «Лендинг», сохраняемся.

Переходим в визуальную часть и смотрим, что у нас получилось.

Шаблон загрузился, но нет основной картинки. Скорей всего это связано с тем что ранне файл стилей находился в папку styles, но мы его переместили на директорию выше в файл template_styles.css тем самым путь к нему изменился, и для нормального отображения картинки нам нужно откорректировать данный файл.

Спускаемся ниже, видим, что в footer не отображается копирайт, и я это намеренно сделал, что бы показать, часто встречающую ошибку.

Давайте это поправим, перейдем в наш шаблон, откроем template_styles.css, находим код для вывода картинки, убираем [../], так как текущий файл находится в основной директории шаблона. Сохранимся, перейдем на сайт и посмотрим отображение. Видим, появилась иконка загрузки и картинка слайдера.

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

<?
if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); // проверка
IncludeTemplateLangFile(__FILE__); // языки
?>

Обновляем главную страницу, спускаем вниз, и у нас все нормально выводится. Давайте проверим английскую версию наших заголовков, для этого в настройках шаблона меняем язык на Английский и сохраняемся. Переходим в визуальную часть и все заголовки, которые мы выносили отдельно в leng файлы изменились.

Резюмирую:

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

Если из основного шаблона меняем путь файла style.css, тогда изменяем этот путь в самом коде, так как относительно данного файла картинки будут находиться в другой директории.

Прописывая путь, с помощью константы «SITE_TEMPLATE_PATH», не забывайте ставить в конце ее флешь.

На этом урок по Установке HTML заканчиваю, в следующих видео будем выводить некоторые блоки в отдельные включаемые области. С программируем компоненты, форму и так далее.

Оставить комментарий:

Источник

На прошлом уроке мы создали папку с темой. Подключили футер и хедер. А контент, папка index.php (главный файл), остался без изменений. Напомню, что футер и хедер подключаются идентично, из активной темы.

Продолжим. Переносим шаблон в корень сайта.

Шаг 1: Разбивка макета на элементы

Заходим в макет и открываем следующие папки.

Из файла index.html следует скопировать код полностью и перенести в index.php вместо «контент» (5строка). В дальнейшей работе index.html не понадобится — закрываем.

Подготовим футер и хедер. Из файла header.php удаляется 5 строка – «Хедер!»; из fоoter.php — 4 строка, «Футер». После обновления шаблон выглядит как на слайде.

Так как ничего не подключено (стили, скрипты), страница получила такое оформление.

Рассмотрим шаблон более детально. Откроем исходный код: левой кнопкой мышки — выпадающее меню «исследовать объект». Выводится код шаблона из трех элементов: футер, хедер и контент.

Первоочередная задача – разбить макет правильно и разнести соответствующие фрагменты кода шаблона по нужным файлам. Код можно копировать через вкладку «исследовать объект» или работать в index.php, куда ранее был скопирован код шаблона.

Обращаю внимание, что хедер часто содержит картинки и видео. Следует убедиться, что элемент скопирован полностью. В данном шаблоне копируем код с 7 до 90 строчки включительно. Переносим информацию в файл header.php, из файла index.php удаляем.

Аналогично переносим код в файл fоoter.php – копируем с 68 по 96 строку включительно. Из index.php вырезаем ненужный фрагмент. Сохраняем все изменения. На странице видимых изменений не произойдет, а значит все подключено правильно.

Футер и хедер закрываем. Эти элементы едины для всех страниц – будут выглядеть одинаково на каждой странице.

Шаг 2: Выводим Title

На начальном этапе title выводится из шаблона, а должен — из CMS.

Редактируем код, начиная с 13 строке. Открываем php без эхо, так как объект APPLICATION в любом случае будет выводиться.

Вызываем ShowTitle у объекта APPLICATION – и проверяем результат.

<title><?php $APPLICATION->ShowTitle(); ?></title>

Шаг 3: Подключаем стили

Редактируем код с 14 строчки по 18-ю до строчки 19 – «/head».

Открываем php код, прописываем addCss. Чтобы не писать постоянство имен для каждого стиля, импортируем путь при помощи метода use. То есть параметру переданному методу прописываем путь к скрипту. Также прописывается константа SITE_TEMPLATE_PATH, которая возвращает путь к активному шаблону, чтобы Битрикс понимал, что и где лежит. И добавляем путь к стилю. В данном случае используется 4 стиля – копируем код и прописываем соответствующий путь. Не забываем поставить итоговый слеш. Код, обозначенный синим маркером, после редактирования следует удалить.

Ниже готовая подсказка. Замените содержимое строк 14-18 готовым кодом ниже.

<?php 
       use BitrixMainPageAsset;
    ?>
    
    <title><?php $APPLICATION->ShowTitle(); ?></title>
    
    <?php 
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/normalize.css");
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/owl.carousel.min.css");
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/main.css");
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/responsive.css");
    ?>

Также следует перенести содержимое темы (видео, картинки и т.д) в папку teh.

Шаг 4: Адаптируем под мобильные устройства

Выводим meta name=veiwport – метатег, позволяющий контролировать видимую область сайт для мобильных браузеров. Простым языком: позволяют приспособить сайт для удобного просмотра при помощи мобильного телефона и других гаджетов с разным разрешением экрана.

10-12 строки удаляются. Отредактированный код вставляем после шрифтов. Также используем метод Asset но вместо addCss пописываем addString — выводит произвольный код, произвольную строчку, скрипты. Копируем код макета. Вторая строка для Интернет-Экспл.

<?php 
        Asset::getInstance()->addString('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">');
        Asset::getInstance()->addString('<meta http-equiv="X-UA-Compatible" content="ie=edge">');
?>

Таким же способом подключаются шрифты Google Fonts. В скобках ставится Google Fonts и прописывается ссылка. Напоминаю, что двойные кавычки главнее одинарных.

Команда APPLICATIOH — Show – выводит все шрифты, стили, скрипты. Метод обязателен, иначе на странице ничего не появится.

Шаг 5: Подключаем скрипты

    <?php 
       use BitrixMainPageAsset;
       $APPLICATION->ShowHead();
    ?>

Часть скриптов находится в футере. Из хедера копируем код, при помощи которого подключались стили. Находим исходный код скриптов, вставляем ниже. Прописываем команду Js (красный маркер), копируем ссылку из кода выше. Первоначальный фрагмент шаблона со скриптами можно удалить.

Обязательно команда APPLICATIOH – Show (зеленый маркер), так как в данном случае скрипты находятся в футере и хедере, хотя обычно подключаются из футера.

Чтобы получить прокрутку, можно добавить больше картинок в файл index.php.

Шаг 6: Как вывести изображение и подключить логотип

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

<?=SITE_TEMPLATE_PATH;?>/

Также выводим изображения в футере и логотип.

Шаг 7: Как отобразить видео

Видео находится в хедере – 92 строка. Путь прописан настолько нестандартно, что даже у опытных пользователей могут возникнуть серьезные затруднения. Константа вставляется после двоеточия.

Шаг 8: Подключение рабочей панели Битрикс

Конечно, можно войти в админку Битрикс, но пропишем в коде. За подключение панели отвечает метод APPLICATIOH – Show Panel. Вставим код после «body»-32 строка.

<div id="#panel"><?php $APPLICATION->ShowPanel();?></div>

После обновления появится окно для входа администратора. Переходим по вкладке «Сайт» — рабочая панель появилась.

Еще раз о необычных методах Битрикс. На первый взгляд исходный способ подключения стилей, шрифтов и скриптов намного проще и понятнее. Но Битрикс «просит» специальный код и все объединяет в один документ. Как указано в документации, такой способ позволяет загружать сайт намного быстрее.

Чтобы окончательно разобраться в принципе работы Битрикс, рассмотрим код страницы через google. Копируем адрес сайта, заходим через Гугл, в выпадающем меню левой кнопки мышки выбираем «просмотреть код страницы».

Нет подключений к нескольким стилям по одному файлу для каждого вида элементов. Если перейти по ссылке, мы увидим как все стили сбиты в кучу, нет привычного разделения. То есть Битрикс не обращается к нескольким файлам, а использует только один.

Для правок такая оптимизация достаточно неудобная. На рабочей панели во вкладке «Настройки» — «настройка модулей» есть возможность отключить объединение элементов в один документ.

На момент разработки можно оставить разделение. Так как править и искать стили достаточно проблематично. После изменения настроек мы увидим все стили отдельно.

Шаг 9: Отключаем кеширование

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

Во время разработки сайта будет много изменений, так кеш не будет накапливаться.

Шаг 10: Как создавать страницы и разделы

На админпанели Битрикс перейти на вкладку «Сайт» — «Создать страницу», в выпадающем меню выбираем соответствующий пункт. В появившемся окне вводится имя страницы. Зеленым обозначено имя файла этой страницы в корне сайта через Файлзилла.

Нажимаем «Далее», в следующем окне ничего не заполняем и кликаем «Готово». Откроется окно редактирования страницы.

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

По идентичному алгоритму создается новый раздел. В описание раздела ничего не меняем, остается стандартный текс. В зеленой рамке имя папки в Битрикс (прописывается автоматически).

Соответствующий файл и папку теперь можно найти в корне сайта через FileZilla.

Смотрим код страницы.

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

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

Источник

Шаблоны в Битрикс. Создание, изменение и удаление

После установки системы управления сайтом 1С-Битрикс необходимо выполнить настройку системы. Первым делом — настроить дизайн сайта. Для этого нужно сделать шаблон дизайна и назначить его на все страницы или определённую папку. Разберём подробнее.

Шаблон — это дизайн обрамления страниц сайта. Один шаблон может использоваться для отображения множества страниц. Можно провести грубую аналогию: если картина — это страница сайта, то рамка картины — это её шаблон.

Шаблон сайта на Битриксе

Войдите в панель администрирования. В боковом меню выберите пункт «Настройки». Затем кликните на подпункт «Настройки продукта», затем на «Шаблоны сайтов»:

Откроется страница, на которой будут перечислены все шаблоны сайтов, которые есть в системе:

Если необходимо добавить новый шаблон, то кликните на зелёную кнопку «Добавить шаблон». Если нужно изменить или удалить существующий шаблон, то кликните на кнопку опций, сбоку строки шаблона:

На открывшейся странице изменения шаблона необходимо указать ID (только латинские символы без пробелов), название и небольшое описание шаблона.

Рассмотрим подробнее строение шаблона битрикса, которое находится внутри блока под названием «Внешний вид шаблона сайта (рабочую область заменить #WORK_AREA#)«. В этом поле стоит подобный шаблон:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();?>
<!DOCTYPE html>
<html>
   <head>
      <title><?$APPLICATION->ShowTitle();?></title>
   </head>
   <body>
      #WORK_AREA#
   </body>
</html>

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

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

В примере указана фраза #WORK_AREA# внутри шаблона. Вместо этой фразы будет вставляться содержание страницы. Если в редакторе, в поле редактирования шаблона, не указать эту фразу, то система не даст сохранить изменения в шаблоне.

При сохранении шаблона битрикса происходит следующее: код, который был записан в поле «Внешний вид шаблона…» будет разделён на две части. Разделителем будет фраза #WORK_AREA#. Первая часть называется хидером (шапкой) сайта и записывается в файл, который находится по адресу /bitrix/templates/id_шаблона/header.php. Вторая часть, которая стояла после фразы #WORK_AREA#, называется футером (подвалом) сайта, будет сохранена в файл /bitrix/templates/id_шаблона/footer.php. Вы можете самостоятельно исправлять содержимое этих файлов не используя административную панель битрикса, делая это через sFTP.

Рекомендуем ознакомиться со статьями. описывающими редакторы файлов на сервере: «Средство разработки: Notepad++» или «Средство разработки: Atom»

Установить шаблон для страницы

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

Для задания страницам сайта шаблона зайдите в панель администрирования, кликните на пункт «Настройки» в боковом меню. Затем кликните на пункт «Настройки продукта», потому на «Сайты». Кликните на пункт «Список сайтов»:

Откроется страница, на которой будут перечислены все сайты, которые есть в системе:

Если необходимо добавить новый сайт, то кликните на зелёную кнопку «Добавить сайт». Если нужно изменить или удалить существующий сайт, то кликните на кнопку опций, сбоку строки нужного сайта:

Прокрутите страницу в самый низ и найдите блок «Шаблон сайта». В этом блоке необходимо выбрать условия применения шаблонов к страницам сайта:

Если выбрать опцию [без условия], то выбранный шаблон будет показываться на всех страницах сайта.

Обратите внимание, что этот список применяемых шаблонов работает по такому принципу: условия будут проверяться на «истину», и будет показан первый шаблон и того условия, которое вернёт истину. Поэтому для изменения приоритетов есть поле «Сорт.». Условия проверяются по возрастанию значения этого поля.

Была ли эта статья полезна?

Есть вопрос?

Закажите недорогой хостинг

Заказать

всего от 290 руб

Источник

Раньше настройки были разбросаны по всему разделу, теперь мы собрали их на одном слайдере. Изменяйте дизайн, редактируйте блоки, настраивайте аналитику — всё это на одной странице и за пару кликов.

Теперь вы потратите гораздо меньше времени и усилий на создание красивого и функционального сайта.

Перейдите в раздел Сайты и Магазины. Далее откройте сайт, который вы хотите отредактировать.

Чтобы перейти к настройкам, нажмите на шестерёнку в панели Возможности сайта.

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

Откроется общий слайдер настроек сайта и страниц.

Настройки и дизайн страницы приоритетнее настроек и дизайна сайта.

Например, если во вкладке Дизайн сайта вы выбрали жёлтый, как основной цвет сайта, а на вкладке Дизайн страницы зелёный, то в итоге элементы на странице будут зелёного цвета.

Настройки сайта

Первая вкладка в общем слайдере настроек — это Настройки сайта. Здесь можно изменить адрес сайта или добавить свой HTML/CSS код.

Адрес сайта — укажите, по какому адресу будет доступен ваш сайт. Также вы можете подключить свой домен.

Виджет на сайт — выберите, с помощью какого виджета клиенты смогут с вами связаться.

Цвет виджета — вы можете использовать основной цвет сайта, цвет из настроек или добавить свой цвет.

Кнопка «Вверх» — позволяет быстро перейти к самому началу страницы. Очень полезный инструмент для работы с длинными страницами.

Главная страница — выберите главную страницу для вашего сайта.

После того как вы настроили основные параметры, можно перейти к Дополнительным настройкам.

Favicon — картинка, которая показывается на закладке браузера. Допустимо использование изображений только в формате .PNG.

Подтверждение прав — укажите необходимые мета-теги для подтверждения прав на сайт при подключении к Google Search Console и Яндекс.Вебмастеру.

Аналитика — для сайта очень важно вести статистику, чтобы контролировать его популярность и эффективность. Вставьте в данном поле идентификатор счетчика Яндекс, Google Analytics либо Google Tag Manager, чтобы фиксировать статистику посещений страниц.

Подключение Яндекс.Метрики, Google Tag Manager и Google Analytics доступно только на коммерческих тарифах.

Размещение пикселя — пиксель ВКонтакте используются для отслеживания конверсии вашего сайта.

Подробнее читайте в статье Добавление пикселя ВКонтакте.

Ключи карт — укажите ключи API Google Maps и Яндекс.Карты, чтобы добавить на сайт расположение вашей компании.

Подробнее читайте в статье Карты на сайтах Битрикс24.

Тип представления — позволяет выбрать вид отступов для страниц.

Шаблон сайта — если вы хотите, чтобы на страницах были включены дополнительные области, то вы можете настроить их тут.

Язык сайта — вы можете выбрать язык для некоторых элементов сайта. Например, веб-формы, кнопки магазина в заказе, подпись «Заряжено Битрикс24» и так далее.

Ошибка 404 — что увидят ваши пользователи, если страница будет недоступна. По умолчанию, сайт имеет стандартную страницу для 404-й ошибки. Но вы можете выбрать свою из любой страницы сайта.

Настройки robots.txt — здесь можно задать текст файла для индексирования сайта роботами поисковых систем.

Более подробно о данном файле вы можете прочитать в документации Яндекс и Google.

Ускорение сайта — при включенной опции оптимизируются CSS и JS таким образом, чтобы они подгружались по мере загрузки страницы. Это одно из условий Google PageSpeed Insights для ускорения загрузки сайтов.

Пользовательский HTML — вы можете вставить произвольный html-код для всех страниц сайта внутри тега HEAD например, код статистики, мета-теги подтверждения и так далее.

Пользовательский CSS — это произвольный CSS-код для всех страниц сайта, например, для подключения своих шрифтов или стилей оформления блоков.

Опции Пользовательский HTML и Пользовательский CSS доступны только на коммерческих тарифах.

Временно отключить сайт — вы можете временно отключить свой сайт и показывать определенную страницу, пока сайт отключен.

Обработка Cookie-файлов — эта опция позволяет включить предупреждение о том, какая персональная информация собирается посредством cookie-файлов на вашем сайте. А также настроить, какие cookie будут хранить информацию о пользователе.

Подробнее читайте в статье Управление cookie-файлами.

Подпись «Заряжено Битрикс24» – на коммерческих тарифах можно убрать эту подпись внизу вашего сайта.

Дизайн сайта и страницы

Дизайн сайта можно настроить во второй вкладке, а страницы — в последней. Настройки одинаковы как для сайта, так и для страниц.

Цветовая палитра — изменяет цвет кнопок и некоторых других элементов в зависимости от блока.

Настройки текста — включают в себя настройку цвета, шрифта и размера текста и заголовков. А также вы можете настроить насыщенность текста и междустрочное расстояние.

Фон — изменяет фон текущей страницы.

Настройка страницы

Настройки для страниц очень схожи с настройками самого сайта.

Адрес страницы — для страницы можно указать свой адрес.

Вид страницы в соцсетях — укажите, в каком виде будет отображаться эта страница при добавлении ссылки на страницу в соцсетях.

Также есть дополнительные настройки.

Мета-теги страницы — теги, используемые для лучшего индексирования поисковиками. Они формируются автоматически, но вы можете добавить и собственные.

Тип представления — позволяет выбрать вид отступов для страниц.

Шаблон страницы — если вы хотите, чтобы на страницах были включены дополнительные области, то вы можете их настроить тут.

Аналитика — для сайта очень важно вести статистику, чтобы контролировать его популярность и эффективность. Вставьте в данном поле идентификатор счетчика Яндекс, Google Analytics либо Google Tag Manager, чтобы фиксировать статистику посещений страниц.

Подключение Яндекс.Метрики, Google Tag Manager и Google Analytics доступно только на коммерческих тарифах.

Размещение пикселя — пиксель ВКонтакте используются для отслеживания конверсии вашего сайта.

Подробнее читайте в статье Добавление пикселя ВКонтакте.

Индексация в поисковых системах — если данная опция будет выключена, посещаемость вашего сайта может снизиться.

Пользовательский HTML и CSS — для страниц сайта вы можете добавлять свой собственный HTML и CSS. Ваш сайт сможет отлично работать и без кода, но если вам нужны специфические функции и элементы дизайна, то это можно настроить здесь. HTML-код вставляется сразу после открывающего тега HEAD. Это может быть, например, код статистики для конкретной страницы.

Опции Пользовательский HTML и Пользовательский CSS доступны только на коммерческих тарифах.

Карта сайта — посмотреть карту сайта можно по адресу адрес сайта/sitemap.xml, если вы, включали в неё какие-то страницы.

Подробнее читайте в статье Карта сайта – sitemap.xml.

Данные о наличии sitemap добавляются автоматически, при активации её в настройках сайта, также все пользовательские записи добавляются в общий robots.txt без проверки на уникальность. Поэтому рекомендуем проверять содержимое файла ваш_сайт/robots.txt на наличие дублей.

Также рекомендую прочитать:

Создание сайта в Битрикс24

Как установить счетчик Google Analytics на сайт

Как разместить контейнер Google Tag Manager на сайте

Как установить счетчик Яндекс.Метрики на сайт

Спасибо, помогло!

Спасибо

Необязательно:

Оставить отзыв о статье

Уточните, пожалуйста, почему:

Это не то, что я ищу

Очень сложно и непонятно

Оставить отзыв о статье

Источник

1. Редактирование шапки сайта (header.php)

2. Редактирование подвала сайта (footer.php)

3. Подключение шапки и подвала (index.php), добавление контента

Минуточку внимания

Решение

Создание структуры шаблона Битрикс

Верстка header.php

Вывод меню Битрикс

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

Верстка footer.php

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

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

Создаем шаблон через административный раздел

Пропишем код проверки

Подключение перевода

Подключаем скрипты

Подключение title

Подключение директорий файлов

Подключение административной панели

Выносим языковое фразы

Добавляем фразы в footer.php

Английская версия языковых файлов

Включим шаблон в настройках сайта

Переходим в визуальную часть и смотрим, что у нас получилось.

Оставить комментарий:

Шаблоны в Битрикс. Создание, изменение и удаление

Шаблон сайта на Битриксе

Установить шаблон для страницы

Настройки сайта

Дизайн сайта и страницы

Настройка страницы

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