Створення інтернет-магазину на Бітрікс: які нюанси варто врахувати при налаштуванні каталогу

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

• apteka.ru
• www.eldorado.ru
• euroset.ru

Бітрікс — платна 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 Бітрікс — масштабована і багатофункціональна система для розробки сайтів. Але вона вимагає великого досвіду і кваліфікації, тому може здатися дуже складним для тих, хто з нею не знайомий.