Розробка сайту на Magento / Adobe Commerce

Розробка веб-сайту на Magento / Adobe Commerce

Magento 2 / Adobe Commerce — це корпоративна платформа для великомасштабної електронної комерції. Її обирають, коли потрібні: мультисайтовий режим з однієї інсталяції, складна структура каталогу з тисячами атрибутів, кастомні бізнес-процеси, які неможливо реалізувати на SaaS-платформах.

Magento Open Source проти Adobe Commerce

Для більшості проектів достатньо Open Source. Adobe Commerce виправданий для B2B-сценаріїв, складної персоналізації або інтеграції з Adobe Analytics/AEM.

Вимоги до сервера

Magento 2.4.x (поточна гілка):

• PHP 8.1–8.3 (8.2 оптимальна)
• MySQL 8.0 або MariaDB 10.6
• Elasticsearch 8.x або OpenSearch 2.x (обов'язково для пошуку)
• Redis 7.x (сесії + кеш)
• RabbitMQ 3.11+ (для асинхронних черг у великих магазинах)
• Nginx 1.24+ / Apache 2.4
• Varnish 7.x (reverse proxy cache, необов'язково)
• Мінімум 4 CPU, 8 GB RAM для dev; 8 CPU, 16 GB RAM для prod

Архітектура модульної системи

Magento побудована на модулях. Кожен модуль — це папка в app/code/Vendor/Module/ або vendor/vendor/module/:

app/code/MyCompany/Catalog/
├── Block/          # PHP класи для View (застарілий підхід)
├── Controller/     # HTTP контролери
├── etc/
│   ├── module.xml  # оголошення модуля
│   ├── di.xml      # конфігурація Dependency Injection
│   ├── routes.xml  # маршрути
│   └── frontend/
│       └── events.xml  # підписки на події
├── Model/          # бізнес-логіка
├── Plugin/         # Interceptors (before/after/around)
├── Observer/       # Observer подій
├── Setup/
│   ├── InstallSchema.php
│   └── Patch/Data/  # Data patches
├── view/
│   └── frontend/
│       ├── layout/  # XML макет
│       └── templates/ # .phtml шаблони
└── registration.php

Dependency Injection та Plugin

Magento не використовує new ClassName() — всі залежності вводяться через конструктор. Налаштовується в etc/di.xml:

<!-- Підмова класу (preference) -->
<preference for="Magento\Catalog\Model\Product"
            type="MyCompany\Catalog\Model\Product"/>

<!-- Plugin (interceptor) — без підміни класу -->
<type name="Magento\Catalog\Model\ResourceModel\Product\Collection">
    <plugin name="mycompany_catalog_collection_plugin"
            type="MyCompany\Catalog\Plugin\ProductCollectionPlugin"
            sortOrder="10"/>
</type>

Plugin (before/after/around):

// MyCompany/Catalog/Plugin/ProductCollectionPlugin.php
namespace MyCompany\Catalog\Plugin;

use Magento\Catalog\Model\ResourceModel\Product\Collection;

class ProductCollectionPlugin
{
    public function afterLoad(Collection $subject, Collection $result): Collection
    {
        // Додаємо атрибут після завантаження колекції
        foreach ($result as $product) {
            $margin = ($product->getPrice() - $product->getCost()) / $product->getPrice() * 100;
            $product->setData('margin_percent', round($margin, 2));
        }
        return $result;
    }
}

Кастомний атрибут товару

// Setup/Patch/Data/AddProductAttributes.php
namespace MyCompany\Catalog\Setup\Patch\Data;

use Magento\Framework\Setup\Patch\DataPatchInterface;
use Magento\Catalog\Setup\CategorySetupFactory;

class AddProductAttributes implements DataPatchInterface
{
    public function __construct(
        private readonly CategorySetupFactory $categorySetupFactory,
        private readonly \Magento\Framework\Setup\ModuleDataSetupInterface $moduleDataSetup,
    ) {}

    public function apply(): void
    {
        $setup = $this->categorySetupFactory->create(['setup' => $this->moduleDataSetup]);

        $setup->addAttribute('catalog_product', 'delivery_days', [
            'type'           => 'int',
            'label'          => 'Час доставки (днів)',
            'input'          => 'text',
            'required'       => false,
            'visible'        => true,
            'user_defined'   => true,
            'searchable'     => false,
            'filterable'     => false,
            'comparable'     => false,
            'visible_on_front' => true,
            'used_in_product_listing' => true,
            'unique'         => false,
            'apply_to'       => '',
        ]);

        $setup->addAttributeToSet('catalog_product', 'Default', 'General', 'delivery_days');
    }

    public static function getDependencies(): array { return []; }
    public function getAliases(): array { return []; }
}

GraphQL API Magento

Magento 2.4 має вбудований GraphQL API для headless:

query GetProduct($urlKey: String!) {
  products(filter: { url_key: { eq: $urlKey } }) {
    items {
      id
      sku
      name
      price_range {
        minimum_price {
          regular_price { value currency }
          final_price { value currency }
          discount { amount_off percent_off }
        }
      }
      ... on ConfigurableProduct {
        configurable_options {
          label
          values { label uid }
        }
        variants {
          attributes { label uid }
          product {
            sku
            stock_status
            price_range { minimum_price { final_price { value } } }
          }
        }
      }
      custom_attributes {
        attribute_metadata { code label }
        ... on AttributeValue { value }
      }
    }
  }
}

PWA Studio / Vue Storefront

Для headless-фронтенду на Magento використовуйте:

• PWA Studio (офіційний, React) — активно розробляється Adobe
• Vue Storefront 2 (Nuxt.js) — популярна альтернатива
• Next.js Commerce — з адаптером для Magento

Мультисайтовість та продуктивність

Magento нативно підтримує кілька сайтів, магазинів та store view з однієї інсталяції. Конфігурація в Admin > Stores > Configuration зі scope: Global → Website → Store View.

Для високовантажних інсталяцій:

• Varnish FPC (Full Page Cache) — кеш HTML-сторінок
• Redis: окремі екземпляри для кеша та сесій
• Elasticsearch: окремий кластер від основного сервера
• CDN для статичних ресурсів (Fastly, CloudFront)
• Горизонтальне масштабування: кілька PHP-FPM серверів + спільне NFS/GCS для медіа

Типовий стек розробки

# Ініціалізація проекту
composer create-project --repository-url=https://repo.magento.com/ \
    magento/project-community-edition=2.4.7 my-magento

# Встановлення
bin/magento setup:install \
    --db-host=localhost \
    --db-name=magento \
    --db-user=magento \
    --db-password=secret \
    --base-url=https://magento.local/ \
    --admin-firstname=Admin \
    --admin-lastname=User \
    [email protected] \
    --admin-user=admin \
    --admin-password=Admin123! \
    --language=en_US \
    --currency=USD \
    --timezone=UTC \
    --use-rewrites=1 \
    --search-engine=opensearch \
    --opensearch-host=localhost \
    --opensearch-port=9200

# Після змін у модулях
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy en_US -f
bin/magento cache:flush

Термін виконання

Запуск магазину на Open Source з готовою темою та стандартним набором модулів: 4–8 тижнів. Кастомна розробка з кількома модулями, інтеграцією з ERP/1C та мультисайтом: 3–6 місяців. Adobe Commerce з B2B-модулем, Page Builder, Customer Segments та інтеграцією з Adobe Experience Cloud: 6+ місяців, залежить від обсягу.