1. Структура каталога

Используем инфоблоки для хранения товаров. Минимальные поля — название, код, цена и картинка. В шаблоне каталога мы будем выводить товары из инфоблока и делать кнопку «Добавить в корзину».

<article class="product" data-id="">
  <img src="<?= \$arItem['PREVIEW_PICTURE']['SRC'] ?>" alt="<?= htmlspecialchars(\$arItem['NAME']) ?>"/>
  <h3><?= htmlspecialchars(\$arItem['NAME']) ?></h3>
  <p class="price"><?= number_format(\$arItem['PROPERTIES']['PRICE']['VALUE'], 0, ',', ' ' ) ?> ₽</p>
  <button class="add-to-cart" data-id="<?= \$arItem['ID'] ?>">В корзину</button>
</article>

2. Простая корзина на JavaScript + сессии

Храним корзину в localStorage на клиенте и отправляем на сервер при оформлении. Сервер обрабатывает массив товаров и создает заявку (письмо или запись в БД).

// cart.js — простая корзина на localStorage
(function(){
  const CART_KEY = 'my_bitrix_cart_v1';

  function getCart(){
    return JSON.parse(localStorage.getItem(CART_KEY) || '[]');
  }

  function saveCart(cart){
    localStorage.setItem(CART_KEY, JSON.stringify(cart));
  }

  function addToCart(id, qty){
    const cart = getCart();
    const item = cart.find(i => i.id === id);
    if(item) item.qty += qty; else cart.push({id: id, qty: qty});
    saveCart(cart);
    alert('Товар добавлен в корзину');
  }

  document.addEventListener('click', function(e){
    const btn = e.target.closest('.add-to-cart');
    if(!btn) return;
    const id = btn.getAttribute('data-id');
    addToCart(id, 1);
  });
})();

// отправка корзины на сервер
fetch('/local/ajax/checkout.php', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ cart: getCart(), user: { name: 'Иван', phone: '+7...' } })
})
.then(r => r.json())
.then(data => { if(data.success) location.href = '/thanks/'; else alert('Ошибка'); });

3. Сервер: приём и обработка заказа

Простой обработчик в PHP принимает JSON, формирует письмо или сохраняет заказ в собственной таблице БД.

<?php
// /local/ajax/checkout.php
header('Content-Type: application/json; charset=utf-8');
\$body = json_decode(file_get_contents('php://input'), true);
if(!\$body || empty(\$body['cart'])){
  echo json_encode(['success' => false, 'error' => 'empty']);
  exit;
}

// Здесь: валидация, получение данных товаров из инфоблока, расчёт суммы
// Пример — отправим письмо менеджеру
\$to = 'orders@site.ru';
\$subject = 'Новый заказ с сайта';
\$message = "Новый заказ:\n";
foreach(\$body['cart'] as \$item){
  \$message .= "ID: " . intval(\$item['id']) . " — Кол-во: " . intval(\$item['qty']) . "\n";
}
// Доп. данные пользователя
\$message .= "Имя: " . (isset(\$body['user']['name']) ? strip_tags(\$body['user']['name']) : '') . "\n";
\$message .= "Телефон: " . (isset(\$body['user']['phone']) ? strip_tags(\$body['user']['phone']) : '') . "\n";

mail(\$to, \$subject, \$message);

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

Важно: это упрощённый пример. В продакшене используйте защиту от CSRF, валидацию входных данных, логирование и проверку товаров (наличие и цену) на сервере.

4. Оплаты и доставка

Для онлайн‑оплаты интегрируйте платёжный шлюз (Яндекс.Касса / Tinkoff / CloudPayments). Обычно это форма на стороне платёжного провайдера или API для серверной инициации платежа.

1. Клиент формирует корзину → отправляет на /checkout
2. Сервер сохраняет заказ со статусом NEW и генерирует уникальный ID
3. Сервер инициирует платёж у провайдера (API) и получает ссылку
4. Клиент перенаправляется на платёжную страницу или видит встроенную форму
5. После оплаты провайдер шлёт callback — сервер сменит статус заказа на PAID

5. UX: короткие советы

• Показывайте содержимое корзины в шапке сайта — пользователь должен видеть товары и сумму.
• Минимизируйте поля в форме заказа (имя, телефон, способ доставки).
• Добавьте валидацию телефона и подсказки по времени доставки.