Abr@X@bra.ru
Табы как вывести свойство товара инфоблока Битрикс
Табы как вывести свойство товара инфоблока Битрикс

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

28.02.2017
1336

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

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

Разные табы разные свойств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>

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




Свойство, ИБ
Читайте также:
Web-разработчик и новый клиент. Выстраиваем правильное общение.

Web-разработчик и новый клиент. Выстраиваем правильное общение.

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

Читать
React.js на русском языке. Часть первая

React.js на русском языке. Часть первая

Опубликовал свой первый пост, на habrahabr.ru по React.js
Мне очень нравиться концепция и подход React.js, что...
Читать
Highload выводим цвета из торговых предложений

Highload выводим цвета из торговых предложений

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