Content
...
Reusable Partials
Twig-компоненты для переиспользования в мокапах. Подключай через {% include "partials/..." %}
mockup-sidebar.twig
Боковая панель навигации X-Cart Admin
{% include "partials/mockup-sidebar.twig" with { active: "orders" } %}Параметры:
| Параметр | Значения | Описание |
|---|---|---|
active |
dashboard, orders, catalog, communication,
promotions, channels, reports, apps,
design, store, settings, system
|
Активный пункт меню |
Примеры:
{# Страница заказов #}
{% include "partials/mockup-sidebar.twig" with { active: "orders" } %}
{# Страница продуктов #}
{% include "partials/mockup-sidebar.twig" with { active: "catalog" } %}
{# Страница настроек #}
{% include "partials/mockup-sidebar.twig" with { active: "settings" } %}mockup-topbar.twig
Верхняя панель с поиском и user menu
{% include "partials/mockup-topbar.twig" with { search_placeholder: "Search in orders" } %}Параметры:
| Параметр | Тип | Описание |
|---|---|---|
search_placeholder |
string | Placeholder для поля поиска |
Примеры:
{# Поиск по заказам #}
{% include "partials/mockup-topbar.twig" with { search_placeholder: "Search in orders" } %}
{# Поиск по продуктам #}
{% include "partials/mockup-topbar.twig" with { search_placeholder: "Search in products" } %}
{# Общий поиск #}
{% include "partials/mockup-topbar.twig" with { search_placeholder: "Search..." } %}mockup-order-header.twig
Заголовок страницы заказа с табами (General Info, Shipments, Messages, Returns)
{% include "partials/mockup-order-header.twig" with {
order_id: "00005",
active_tab: "returns",
returns_count: 1
} %}Параметры:
| Параметр | Тип | Описание |
|---|---|---|
order_id |
string | Номер заказа (например "00005") |
active_tab |
general | shipments | messages | returns |
Активный таб |
returns_count |
number (optional) | Счетчик возвратов для бейджа |
Примеры:
{# Returns tab active, 2 returns #}
{% include "partials/mockup-order-header.twig" with {
order_id: "00123",
active_tab: "returns",
returns_count: 2
} %}
{# General Info tab active #}
{% include "partials/mockup-order-header.twig" with {
order_id: "00456",
active_tab: "general"
} %}
{# Shipments tab active #}
{% include "partials/mockup-order-header.twig" with {
order_id: "00789",
active_tab: "shipments"
} %}Включает:
- ← Back to Orders link
- Order #XXXXX заголовок
- Бейджи статуса (Delivered, Paid)
- Print button
- Табы навигации
mockup-bottom-bar.twig
Нижняя панель действий (sticky)
{% include "partials/mockup-bottom-bar.twig" with {
primary_action: "Save changes",
secondary_actions: [
{ label: "Bulk edit all", icon: "fa-edit" },
{ label: "Export all", icon: "fa-download" }
]
} %}Параметры:
| Параметр | Тип | Описание |
|---|---|---|
primary_action |
string (optional) | Текст основной кнопки (синяя) |
secondary_actions |
array (optional) | Массив объектов { label, icon } для dropdown кнопок |
show_or |
boolean (default: true) | Показывать "or" между primary и secondary |
Примеры по контексту:
{# Список возвратов #}
{% include "partials/mockup-bottom-bar.twig" with {
primary_action: "Save changes",
secondary_actions: [
{ label: "Bulk edit all", icon: "fa-edit" },
{ label: "Export all", icon: "fa-download" }
]
} %}
{# Детали возврата #}
{% include "partials/mockup-bottom-bar.twig" with {
primary_action: "Save changes",
secondary_actions: [
{ label: "Approve", icon: "fa-check" },
{ label: "Deny", icon: "fa-times" },
{ label: "Print Label", icon: "fa-print" }
]
} %}
{# Настройки #}
{% include "partials/mockup-bottom-bar.twig" with {
primary_action: "Save changes",
secondary_actions: [
{ label: "Reset to defaults", icon: "fa-undo" }
]
} %}Структура мокапа
Базовая структура страницы с использованием partials
{% extends "mockup-layout.twig" %}
{% block mockup_title %}Page Title{% endblock %}
{% block mockup_meta %}
ECOM-XXXX
Description
{% endblock %}
{% block mockup_url %}admin.xcart.com/admin/?target=xxx{% endblock %}
{% block mockup_content %}
{% include "partials/mockup-sidebar.twig" with { active: "orders" } %}
{% include "partials/mockup-topbar.twig" with { search_placeholder: "Search..." } %}
{# Order page? Use order header #}
{% include "partials/mockup-order-header.twig" with {
order_id: "00005",
active_tab: "returns"
} %}
{# Your page content here #}
{% endblock %}Quick Reference
| Partial | Используется для | Пример |
|---|---|---|
mockup-sidebar.twig |
Левое меню навигации | Все страницы админки |
mockup-topbar.twig |
Верхняя панель с поиском | Все страницы админки |
mockup-order-header.twig |
Заголовок заказа + табы | Order detail, Order returns, Create return |
mockup-bottom-bar.twig |
Нижняя панель действий | Все страницы с формами/списками |