Телеграм: @camouf_ru Почта: mihail@bazarow.ru

Видеоурок №12: верстка каталога в Битрикс

Просмотров: 20087

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

Так как, в нынешней 14 версии шаблоны каталога достаточно сильно отличаются от старых версий, то прикладываю старые версии каталога Старые шаблоны битрикс для простой верстки

Видеоурок №12: верстка каталога в Битрикс

Все серии

Комментарии к видео

Guest28.08.2015
Цитата
Михаил Базаров пишет:
Цитата
Дима пишет:
Добрый день Михаил. В какой именно папке находится этот файл "template.php"?
/bitrix/templates/ШАБЛОН_САЙТА/components/bitrix/catalog/ВСЕ­ ­ ТУТ
Я захожу по адресу /bitrix/templates/ШАБЛОН_САЙТА/components/bitrix/catalog/tem­plate/bitrix и там нахотидся 11 папок, в какой из них находиться тот самый файл "template.php" который вы редактируете на видео?
Михаил Базаров28.08.2015
Цитата
Guest пишет:
Цитата
Михаил Базаров пишет:
Цитата
Дима пишет:
Добрый день Михаил. В какой именно папке находится этот файл "template.php"?
/bitrix/templates/ШАБЛОН_САЙТА/components/bitrix/catalog/ВСЕ­ ­ ­ ТУТ
Я захожу по адресу /bitrix/templates/ШАБЛОН_САЙТА/components/bitrix/catalog/tem­ ­plate/bitrix и там нахотидся 11 папок, в какой из них находиться тот самый файл "template.php" который вы редактируете на видео?
Смотрите внимательно видео
Степан15.09.2015
В 1С-Битрикс: Управление сайтом 15.5.1 сейчас очень сильно отличается темплейт компонента текущей версии битрикса от описанной в уроке. Нет таблиц вообще, все на див тегах....

Также по-моему есть ошибка в системе - когда ставить отображение списка один лемент на строку, реально отображается 3 элемента вместо одного.

В CSS к шаблону компоненты есть классы для разных количеств колонок тега div который выводит строку товаров.
.bx_catalog_item.col1; .bx_catalog_item.col2... .bx_catalog_item.col5

Когда ставишь значений параметра 1 тогда должна генерироваться страница с классом тэга div col1. И тогда будет действовать правило CSS .bx_catalog_list_home.col1 .bx_catalog_item{padding:1px 26px;margin:0 0 30px 0 ;width:100%}
А в исходной странице сайта мы реально видим клас .bx_catalog_list_home.col3 и соотвественно 3 колонки вместо одной на сайте.

Похоже на глюк генерации страницы с компонентой?

В темпейлте не могу найти где именно устанавливается клас колонки. Есть только такой код
<div class="<? echo ($arItem['SECOND_PICT'] ? 'bx_catalog_item double' : 'bx_catalog_item'); ?>">
Как видим div закрывается и у него класс просто bx_catalog_item а как и на какой стадии туда попадает еще класс col1 ... col5?
Может скрипт добавляет?

Можно-ли обновить урок по темплету текущей версии?
Степан15.09.2015
Битрикс 15.5.1.
Просьба еще подсказать как получить фото загруженные в свойства.
Поле $arResult['MORE_PHOTO'] использованое в уроке не работает. Там только массив из одного объекта - детальное фото.
Добавить еще одно фото в детальное через интефейс нельзя (видимо ограничение версии...). Я так понимаю что это стадартное поле информационного блока, а не поле его свойства (просто названия совпадают).

Пробовал пройти через пропетисы $arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] - там только строки с ИД загруженных элементов. Но как поличть их SRC?
Михаил Базаров16.09.2015
Цитата
Степан пишет:
Битрикс 15.5.1.
Просьба еще подсказать как получить фото загруженные в свойства.
Поле $arResult['MORE_PHOTO'] использованое в уроке не работает. Там только массив из одного объекта - детальное фото.
Добавить еще одно фото в детальное через интефейс нельзя (видимо ограничение версии...). Я так понимаю что это стадартное поле информационного блока, а не поле его свойства (просто названия совпадают).

