Вкладки (табы) на карточке товара в Битриксе

Автор: Дмитрий Акифьев. Размещено в: 1С-Битрикс

Вкладки, табы

Приветствую, Друзья!

В этом видеоуроке Вы узнаете о том, как сделать вкладки (табы) на карточке товара в адаптивном шаблоне 1С-Битрикс (примерно как это было в шаблонах 12 версии).

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

Я не буду разрабатывать что-то сложное, писать свой компонент для вывода вкладок с использованием HTML, CSS, PHP и Javascript. Битрикс тем и хорош, что в нем уже есть куча компонентов, в том числе стандартный для вывода табов. Есть масса примеров, которые можно подсмотреть в других типовых компонентах и шаблонах. Есть сообщество, документация и форумы для разработчиков. Рассматривайте этот урок как пример разработки под Битрикс для знающих PHP, но плохо знакомых с Bitrix Framework.

В уроке я показал:

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

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

Все, что надо сделать, это нажать Play на видео ниже:

P.S. Если Вы не PHP программист, то я крайне не рекомендую повторять то, что Вы увидите в видео, одна ошибка и карточки товаров перестанут отображаться вообще. И перед любыми доработками обязательно делайте резервную копию всего сайта!

На этом сегодня все! Не забываем жать на социальные кнопки слева и задавать свои вопросы чуть ниже в комментариях!

 
Стрела влево

Если вам понравилась статья, то нажмите на одну из кнопок социальных сетей для размещения ссылки на страницу в своей ленте в этой соцсети.

 

Метки:, , , ,

 

Комментарии (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»,

    .........................................

    ?>

    Заранее спасибо.

    Ответить

  • Виктор

    |

    Спасибо! буду разбираться, хотя вроде не чего такого не менял.

    Ответить

  • Виктор

    |

    Добрый вечер, Дмитрий! Не выводится «CONTENT»=>. Т.е. выводится только название вкладок.

    хотя через print_r() всё выводит.

    Ответить

    • Дмитрий Акифьев

      |

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

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

      Лезьте в отладку компонента catalog.tabs и смотрите почему нет данных или почему они не подставляются в итоговый HTML.

      Ответить

Написать комментарий