Урок 8. Создание детальной страницы товара в Битрикс
Детальная страница товара
В прошлом уроке мы доделали каталог и он стал выглядеть вполне прилично.
Теперь же нужно создать детальную страницу (карточку товара). Изобретать велосипед мы не будем и снова обратимся к заготовкам, которые мы взяли у 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 остальные файлы можно смело удалить. А в файле шаблона детальной страницы заменить код вывода контента следующим кодом.
Код:
Не знаю, как у вас, но у меня возникло 2 проблемы:
- По клику по картинке я не перешел на детальную страницу товара а получил сообщение, что страница не найдена.
- Не отображается картинка. (это после того, как решил первую проблему)
И чтобы урок у нас получился более полезным и интересным я разберу, как решать такие проблемы, и вы научитесь разбираться сами если что-то не работает.
Отладка в Битрикс и разбор проблем
Проблема первая
Если встать на карточку товара и посмотреть URL по которому нас переводит Битрикс, то можно увидеть, что путь совсем не тот, который мы ожидали увидеть.
Это проблема с ЧПУ. Если вы помните, то в инфобллоке было настроено ЧПУ следующим образом.
А по факту мы получаем совсем другую ссылку. Значит мы забыли настроить ЧПУ в параметрах компонента Новости. Исправим это. Главное правило тут одно:
ЧПУ в настройках инфоблока должно совпадать с настройками ЧПУ в компонентах Битрикс
- Каталог ЧПУ — здесь указывается путь до папки в которой расположен компонент или путь относительно которого мы хотим строить ссылки.
- Страница общего списка — это страница корня, у меня она совпадает с предыдущем параметром по этому оставлена пустой.
- Страница раздела — задана в виде символьного кода раздела
- Страница детального просмотра — задана составным полем символьный код раздела + символьный код элемента инфоблока.
Тут нужно быть внимательным с завершающими слешами, если они есть нужно не забывать их указывать и также следить, чтобы они не повторялись. Т.е. с путями ссылок нужно быть крайне внимательными.
После настройки ЧПУ детальная страница у нас стала замечательно открываться.
Проблема вторая
Не выводится изображение. Если вы помните, то все данные вывод в шаблоне хранятся в массиве 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) Для начала откроем админку и зайдем в нужный товар (статью, новость . ), определимся с лишними полями и нажмем на клавишу шестеренка в правом верхнем углу страницы.
2) В всплывшем окне мы увидим интерфейс с двумя полями — Доступные вкладки: и Вкладки:. Как легко догадаться в левой колонке перечислены все доступные в системе поля, а в правой все поля отображенные в карточке в настоящий момент.
Поместив курсор мыши и нажав на любом из доступных вариантов в правом столбце (в примере это строка «Товар») в нижней части экрана отобразятся поля доступные на данной вкладке
3) После того как мы увидели все доступные поля вкладки Товар достаточно выбрать лишние кликом мышки и нажать на ставшую активной кнопку Удалить. Если вам нужно удалить сразу несколько полей, выбрать их можно кликая мышкой и зажав клавишу CTRL на клавиатуре. После удаления лишних полей необходимо нажать кнопку Сохранить.
В результате мы увидим карточку с только нужными полями.
Источник
Как настроить карточку товара битрикс
Для создания новой карточки или внесения изменений в существующую воспользуйтесь редактором.
В публичной части сайта для вызова редактора перейдите в режим правки. Наведите указатель на область каталога/карточки и выберите соответствующий пункт на всплывающем меню: добавить или изменить товар.
В административной части сайта для перехода к редактору откройте Контент → Каталог → Каталог товаров. Раскройте нужный раздел/подраздел (на примере велосипеда это Спортивные товары → Велосипеды). Для перехода в режим редактирования существующего товара используйте пункт «Изменить» в меню кнопки Гамбургер. Для создания новой карточки кликните по кнопке «Создать товар».
Редактор откроется на основной вкладке «Товар». Рассмотрим основные настройки:
- задается наименование элемента или товара (3) (поле обязательно для заполнения) и символьный код (4) (если активирован параметр «Транслитерировать из названия при добавлении элемента» в Рабочий стол → Контент → Инфоблоки → Типы инфоблоков → Каталог → Каталог товаров, поле заполняется автоматически);
- устанавливается, видно ли товар в каталоге (1), а также как долго он будет доступен для просмотра (2);
- системой автоматически проставляется галка «В наличии» (5), если значение поля «Доступное количество» в параметрах торгового каталога (об этом ниже) отлично от нуля;
- хранится текст, привлекающий внимание к товарам по акции или специальному предложению (6);
- прикрепляются к карточке стикеры «Хит», «Новинка», «Советуем», «Акция» (7);
- привязывается лого бренда (8);
- указывается артикул товара (9);
- задаются характеристики товара (10).
На скриншоте показано, где в карточке будут располагаться стикеры (7), текст с акцией (6), артикул (9) и бренд (8).
Если вам нужно добавить свои свойства товара, обратитесь к этому уроку.
Для того, чтобы настроить отображение определенных характеристик по категориям товаров, следуйте инструкции, описанной здесь.
На вкладке «Анонс» вы можете загрузить уменьшенное изображение товара для превью в каталоге (1) и ввести текст (2), который будет отображаться как в окне быстрого просмотра в качестве краткого описания изделия, так и в карточке товара над ценой.
На следующей вкладке следует загружать фото товара большего разрешения, чем для анонса. Детальная картинка (1) показывается в карточке основной, а изображения, помещенные в поле загрузки ниже (2), будут доступны из встроенной галереи.
Под областями загрузки находится поле ввода для подробного описания товара (3).
На вкладке «Дополнительно» осуществляется привязка к товару других элементов, видео и файлов. Подробнее читайте в следующем уроке.
Вкладка «Разделы» соотносит товар в нужный подраздел каталога.
На вкладке «Системные» вы можете задать индекс сортировки (1). Он используется для упорядочивания товаров в каталоге, если в настройках компонента «Каталог» не задан другой способ сортировки.
- Значения для минимальнои и максимальной цены (2) берутся из вкладки «Цены» торгового каталога (об этом ниже).
- В поле «Количество комментариев к элементу» (3) отображается количество привязанных отзывов.
- Поля «Количество проголосовавших», «Рейтинг» (4) и «Сумма оценок» (5) отвечают за учет голосов пользователей.
- Идентификатор в «Теме форума для комментариев» (6) позволяет привязывать к товару соответствующие тематике отзывы.
На вкладке «Торговый каталог» находятся внутренние вкладки. Из них заполняются «Цены», «Параметры», «Склады».
В разделе управления цен указывается ставка НДС (1), закупочная цена (3), ее валюта (4) и устанавливается учет НДС в цене товара (2). Также здесь указывается базовая стоимость товара, стоимость в регионах и действующая валюта (5). Если у типа цены, например, для какого-то города, значение суммы не задано, то для его жителей товар будет доступен по базовой цене.
Если вы хотите задать разную стоимость товара при покупке в определенных количествах, включите расширенный режим управления ценами (6). В таком случае вид таблицы с типами цен будет изменен (5).
На вкладке «Параметры» указывается:
- доступное количество товара (1);
- сколько из них зарезервировано (2);
- единица измерения (3), отображаемая возле цены (руб/шт, руб/м и т.п.);
- коэффициент единицы измерения (4) – используется для корректного подсчета стоимости покупки и уточнения для пользователя количества приобретаемого товара;
- включен ли количественный учет (5);
- может ли клиент оформить заказ на отсутствующий товар/с отрицательным количеством (6);
- запрет или разрешение подписки на товар (7);
- вес и размеры товара (8) – созданные администратором свойства, выведенные в настройки для примера.
На вкладке «Склады» указывается доступное количество товара на складе. Указанное здесь количество носит информационных характер и не влияет на расчет остатков.
На вкладке «Скидки» отображено какое правило работы с корзиной распространяется на данный товар. С их помощью работает учет скидок. О том, как включить товар в список тех, что идут по скидке, читайте здесь.
Вкладка «Подписки» несет информационный характер. Здесь можно посмотреть сколько человек ждет появление отсутствующего товара. Также доступен просмотр списка подписчиков, для этого кликните ссылку «посмотреть».
Система перенаправит вас в раздел административной части Магазин → Покупатели → Подписка на товары.
Если вам требуется изменить комментарий к цене, обратитесь к этой инструкции.
Чтобы включить вкладку «Дополнительно» в публичной части сайта перейдите в карточку товара, наведите на шестеренку.
В поле «Показывать вкладку «Дополнительно»» поставьте галку и сохраните настройки.
Вы можете изменить текст вкладки «Дополнительно».
Источник