В предыдущих уроках мы интегрировали всю вёрстку каркаса шаблона, а так же реализовали главную страницу сайта, используя компоненты 1С-Битрикс. Мы создали множество компонентом так или иначе, выводящих часть информации и дающих ссылку на новость, отзыв или какой-то иной контент. Однако сами страницы для этого контента мы не сделали, поэтому сейчас наш проект имеет множество отсутсвующих страниц.
В таких случаях следует выводить 404 ошибку "документ не найден", которую мы реализуем в 11 уроке интеграции Адаптивного Twitter Bootstrap дизайна в 1С-Битрикс.
1С-Битрикс автоматически может выводить страницу 404.php для всех ненайденных на сервере документов (такая логика заложена по умолчанию в /bitrix/urlrewrite.php), поэтому нам осталось лишь правильно оформить эту страницу! Для этого мы воспользуемся оригинальной страницей 404.html из исходной вёрстки (можно взять в 0 и 1 уроках, а так же в нашем репозитории на GitHub):
Вёрстка этого документа имеет уже привычный нам каркас шаблона и следующий код в области контента:
<div class="row block-404">
<div class="span8">
<img src="img/404.png" alt="">
</div>
<div class="span4">
<h1>Sorry!</h1>
<h4>404 page not found</h4>
<p class="p3">The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
Please try using our search box below to look for information on the website
<form id="form-search" action="search.php" method="GET" accept-charset="utf-8" class="form-404" >
<div class="clearfix">
<input type="text" name="s" onBlur="if(this.value=='') this.value=''" onFocus="if(this.value =='' ) this.value=''" >
<a href="#" onClick="document.getElementById('form-search').submit()" class="btn btn_ btn-small_">search</a>
</div>
</form>
</div>
</div>Обратим внимание, что с точки зрения 1С-Битрикс 404.php может быть обычной страницей с небольшой добавкой в заголовок (перед вызовом headre.php шаблона сайта):
include_once($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/urlrewrite.php');
CHTTP::SetStatus("404 Not Found");
@define("ERROR_404","Y");Таким образом задаётся заголовок ответа сервера.
- Для обычный страниц он 200
- Для страниц "документ не найден" правильный заголовок - 404 (потому такие страницы и называются "ошибка 404")
Теперь добавим код исходной вёрстки в контентную область страницы, не забыв про руссификацию.
В частности, картинка с грусным смайликом находится вместе со всеми картинками шаблона в /bitrix/template/stylish/images/.
Создадим там папку 404, переместим туда эту картинку (переименовав) и создадим рядом руссифицированную копию. Мы сделаем это на всякий случай (если кто-то захочет использовать англоязычную картинку), но вы можете просто заменить уже имеющееся изображение.
Так же не забудем про ЗАГОЛОВОК (title) страницы, значение которого задаётся в свойствах:
Или привычной нам функцией установки заголовка страницы:
$APPLICATION->SetTitle("404 - Страница не найдена!");
Форма поиска
Единственный динамический компонент на нашей 404 странице - форма поиска, которая заметно отличается от той, что мы используем в шапке.
Воспользуемся компонентом bitrix:search.form и скопируем шаблон компонента .default в шаблон сайта, переименовав в stylish (форма выглядит довольно универсальной, возможно мы воспользуемся ею ещё где-то).
Удалим все лишние файлы (.parameters.php и его языковые файлы).
Теперь в файле /bitrix/templates/stylish/components/bitrix/search.form/stylish/template.php код шаблона компонента (минимально кастомизировав имеющийся шаблон под нашу вёрстку):
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<form class="form-404" id="form-search" action="<?=$arResult["FORM_ACTION"]?>">
<div class="clearfix">
<input type="text" name="q" value="" size="15" maxlength="50" />
<a href="#" onClick="document.getElementById('form-search').submit()" class="btn btn_ btn-small_"><?=GetMessage("BSF_T_SEARCH_BUTTON");?></a>
</div>
</form>Тогда компонент можно будет вызвать на странице:
<?$APPLICATION->IncludeComponent("bitrix:search.form", "stylish", Array(
"PAGE" => "#SITE_DIR#search/index.php", // Страница выдачи результатов поиска (доступен макрос #SITE_DIR#)
),
false
);?>
Заключение
В результате код страницы 404.php будет выглядеть:
<? include_once($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/urlrewrite.php');
CHTTP::SetStatus("404 Not Found");
@define("ERROR_404","Y");
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("404 - Страница не найдена!");
?>
<div class="row block-404">
<div class="span8">
<img src="/bitrix/templates/stylish/img/404/404_ru.png" alt="">
</div>
<div class="span4">
<h1>ОЙ!</h1>
<h4>404 - страница не найдена</h4>
<p class="p3">Страница, которую вы ищете, возможно, была удалена, переименована, или она временно недоступна.</p>
Пожалуйста попробуйте воспользоваться поиском по сайту
<?$APPLICATION->IncludeComponent("bitrix:search.form", "stylish", array(
"PAGE" => "#SITE_DIR#search/index.php"
),
false
);?>
</div>
</div>
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>Это один из самых простых (и тем не менее один из самых полезных) наших уроков по реализации адаптивной Bootstrap вёрстки в 1С-Битрикс:
В частности, SEO оптимизаторы будут нам очень благодарны за хорошую и удобную страницу 404, корректно объясняющую поисковым системам когда те попадают на несуществующую страницу или документ.
В будущем вы можете сделать эту страницу более привлекательной, разместив на ней галерею каких-то потенциально полезных товаров или услуг с помощью компонентов вывода информации из инфоблока, поскольку 404.php в архитектуре 1С-Битрикс - ОБЫЧНАЯ СТРАНИЦА!
Результаты урока как всегда можно найти в .
