Создание сайтов любой сложности
от независимого разработчика


Табы как вывести свойство товара инфоблока Битрикс

Разные табы разные свойствa

Вы может сказать, что тут сложного в данной задачи идем в настройки инфоблока каталог и создаем там нам нужные свойства, а потом их спокойно указываем в настройках компонента и выводим в шаблоне catalog.element в том месте где нам нужно, да все так скажу я вам, но есть одно НО. У нас три таба, в первом мы будим выводить детальное описание, во втором выводим характеристики, в третьем файлы и инструкции.




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

Так как сайты на Битрикс я делаю не для себя любимого, а конкретному заказчику, то тут нужно думать еще и как будущий пользователь сайта который ограничен в своих знаниях в web-программирование сайтов. Что будет если сегодня этих самых свойств к примеру 5, а завтра их стало 10, что заказчик опять должен бежать к разработчику сайтов на Битрикс с просьбой, что у него, что-то не выводиться новые свойство. В общем если вы являетесь web-разработчиком сайтов не важно на какой платформе вы их будете делать, самое главное думать о пользователях которые этим в дальнейшим будут пользоваться, делать нужно по максиму универсально, чтобы потом как можно меньше лазить в код и что-то там править.

Создаем свойство для инфоблока

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

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


Тут самое главное на, что стоит обратить внимание указанно выше на скриншоте:

1 - Название свойство – это само название которое мы будем видеть при заполнение данного свойство.  

2 - Тип свойство – тут есть довольно большой выбор, свойство может быть разным по своему типу, строка или файл и т.д.

3 - Код свойство – его нужно указать на английском языке и как принято заглавными буквами.

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


Программируем карточку товара Битрикс

Дело осталось за малым это все, что мы создали нужно вывести на визуальную часть интернет-магазина на Битрикс. Для этого нужно скопировать сам компонент каталога себе, как любят говорить ребятишки из компании Битрикс – в свое пространство имен. Далее нужно открыть папку catalog.element которая отвечает за отображение самой карточки товара и в ней открыть файл под название template.php, в котором мы и будем в дальнейшем работать.

Тут отображение всех элементов в 99% у всех разные, так как дизайн и задачи так же разные, думаю с эти все ясно. Но если вы читаете данный пост, то значит как минимум тыбы или, что-то подобное в вашем дизайне так же присутствует.

Собственно давайте выведем как в моем случае 3 табы про которые я писал выше. Ниже приведу код табов с разметкой bootstrap тут как кому удобно, так и делайте. 


<div class="bs-example bs-example-tabs"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Описание</a></li> <li><a href="#tab2" data-toggle="tab">Характеристики</a></li> <li><a href="#tab3" data-toggle="tab">Файлы и инструкции</a></li> </ul> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="tab1"> <div class="items_tab"> <div class="items_txt"> <p><?= $arResult['DETAIL_TEXT'] ?></p> </div> </div> </div> <div class="tab-pane fade" id="tab2"> <div class="items_tab"> <div class="items_txt"> <div class="property"> <ul> <? $per = ['INSTRUCTIONS'] ?> <? foreach ($arResult ['DISPLAY_PROPERTIES'] as $pid => $propsTab): ?> <? if (in_array($pid, $per)) continue; ?> <li><?= $propsTab['~NAME'] ?> - <?= $propsTab['~VALUE'] ?></li> <? endforeach; ?> </ul> </div> </div> </div> </div> <div class="tab-pane fade" id="tab3"> <div class="items_tab"> <div class="items_txt"> <div class="instructions"> <? $instruction = $arResult['DISPLAY_PROPERTIES']['INSTRUCTIONS']['FILE_VALUE']; ?> <ul> <? foreach ($instruction as $k => $arFile) { ?> <li> <a href="<?= $arFile['SRC'] ?>"><?= $instruction[$k]['DESCRIPTION'] ?></a> </li> <? } ?> </ul> </div> </div> </div> </div> </div> </div> </div> </div>


Давайте теперь по кускам разберем, что-за что отвечает. Саму верстку табов я комментировать и как-то обсуждать не буду, пост не про эту тему. И так …

Это наш первый таб в котором вот этим куском кода мы выводим детальное описание нашего товара - <?= $arResult['DETAIL_TEXT'] ?> . Думаю тут все просто и понятно.


<div class="tab-pane fade in active" id="tab1"> <div class="items_tab"> <div class="items_txt"> <p><?= $arResult['DETAIL_TEXT'] ?></p> </div> </div> </div>

Это наш второй таб, тут уже более интересно, собственно ради этого все и затевалось. 


<div class="tab-pane fade" id="tab2"> <div class="items_tab"> <div class="items_txt"> <div class="property"> <ul> <? $per = ['INSTRUCTIONS'] ?> <? foreach ($arResult ['DISPLAY_PROPERTIES'] as $pid => $propsTab): ?> <? if (in_array($pid, $per)) continue; ?> <li><?= $propsTab['~NAME'] ?> - <?= $propsTab['~VALUE'] ?></li> <? endforeach; ?> </ul> </div> </div> </div> </div>


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


Это некий список ul-li который выводит свойства, но только тех которые нам нужны именно на этом табе, а не весь список целиком. После тега ul я создал переменную и назвал ее довольно банально $per в нее я занес то название ключа которое хранит в себе свойство которое я планирую вывести в следующем табе, таких ключей может быть сколько угодно и их можно перечислять до бесконечности <? $per = ['INSTRUCTIONS'] [‘НОВЫЙ_КЛЮЧ’] ?> . Для тех кто не понял, ключ INSTRUCTIONS хранит в себе в моем случае свойство которое отвечает за файлы и инструкции это третий таб.

Ну, а дальше дело техники, нужно запустить цикл foreach или как я люблю его называть хитрый форыч  <? foreach ($arResult ['DISPLAY_PROPERTIES'] as $pid => $propsTab): ?> и пройтись по нашим li но, после самого запуска цикла как вы можете заметить я применил этот самы левый боковой с помощью которого мы собственно и будем фильтровать вывод наших свойств в данном табе. Данная конструкция php кода <? if (in_array($pid, $per))continue;?> нам исключит вывод тех ключей свойств которых собственно я и сохранил в переменную $per. Так же важно пускать именно цикл по свойством, а непросто выводить их по ключам из массива. Такая запись нам поможет в дальнейшем избежать проблем при добавлении новых свойств в инфоблок, они будут повалятся автоматически.

Что касается третьего таба то тут и комментировать принципе особо нечего, пускаем цикл по li и дергаем наше свойство по ключу.


<div class="tab-pane fade" id="tab3"> <div class="items_tab"> <div class="items_txt"> <div class="instructions"> <? $instruction = $arResult['DISPLAY_PROPERTIES']['INSTRUCTIONS']['FILE_VALUE']; ?> <ul> <? foreach ($instruction as $k => $arFile) { ?> <li> <a href="<?= $arFile['SRC'] ?>"><?= $instruction[$k]['DESCRIPTION'] ?></a> </li> <? } ?> </ul> </div> </div> </div> </div>

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