Пробовал пройти через пропетисы $arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] - там только строки с ИД загруженных элементов. Но как поличть их SRC?
Воспользуйтесь вот этой запиской http://camouf.ru/blog-note/301/ с каталогом, в принципе так же
Дмитрий04.10.2015
Здравствуйте Михаил! Подскажите, как сделать, чтобы в списке разделов Каталога товаров каждый пункт раздела имел бы собственное оформление. Как-то нужно, видимо, без цикла foreach обойтись?
Михаил Базаров04.10.2015
Цитата
Дмитрий пишет:
Здравствуйте Михаил! Подскажите, как сделать, чтобы в списке разделов Каталога товаров каждый пункт раздела имел бы собственное оформление. Как-то нужно, видимо, без цикла foreach обойтись?
А оформление через файл стилей не подходит, через :nth-child(номер пункта раздела) ?
Дмитрий04.10.2015
Цитата
Михаил Базаров пишет:
Цитата
Дмитрий пишет:
Здравствуйте Михаил! Подскажите, как сделать, чтобы в списке разделов Каталога товаров каждый пункт раздела имел бы собственное оформление. Как-то нужно, видимо, без цикла foreach обойтись?
А оформление через файл стилей не подходит, через :nth-child(номер пункта раздела) ?
этот способ я видел в одном из Ваших ответов в другой теме, но к сожалению он не подходит, т.к. из массиве $arResult['SECTIONS'] элементы в цикле выводятся в алфавитном порядке, а мне нужно в другом порядке. Я по другому сформулирую вопрос: как работать с пунктами раздела вообще без цикла foreach?
Михаил Базаров05.10.2015
Цитата
Дмитрий пишет:
Цитата
Михаил Базаров пишет:
Цитата
Дмитрий пишет:
Здравствуйте Михаил! Подскажите, как сделать, чтобы в списке разделов Каталога товаров каждый пункт раздела имел бы собственное оформление. Как-то нужно, видимо, без цикла foreach обойтись?
А оформление через файл стилей не подходит, через :nth-child(номер пункта раздела) ?
этот способ я видел в одном из Ваших ответов в другой теме, но к сожалению он не подходит, т.к. из массиве $arResult['SECTIONS'] элементы в цикле выводятся в алфавитном порядке, а мне нужно в другом порядке. Я по другому сформулирую вопрос: как работать с пунктами раздела вообще без цикла foreach?
Совсем без  foreach, думаю ни как- это в любом случае цикл. Можете попробовать создать пользовательское свойство для раздела
и добавлять его class="<?=$arSection["КОД_СВОЙСТВА"]?>"
Дмитрий05.10.2015
Цитата
Михаил Базаров пишет:
Совсем безforeach, думаю ни как- это в любом случае цикл. Можете попробовать создать пользовательское свойство для раздела
и добавлять его class="<?=$arSection["КОД_СВОЙСТВА"]?>"
Да, без foreach  обойтись не удалось. С помощью foreach обошел все пункты раздела, а с помощью  swtch-case в теле цикла сформировал массив из этих пунктов в нужной последовательности. Пока с этим разбирался определил что
$arResult["SECTIONS_COUNT"] - возвращает кол-во разделов,
$arResult['SECTIONS'][индекс ]['SECTION_PAGE_URL'] - URL к странице с содержимым раздела
$arResult['SECTIONS'][индекс]["NAME"] - это имя раздела...
А что там в $arResult[ ] еще есть? Где почитать об этом можно?
Михаил Базаров05.10.2015
Цитата
Дмитрий пишет:
Цитата
Михаил Базаров пишет:
Совсем безforeach, думаю ни как- это в любом случае цикл. Можете попробовать создать пользовательское свойство для раздела
и добавлять его class="<?=$arSection["КОД_СВОЙСТВА"]?>"
Да, без foreach обойтись не удалось. С помощью foreach обошел все пункты раздела, а с помощью swtch-case в теле цикла сформировал массив из этих пунктов в нужной последовательности. Пока с этим разбирался определил что
$arResult["SECTIONS_COUNT"] - возвращает кол-во разделов,
$arResult['SECTIONS'][индекс ]['SECTION_PAGE_URL'] - URL к странице с содержимым раздела
$arResult['SECTIONS'][индекс]["NAME"] - это имя раздела...
А что там в $arResult[ ] еще есть? Где почитать об этом можно?
Код
<? 
echo '<pre>'; print_r($arResult); echo '</pre>';
?>
Дмитрий05.10.2015
Цитата
Михаил Базаров пишет:
Код <?
echo '<pre>'; print_r($arResult); echo '</pre>';
?>
КЛАСС!!!!!! :!: СПАСИБО!!
Николай27.10.2015
Здравствуйте, Михаил!
Нужна ваша помощь!
Создал свойство MORE_PHOTOS с дополнительными изображениями. Прописал в файл result_modifier.php:

