Как создать страницу битрикс
Перейти к содержимому

Как создать страницу битрикс

  • автор:

Урок 8. Создание детальной страницы товара в Битрикс

Приветствую взявшихся изучить Битрикс! Порой CMS-Bitrix рассматривается пользователями и даже программистами, как черный ящик. Т.е. мы что-то пытаемся делать и смотрим, прокатило или нет. Есть такая беда. Но с каждым новым уроком, новым проектом «черный ящик» становится меньше приходит понимание и умение докопаться до сути проблемы. Но все равно «черный ящик» остается, и у каждого разработчика Битрикс он свой. Скажу по секрету даже у техподдержки Битрикса есть этот «черный ящик». Хватит о наболевшем, двигаемся дальше.

Детальная страница товара

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

Адаптивный каталог StartShop

Теперь же нужно создать детальную страницу (карточку товара). Изобретать велосипед мы не будем и снова обратимся к заготовкам, которые мы взяли у CSS-фреймворка Foundation. Чтобы понять в чем суть обратитесь к одному из первых уроков из этого цикла. Напомню карточка товара в шаблоне выглядит так.

Шаблон product foundation

Чтобы не искать долго исходники шаблона их можно взять отсюда.

Ну а мы вспомним предыдущие уроки и по аналогии отредактируем шаблон детальной страницы bitrix:news.detail компонента Новости. Сам шаблон компонента у нас уже скопирован, поэтому достаточно открыть на редактирование файл.

Редактирование шаблона компонента детальной страницы

Открыть шаблон на редактирование можно из публичной части, но я бы рекомендовал воспользоваться каким-либо редактором и открыть файл /www/ut11-bitrix.ru/local/templates/startshop/components/bitrix/news/catalog/bitrix/news.detail/.default/template.php . Путь я указываю относительно своего сайта, если у вас установлено веб-окружение Битрикс, как описано в Уроке 2. Установка Битрикс, то путь будет слегка другим, но по аналогии можно понять. Отталкивайтесь от папки шаблона /local/templates/startshop. Нам для работы нужен только файл template.php остальные файлы можно смело удалить. А в файле шаблона детальной страницы заменить код вывода контента следующим кодом.
Код:

Элемент не найден

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

Отладка в Битрикс и разбор проблем

Проблема первая
Если встать на карточку товара и посмотреть URL по которому нас переводит Битрикс, то можно увидеть, что путь совсем не тот, который мы ожидали увидеть.

ЧПУ детальной страницы

Это проблема с ЧПУ. Если вы помните, то в инфобллоке было настроено ЧПУ следующим образом.

ЧПУ в инфоблоке

А по факту мы получаем совсем другую ссылку. Значит мы забыли настроить ЧПУ в параметрах компонента Новости. Исправим это. Главное правило тут одно:

ЧПУ в настройках инфоблока должно совпадать с настройками ЧПУ в компонентах Битрикс

Битрикс настройка ЧПУ компонента Новости

  • Каталог ЧПУ — здесь указывается путь до папки в которой расположен компонент или путь относительно которого мы хотим строить ссылки.
  • Страница общего списка — это страница корня, у меня она совпадает с предыдущем параметром по этому оставлена пустой.
  • Страница раздела — задана в виде символьного кода раздела
  • Страница детального просмотра — задана составным полем символьный код раздела + символьный код элемента инфоблока.

Проблема вторая
Не выводится изображение. Если вы помните, то все данные вывод в шаблоне хранятся в массиве arResult. А за вывод изображения товара у нас отвечает строка:
Код:

Чтобы понять, в чем проблема выведем для отладки на экран весь массив arResult. Как вывести значение переменной я описал в FAQ Битрикс, там много вариантов и есть очень удобная функция для вывода данных с форматированием. Мы воспользуемся одном из простых вариантов, добавим в свободном месте, например, в конце всего кода такую строчку.
Код:

В итоге в конце страницы будет выведен весь массив arResult

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

Отладка Bitrix через print_r

