Розробка корпоративного сайту-візитки на 1С-Бітрікс

Розробка корпоративного сайту-візитки на 1С-Bitrix

Сайт-візитка на Bitrix — це не «зробити швидко на конструкторі». Компанії обирають Bitrix для візитки з конкретних причин: вже є ліцензія (використовують Bitrix24), потрібна інтеграція з CRM, планується розвиток до інтернет-магазину, або потрібна надійна CMS з підтримкою від вітчизняного вендора. Технічно такий проєкт нескладний, але типові помилки — вибір невідповідної ліцензії, неоптимальна структура інфоблоків, ігнорування продуктивності при невеликому трафіку.

Вибір ліцензії та редакції

Для корпоративного сайту-візитки без інтернет-магазину достатньо редакції «Старт» або «Стандарт». «Малий бізнес» і «Бізнес» потрібні, якщо планується каталог із замовленнями. Для візитки з формами зворотного зв'язку, новинами та сторінками послуг — «Стандарт» покриває всі потреби.

Ліцензія «Старт» (~4 900 ₽/рік) — обмежена одним сайтом, не підтримує складовий сайт (multisite) та веб-кластер. Для одного корпоративного сайту цього достатньо.

Структура інфоблоків

Типовий набір інфоблоків для корпоративного сайту:

Всі інфоблоки створюємо в одному типі — наприклад CORPORATE. Тип задається при створенні інфоблоку в полі IBLOCK_TYPE_ID.

Важливе рішення — SEO-властивості. Для кожного інфоблоку активувати SEO-властивості (meta-заголовок, meta-опис, canonical) на рівні розділу та елементу. Інакше потім доведеться доробляти.

Шаблон компонента

Для виводу елементів інфоблоку використовуємо компоненти bitrix:news.list та bitrix:news.detail. Шаблон перевизначається в /local/templates/TEMPLATE_NAME/components/bitrix/news.list/services/.

Структура шаблону template.php:

<?php
/** @var array $arResult */
/** @var array $arParams */
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();
?>
<div class="services-grid">
    <?php foreach ($arResult['ITEMS'] as $item): ?>
        <div class="service-card">
            <?php if ($item['PREVIEW_PICTURE']): ?>
                <img src="<?= $item['PREVIEW_PICTURE']['SRC'] ?>"
                     alt="<?= htmlspecialchars($item['NAME']) ?>">
            <?php endif; ?>
            <h3><?= htmlspecialchars($item['NAME']) ?></h3>
            <div class="service-preview">
                <?= $item['PREVIEW_TEXT'] ?>
            </div>
            <a href="<?= $item['DETAIL_PAGE_URL'] ?>" class="btn">Детальніше</a>
        </div>
    <?php endforeach; ?>
</div>

Форми зворотного зв'язку

Стандартна форма Bitrix (bitrix:main.feedback) — застаріла, обмежена. Рекомендуємо два підходи:

1. Форма через вебформи (модуль form): Створюється в адміністративній частині: Сервіси → Форми. Гнучко налаштовуються поля, результати відправки, поштові шаблони. Виводиться компонентом bitrix:form.result.new.

2. Кастомна AJAX-форма. Більш сучасний варіант — форма на HTML, валідація на JS, відправка через AJAX на контролер Bitrix:

// /local/ajax/contact_form.php
require_once $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php';

if ($_SERVER['REQUEST_METHOD'] !== 'POST' || !check_bitrix_sessid()) {
    http_response_code(403);
    echo json_encode(['error' => 'Forbidden']);
    exit;
}

$name  = htmlspecialchars(trim($_POST['name'] ?? ''));
$phone = htmlspecialchars(trim($_POST['phone'] ?? ''));
$email = htmlspecialchars(trim($_POST['email'] ?? ''));

if (empty($name) || empty($phone)) {
    echo json_encode(['error' => 'Заповніть обов\'язкові поля']);
    exit;
}

// Створити лід у Bitrix24 (якщо інтегровано)
if (\Bitrix\Main\Loader::includeModule('crm')) {
    $lead = new \CCrmLead(false);
    $lead->Add([
        'TITLE'      => 'Заявка з сайту від ' . $name,
        'NAME'       => $name,
        'PHONE'      => [['VALUE' => $phone, 'VALUE_TYPE' => 'WORK']],
        'EMAIL'      => [['VALUE' => $email, 'VALUE_TYPE' => 'WORK']],
        'SOURCE_ID'  => 'WEB',
    ]);
}

// Відправити email
$event = new \Bitrix\Main\Mail\Event([
    'EVENT_NAME' => 'CONTACT_FORM_SUBMIT',
    'LID'        => SITE_ID,
    'C_FIELDS'   => ['NAME' => $name, 'PHONE' => $phone, 'EMAIL' => $email],
]);
$event->send();

echo json_encode(['success' => true]);

Мультимовність

Якщо сайт потрібен кількома мовами — налаштовується складовий сайт (multisite) на рівні ліцензії «Стандарт»+. Кожна мова — окремий сайт у Bitrix (SITE_ID), але на одному домені з мовними папками (/en/, /de/).

Переклади сторінок — через мовні властивості інфоблоку (модуль iblock підтримує багатомовні значення через таблиці b_iblock_element_prop_s{N} для рядків та b_iblock_element_prop_m{N} для множинних значень).

SEO: автогенерація мета-тегів

Для інфоблоків — шаблони мета-тегів у налаштуваннях SEO інфоблоку:

• title сторінки детального перегляду: {=ThisElement.NAME} — Компанія ТОВ «Назва»
• description: {=ThisElement.PREVIEW_TEXT} (обрізається до 160 символів через фільтр у компоненті)
• canonical: автоматично через \Bitrix\Main\Page\Asset

Продуктивність

Для візитки з невеликим трафіком (до 1000 відвідувачів на день) достатньо:

• Увімкнути Керований кеш (managed cache) у налаштуваннях компонентів.
• Кеш Bitrix файловий (за замовчуванням) або Redis.
• HTML-кеш для сторінок без персоналізації — через компонент bitrix:main.include з типом кешу A.

// Увімкнути HTML-кеш для головної сторінки
$APPLICATION->IncludeComponent('bitrix:main.include', '.default', [
    'AREA_FILE_SHOW' => 'sect',
    'PATH'           => '/index.php',
    'EDIT_TEMPLATE'  => 'index',
    'CACHE_TYPE'     => 'A',
    'CACHE_TIME'     => 3600, // 1 година
]);

Структура файлів проєкту

/local/
├── templates/
│   └── corporate_v1/       # Основний шаблон
│       ├── header.php
│       ├── footer.php
│       ├── styles/
│       ├── components/     # Перевизначення шаблонів компонентів
│       └── images/
├── components/
│   └── local/              # Кастомні компоненти (якщо потрібні)
└── php_interface/
    ├── init.php
    └── user_lang/

Терміни розробки