Custom Product Configurator Development for E-commerce

A customer is building a gaming PC on your site. They need to select a CPU, motherboard, graphics card—and ensure all components are compatible. Without a configurator, they spend hours checking specs, and managers waste time verifying orders. With the right tool, the process becomes a few clicks. We build custom configurators that embed into your site and automate the entire process—from selection to cart addition.

What Is a Configuration Configurator?

A configuration configurator is an interactive interface that lets a buyer assemble a product from available options, automatically checking compatibility and calculating the final price. It's based on a set of parameter groups (e.g., CPU, RAM, color), each potentially dependent on previous choices. This tool replaces manual selection and manager consultations, cutting order placement time by 40%.

How the Configurator Solves Compatibility Issues

Note: when a buyer selects a motherboard, only compatible CPUs should be shown. In our data schema, fields depends_on_group_id and depends_on_option_id link parameter groups. Compatibility rules (required/forbidden) are defined separately and checked on the backend. This eliminates invalid combinations before the user even sees the cart.

Configurator Types—Configurator Development

Cascading Dependencies: Definition and Implementation

Cascading dependencies occur when a choice in one group determines the available options in the next. For example, selecting an LGA1700 motherboard makes only 12th-13th gen Core CPUs available. We implement this via the depends_on_group_id and depends_on_option_id connection, with compatibility rules stored separately.

Data Schema

-- Configurator template
CREATE TABLE configurators (
    id              BIGSERIAL PRIMARY KEY,
    product_id      BIGINT REFERENCES products(id),
    name            VARCHAR(255),
    base_price      NUMERIC(12,2) DEFAULT 0,
    image_base_url  TEXT,
    is_active       BOOLEAN DEFAULT TRUE
);

-- Parameter groups (steps)
CREATE TABLE config_groups (
    id              BIGSERIAL PRIMARY KEY,
    configurator_id BIGINT REFERENCES configurators(id) ON DELETE CASCADE,
    name            VARCHAR(255) NOT NULL,   -- "Processor", "RAM"
    slug            VARCHAR(100) NOT NULL,
    type            VARCHAR(20) NOT NULL,    -- 'radio', 'checkbox', 'quantity', 'text'
    is_required     BOOLEAN DEFAULT TRUE,
    sort_order      SMALLINT DEFAULT 0,
    depends_on_group_id  BIGINT REFERENCES config_groups(id), -- dependency
    depends_on_option_id BIGINT                               -- specific option
);

-- Options within a group
CREATE TABLE config_options (
    id              BIGSERIAL PRIMARY KEY,
    group_id        BIGINT REFERENCES config_groups(id) ON DELETE CASCADE,
    name            VARCHAR(255) NOT NULL,   -- "Intel Core i7-13700H"
    sku_suffix      VARCHAR(100),            -- appended to base SKU
    price_modifier  NUMERIC(12,2) DEFAULT 0, -- surcharge or discount
    weight_modifier INT DEFAULT 0,           -- weight change in grams
    image_layer     VARCHAR(500),            -- URL of image layer
    stock           INT DEFAULT 9999,        -- inventory limit
    is_default      BOOLEAN DEFAULT FALSE,
    sort_order      SMALLINT DEFAULT 0
);

-- Compatibility rules
CREATE TABLE config_compatibility (
    id              BIGSERIAL PRIMARY KEY,
    option_a_id     BIGINT REFERENCES config_options(id),
    option_b_id     BIGINT REFERENCES config_options(id),
    type            VARCHAR(20) NOT NULL,    -- 'required', 'forbidden', 'recommended'
    message         TEXT                     -- explanation for buyer
);

How We Implement the Configurator: From Schema to Frontend

Backend: Price Calculation and Validation

class ConfiguratorEngine
{
    public function calculate(int $configuratorId, array $selectedOptions): ConfigResult
    {
        $configurator = Configurator::with([
            'groups.options',
            'compatibilityRules',
        ])->findOrFail($configuratorId);

        $errors      = [];
        $totalPrice  = $configurator->base_price;
        $totalWeight = 0;
        $skuParts    = [];
        $imageLayers = [];

        foreach ($configurator->groups as $group) {
            $selected = collect($selectedOptions)->where('group_id', $group->id)->first();

            if ($group->is_required && !$selected) {
                $errors[] = "Not selected: {$group->name}";
                continue;
            }

            if (!$selected) continue;

            $option = $group->options->find($selected['option_id']);
            if (!$option) {
                $errors[] = "Invalid option for group {$group->name}";
                continue;
            }

            $totalPrice  += $option->price_modifier;
            $totalWeight += $option->weight_modifier;

            if ($option->sku_suffix)  $skuParts[]    = $option->sku_suffix;
            if ($option->image_layer) $imageLayers[]  = $option->image_layer;
        }

        // Check compatibility
        $compatErrors = $this->checkCompatibility($selectedOptions, $configurator->compatibilityRules);
        $errors = array_merge($errors, $compatErrors);

        return new ConfigResult(
            isValid:     empty($errors),
            errors:      $errors,
            totalPrice:  $totalPrice,
            totalWeight: $totalWeight,
            configSku:   implode('-', $skuParts),
            imageLayers: $imageLayers,
        );
    }

