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

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

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

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

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

Все серии

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

Михаил Базаров 05.11.2018
Цитата
Артем Попов написал:
Подскажите! Как править шаблоны в версии 18+ там совсем нет верстки, только РНР коды. Есть вывод плиткой, но как изменить ее стили шрифты размеры иконок ....
Там, сам шаблон стал сильно сложнее. Нужно потратить время, что бы с ним разобраться, но суть вся та же:
- верстка в template.php
- стили в style.min.css
Артем Попов 05.11.2018
Подскажите! Как править шаблоны в версии 18+ там совсем нет верстки, только РНР коды. Есть вывод плиткой, но как изменить ее стили шрифты размеры иконок ....
Сергей Стефанович 15.09.2017
Цитата
Михаил Базаров написал:
Просто берете любой готовый слайдер с нужным функционалом или верстаете свой. а затем интегрируете с шаблоном компонента. Так ил иначе, сначала создайте верстку, без битрикса (для понимания)
Извиняюсь, возможно не правильно пояснил. В карточке товара, хочу вывести цвет товара картинками. При добавлении торгового предложения к этому товару, я загружаю ему картинку например, превью. и хочу чтобы цвета брались не из хайлоад-блоков, а каждый цвет - превью картинка торгового предложения.
Михаил Базаров 14.09.2017
Цитата
Сергей Стефанович написал:
Доброго времени суток! Кто знает как вывести слайдером детальные картинки торговых предложений. Чтобы при нажатии на картинку она становилась активной и соответственно выводилось торговое предложения откуда она берется.  
Просто берете любой готовый слайдер с нужным функционалом или верстаете свой. а затем интегрируете с шаблоном компонента. Так ил иначе, сначала создайте верстку, без битрикса (для понимания)
Сергей Стефанович 14.09.2017
Доброго времени суток! Кто знает как вывести слайдером детальные картинки торговых предложений. Чтобы при нажатии на картинку она становилась активной и соответственно выводилось торговое предложения откуда она берется.
Михаил Базаров 19.03.2016
Цитата
Александр Христич написал:
Михаил, здравствуйте!
Возникла такая проблема:
-пользуясь предоставленными вами шаблонами появилась необходимость сделать в catalog.element вывод свойств торговых предложений в виде плиточек, как на популярный интернет магазинах, но в базовом компоненте свойства как и торговые предложения выводятся просто списком. Помогите решить проблему, буду очень благодарен.
И еще раз спасибо за ваши уроки, вынес из них очень много полезного.
Удачи вам в ваших делах!
Так конечно не рассказать- как это проделать. По сути все сводится к грамотной компановке и верстке + немножко программирования
Александр Христич 19.03.2016
Михаил, здравствуйте!
Возникла такая проблема:
-пользуясь предоставленными вами шаблонами появилась необходимость сделать в catalog.element вывод свойств торговых предложений в виде плиточек, как на популярный интернет магазинах, но в базовом компоненте свойства как и торговые предложения выводятся просто списком. Помогите решить проблему, буду очень благодарен.
И еще раз спасибо за ваши уроки, вынес из них очень много полезного.
Удачи вам в ваших делах!
Николай 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.
Как сделать, чтобы на месте детальной была детальная, а только по клику на превью она появлялась в окне детальной?
Дмитрий 05.10.2015
Цитата
Михаил Базаров пишет:
Код <?
echo '<pre>'; print_r($arResult); echo '</pre>';
?>
КЛАСС!!!!!! :!: СПАСИБО!!
Михаил Базаров 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
Цитата
Михаил Базаров пишет:
Совсем безforeach, думаю ни как- это в любом случае цикл. Можете попробовать создать пользовательское свойство для раздела
и добавлять его class="<?=$arSection["КОД_СВОЙСТВА"]?>"
Да, без foreach  обойтись не удалось. С помощью foreach обошел все пункты раздела, а с помощью  swtch-case в теле цикла сформировал массив из этих пунктов в нужной последовательности. Пока с этим разбирался определил что
$arResult["SECTIONS_COUNT"] - возвращает кол-во разделов,
$arResult['SECTIONS'][индекс ]['SECTION_PAGE_URL'] - URL к странице с содержимым раздела
$arResult['SECTIONS'][индекс]["NAME"] - это имя раздела...
А что там в $arResult[ ] еще есть? Где почитать об этом можно?
Михаил Базаров 05.10.2015
Цитата
Дмитрий пишет:
Цитата
Михаил Базаров пишет:
Цитата
Дмитрий пишет:
Здравствуйте Михаил! Подскажите, как сделать, чтобы в списке разделов Каталога товаров каждый пункт раздела имел бы собственное оформление. Как-то нужно, видимо, без цикла foreach обойтись?
А оформление через файл стилей не подходит, через :nth-child(номер пункта раздела) ?
этот способ я видел в одном из Ваших ответов в другой теме, но к сожалению он не подходит, т.к. из массиве $arResult['SECTIONS'] элементы в цикле выводятся в алфавитном порядке, а мне нужно в другом порядке. Я по другому сформулирую вопрос: как работать с пунктами раздела вообще без цикла foreach?
Совсем без  foreach, думаю ни как- это в любом случае цикл. Можете попробовать создать пользовательское свойство для раздела
и добавлять его class="<?=$arSection["КОД_СВОЙСТВА"]?>"
Дмитрий 04.10.2015
Цитата
Михаил Базаров пишет:
Цитата
Дмитрий пишет:
Здравствуйте Михаил! Подскажите, как сделать, чтобы в списке разделов Каталога товаров каждый пункт раздела имел бы собственное оформление. Как-то нужно, видимо, без цикла foreach обойтись?
А оформление через файл стилей не подходит, через :nth-child(номер пункта раздела) ?
этот способ я видел в одном из Ваших ответов в другой теме, но к сожалению он не подходит, т.к. из массиве $arResult['SECTIONS'] элементы в цикле выводятся в алфавитном порядке, а мне нужно в другом порядке. Я по другому сформулирую вопрос: как работать с пунктами раздела вообще без цикла foreach?
Михаил Базаров 04.10.2015
Цитата
Дмитрий пишет:
Здравствуйте Михаил! Подскажите, как сделать, чтобы в списке разделов Каталога товаров каждый пункт раздела имел бы собственное оформление. Как-то нужно, видимо, без цикла foreach обойтись?
А оформление через файл стилей не подходит, через :nth-child(номер пункта раздела) ?
Дмитрий 04.10.2015
Здравствуйте Михаил! Подскажите, как сделать, чтобы в списке разделов Каталога товаров каждый пункт раздела имел бы собственное оформление. Как-то нужно, видимо, без цикла foreach обойтись?
Михаил Базаров 16.09.2015
Цитата
Степан пишет:
Битрикс 15.5.1.
Просьба еще подсказать как получить фото загруженные в свойства.
Поле $arResult['MORE_PHOTO'] использованое в уроке не работает. Там только массив из одного объекта - детальное фото.
Добавить еще одно фото в детальное через интефейс нельзя (видимо ограничение версии...). Я так понимаю что это стадартное поле информационного блока, а не поле его свойства (просто названия совпадают).

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

Пробовал пройти через пропетисы $arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] - там только строки с ИД загруженных элементов. Но как поличть их SRC?
Степан 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?
Может скрипт добавляет?

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