Отраслевые решения
Темная
тема
Светлая
тема
50+ нейросетей и инструментов для маркетологов и бизнеса
Скачать бесплатно
Отраслевые решения

Создание интернет-магазина на Битрикс: какие нюансы стоит учесть при настройке каталога

22 мая 2019
22.2K
8 мин.

«1С-Битрикс: Управление сайтом» — одна из самых популярных систем управления веб-проектами в России. Из коробочных решений является самой нафаршированной различным функционалом системой. Ее используют для разработки корпоративных сайтов и интернет-магазинов, а также крупных интернет-порталов и информационных систем. Примеры крупных магазинов на Битриксе:

Битрикс — платная CMS, на данный момент есть 4 редакции:

  • Старт — 5 400 руб.;
  • Стандарт — 15 900 руб.;
  • Малый бизнес — 35 900 руб.;
  • Бизнес — 72 900 руб.

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

Сообщение об истечении пробного периода

Кроме того, потестировать CMS можно онлайн — bitrixlabs.ru. На три часа предоставляется доступ к демосайту редакции Бизнес.

Создание демосайта на Битрикс

Для интернет-магазина подойдет лицензия «Малый бизнес» или «Бизнес», т.к. в них есть необходимый модуль «Интернет-магазин» для создания каталога. Рассказывать о возможностях CMS и различиях редакций не будем, ранее об этом уже писали в статье.

Сегодня поговорим об основных моментах при создании интернет-магазина в рамках нашего тарифа Создание интернет магазина: Индивидуальный дизайн на примере магазина электроники.

1. Торговый каталог

Важнейшая часть интернет-магазина — это его каталог. В Битриксе для создания каталога товаров используется модуль «Торговый каталог». С его помощью можно создавать каталоги товаров и услуг, управлять ценами и скидками, загружать и выгружать данные о товарах. Каталог можно разбить на разделы и подразделы для хранения товаров разных категорий.

В нашем каталоге будут храниться различные товары: от смартфонов до электросамокатов. Как мы понимаем, у этих товаров разные характеристики.

CMS позволяет указать как общие характеристики для всех товаров, так и характеристики, присущие определенному типу продукции.

Информация о товаре заполняется в карточке товара, которую можно настроить под себя — расположить поля там, где вам удобно.

Для товаров, у которых есть различающиеся свойства, помимо общих характеристик (например, телефон с различными вариантами цветов и памяти), предусмотрены торговые предложения. Для работы с торговыми предложениями сперва создается новый инфоблок. Назовем его «Торговые предложения».

Инфоблок «Торговые предложения»

После этого в настройках инфоблока «Каталог товаров» на вкладке «Торговый каталог» нужно поставить галочку, что он имеет торговые предложения, и выбрать созданный инфоблок «Торговые предложения».

Инфоблок «Каталог товаров»

Для инфоблока «Торговые предложения» мы создаем свойства, которые будем использовать как характеристики товаров: цвет, объем памяти, галерея.

Свойства торговых предложений

Свойство «Элемент каталога» создается автоматически. Для свойства «Цвет» указываем тип «Справочник», создаем новый справочник и заносим в него названия цветов и иконки. Свойство «Объем памяти» делаем списком и вносим все виды объемов памяти.

После этого мы сможем создавать товары с торговыми предложениями.

Чтобы не создавать одинаковые товары с различными цветами и объемом памяти, Битрикс может автоматически сгенерировать эти товары, подставляя значения из свойств, и для каждого сгенерированного товара можно указать свою цену.

Товар с торговыми предложениями

Такими нехитрыми манипуляциями мы создадим довольно объемный и полноценный каталог с различными категориями товаров.

На странице товара есть возможность переключаться между разными товарами по свойствам торговых предложений:

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

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

Выбор торгового предложения по наведению на карточку товара

Но для нашего интернет-магазина такой вариант не подходит, т. к. пользователь, заходя на страницу каталога, должен иметь возможность сразу видеть все доступные варианты телефонов. Поэтому мы реализовали вывод товаров с торговыми предложениями в разных карточках:

Вывод товаров с торговыми предложениями в разных карточках

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

