Разработка кастомного аддона Statamic

Наша компания занимается разработкой, поддержкой и обслуживанием сайтов любой сложности. От простых одностраничных сайтов до масштабных кластерных систем построенных на микро сервисах. Опыт разработчиков подтвержден сертификатами от вендоров.

Разработка и обслуживание любых видов сайтов:

Информационные сайты или веб-приложения
Сайты визитки, landing page, корпоративные сайты, онлайн каталоги, квиз, промо-сайты, блоги, новостные ресурсы, информационные порталы, форумы, агрегаторы
Сайты или веб-приложения электронной коммерции
Интернет-магазины, B2B-порталы, маркетплейсы, онлайн-обменники, кэшбэк-сайты, биржи, дропшиппинг-платформы, парсеры товаров
Веб-приложения для управления бизнес-процессами
CRM-системы, ERP-системы, корпоративные порталы, системы управления производством, парсеры информации
Сайты или веб-приложения электронных услуг
Доски объявлений, онлайн-школы, онлайн-кинотеатры, конструкторы сайтов, порталы предоставления электронных услуг, видеохостинги, тематические порталы

Это лишь некоторые из технических типов сайтов, с которыми мы работаем, и каждый из них может иметь свои специфические особенности и функциональность, а также быть адаптированным под конкретные потребности и цели клиента

Предлагаемые услуги
Показано 1 из 1 услугВсе 2065 услуг
Разработка кастомного аддона Statamic
Сложная
~3-5 рабочих дней
Часто задаваемые вопросы

Наши компетенции:

Этапы разработки
Последние работы
  • image_website-b2b-advance_0.png
    Разработка сайта компании B2B ADVANCE
    1262
  • image_web-applications_feedme_466_0.webp
    Разработка веб-приложения для компании FEEDME
    1171
  • image_websites_belfingroup_462_0.webp
    Разработка веб-сайта для компании БЕЛФИНГРУПП
    874
  • image_ecommerce_furnoro_435_0.webp
    Разработка интернет магазина для компании FURNORO
    1094
  • image_crm_enviok_479_0.webp
    Разработка веб-приложения для компании Enviok
    831
  • image_bitrix-bitrix-24-1c_fixper_448_0.png
    Разработка веб-сайта для компании ФИКСПЕР
    851

Разработка кастомного аддона Statamic

Аддоны Statamic — Laravel-пакеты, расширяющие CMS через официальное API: кастомные теги Antlers, fieldtype-поля, модификаторы, CP-виджеты, команды. Распространяются через Packagist или используются как локальные пакеты.

Создание аддона

php artisan statamic:make:addon vendor/my-addon
# Создаёт skeleton в packages/vendor/my-addon/
// packages/vendor/my-addon/composer.json
{
  "name": "vendor/my-addon",
  "description": "My Statamic Addon",
  "type": "statamic-addon",
  "require": {
    "statamic/cms": "^4.0"
  },
  "extra": {
    "statamic": {
      "name": "My Addon",
      "slug": "my-addon"
    }
  },
  "autoload": {
    "psr-4": { "Vendor\\MyAddon\\": "src/" }
  }
}
// composer.json проекта — подключение локального пакета
"repositories": [
  { "type": "path", "url": "packages/vendor/my-addon" }
],

ServiceProvider — регистрация компонентов

// src/ServiceProvider.php
namespace Vendor\MyAddon;

use Statamic\Providers\AddonServiceProvider;
use Statamic\Facades\Fieldtype;
use Statamic\Facades\Modifier;

class ServiceProvider extends AddonServiceProvider
{
    protected $tags = [
        \Vendor\MyAddon\Tags\SocialShare::class,
        \Vendor\MyAddon\Tags\RelatedContent::class,
    ];

    protected $fieldtypes = [
        \Vendor\MyAddon\Fieldtypes\ColorSwatchFieldtype::class,
    ];

    protected $modifiers = [
        \Vendor\MyAddon\Modifiers\ReadingTime::class,
        \Vendor\MyAddon\Modifiers\Truncate::class,
    ];

    protected $widgets = [
        \Vendor\MyAddon\Widgets\RecentEditsWidget::class,
    ];

    protected $commands = [
        \Vendor\MyAddon\Console\Commands\ImportContent::class,
    ];