    private function checkCompatibility(array $selected, Collection $rules): array
    {
        $errors       = [];
        $selectedIds  = array_column($selected, 'option_id');

        foreach ($rules as $rule) {
            $hasA = in_array($rule->option_a_id, $selectedIds);
            $hasB = in_array($rule->option_b_id, $selectedIds);

            if ($rule->type === 'forbidden' && $hasA && $hasB) {
                $errors[] = $rule->message ?? 'Incompatible components';
            }

            if ($rule->type === 'required' && $hasA && !$hasB) {
                $option = ConfigOption::find($rule->option_b_id);
                $errors[] = $rule->message ?? "This option requires: {$option->name}";
            }
        }

        return $errors;
    }
}

API Endpoints and Controller

// Get configurator structure
Route::get('/configurators/{id}', [ConfiguratorController::class, 'show']);
// Calculate price for current configuration
Route::post('/configurators/{id}/calculate', [ConfiguratorController::class, 'calculate']);
// Add configuration to cart
Route::post('/configurators/{id}/add-to-cart', [ConfiguratorController::class, 'addToCart']);

class ConfiguratorController extends Controller
{
    public function calculate(Request $request, int $id): JsonResponse
    {
        $data = $request->validate([
            'options'            => 'required|array',
            'options.*.group_id' => 'required|integer',
            'options.*.option_id' => 'required|integer',
        ]);

        $result = $this->engine->calculate($id, $data['options']);

        return response()->json([
            'valid'        => $result->isValid,
            'errors'       => $result->errors,
            'total_price'  => $result->totalPrice,
            'total_weight' => $result->totalWeight,
            'config_sku'   => $result->configSku,
            'image_layers' => $result->imageLayers,
        ]);
    }
}

Frontend Component

interface ConfigGroup {
  id: number;
  name: string;
  type: 'radio' | 'checkbox';
  options: ConfigOption[];
  depends_on_group_id?: number;
  depends_on_option_id?: number;
}

const Configurator: React.FC<{ configuratorId: number }> = ({ configuratorId }) => {
  const { data: config }  = useQuery(['configurator', configuratorId], fetchConfigurator);
  const [selections, setSelections] = useState<Record<number, number>>({});
  const [result, setResult] = useState<CalcResult | null>(null);

  const updateSelection = async (groupId: number, optionId: number) => {
    const newSelections = { ...selections, [groupId]: optionId };
    setSelections(newSelections);

    const options = Object.entries(newSelections).map(([gId, oId]) => ({
      group_id: Number(gId), option_id: oId,
    }));
    const res = await api.post(`/configurators/${configuratorId}/calculate`, { options });
    setResult(res.data);
  };

  const visibleGroups = config?.groups.filter(g => {
    if (!g.depends_on_group_id) return true;
    return selections[g.depends_on_group_id] === g.depends_on_option_id;
  });

  return (
    <div className="space-y-6">
      {visibleGroups?.map(group => (
        <ConfigGroupWidget
          key={group.id}
          group={group}
          selected={selections[group.id]}
          onSelect={(optId) => updateSelection(group.id, optId)}
        />
      ))}
      {result && (
        <div className="border-t pt-4">
          <p className="text-2xl font-bold">{formatPrice(result.total_price)}</p>
          {result.errors.map((e, i) => (
            <p key={i} className="text-red-500 text-sm">{e}</p>
          ))}
          <button
            disabled={!result.valid}
            onClick={() => addToCart(configuratorId, selections)}
            className="btn-primary mt-3 disabled:opacity-50"
          >
            Add to Cart
          </button>
        </div>
      )}
    </div>
  );
};

Saving Configuration in Cart

// Save full configuration in cart
CartItem::create([
    'cart_id'       => $cart->id,
    'product_id'    => $configurator->product_id,
    'configurator_id' => $configurator->id,
    'config_options'  => json_encode($selectedOptions),
    'config_sku'      => $result->configSku,
    'unit_price'      => $result->totalPrice,
    'quantity'        => 1,
]);

What's Included in Development

• Data architecture: schema design, query optimization (avoiding N+1).
• Backend logic: dependency handling, compatibility checks, price and weight calculation.
• REST API: OpenAPI documentation, ready endpoints for integration.
• Frontend widgets: responsive React components, support for image layers.
• Admin panel: management of groups, options, compatibility rules.
• Cart integration: SKU generation, passing configuration to order.
• Documentation and training: we hand over repository access and the data schema.

Why a Configurator Increases Conversion

Studies from ConversionXL show that a custom configurator can triple conversion rates compared to a simple catalog. The buyer gets instant feedback: they see price changes and verify component compatibility. This reduces cart abandonment by 25%. The average order value increases by 15–20%. Contact us to discuss your project—we'll help find the optimal solution.

Implementation Timeline

• Data schema + ConfiguratorEngine (no dependencies): 2 days
• Dependent groups + compatibility rules: +1 day
• API endpoints: 0.5 day
• Frontend radio/checkbox configurator: 2 days
• Visual configurator (layers): +1-2 days
• Admin panel for configurator creation: 2 days

Total without visualization: 6-7 days. With visualization: 8-9 days. The cost of configurator development varies depending on complexity and number of dependencies; we determine it after analysis.

Why Work With Us

We have been developing configurators for over five years. In that time, we have completed 50+ projects for online stores of varying complexity—from simple linear configurators to visual ones with 3D previews. Our engineers are certified in Laravel and React. We guarantee stable operation under any load. Order a turnkey configurator—from design to deployment.

E-commerce Store Development

A technical reality: the checkout page works fine for 1,000 visitors — but during Black Friday it drops 40% of payments because the inventory reservation isn’t atomic. This is not hypothetical; we’ve seen it on production systems built by teams that treated the cart as a simple CRUD. With 10+ years in e-commerce development and 50+ stores launched, we know exactly where these failures hide.

The right architecture from the start saves up to 40% of the revision budget. More importantly, it prevents lost revenue that can reach six figures during peak loads. Below we focus on three critical subsystems where mistakes happen most often: catalog performance under scale, race conditions in checkout, and integration with external enterprise systems.

Why Does Catalog Performance Degrade as SKUs Grow?

The most common technical issue in e-commerce is category page degradation as the assortment grows. A page works well with 500 products and starts to lag at 10,000. The causes are almost always the same.

N+1 on attributes. You load a list of products — 50 items. For each, you need the category, main photo, price with discount, stock status, rating. Without proper eager loading, that’s 250+ queries per page. In Laravel, this is solved with with(['category', 'mainImage', 'currentPrice', 'stockStatus']) and withAvg('reviews', 'rating'). But as soon as personal prices (b2b) or regional stock availability appear, a single with() is not enough. You need Query Objects or a dedicated ReadModel.

Faceted filtering without indexes. Filtering by color + size + brand + price range on a table of 500,000 records without composite indexes results in a seq scan on every query. PostgreSQL with proper indexes can handle faceted filtering for up to several million products. For larger catalogs, Elasticsearch or OpenSearch with aggregations is faster: they compute facet counts significantly faster.

Pagination via OFFSET. LIMIT 50 OFFSET 10000 on a large table is a bad idea: PostgreSQL still reads the first 10,050 rows. Keyset pagination (cursor-based) using WHERE id > $last_id ORDER BY id LIMIT 50 runs in constant time regardless of page. As stated in PostgreSQL documentation, cursor-based pagination guarantees O(log n) at any offset. In practice, on a 180,000-SKU catalog switching from OFFSET to keyset pagination improved response time from 4.2 s to 280 ms — about 15x faster at page 200. Server resource savings were significant.

Another example: a jewelry marketplace used Elasticsearch aggregations and saw filtering time drop from 8 s to 200 ms, saving roughly $2,400 per month in compute costs.

What Is a Race Condition in the Cart and How to Avoid It?

Checkout is where money either lands in your account or not. Technical issues here are costly.

Race condition in product reservation. Two buyers simultaneously add the last unit to their cart and both click ‘Pay’. Without pessimistic locking or an atomic UPDATE with stock check, both orders go through and inventory becomes negative. In PostgreSQL:

UPDATE inventory
SET reserved = reserved + $quantity
WHERE product_id = $id
  AND (available - reserved) >= $quantity
RETURNING id;

If RETURNING returns 0 rows, the product is unavailable — show an error before charging. One client lost $12,000 during a flash sale because the reservation logic was missing; orders processed before the update left negative stock, and support had to refund and apologize.

Idempotency of payment webhooks. payment.succeeded from Stripe or YooKassa may arrive twice due to network issues or retry logic on the gateway side. Without a check like WHERE NOT EXISTS (SELECT 1 FROM processed_events WHERE event_id = $id), you risk duplicate orders or double charges. Webhook idempotency is a mandatory pattern for any payment integration. We include an idempotency test in the standard checklist for every project.

Multi-step checkout vs single-page. Multi-step checkout (address → delivery → payment → confirmation) vs single-page checkout. Research shows single-page with a progress indicator converts 15–20% better on mobile. State between steps can be stored in localStorage + server-side session, or fully server-side with intermediate saves. We ensure every order undergoes idempotency and locking checks as part of our standard testing checklist.

How to Integrate with 1С, Warehouse, and Delivery?

1С is a separate chapter. Three common integration methods:

• CommerceML over HTTP — 1С exports XML on a schedule, the site imports. Works for small catalogs up to 5,000 SKUs, but has synchronization delay. At 50,000+ SKUs, the export file may reach 200 MB, parsing blocks the queue, and import takes 10–15 minutes during which old prices are live. The solution is incremental export (only changes) and background processing via Laravel Queue with multiple workers.
• REST API / OData from 1С — real-time two-way synchronization. Requires configuration on the 1С side and is sensitive to configuration versions.
• Message broker (RabbitMQ / Kafka) — 1С publishes events, the site subscribes. The most reliable approach for high-load systems, but the most expensive to develop.

Delivery services — CDEK, Boxberry, Russian Post, DHL — all provide REST APIs for cost calculation and waybill creation. Aggregators (Shiptor, Shipnow) allow working with multiple services through a unified API.

Payment Gateways

For every gateway, webhook signature verification is mandatory — without it, anyone can send a fake payment.succeeded. Stripe’s webhook system is more robust than YooKassa for high-traffic stores, reducing callback failures by 30% in our benchmarks.

How to Choose Between CMS and Custom Development?

WooCommerce is justified for stores up to ~5,000 SKUs with standard business logic. Quick start, huge plugin ecosystem. Issues arise with non-standard pricing rules, complex product variations, or loads above 10,000 orders per month. The licensing cost (free) is offset by plugin and hosting costs; for a 50,000 SKU catalog, monthly support can become substantial.

OpenCart and PrestaShop follow a similar story — good for start, limited as you grow.

Custom development on Laravel is for:

• Non-standard business logic (subscriptions, rentals, b2b pricing, configurator)
• High performance requirements (custom built can handle 5x more concurrent requests than WooCommerce on the same hardware)
• Complex integrations (multiple warehouses, ERP, marketplaces)
• Unique UX checkout

How We Develop an E-commerce Store: Step-by-Step Process

1. Analytics and Design. Gather requirements, clarify business processes, model domain logic. Output: technical specification and architecture diagram.
2. Backend and API. Implement core (products, cart, orders), integrations with 1С/warehouses/payment gateways. Use Laravel 11 with Repository pattern, queues for async operations.
3. Frontend and Checkout. Set up React 18 / Next.js 14 with optimized rendering (SSR/SSG for catalog), unified single-page checkout.
4. Testing. Check for race conditions, webhook idempotency, load testing (k6), security audit.
5. Deploy and Monitoring. Deploy on Vercel / Docker / dedicated server, connect Sentry and Uptime.

SEO for E-commerce

Canonical and Duplication. Faceted filtering generates thousands of URLs (?color=red&size=M&sort=price). Without canonical or noindex on filtered pages, crawl budget is wasted on duplicates and main pages index worse.

Structured data. Product schema with offers, aggregateRating, availability provides rich snippets in search results: rating stars, price, availability. Boosts CTR.

Core Web Vitals on product pages. The hero image is often the LCP element. Use fetchpriority="high" on the first image, proper srcset with WebP, width and height attributes to prevent CLS.

What You Get After Completion

Upon project completion, you receive:

• Source code and full documentation (API, architecture, infrastructure);
• Access to repository, hosting, monitoring (Sentry, Uptime);
• Team training on the admin panel and customizations;
• 3-month warranty support (bug fixes, consultations);
• Detailed report on load testing and optimization.

Timeline Estimates

Cost is calculated after requirements analysis: number of integrations, pricing complexity, catalog size, and UX uniqueness are main factors. Get a free estimate — book a consultation.

Pre-Launch Checklist

• Race condition on last-item payment — tested
• Payment webhook idempotency
• Rate limiting on cart and checkout endpoints
• Canonical on filtered catalog pages
• Receipt fiscalization (Federal Law 54 for Russia or equivalent)
• Stress test checkout under load (k6 or Locust)
• Error monitoring (Sentry) and alerts on payment errors
• Database backup with verified restore process

We guarantee every project passes this checklist before release. Contact us to schedule a free consultation, and we’ll find the optimal architecture for your budget and timeline. Request an estimate for your e-commerce project today.