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

Версия 2013 Версия 2017

 14018 |  70

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

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

Список всех серий Скачать видео с ЯДиска. Формат .mp4

Предыдущее видео Следующее видео

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

Зарегистрироваться Войти

Напомнить пароль

Быстрая регистрация через соц.сеть:

Евгений 17.02.2014
Михаил доброго времени суток! Скажите пожалуйста, можно ли на платформе Управление сайтом-Малый бизнес создать сразу и каталог и интернет-магазин, при этом вынести инет-магазин на поддомен? С уважением.

Михаил Базаров 17.02.2014

Цитата
Евгений пишет: Михаил доброго времени суток! Скажите пожалуйста, можно ли на платформе Управление сайтом-Малый бизнес создать сразу и каталог и интернет-магазин, при этом вынести инет-магазин на поддомен? С уважением.

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

PS: Любая лицензия Битрикс позволяет запустить 2 сайта с общей базой данных и админпанелью. Наглядно вот тут http://camouf.ru/blog-note/783/

Евгений 18.02.2014

Цитата

Михаил Базаров пишет:

Цитата
Евгений пишет: Михаил доброго времени суток! Скажите пожалуйста, можно ли на платформе Управление сайтом-Малый бизнес создать сразу и каталог и интернет-магазин, при этом вынести инет-магазин на поддомен? С уважением.

Спасибо за ответ.

Pavel 07.04.2014
Здравствуйте. Мне очень нравится ваш видеокурс. Материал преподносится в очень доступной форме. Однако я столкнулся с определенной трудностью во время просмотра 12 урока. Когда вы показываете как сверстать список товаров, у вас в коде есть таблица, а у меня битрикс выдает код который выглядит совсем иначе. Куча всевозможных массивов и div-ов. У вас, все элементы выводимые в каталоге расположены в одном месте (в таблице), а у меня, все разбросано по разным местам кода. Как результат, вообще не могу разобраться, что и где нужно редактировать. Подскажите пожалуйста, в чем может быть проблема? Почему битрикс по-разному отображает код, хотя повторяю за вами шаг в шаг. Заранее благодарен.

Михаил Базаров 07.04.2014

Цитата

Pavel пишет:
Здравствуйте. Мне очень нравится ваш видеокурс. Материал преподносится в очень доступной форме.
Однако я столкнулся с определенной трудностью во время просмотра 12 урока.
Когда вы показываете как сверстать список товаров, у вас в коде есть таблица, а у меня битрикс выдает код который выглядит совсем иначе. Куча всевозможных массивов и div-ов. У вас, все элементы выводимые в каталоге расположены в одном месте (в таблице), а у меня, все разбросано по разным местам кода. Как результат, вообще не могу разобраться, что и где нужно редактировать. Подскажите пожалуйста, в чем может быть проблема? Почему битрикс по-разному отображает код, хотя повторяю за вами шаг в шаг.
Заранее благодарен.

Да, есть такая беда. Когда я писал урок была еще 12-ая версия. Сейчас в 14-ой они как-то адово закрутили шаблон, честно сказать сам там ни черта понять не могу) (точнее еще не разбирался, и думаю не буду- нервы дороже), но старый шаблон находится в папке default или old_version, дерните его оттуда

barbaris08 30.05.2014
Михаил, у меня та же проблема, что и у Павла (я вам на рутрекере писал). Не могли бы вы отдельно выложить старый шаблон каталога (из 12 версии битрикса)? Очень нужен))

Михаил Базаров 30.05.2014
Старые шаблоны каталогов http://camouf.ru/blog-note/918/

barbaris08 02.06.2014
Михаил, у вас в каждом разделе каталога (компьютеры, ноутбуки и т.д.) сверху выведено его название. То есть когда заходишь в компьютеры, то там сверху в теге <h1>, судя по исходному коду страницы, выведено название этого раздела каталога ("Компьютеры", например). Какая именно строка в шаблоне отвечает за вывод названия? А то у меня это дело куда-то пропало, а вернуть никак не могу. Спасибо.

Михаил Базаров 02.06.2014

Цитата

barbaris08 пишет:
Михаил, у вас в каждом разделе каталога (компьютеры, ноутбуки и т.д.) сверху выведено его название. То есть когда заходишь в компьютеры, то там сверху в теге <h1>, судя по исходному коду страницы, выведено название этого раздела каталога ("Компьютеры", например). Какая именно строка в шаблоне отвечает за вывод названия? А то у меня это дело куда-то пропало, а вернуть никак не могу.
Спасибо.

Код
<h1><?$APPLICATION->ShowTitle(false);?></h1>

barbaris08 03.06.2014

Цитата

Михаил Базаров пишет:

Цитата

Код
<h1><?$APPLICATION->ShowTitle(false);?></h1>

Когда я вставляю это в свой файл template.php, то у меня название раздела выводится 2 раза и в самом верху страницы, вне зависимости от того, в какой div или в какую ячейку таблицы я это загнал. При этом едет вся верстка.
В чем может быть ошибка?

Михаил Базаров 03.06.2014

Цитата

barbaris08 пишет:

Цитата

Михаил Базаров пишет:

Код
<h1><?$APPLICATION->ShowTitle(false);?></h1>

Ошибка в верстке, в шаблоне этот вызов должен быть только один раз, в том м есте где планируется выводить заголовок H1

