Урок 8. Создание детальной страницы товара в Битрикс
Приветствую взявшихся изучить Битрикс! Порой CMS-Bitrix рассматривается пользователями и даже программистами, как черный ящик. Т.е. мы что-то пытаемся делать и смотрим, прокатило или нет. Есть такая беда. Но с каждым новым уроком, новым проектом «черный ящик» становится меньше приходит понимание и умение докопаться до сути проблемы. Но все равно «черный ящик» остается, и у каждого разработчика Битрикс он свой. Скажу по секрету даже у техподдержки Битрикса есть этот «черный ящик». Хватит о наболевшем, двигаемся дальше.
Детальная страница товара
В прошлом уроке мы доделали каталог и он стал выглядеть вполне прилично.
Теперь же нужно создать детальную страницу (карточку товара). Изобретать велосипед мы не будем и снова обратимся к заготовкам, которые мы взяли у CSS-фреймворка 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 остальные файлы можно смело удалить. А в файле шаблона детальной страницы заменить код вывода контента следующим кодом.
Код:

- По клику по картинке я не перешел на детальную страницу товара а получил сообщение, что страница не найдена.
- Не отображается картинка. (это после того, как решил первую проблему)
Отладка в Битрикс и разбор проблем
Проблема первая
Если встать на карточку товара и посмотреть URL по которому нас переводит Битрикс, то можно увидеть, что путь совсем не тот, который мы ожидали увидеть.

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

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

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


- Каталог ЧПУ — здесь указывается путь до папки в которой расположен компонент или путь относительно которого мы хотим строить ссылки.
- Страница общего списка — это страница корня, у меня она совпадает с предыдущем параметром по этому оставлена пустой.
- Страница раздела — задана в виде символьного кода раздела
- Страница детального просмотра — задана составным полем символьный код раздела + символьный код элемента инфоблока.
Проблема вторая
Не выводится изображение. Если вы помните, то все данные вывод в шаблоне хранятся в массиве arResult. А за вывод изображения товара у нас отвечает строка:
Код:
Чтобы понять, в чем проблема выведем для отладки на экран весь массив arResult. Как вывести значение переменной я описал в FAQ Битрикс, там много вариантов и есть очень удобная функция для вывода данных с форматированием. Мы воспользуемся одном из простых вариантов, добавим в свободном месте, например, в конце всего кода такую строчку.
Код:
В итоге в конце страницы будет выведен весь массив arResult
стоит его изучить, чтобы представлять какие данные в нем находятся и как их можно использовать в шаблонах. Нас интересует секция относящаяся к выводу изображения.

У меня сейчас эта секция уже есть, но изначально её не было. Информации о изображении не было в массиве 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с битрикс. Демонстрацию мы будем проводить на готовом решение сайта от компании АСПРО: Медицинский центр 2.0 Первое что нам нужно сделать это залогиниться в административную панель сайта как это делается мы рассказывали в других уроках. Далее мы переходим в раздел «контент» в разделе «контент» есть еще один раздел «контент» открываем его:
Здесь у нас расположены страницы с услугами. Переходим к списку услуг кликнув мышкой. В данном случае у нас уже созданные подкатегории для услуг, то есть на сайте они выглядят у нас вот таким вот образом:
Если мы перейдем услуги вот мы видим основные подкатегории в каждой из вот этих подкатегорий есть еще категории то есть у нас выстраивается такая иерархия:
Здесь видим у нас есть страницы уже непосредственно с услугами то есть это у нас как папка, а внутри лежат как будто бы файлы, но на самом деле это контентные страницы с услугами. Для того чтобы добавить новую услугу мы нажимаем голубую кнопочку в правой части экрана «добавить услугу» 
Страница «Услуга».
— В поле «название» мы указываем название/имя услуги. — Поле «сортировка» дает нам возможность выставить услугу в нужном порядке. По умолчанию везде стоит 500 но мы можем поставить 1 или 2 или 3 или 10 или 20, без разницы и тогда у нас услуга в списке услуг на сайте будет идти номером 1. Например: если мы поставим здесь детская офтальмология номером 1, то она будет наверху а если номером 3 то она будет ниже. — Далее, мы можем подгрузить какие-либо файлы. Здесь указаны форматы, которые можно приложить, то есть у нас на странице с услугой будут прикреплены файлы pdf, word или какие либо еще. — Галерея, здесь можно просто щелчком мышки из диалогового окна выбрать какие нибудь картинки, либо просто их перетащить с экрана и тогда у нас будет выводиться на нашей странице с услугой дополнительная фотогалерея. — Иконка, позволяет нам указать отображения иконки в разделе. Например мы переходим сюда и видим иконки. То есть если мы в это поле загрузим иконку, она у нас будет отображаться в разделе услуг, в публичной части сайта. 
Вкладка анонс
во вкладке анонс мы можем добавить изображение для анонса. Это изображение может выводиться либо вместо иконки, о которой мы говорили выше. Сразу хочу отметить что лучше подбирать формат изображения в пикселях на такой какой он указан в базовой конфигурации сайта. Обязательно делать все изображения в одном разрешении? например 400 на 300 пикселей.
В идеале лучше сразу смотреть на то, какой размер данных картинок идет в базовой комплектации сайта, и тогда они будут отображаться лучшим образом.

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

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

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

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

Здесь мы можем указать метаданные, то есть данные для поисковых роботов которые будут выводиться на странице и в сниппете поисковых систем. Например: пишем «сдать анализ крови в Москве» — это заголовок страницы. поле 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:
404Not 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 минут
Только надо понимать, что после создания своей страницы и закрытия кнопкой. вы её «не найдете», так как она у вас никак не прописана, ни в каком меню, структуры вашего сайта. Нужно будет прописать на нее ссылку в вашем меню..
