29 ноября 2017

Урок 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 остальные файлы можно смело удалить. А в файле шаблона детальной страницы заменить код вывода контента следующим кодом.
Код:

 <div class="grid-x">

	   <div class="medium-6 cell">

	     <img class="thumbnail" src="<?=$arResult['PREVIEW_PICTURE']['SRC']?>">

	     <div class="grid-x small-up-4">

	     </div>

	   </div>

	   <div class="medium-6 large-5 cell">

	     <h3><?=$arResult['NAME']?></h3>

	     <p><?=$arResult['DETAIL_TEXT']?></p>

	     <div class="grid-x">

	       <div class="small-3 cell">

	         <label for="middle-label" class="middle">Количество</label>

	       </div>

	       <div class="small-9 cell">

	         <input type="text" id="middle-label" placeholder="One fish two fish">

	       </div>

	     </div>

	     <a href="#" class="button large expanded">Купить</a>

	     </div>

	 </div>

Проверяем.

Не знаю, как у вас, но у меня возникло 2 проблемы:

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

И чтобы урок у нас получился более полезным и интересным я разберу, как решать такие проблемы, и вы научитесь разбираться сами если что-то не работает.

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

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

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

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

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

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

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

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

<img class="thumbnail" src="<?=$arResult['PREVIEW_PICTURE']['SRC']?>">

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

<pre><?print_r($arResult)?></pre>

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

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

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

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

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

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

 <?$APPLICATION->IncludeComponent(

	     "bitrix:breadcrumb",

	     "",

	     Array(

	         "PATH" => "",

	         "SITE_ID" => "s1",

	         "START_FROM" => "0"

	     )

	 );?>

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

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

В начало...

Комментарии

10.05.2018 | валентина

Можно узнать, как установить стикер "Новинка" (картинка) на товар в детальном и не только шаблоне? А именно как прописать в самом шаблоне и в стилях.

Комментировать

10.05.2018 | Администратор

Вывод Новинки можно настроить через настройку компонента (если это прописано в вашем шаблоне). Например в типовом шаблоне я показал, как настроить. В кастомных шаблонах возможно примерно так же. Если вы сами хотите программно вывести, то в шаблоне компонента /tampalate_name/components/bitrix/catalog.element/templates/.default/template.php нужно обратиться к свойству NEWPRODUCT, например так: if ($arResult['PROPERTIES']['NEWPRODUCT']['VALUE'] == 'да') { echo 'Новинка'; } И вывести информацию о новинке, текстом или картинкой.