Меню

1С УПРАВЛЕНИЕ ТОРГОВЛЕЙ И ИНТЕРНЕТ-МАГАЗИН БИТРИКС

29 Ноября 2017

Урок 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 остальные файлы можно смело удалить. А в файле шаблона детальной страницы заменить код вывода контента следующим кодом.
Код:
<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 проблемы:
  1. По клику по картинке я не перешел на детальную страницу товара а получил сообщение, что страница не найдена.
  2. Не отображается картинка. (это после того, как решил первую проблему)
И чтобы урок у нас получился более полезным и интересным я разберу, как решать такие проблемы, и вы научитесь разбираться сами если что-то не работает.

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

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

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

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

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

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

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


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

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

Проблема вторая
Не выводится изображение. Если вы помните, то все данные вывод в шаблоне хранятся в массиве arResult. А за вывод изображения товара у нас отвечает строка:
Код:
<img class="thumbnail" src="<?=$arResult['PREVIEW_PICTURE']['SRC']?>">
Чтобы понять, в чем проблема выведем для отладки на экран весь массив arResult. Как вывести значение переменной я описал в FAQ Битрикс, там много вариантов и есть очень удобная функция для вывода данных с форматированием. Мы воспользуемся одном из простых вариантов, добавим в свободном месте, например, в конце всего кода такую строчку.
Код:
<pre><?print_r($arResult)?></pre>
В итоге в конце страницы будет выведен весь массив 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.
Код:
<?$APPLICATION->IncludeComponent(
    "bitrix:breadcrumb",
    "",
    Array(
        "PATH" => "",
        "SITE_ID" => "s1",
        "START_FROM" => "0"
    )
);?>

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

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

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