Гость сайта 23.06.2014
Михаил, добрый день! А скажите, пожалуйста, как на странице, предшествующей странице детального просмотра, выводить разные свойства для разных категорий товаров? Например, в секции компьютеров у меня в анонсе выводится бренд, цена и цвет корпуса, в секции ноутбуков - размер диагонали, емкость hdd и объем RAM, в секции принтеров - бренд и тип (струйник/лазерник). А когда открываю страницу детального просмотра, то там уже все свойства, которые я впишу.

Михаил Базаров 23.06.2014

Цитата
Гость сайта пишет: Михаил, добрый день! А скажите, пожалуйста, как на странице, предшествующей странице детального просмотра, выводить разные свойства для разных категорий товаров?

Точно также как и не разные) Или не понимаю сути вопроса.
Создаете все свойства в инфоблоке и заполняете их при добавлении товара.
Свойства которые остались пустыми, не выведутся в списке товаров, сами без лишних манипуляций

Гость сайта 23.06.2014
Михаил, вот смотрите. Я создаю инфоблок каталога точно так же, как у вас в уроке. Там есть 4 категории. Как сделать, чтобы в анонсе товара были разные свойства у каждой категории? Если выделить все свойства, то они все будут выводиться и в анонсе, и в детальном описании. А мне в анонсе нужно вывести только основные, а в детальном все, касающиеся данного товара.

Михаил Базаров 23.06.2014

Цитата

Гость сайта пишет:
Михаил, вот смотрите. Я создаю инфоблок каталога точно так же, как у вас в уроке. Там есть 4 категории. Как сделать, чтобы в анонсе товара были разные свойства у каждой категории? Если выделить все свойства, то они все будут выводиться и в анонсе, и в детальном описании. А мне в анонсе нужно вывести только основные, а в детальном все, касающиеся данного товара.

Не выделяйте все для списка товаров, выделите только нужные. Там же все наглядно и разбито на блоки. Я прям не знаю как еще объяснить- чуть внимательнее изучите настройки компонента- все подписано.

Гость сайта 23.06.2014
Михаил, мне кажется, мы с вами о разном говорим)) Вот смотрите, у вас в каталоге выведены у всех категорий товаров одинаковые свойства для анонса: бренд и цена. А мне нужно, чтобы они были разными для каждого раздела. А в детальном описании нужно выводить все необходимые свойства, как у вас)

Михаил Базаров 23.06.2014
Ну так и настройте какие свойсва выводить в списке и какие в детальном. Не хотите например бренд выводить в детальном, но выводить в списке товаров: Выделите его только в детальном отображении

Гость сайта 23.06.2014
Это я понял. Но это же будет настраиваться для всех разделов каталога. А мне нужно только для одного. То есть в компьютерах я хочу выводить бренд, а в принтерах нет.

Михаил Базаров 23.06.2014

Цитата
Гость сайта пишет: Это я понял. Но это же будет настраиваться для всех разделов каталога. А мне нужно только для одного. То есть в компьютерах я хочу выводить бренд, а в принтерах нет.

Теперь суть понятна, думаю вот это вам поможет http://dev.1c-bitrix.ru/community/blogs/product_features/smart_filter.php

Как вариант создать разные инфоблоки для каждой категории товаров со своим набором свойств

Гость сайта 23.06.2014

Цитата

Михаил Базаров пишет:

Цитата
Гость сайта пишет: Это я понял. Но это же будет настраиваться для всех разделов каталога. А мне нужно только для одного. То есть в компьютерах я хочу выводить бренд, а в принтерах нет.

мне этот вариант нравится больше, чем тот, который по ссылке)
но скажите, как это все это будет сверстать потом? + это нужно будет каждый инфоблок отдельно настраивать? возможно сделать, чтобы для каждой категории товаров выводились элементы разных инфоблоков?
Если есть такая возможность, подскажите, пожалуйста, как это лучше всего реализовать, хотя бы со скринами

Спасибо!

Простой сайт на битрикс:

Здесь выложен видеоурок по созданию сайта на системе управления 1С-Битрикс. Поэтапно создан сайт для вымышленной фирмы "Компьютерная техподержка".

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

Исключительно возможностями битрикс создается и наполняется сайт.

Образец: comp-assistant.ru Плейлист на Плейлист на youtube

Сейчас на сайте:

и 5 гостей

Из стран: 2 чел. 1 чел. 1 чел. 1 чел.

Подписывайтесь на youtube канал, что-бы быть в курсе

Случайные заметки из блога

Отключить поиск по описаниям товаров в Битрикс
Иногда, нужно отключить поиск по описаниям анонсов и детальному...

Использование название раздела новостей в Title битрикс
Если нужно вывести название раздела инфоблока новостей в Title,...

Цвета торговых предложений из Highload инфоблоков в списке товаров
Подвернулся на доработку очень старый сайт, работал еще на 11-ой...

Вывести картинку связанного элемента в каталоге битрикс
Иногда, например в интернет-магазине созданном на битрикс, нужно...

Информация о заказах и содержимое корзины текущего пользователя.
В процессе разработки сайта могут понадобиться рецепты приведенные...

Видеоурок | создание сайта на Битрикс
В данной записке выкладывается видеоурок по созданию сайта на...