Вывести товары с торговыми предложениями можно, проверяя каждый товар на наличие у него массива с торговыми предложениями. Если есть торговые предложения, то получаем следующий массив:

Массив торговых предложений

У товаров без торговых предложений этого массива не будет. Но тут есть один нюанс: по умолчанию Битрикс выводит в массив только первые 5 предложений. Чтобы это исправить, в настройках компонента «Каталог» нужно установить значение «Максимальное количество предложений для показа» — 0.

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

Получив массив с торговыми предложениями, запускаем цикл для проверки массива, создавая новую карточку и подставляя название, картинку и цену из полученного массива торговых предложений. Также нужно подставлять ссылку на товар. В стандартном шаблоне ссылка ведет на общую страницу товара с отмеченными первыми свойствами торговых предложений, но поскольку мы выводим все карточки по отдельности (Mi 8 32 Гб Розовый, Mi 8 32 Гб Золотой, Mi 8 16 Гб Черный и т.д.), нужно, чтобы пользователь, кликнув по карточке «Mi 8 32 Гб Розовый», попадал на страницу с телефоном, у которого отмечен розовый цвет и объем памяти — 32 Гб. Для реализации данного перехода мы изменили ссылку на товар, добавив к ней параметр с ID торгового предложения. В настройках инфоблока торговых предложений изменяем URL страницы детального просмотра, добавив параметр с ID.

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

Страница товара с выбранными свойствами

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

Умный фильтр

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

Настройка свойств умного фильтра

Больше настроек и изменений стандартного фильтра нам не потребовалось.

2. Товарный маркетинг

Практически в каждом интернет-магазине периодически проводятся акции и предоставляются скидки на товары.

Для работы со скидками и акциями в Битриксе используется модуль «Товарный маркетинг: скидки и акции». Данный модуль имеет богатый функционал:

  • скидки на товары, доставку, оплату, зависящую от платежной системы;
  • скидки на комбинацию/группы товаров;
  • скидки, ограниченные по дате;
  • создание купонов на скидки.

Возможности модуля Товарный «маркетинг»

Покажем на примере. Создадим скидку в 10 % на группу товаров «Смартфоны» и распространим ее только на зарегистрированных пользователей.

В результате скидку будет видеть только зарегистрированный пользователь:

скидка для зарегистрированного пользователя

Создание скидки на раздел

Все довольно просто. Можно настроить различные варианты скидок (процентные, на определенную сумму), для этого вполне достаточно готового функционала и не требуются какие-то доработки.

3. Сравнение товаров

Для сравнения товаров в Битриксе есть специальные компоненты. Они реализуются с помощью технологии ajax, чтобы количество добавленных товаров в список сравнения динамически изменялось при добавлении и удалении товаров из списка.

Сравнение товаров

Кнопка добавления товара в сравнения

На странице сравнения товаров отображаются все заполненные характеристики. Также можно посмотреть только различающиеся характеристики.

Страница сравнения товаров

4. Список избранных товаров

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

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

Для незарегистрированных пользователей ID выбранных товаров записывается в cookie.

При клике на кнопку добавления товара в избранное, ID-номер выбранного товара записывается в дополнительное поле или в cookie-файлы, и кнопка помечается активной.

Добавление товара в избранное

Создание скидки на раздел

В результате на странице с избранными товарами выводятся все товары, чьи ID-номера есть в списке. Таким образом формируется список избранных товаров.

Вывод списка избранных товаров.

5. Корзина

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

Корзина товаров

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

оформление заказа

Для оплаты в Битриксе уже есть готовые способы, среди которых — оплата наличными, по квитанции, по выписанному счету, PayPal, Робокасса, RBK Money, Assist, Яндекс.Деньги, WebMoney, Qiwi и др.

Для доставки есть службы перевозки курьером, самовывоз, СПСР-Экспресс, остальные можно установить из маркетплейса или настроить самостоятельно.

Процесс оформления заказа стандартный. Если нужны какие-либо изменения, это требует крупной переработки всего модуля, что очень трудозатратно. Поэтому чаще всего оформление заказа оставляем без изменений.

Вывод