<?
$arResult["MORE_PHOTO"] = array();
if(isset($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] ;)  && is_array($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] ;) )
{
foreach($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] as $FILE)
{
$FILE = CFile::GetFileArray($FILE);
if(is_array($FILE))
$arResult["MORE_PHOTO"][]=$FILE;
}
}
?>

Теперь у меня на место детальной и превью-картинки выводится изображение из свойства MORE_PHOTO.
Как сделать, чтобы на месте детальной была детальная, а только по клику на превью она появлялась в окне детальной?
Александр Христич19.03.2016
Михаил, здравствуйте!
Возникла такая проблема:
-пользуясь предоставленными вами шаблонами появилась необходимость сделать в catalog.element вывод свойств торговых предложений в виде плиточек, как на популярный интернет магазинах, но в базовом компоненте свойства как и торговые предложения выводятся просто списком. Помогите решить проблему, буду очень благодарен.
И еще раз спасибо за ваши уроки, вынес из них очень много полезного.
Удачи вам в ваших делах!
Михаил Базаров19.03.2016
Цитата
Александр Христич написал:
Михаил, здравствуйте!
Возникла такая проблема:
-пользуясь предоставленными вами шаблонами появилась необходимость сделать в catalog.element вывод свойств торговых предложений в виде плиточек, как на популярный интернет магазинах, но в базовом компоненте свойства как и торговые предложения выводятся просто списком. Помогите решить проблему, буду очень благодарен.
И еще раз спасибо за ваши уроки, вынес из них очень много полезного.
Удачи вам в ваших делах!
Так конечно не рассказать- как это проделать. По сути все сводится к грамотной компановке и верстке + немножко программирования
Сергей Стефанович14.09.2017
Доброго времени суток! Кто знает как вывести слайдером детальные картинки торговых предложений. Чтобы при нажатии на картинку она становилась активной и соответственно выводилось торговое предложения откуда она берется.
Михаил Базаров14.09.2017
Цитата
Сергей Стефанович написал:
Доброго времени суток! Кто знает как вывести слайдером детальные картинки торговых предложений. Чтобы при нажатии на картинку она становилась активной и соответственно выводилось торговое предложения откуда она берется.  
Просто берете любой готовый слайдер с нужным функционалом или верстаете свой. а затем интегрируете с шаблоном компонента. Так ил иначе, сначала создайте верстку, без битрикса (для понимания)
Сергей Стефанович15.09.2017
Цитата
Михаил Базаров написал:
Просто берете любой готовый слайдер с нужным функционалом или верстаете свой. а затем интегрируете с шаблоном компонента. Так ил иначе, сначала создайте верстку, без битрикса (для понимания)
Извиняюсь, возможно не правильно пояснил. В карточке товара, хочу вывести цвет товара картинками. При добавлении торгового предложения к этому товару, я загружаю ему картинку например, превью. и хочу чтобы цвета брались не из хайлоад-блоков, а каждый цвет - превью картинка торгового предложения.
Артем Попов05.11.2018
Подскажите! Как править шаблоны в версии 18+ там совсем нет верстки, только РНР коды. Есть вывод плиткой, но как изменить ее стили шрифты размеры иконок ....
Михаил Базаров05.11.2018
Цитата
Артем Попов написал:
Подскажите! Как править шаблоны в версии 18+ там совсем нет верстки, только РНР коды. Есть вывод плиткой, но как изменить ее стили шрифты размеры иконок ....
Там, сам шаблон стал сильно сложнее. Нужно потратить время, что бы с ним разобраться, но суть вся та же:
- верстка в template.php
- стили в style.min.css