Как настроить карточку товара битрикс

Урок 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 проблемы:

  1. По клику по картинке я не перешел на детальную страницу товара а получил сообщение, что страница не найдена.
  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с-Битрикс — Как добавить и вывести новые свойства и характеристики товара

Здравствуйте друзья, в этом видео уроке мы с вами разберемся, как добавить новое свойство или характеристику к товару. Как обычно, демонстрацию мы с вами будем проводить на готовом решении для интернет-магазина «Аспро: максимум» и первое, что мы делаем – это заходим в админку, и как мы можем помнить – свойство у нас располагаются: вкладка «контент», дальше вкладка «инфоблоки», типы инфоблоков – каталог. Переходим в этот инфоблок «каталог товаров» и здесь у нас есть вкладка «Свойства». Здесь у нас расположены все наши свойства товаров. Итак, нам нужно добавить новое свойство.

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

Здесь на первой вкладки настройки мы с вами смотрим самую верхнюю строчку: «Использовать параметры свойств в компонентах и формах». И эту галочку нам нужно снять. Снимаем галочку, если она у вас снята, то все в порядке, если нет – снимаем галочку и нажимаем кнопочку «Сохранить».

Далее, мы с вами возвращаемся к настройкам наших свойств – контент – инфоблоки – типы инфоблоков -каталог – свойства. И давайте добавим новое свойство. Назовем его «Тип нанесения рисунка». Сюда мы с вами пишем название по-русски, а вот в это поле мы с вами пишем символьный код. Ну, например, «IMAGE_TYPE».

Далее, что важно здесь посмотреть. Мы можем оставить здесь вывод этого свойства в качестве строчки – что это такое. Т.е. если мы с вами, например, заглянем сейчас в наш каталог в админке, мы перешли в нашу карточку товара и допустим видим: здесь написано «платформа», сюда можно написать все что угодно, это и есть «строчка». Можно сделать выпадающий список. Тут вопрос, как вам удобно.

Читайте также:  Как настроить роутер tp link на статический ip

Что бы была просто строка нам ничего менять не надо, у нас и так по умолчанию стоит строка, но, если мы хотим сделать выпадающий список, мы здесь нажимаем, и выбираем «список». Далее мы нажимаем три точки рядом с символьным кодом, у нас выплывает окошко. И вот здесь внизу у нас есть значение, и вот в этом поле мы пишем, например: «принт», «вышивка», пусть будет 2. Нажимаем кнопочку «сохранить», и сохраняем наши свойства.

Теперь проверяем в карточке товара, появились ли у нас данное свойство. Появилось: тип нанесения рисунка – вышивка-принт. Пусть будет принт, нажимаем кнопочку «сохранить». Возвращаемся в публичную часть сайта, и обновляем, и смотрим, вывалилось ли свойство. Пока что нет.

Как его вывести?

Для того, чтобы вывести новое свойство в карточку товара, в публичной части мы с вами переходим в режим правки. Далее, на вводе карточки товара у нас всплывает менюшка, нажимаем шестереночку, у нас открывается новое окно. Для удобства давайте я его сделаю по шире.

Здесь что нам нужно – переходим в левой части меню к настройке списка, здесь мы отматываем до этого поля, в готовых решениях оно присутствует в 99% случаев. И вот здесь есть список наших свойств. Здесь мы ищем «новое свойство», и нажимаем кнопочку Ctrl и потом уже сюда кликаем. И находим наш тип нанесения рисунка, так же нажимаем кнопочку Ctrl и щелкаем по нему.

Далее, отматываем вниз, и находим графу «Свойства предложений». Здесь делаем тоже самое — нажимаем Ctrl, выделяем здесь, можем вывести «производство» тоже, при желании мы можем нажать Ctrl+А на клавиатуре и выделятся все свойства сразу. Я сделаю именно так.

Дальше, мы с вами мотаем еще ниже, до поля «настройки детального просмотра». Здесь мы проделываем ту же самую операцию – выбираем наши новые свойства.

И нажимаем кнопочку «сохранить». Как можем видеть – у нас появилось в карточке наше новое свойство – тип нанесения рисунка – принт и также я вывел еще новое свойство для примера: здесь написано 12.

Т.е. выключаем режим правки. Если мы вернемся в нашу карточку товара в режим админки, допустим поменяем «принт» на «вышивка» и поменяем 12 на «что-то еще», нажмем кнопочку «Сохранить» и здесь у нас вывелось – новое свойство «что-то еще» и тип нанесения рисунка поменялся «вышивка».

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