CMS Битрикс — масштабируемая и многофункциональная система для разработки сайтов. Но она требует большого опыта и квалификации, поэтому может показаться очень сложной для тех, кто с ней малознаком.

Если вы решили создать сайт на CMS 1C-Битрикс — обратитесь к нам, наши сертифицированные специалисты разработают для вас индивидуальный проект. Кроме того, при покупке любого продукта Битрикс у нас, вы получите скидку 15 %.

5
1
2
0
0

Сергей Пешков

Веб-технолог

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна

Получить базовый анализ сайта бесплатно

  • Определим цели и задачи
  • Проведем анализ сайта
  • Подготовим план работ и смету

Популярные статьи

23 августа 2024

Сколько стоит создать сайт: сравниваем различные способы разработки

Читать статью 310K 14 мин.
30 мая 2025

Выбираем CMS для интернет-магазина. Часть 2

Читать статью 84.6K 20 мин.
28 апреля 2025

Выбираем CMS для интернет-магазина. Часть 1

Читать статью 66.7K 20 мин.
2 апреля 2026

Как бесплатно создать сайт на Tilda на русском языкеИнструкция для тех, кто только начинает или не умеет программировать

Читать статью 10.7K 20 мин.
21 апреля 2025

Что такое капча и как добавить ее на сайт

Читать статью 6.7K 11 мин.
18 июля 2025

Инструкция, как отключить куки (cookie) в настройках браузера

Читать статью 6.4K 5 мин.
10 декабря 2025

10 трендов дизайна сайтов в 2026 году

Читать статью 5.2K 8 мин.
5 октября 2022

80 бесплатных ресурсов в помощь дизайнеру

Читать статью 97.1K 1 12 мин.
12 апреля 2022

ТОП-7 популярных CMS: особенности, плюсы и минусы

Читать статью 60.4K 16 мин.
1 ноября 2025

Дизайн карточки товаров для маркетплейсов: как повысить продажи в 2 раза с помощью удачных изображений

Читать статью 3.5K 8 мин.
26 января 2022

Вкусная посадочная страница: как составить правильную и эффективную структуру лендинга

Читать статью 57.3K 10 мин.
27 августа 2025

Веб-тренды в дизайне сайтов для B2B

Читать статью 3.3K 9 мин.
26 июня 2023

6 способов определить шрифт на картинке

Читать статью 45.3K 6 мин.
8 сентября 2025

Идеальный дизайн карточки товара в интернет-магазине: как оформить, чтобы повысить продажи

Читать статью 3K 10 мин.
1 октября 2025

UX и UI-дизайн: что общего и чем отличаются?

Читать статью 2.6K 13 мин.
2 августа 2024

8 главных трендов веб-дизайна в 2024 году

Читать статью 3.2K 6 мин.
7 июня 2022

Примеры дизайна сайтов: 10 источников вдохновения для владельцев бизнеса

Читать статью 38.5K 6 мин.
17 июля 2024

10 рекомендаций по созданию продающего сайта в 2024 году

Читать статью 2.7K 9 мин.
20 апреля 2022

Шаблон карточки товара: как создать правильную карточку товара?

Читать статью 34.1K 8 мин.
20 сентября 2024

Реально работает: 10 лайфхаков, помогающих увеличить конверсию лендинга в 5 раз

Читать статью 2.5K 7 мин.
13 ноября 2024

16 ошибок начинающего верстальщика

Читать статью 2.4K 12 мин.

Все популярные статьи

Закрытый клуб для маркетологов и владельцев бизнеса. Оставьте запрос на вступление!

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

250 000 участников сообщества каждую неделю получают письма от нас

Еженедельные полезные советы по продвижению бизнеса и эксклюзивные предложения абсолютно бесплатно – подайте заявку на вступление!

Услуги, которые могут вас заинтересовать

Разработаем корпоративный сайт, чтобы клиенты узнали о вашем бизнесе.

Стоимость:
от 180 000

Сделаем современный и качественный сайт на Тильде под любые задачи за 14 дней.

Стоимость:
от 54 600

Разработаем мощный инструмент продаж с каталогом, корзиной, доставкой и оплатой.

Стоимость:
от 180 000

Смотреть все услуги Попробовать бесплатно