У меня сейчас эта секция уже есть, но изначально её не было. Информации о изображении не было в массиве arResult вобще. А где заполняется массив? Правильно в компоненте. Можно конечно идти в сам файл компонента bitrix:news.detail он находится в ядре /ut11-bitrix.ru/bitrix/components/bitrix/news.detail/component.php и там искать причину. Но я уже догадался, что просто в параметрах компонента Новости не включен вывод изображений.

Параметры компонента Новости

И вот после включение вывода поля картинки для анонса в параметрах детальная страница товара выводится с изображением. Все проблемы решены.

Навигационная цепочка в Битрикс

И сразу, чтобы потом не возвращаться добавлю один важный штрих — выведу навигационную цепочку. Или хлебные крошки ещё её называют. Для вывода воспользуемся компонентом bitrix:breadcrumb, который нужно разместить в файле /startshop.ru/catalog/index.php . Можно просто скопировать приведенный ниже код, а можно вывести через визуальный редактор страницы. Никаких особенных настроек не требуется.

Вывод навигационной цепочки в Битрикс

Или вставить этот код перед кодом вызова компонента bitrix:news.
Код:

И в итоге мы получим готовую карточку товара.

Карточка товара

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

Уроки 1с-Битрикс: Как создать страницу с услугой

Уроки 1с-Битрикс: Как создать страницу с услугой

Здравствуйте в этом уроке мы с вами рассмотрим как добавить страницу с услугой на готовый сайт 1с битрикс. Демонстрацию мы будем проводить на готовом решение сайта от компании АСПРО: Медицинский центр 2.0 Первое что нам нужно сделать это залогиниться в административную панель сайта как это делается мы рассказывали в других уроках. Далее мы переходим в раздел «контент» в разделе «контент» есть еще один раздел «контент» открываем его: Как добавить и настроить услугу на сайте 1с-БитриксЗдесь у нас расположены страницы с услугами. Переходим к списку услуг кликнув мышкой. В данном случае у нас уже созданные подкатегории для услуг, то есть на сайте они выглядят у нас вот таким вот образом: Как добавить и настроить услугу на сайте 1с-БитриксЕсли мы перейдем услуги вот мы видим основные подкатегории в каждой из вот этих подкатегорий есть еще категории то есть у нас выстраивается такая иерархия: Как добавить и настроить услугу на сайте 1с-БитриксЗдесь видим у нас есть страницы уже непосредственно с услугами то есть это у нас как папка, а внутри лежат как будто бы файлы, но на самом деле это контентные страницы с услугами. Для того чтобы добавить новую услугу мы нажимаем голубую кнопочку в правой части экрана «добавить услугу» Как добавить и настроить услугу на сайте 1с-Битрикс

Страница «Услуга».

Как добавить и настроить услугу на сайте 1с-Битрикс— В поле «название» мы указываем название/имя услуги. — Поле «сортировка» дает нам возможность выставить услугу в нужном порядке. По умолчанию везде стоит 500 но мы можем поставить 1 или 2 или 3 или 10 или 20, без разницы и тогда у нас услуга в списке услуг на сайте будет идти номером 1. Например: если мы поставим здесь детская офтальмология номером 1, то она будет наверху а если номером 3 то она будет ниже. — Далее, мы можем подгрузить какие-либо файлы. Здесь указаны форматы, которые можно приложить, то есть у нас на странице с услугой будут прикреплены файлы pdf, word или какие либо еще. — Галерея, здесь можно просто щелчком мышки из диалогового окна выбрать какие нибудь картинки, либо просто их перетащить с экрана и тогда у нас будет выводиться на нашей странице с услугой дополнительная фотогалерея. — Иконка, позволяет нам указать отображения иконки в разделе. Например мы переходим сюда и видим иконки. То есть если мы в это поле загрузим иконку, она у нас будет отображаться в разделе услуг, в публичной части сайта. Как добавить и настроить услугу на сайте 1с-Битрикс

Вкладка анонс

во вкладке анонс мы можем добавить изображение для анонса. Это изображение может выводиться либо вместо иконки, о которой мы говорили выше. Сразу хочу отметить что лучше подбирать формат изображения в пикселях на такой какой он указан в базовой конфигурации сайта. Обязательно делать все изображения в одном разрешении? например 400 на 300 пикселей.

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

Как добавить и настроить услугу на сайте 1с-Битрикс