В принципе, на этом все. Еще напоследок такой момент – если мы хотим, чтобы наши свойства выводились в фильтре, т.е. вот здесь вот. То в настройках в списке этих свойств мы около нужного нам свойства, например, «тип нанесения рисунка», нажимаем три точки, в этом окошке находим строчку «значения свойства участвуют в поиске» и «показывать в умном фильтре». Все, нажимаем «сохранить», переходим сюда, обновляем страницу, и здесь в фильтре появилось наше свойство «тип нанесения рисунка».

Вот теперь, пожалуй, все, благодарю вас за внимание.

Источник

Товары в Битрикс24 — создание, добавление и редактирование

В Битрикс24 предусмотрен каталог товаров, что позволяет контролировать продажи и товарный остаток прямо в CRM. Каталог помогает структурировать все предложения на сайте компании — разберем, как создавать и настраивать товары в Битрикс24, а также быстро импортировать готовый каталог в CRM.

Читайте также:  Как настроить другие на цифровом ресивере

Как создать карточку товара

Работа с товарным каталогом проводится в разделе CRM во вкладке «Товары». Для добавления нового товара необходимо нажать «Создать» — Битрикс24 откроет визуализированный конструктор, позволяющий настроить отображение карточки, добавить базовые характеристики или подключить дополнительные пользовательские поля.

В формах конструктора необходимо указать торговое наименование и описание товара для покупателей на сайте. Справа в окне можно добавить фотографии позиции, а также указать розничную цену, товарный остаток и единицу измерения. Все данные будут отображаться на сайте компании.

Чтобы добавить несколько изображений похожих товаров в Битрикс24, необходимо нажать «Добавить вариацию». Это удобно, когда компания реализует несколько схожих товаров — например, апельсины разных сортов.

В настройках товарной карточки можно выбрать свойство вариации — это позволяет опубликовать на сайте несколько товаров в формате списка или справочника. Список оптимально подходит для указания различий в текстовых или числовых значениях — когда товары между собой отличаются по размеру, сорту или поставляются от разных производителей. Справочник используется для отображения рисунка, фактуры, цвета товара.

Функционал CRM также предполагает импорт товаров в Битрикс24 — выгрузить данные можно через заполненный CSV-файл. Для удобной работы сначала нужно скачать пустой каталог из CRM — для этого открываем шестерню настроек и выбираем «Импорт товаров» — «Скачать шаблон». Автоматически скачается файл, в которой можно добавлять товары вручную.

Также предусмотрена работа через таблицу Excel, однако в данном случае при импорте потребуется конвертировать файл в формат CSV.

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

Далее остается настроить поля соответствия и завершить импорт.

При настройке полей в нижней части интерфейса находится окно, где показывается как будут отображаться товары в Битрикс24 из CSV-файла в зависимости от выбранных параметров соответствия.

Как настроить характеристики в товарных карточках

Инструментарий каталога позволяет гибко настроить характеристики для любых товаров в Битрикс24. Чтобы изменить параметры заходим в карточку продукта, где выбираем «Создать поле» и нужный формат. Система предусматривает добавление текстовой строки, списка, справочных и временных полей.

В карточке продукта можно указывать неограниченное количество полей, что позволяет создать подробное описание для каждого товара.

После выбора поля характеристики остается задать параметры:

  • Обязательное — поле обязательно к заполнению, без ввода данных карточку невозможно изменить и сохранить.
  • Множественное — параметр позволяет вводить в поле несколько переменных.
  • Показывать в интернет-магазине — поле будет отображаться на сайте компании и доступно для просмотра клиентами. При отключении параметра характеристика товара будет видна только пользователям Bitrix24.
  • Показывать всегда — поле будет отображаться в карточке даже при отсутствии в нем данных. Это удобно, когда требуется быстрое создание или редактирование карточек.

После редактирования карточку нужно сохранить — обновленный товар станет доступным в списке CRM, а также на сайте компании. Опубликованные на сайте товары доступны к заказу — при покупке клиентом на сайте Битрикс24 создаст новую сделку, включающую перечень и количество всех продуктов в корзине.

При возникновении проблем с созданием товарных предложений, либо любыми другими настройками CRM Битрикс24 — обращайтесь к нам. Первый Бит является крупнейшим и единственным партнером 1С-Битрикс, обладающим статусом федерального. Мы обладаем компетенциями для реализации нетипового функционала, а также сложных внедрений Битрикс24.

Источник

Поделиться с друзьями
Инструкции360