    public function boot(): void
    {
        parent::boot();

        // Публикация конфигов
        $this->mergeConfigFrom(__DIR__.'/../config/my-addon.php', 'my-addon');
        $this->publishes([
            __DIR__.'/../config/my-addon.php' => config_path('my-addon.php'),
        ], 'my-addon-config');

        // Загрузка вьюшек
        $this->loadViewsFrom(__DIR__.'/../resources/views', 'my-addon');
    }
}

Кастомный тег Antlers

// src/Tags/SocialShare.php
namespace Vendor\MyAddon\Tags;

use Statamic\Tags\Tags;

class SocialShare extends Tags
{
    protected static $handle = 'social_share';

    /**
     * {{ social_share url="{url}" title="{title}" platform="twitter" }}
     */
    public function index(): string
    {
        $url = urlencode($this->params->get('url', request()->url()));
        $title = urlencode($this->params->get('title', ''));
        $platform = $this->params->get('platform', 'all');

        return match ($platform) {
            'twitter' => "https://twitter.com/intent/tweet?url={$url}&text={$title}",
            'telegram' => "https://t.me/share/url?url={$url}&text={$title}",
            'vk'       => "https://vk.com/share.php?url={$url}&title={$title}",
            default    => $this->renderAllButtons($url, $title),
        };
    }

    /**
     * {{ social_share:buttons url="{url}" }}
     * Рендерит view с кнопками
     */
    public function buttons(): string
    {
        return view('my-addon::social-share', [
            'url'   => urlencode($this->params->get('url', request()->url())),
            'title' => urlencode($this->params->get('title', '')),
        ])->render();
    }
}

Использование в Antlers:

{{ social_share:buttons url="{url}" title="{title}" }}

Кастомный Fieldtype

// src/Fieldtypes/ColorSwatchFieldtype.php
namespace Vendor\MyAddon\Fieldtypes;

use Statamic\Fields\Fieldtype;

class ColorSwatchFieldtype extends Fieldtype
{
    protected static $handle = 'color_swatch';

    public static function title(): string
    {
        return 'Color Swatch';
    }

    public function configFieldItems(): array
    {
        return [
            'swatches' => [
                'display'      => 'Color Swatches',
                'type'         => 'array',
                'value_header' => 'HEX Value',
                'key_header'   => 'Name',
            ],
        ];
    }

    // Метаданные для Vue-компонента в CP
    public function preload(): array
    {
        return [
            'swatches' => $this->config('swatches', []),
        ];
    }

    public function preProcess(mixed $data): mixed
    {
        return $data ?? null;
    }

    public function process(mixed $data): mixed
    {
        return $data;
    }
}

Vue-компонент для CP (resources/js/components/fieldtypes/ColorSwatchFieldtype.vue):

<template>
  <div class="color-swatches">
    <div
      v-for="(hex, name) in meta.swatches"
      :key="name"
      class="swatch"
      :class="{ selected: value === hex }"
      :style="{ backgroundColor: hex }"
      :title="name"
      @click="$emit('input', hex)"
    />
    <div v-if="value" class="selected-color">
      {{ value }}
      <button @click="$emit('input', null)">×</button>
    </div>
  </div>
</template>

Модификатор Antlers

// src/Modifiers/ReadingTime.php
namespace Vendor\MyAddon\Modifiers;

use Statamic\Modifiers\Modifier;

class ReadingTime extends Modifier
{
    protected static $handle = 'reading_time';

    public function index(string $value, array $params): string
    {
        $wordsPerMinute = (int) ($params[0] ?? 200);
        $wordCount = str_word_count(strip_tags($value));
        $minutes = (int) ceil($wordCount / $wordsPerMinute);

        return $minutes . ' мин. чтения';
    }
}
{{ content | reading_time:200 }}

Тестирование аддона

// tests/Unit/Tags/SocialShareTest.php
use Vendor\MyAddon\Tests\TestCase;

class SocialShareTest extends TestCase
{
    /** @test */
    public function it_generates_twitter_share_url()
    {
        $result = $this->tag('social_share')
            ->params(['url' => 'https://example.com', 'platform' => 'twitter'])
            ->fetch();

        $this->assertStringContainsString('twitter.com/intent/tweet', $result);
        $this->assertStringContainsString(urlencode('https://example.com'), $result);
    }
}

Сроки разработки

Тип аддона Время
2–3 Antlers-тега 1–2 дня
Fieldtype с Vue-компонентом 2–4 дня
CP-виджет 1–2 дня
Полноценный аддон (теги + fieldtype + настройки) 1–2 недели
Подготовка к публикации в Marketplace +1–2 дня