Вкладки (табы) на карточке товара в Битриксе
Приветствую, Друзья!
В этом видеоуроке Вы узнаете о том, как сделать вкладки (табы) на карточке товара в адаптивном шаблоне 1С-Битрикс (примерно как это было в шаблонах 12 версии).
К сожалению, сделать табы на детальной странице нельзя без программирования. Поэтому мы опять лезем в PHP код, причем кода сегодня будет много, хотя и не сложного.
Я не буду разрабатывать что-то сложное, писать свой компонент для вывода вкладок с использованием HTML, CSS, PHP и Javascript. Битрикс тем и хорош, что в нем уже есть куча компонентов, в том числе стандартный для вывода табов. Есть масса примеров, которые можно подсмотреть в других типовых компонентах и шаблонах. Есть сообщество, документация и форумы для разработчиков. Рассматривайте этот урок как пример разработки под Битрикс для знающих PHP, но плохо знакомых с Bitrix Framework.
В уроке я показал:
- где лежат простые компоненты,
- что надо редактировать в комплексном компоненте Каталог,
- где в комплексном компоненте подключаются простые компоненты,
- как доработать шаблон, чтобы не потерять доработки при обновлении движка,
- как подключать компоненты в шаблонах,
- как выводить разную информацию на разных вкладках,
- и еще кучу всяких мелочей.
Вопрос не очень сложный, но я пытался показать все как можно подробней и доступно, поэтому урок получился длительностью 1 час.
Все, что надо сделать, это нажать Play на видео ниже:
На этом сегодня все! Не забываем жать на социальные кнопки слева и задавать свои вопросы чуть ниже в комментариях!
Если вам понравилась статья, то нажмите на одну из кнопок социальных сетей для размещения ссылки на страницу в своей ленте в этой соцсети.
Метки:Битрикс, видеоуроки, код, контент, разработка
Комментарии (20):
Иван
| #
Большое спасибо за видео!!
Ответить
Анисия
| #
Дмитрий, добрый день, скажите, пожалуйста, а как сделать так, чтобы вкладки не показывались, если внутри пустое содержимое?
Ответить
Дмитрий Акифьев
| #
Решается парой строк — простым условным оператором на PHP проверяется если переменная пустая, в которую собирается HTML код содержимого вкладки, то и всю вкладку не выводить (не делать запись в массив $arData как в видео).
Ответить
Роман
| #
Дмитрий, возник вопрос
У меня на детальной карточки товара, во вкладку Характеристики, надо загрузить 4 блока div
В вашем примере вы добавляете переменную
$CharacterCont
В моем случаи надо тогда создавать 4 переменных таких?или можно все в 1?
Ответить
Дмитрий Акифьев
| #
Если вкладка одна, то и весь контент, который отображается на этой вкладке должен быть в одной переменной. В одну вкладку можно загрузить любой текст, сколько там будет блоков div или вставок javascript не имеет никакого значения.
Ответить
Роман
| #
Т.е мне все содержимое надо будет добавить в 1 переменную и ее уже выводить?
Спасибо за ответы
Ответить
Дмитрий Акифьев
| #
Да, переменную с полным текстом вкладки надо будет не выводить, а подставить в массив вкладок, в значение ключа «content» нужной вкладки.
Ответить
Роман
| #
А ключ нам наполнять всеми дивами?
В этом шаге немного не понял...
Как остальной функционал тоже заполнить в массив вкладок?
$FullTextContent= '';
$arData["Tab1"]=array(
«NAME» =>"Описание",
«ACTIVE» =>"Y",
«CONTENT»=>Fulltext,
);
Ответить
Дмитрий Акифьев
| #
Слушайте, Вы на PHP похоже в первый раз что-то пытаетесь писать? Я не могу объяснить еще подробнее, чем уже показал в видео. Если Вам не понятно что такое массивы, ключи и значения, то Вам еще рано заниматься программированием под Битрикс. Изучите сначала основы, потом посмотрите еще раз это видео и поймете что надо делать. Программировать не понимая того, что Вы делаете, наугад, просто не реально. Тем более, что я на Ваш вопрос уже ответил выше, зачем его повторять я не понимаю.
Ответить
Виктор
| #
Добры вечер! Понять не могу почему при перезагрузки страницы вместо первого открывается последний таб.
$arData ["Tab1"]= array(
«NAME» => «Описание»,
«ACTIVE» => «Y»,
«CONTENT» => $FullTextCont,
);
$arData ["Tab2"]= array(
«NAME» => «Отзывы»,
«ACTIVE» => «Y»,
«CONTENT» => $GLOBALS["dial_comments"],
);
$arData ["Tab3"]= array(
«NAME» => «Расходные материалы»,
«ACTIVE» => «Y»,
«CONTENT» => 'Жирная синяя строка'
);
$arTabsParams = array(
«DATA» => $arData,
/*"ID" => $templateData['TABS_ID']*/
//"WIDTH" => 200,
);
$APPLICATION->IncludeComponent(
«bitrix:catalog.tabs»,
"",
$arTabsParams,
$component,
array(«HIDE_ICONS» => «Y»)
);
Ответить
Дмитрий Акифьев
| #
Уберите в описании всех табов «ACTIVE» => «Y», кроме первого, тогда именно он будет активным. А так получается, что кто последний флаг установил, тот и активный.
Ответить
Виктор
| #
Спасибо, большое!)
Ответить
bananza
| #
Добрый день, Дмитрий! А не подскажите как сделать чтобы в «CONTENT=>» вывести например:
IncludeComponent(«bitrix:forum.topic.reviews»,"",Array(
«SHOW_LINK_TO_FORUM» => «Y»,
.........................................
?>
Заранее спасибо.
Ответить
Дмитрий Акифьев
| #
Смотрите способ №1 в этом видео: Перенос умного фильтра в Битриксе
Ответить
bananza
| #
Спасибо, Дмитрий! Как я мог забыть функцию ob_start();
Ответить
bananza
| #
И за скорость ответа тоже спасибо!)
Ответить
Дмитрий Акифьев
| #
Пожалуйста.
Ответить
Виктор
| #
Спасибо! буду разбираться, хотя вроде не чего такого не менял.
Ответить
Виктор
| #
Добрый вечер, Дмитрий! Не выводится «CONTENT»=>. Т.е. выводится только название вкладок.
хотя через print_r() всё выводит.
Ответить
Дмитрий Акифьев
| #
Я ведь не экстрасенс, по Вашему описанию невозможно понять причину. Ищите ошибку. Может у Вас не стандартный шаблон, и компонент табов переделан и работает по другому.
Вариантов может быть масса. Поэтому я и говорил в видео, что я не консультирую по разработке, могу только помочь понять нюансы, но научить искать ошибки в Вашем коде я не могу не видя Ваш код.
Лезьте в отладку компонента catalog.tabs и смотрите почему нет данных или почему они не подставляются в итоговый HTML.
Ответить