Описание для анонса. Описание для анонса у нас выводится в списке услуг. Добавляем две строчки текста. Также это описание выводится у нас на детальной странице услуги. Если же у нас есть страница услуг на которой установлен баннер, то описание для анонса будет выводиться в баннере:

Вкладка «подробно»

Как добавить и настроить услугу на сайте 1с-Битрикс

Тут мы указываем детальную картинку если таковая есть. Так же мы можем указать расположение этой картинки. Поле «детальное описание» Здесь мы вставляем детальное описание услуги. Можно добавить просто текст, а можно отформатированный.

«Связи»

Как добавить и настроить услугу на сайте 1с-Битрикс

на данной вкладке мы имеем возможность прикреплять к нашей странице с услугой какие-то дополнительные опции. Например подключить цены. Акции, если они заранее загружены на сайт. Специалистов, вопросы-ответы, другие услуги или всё и сразу.

Вкладка «баннер».

Как добавить и настроить услугу на сайте 1с-Битрикс

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

Вкладка «SEO»

Как добавить и настроить услугу на сайте 1с-Битрикс

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

Вкладка «разделы»

Здесь мы можем привязать страницу/услугу к другим разделам сайта. Например мы хотим чтобы наша услуга отображалась нескольких разделах. Зажимаем на клавиатуре кнопочку CTRL и отмечаем еще дополнительные разделы и тогда эта услуга будет отображаться во всех разделах к которым мы ее привязали. После того как все изменения сделаны мы нажимаем кнопочку «сохранить» и на этом редактирование услуги можно считать законченным.

Битрикс – как создать страницу 404

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

В корне сайта создаем страницу 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 Not Found"); $APPLICATION->IncludeComponent("bitrix:main.map", ".default", array( "CACHE_TYPE" => "A", "CACHE_TIME" => "36000000", "SET_TITLE" => "Y", "LEVEL" => "4", "COL_NUM" => "1", "SHOW_DESCRIPTION" => "N" ), false ); ? > < ?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");? >

Обратите внимание на
CHTTP::SetStatus(“404 Not Found”);
@define(“ERROR_404″,”Y”);
При помощи данного кода мы задаем статус страницы и определяем константу про ошибку ERROR_404.

Теперь займемся внешним видом страницы 404.
HTML:

 
404
Not Found

.wrap-404 < padding: 50px; color: #2f3c4e; text-align: center; >.title-404 < font-size: 200px; font-weight: bold; >.status-404

Вот таким образом, создается страница 404 в 1С-Битрикс.

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

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

Залишити відповідь Скасувати відповідь

Щоб відправити коментар вам необхідно авторизуватись.

Как создать новую страницу на Битриксе?

Нужно в этом разделе сайта создать ещё несколько страниц с брендами:

Как это сделать?

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как создать новую веб-страницу в MVC3
Здравствуйте. Заранее сорри за делетантский вопрос. По умолчанию, когда создается веб.

Как создать новую html страницу через php
Задача состоит в том, что админ заходит — называет новую страницу der например и появляется.

Не могу создать новую страницу
Доброго времени суток. Ребят, подскажите: когда я пытаюсь создать новую страницу — раздел в меню.

Нужно создать новую страницу с исходным кодом из Textarea
Есть страница, на ней один textarea и один фрейм. В textarea вручную пишем код html, нажимаем на.

Регистрация: 04.10.2015
Сообщений: 49

Лучший ответ

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

Решение

Зайти в раздел под админом, в режиме «сайт», перейти в нужный раздел, перейти в режим редактирования страницы и сверху кнопкой «Создать страницу».. или что-то не так?

P.S. Только с такими «знаниями» лучше в «редактировать и создавать» не соваться. Система не имеет — «откатов» на раз , два, три (шага), «накосячите, не вернете». только ПОЛНОЕ восстановление из бекапа. который надо сделать перед редактированием и после..

Добавлено через 15 минут
Только надо понимать, что после создания своей страницы и закрытия кнопкой. вы её «не найдете», так как она у вас никак не прописана, ни в каком меню, структуры вашего сайта. Нужно будет прописать на нее ссылку в вашем меню..

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *