Методы доставки

Виджеты доставки предоставляют гибкий способ настройки полей формы оформления заказа для различных методов доставки в sCommerce. Каждый метод доставки может иметь свой собственный Blade-шаблон, который отображает необходимые поля формы.

Обзор

Начиная с версии 1.x, sCommerce поддерживает настраиваемые виджеты доставки через Blade-шаблоны. Это позволяет:

Настраивать формы оформления заказа для каждого метода доставки
Создавать специфичные для проекта реализации доставки
Интегрировать виджеты сторонних служб доставки (Новая Почта, UPS и т.д.)
Поддерживать единообразный стиль для всех методов доставки

Разрешение шаблонов

Шаблоны разрешаются в следующем порядке приоритета:

Виды проекта (наивысший приоритет)
```
views/delivery/{имя-доставки}.blade.php
```

Vendor по умолчанию (низший приоритет)

core/vendor/seiger/scommerce/views/delivery/{имя-доставки}.blade.php

Это позволяет переопределить любой шаблон доставки, просто скопировав его в директорию views вашего проекта.

Доступные переменные

Все шаблоны виджетов доставки получают следующие переменные:

`$delivery`

Массив с информацией о методе доставки:

$delivery['name'] - Уникальный идентификатор доставки (например, 'courier', 'pickup')
$delivery['title'] - Локализованное название метода доставки
$delivery['description'] - Локализованное описание метода доставки

`$checkout`

Массив с текущими данными оформления заказа:

$checkout['user'] - Информация о пользователе
$checkout['user']['address'] - Данные адреса (город, улица, дом, квартира и т.д.)
$checkout['cart'] - Данные корзины покупок
Другая информация, связанная с оформлением заказа

`$settings`

Массив с настройками метода доставки, сконфигурированными в админ-панели:

Пользовательские настройки различаются для каждого метода доставки
Пример для курьера: $settings['cities'], $settings['info']
Пример для самовывоза: $settings['locations']

Создание пользовательского виджета доставки

Шаг 1: Создание класса доставки

Создайте новый класс метода доставки, расширяющий BaseDeliveryMethod:

<?php namespace App\Delivery;

use Seiger\sCommerce\Delivery\BaseDeliveryMethod;

class CustomDelivery extends BaseDeliveryMethod
{
    public function getName(): string
    {
        return 'custom';
    }

    public function getType(): string
    {
        return "<b>Пользовательская доставка</b> (custom)";
    }

    public function getValidationRules(): array
    {
        return [
            'delivery.custom.address' => 'required|string|max:255',
            'delivery.custom.phone' => 'required|string',
        ];
    }

    public function calculateCost(array $order): float
    {
        return 50.00; // Фиксированная стоимость или пользовательский расчет
    }

    public function defineFields(): array
    {
        return [
            // Поля настроек админ-панели
        ];
    }

    public function prepareSettings(array $data): string
    {
        return json_encode($data, JSON_UNESCAPED_UNICODE);
    }
}

Шаг 2: Создание шаблона виджета

Создайте Blade-шаблон для вашего виджета доставки:

Файл: views/delivery/custom.blade.php

{{--
    Виджет пользовательской доставки
    
    Доступные переменные: $delivery, $checkout, $settings
--}}

<label class="form-label">
    <input 
        type="text" 
        name="delivery[{{$delivery['name']}}][address]" 
        value="{{old('delivery.'.$delivery['name'].'.address', '')}}"
        placeholder="Введите адрес доставки"
        required
    />
    <span>Адрес доставки</span>
</label>

<label class="form-label">
    <input 
        type="tel" 
        name="delivery[{{$delivery['name']}}][phone]" 
        placeholder="Номер телефона"
        required
    />
    <span>Контактный телефон</span>
</label>

Шаг 3: Регистрация метода доставки

Метод доставки будет автоматически зарегистрирован при добавлении в базу данных с правильным именем класса.

Примеры

Курьерская доставка

Расположение шаблона по умолчанию: core/vendor/seiger/scommerce/views/delivery/courier.blade.php

Возможности:

Ввод города с быстрым выбором города
Поля улицы, дома, квартиры
Выбор получателя (я сам или другое лицо)

Для настройки скопируйте в: views/delivery/courier.blade.php

Самовывоз

Расположение шаблона по умолчанию: core/vendor/seiger/scommerce/views/delivery/pickup.blade.php

Возможности:

Радиокнопки для выбора пункта самовывоза
Отображение всех настроенных адресов пунктов выдачи

Для настройки скопируйте в: views/delivery/pickup.blade.php

Соглашение об именовании полей

Всегда используйте следующий шаблон именования для полей ввода:

name="delivery[{{$delivery['name']}}][имя_поля]"

Это обеспечивает правильную структуру данных для:

Обработки валидации
Хранения данных заказа
Поддержки нескольких способов доставки

Использование виджетов в оформлении заказа

В вашем представлении оформления заказа просто выведите виджет:

@foreach($deliveries as $delivery)
    <div data-delivery="{{$delivery['name']}}">
        
        {{-- Информационное сообщение из настроек --}}
        @if(isset($delivery['info']) && trim($delivery['info']))
            <div class="message-info">
                {!! nl2br(e($delivery['info'])) !!}
            </div>
        @endif

        {{-- Виджет доставки --}}
        {!! $delivery['widget'] !!}
        
    </div>
@endforeach

$delivery['widget'] содержит предварительно отрендеренный HTML из шаблона метода доставки.

Расширенное использование

Добавление JavaScript

Используйте директиву @push('scripts') для добавления JavaScript в ваш виджет:

<div id="delivery-{{$delivery['name']}}">
    {{-- Поля вашей формы --}}
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Ваш JavaScript код
    console.log('Виджет доставки инициализирован');
});
</script>
@endpush

Условные поля с Alpine.js

<div x-data="{ showAdvanced: false }">
    <label>
        <input type="checkbox" x-model="showAdvanced">
        Показать дополнительные опции
    </label>
    
    <div x-show="showAdvanced" x-transition>
        {{-- Дополнительные поля --}}
    </div>
</div>

Интеграция с API

Для сторонних служб доставки:

<div id="delivery-api-widget-{{$delivery['name']}}"></div>

@push('scripts')
<script src="https://api.delivery-service.com/widget.js"></script>
<script>
DeliveryServiceWidget.init({
    container: '#delivery-api-widget-{{$delivery['name']}}',
    apiKey: '{{$settings['api_key'] ?? ''}}',
    onSelect: function(data) {
        // Обработка выбора доставки
    }
});
</script>
@endpush

Лучшие практики

Всегда валидируйте ввод - Определите правила валидации в getValidationRules()
Используйте ключи перевода - Сделайте виджеты многоязычными с помощью __('key')
Сохраняйте данные пользователя - Используйте хелпер old() для восстановления формы
Обрабатывайте ошибки корректно - Проверяйте существование настроек перед их использованием
Держите виджеты сфокусированными - Один виджет = один метод доставки
Документируйте код - Добавляйте комментарии, объясняющие сложную логику
Тестируйте в разных браузерах - Обеспечьте совместимость с целевыми браузерами

Устранение неполадок

Виджет не отображается

Проверьте, существует ли файл шаблона в одном из путей поиска
Убедитесь, что класс метода доставки реализует DeliveryMethodInterface
Проверьте логи Laravel на наличие ошибок рендеринга: storage/logs/scommerce.log

Ошибки валидации

Убедитесь, что имена полей соответствуют правилам валидации
Проверьте метод getValidationRules() в классе доставки
Убедитесь, что все обязательные поля присутствуют в виджете

Проблемы со стилями

Проверьте, соответствуют ли CSS-классы вашего проекта HTML виджета
Рассмотрите создание пользовательского шаблона в views/delivery/
Используйте инструменты разработчика браузера для проверки примененных стилей

Миграция с жестко закодированных форм

Если у вас есть существующие жестко закодированные формы доставки в checkout.blade.php:

Создайте шаблон виджета: views/delivery/{имя}.blade.php
Скопируйте HTML формы из checkout в шаблон виджета
Замените жестко закодированные значения переменными шаблона
Обновите имена полей ввода на формат delivery[{{$delivery['name']}}][поле]
Тщательно протестируйте процесс оформления заказа
Удалите старую жестко закодированную форму из checkout.blade.php

Обзор​

Разрешение шаблонов​

Доступные переменные​

$delivery​

$checkout​

$settings​

Создание пользовательского виджета доставки​

Шаг 1: Создание класса доставки​

Шаг 2: Создание шаблона виджета​

Шаг 3: Регистрация метода доставки​

Примеры​

Курьерская доставка​

Самовывоз​

Соглашение об именовании полей​

Использование виджетов в оформлении заказа​

Расширенное использование​

Добавление JavaScript​

Условные поля с Alpine.js​

Интеграция с API​

Лучшие практики​

Устранение неполадок​

Виджет не отображается​

Ошибки валидации​

Проблемы со стилями​

Миграция с жестко закодированных форм​

См. также​