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"
    )
);?>

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

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

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

Комментарии

Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
12
10.05.2018 | валентина

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

Комментировать
Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
12
Закрыть
10.05.2018 | Администратор

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

Комментировать
Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
12
Закрыть


Возврат к списку