Меню и Навигация (Menu Builder)

Долната навигационна лента (Bottom Navigation Bar) е гръбнакът на потребителското изживяване във всяко модерно мобилно приложение. Тя осигурява незабавен достъп с един палец до най-важните раздели на вашия електронен магазин или уебсайт (Каталог, Търсене, Количка, Профил, Контакт).

В WiXO вие разполагате с гъвкав конструктор на менюта, визуален селектор на икони, многоезична поддръжка и виртуален мобилен симулатор в реално време.

Екран на Конструктора за Навигация

Конструктор за меню и навигация с телефонен симулатор в WiXO

Екранът е разделен на две логически части:

Лява колона: Глобална конфигурация, списък с елементи, възможност за добавяне и пренареждане.
Дясна колона: Интерактивен виртуален симулатор на смартфон (Live Preview), който визуализира точния изглед на лентата според избрания език.

1. Глобална конфигурация (Global Configuration)

В най-горния панел се управлява глобалното поведение на навигационната лента:

Максимален брой елементи (navbar_max_items):
- Числова стойност от 1 до 8 (препоръчително е между 4 и 5 за стандартни смартфони, за да има достатъчно пространство за иконите и текстовете).
- Определя колко бутона ще се виждат директно върху долната лента на приложението.
Автоматично поведение с бутон „Още“ (More Menu):
- Ако добавите повече елементи от зададения максимален лимит (например 7 елемента при лимит от 4), първите 4 елемента заемат позициите в лентата, а автоматично се генерира пети бутон „Още“ (More).
- При натискане на „Още“ в мобилното приложение се отваря елегантно странично или изскачащо меню (Drawer), съдържащо останалите елементи.
Индикатор за незапазена настройка (Unsaved badge):
- Ако промените числото в полето, се появява оранжев етикет „Незапазено“.
- Натиснете бутона Запази настройките (Save Settings), за да влезе промяната в сила.

2. Четирите типа навигационни елементи и техните полета

При натискане на бутона + Добавяне на елемент за навигация (Add navigation element) се отваря страничен модален прозорец. WiXO поддържа 4 специализирани типа елементи:

┌────────────────────────────────────────────────────────┐
│               Типове навигационни елементи              │
├─────────────┬─────────────┬─────────────┬──────────────┤
│     URL     │  JavaScript │    Имейл    │   Телефон    │
│  (Уеб линк) │   (Скрипт)  │  (mailto:)  │    (tel:)    │
└─────────────┴─────────────┴─────────────┴──────────────┘

Тип 1: URL (Уеб адрес)

Това е стандартният и най-често използван тип елемент. Зарежда вътрешна или външна уеб страница директно в нативния WebView контейнер на приложението.

Налични полета и настройки:

Икона (Icon):
- Натиснете бутона за избор на икона, за да отворите вградената библиотека (Icon Picker).
- Можете да търсите по ключови думи (напр. home, cart, shopping-bag, user, heart, magnifying-glass).
Опресняване при фокус (Refresh on Focus):
- Превключвател (Toggle Switch), наличен само за тип URL.
- Какво прави: Когато клиентът превключи на този таб или го докосне повторно, приложението автоматично презарежда страницата от сървъра.
- Кога се ползва: Изключително препоръчително за страницата „Количка“ (Cart) или „Профил“ (My Account), за да може наличностите, приложените промокодове и новите поръчки да се актуализират мигновено.
Преводи (Translations) – отделен таб за всеки език:
- Текст (Label): Заглавието под иконата в навигационната лента (напр. Начало, Продукти, Количка).
- URL адрес (Action): Пълният уеб адрес на целевата страница (напр. https://trendstyle.bg/cart или локален път). Полето се валидира за коректен URL формат.
- Описание (Description): Незадължително разширено описание. Използва се за достъпност (Screen Readers) и при показване в разширеното меню „Още“.

Тип 2: JavaScript (Клиентски скрипт)

Позволява задействане на произволен JavaScript код в контекста на вашия сайт при кликване върху бутона, без да се сменя текущият URL адрес.

Налични полета:

Икона (Icon): Визуален символ за функцията (напр. чат балон, филтър, лупа).
Преводи (Translations):
- Текст (Label): Етикет на бутона (напр. Филтри, Бърза кошница, Чат на живо).
- JavaScript код (Action): Произволна JS команда за изпълнение.
- Описание (Description): Пояснение за вътрешна употреба или меню.

Практически сценарии:

Отваряне на странична количка (Slide-out Cart):
```
window.openSideCartModal();
```
Отваряне на мобилни филтри за размери и категории:
```
document.querySelector('.mobile-filter-drawer').classList.add('active');
```
Стартиране на чат бот за поддръжка:
```
Tawk_API.maximize();
```
Връщане на предишната страница (Back бутон):
```
window.history.back();
```

Тип 3: Имейл (Email)

Задейства директно стандартното системно приложение за електронна поща на мобилното устройство (Apple Mail, Gmail, Outlook) чрез протокола mailto:.

Налични полета:

Икона (Icon): Икона на писмо, плик или пощенска кутия (heroicon-o-envelope).
Преводи (Translations):
- Текст (Label): Напр. Пишете ни, Поддръжка, Имейл.
- Имейл адрес (Action): Валиден имейл адрес (напр. support@trendstyle.bg). Системата валидира синтаксиса на имейла.
- Описание (Description): Допълнителен текст (напр. „Отговаряме в рамките на 24 часа“).

Предимства:

Клиентът не попълва контактни форми в уебсайта.
Съобщението се изпраща директно от неговия личен имейл акаунт, гарантирайки надежден обратен контакт.

Тип 4: Телефон (Telephone)

Задейства приложението за телефонни разговори на смартфона чрез протокола tel:, като зарежда номера за директно набиране с един клик.

Налични полета:

Икона (Icon): Телефонна слушалка или мобилен апарат (heroicon-o-phone).
Преводи (Translations):
- Текст (Label): Напр. Обади се, Поръчай по телефон, Контакти.
- Телефонен номер (Action): Телефонът за връзка (напр. +359888123456 или 070012345). Препоръчва се използването на международен код +359.
- Описание (Description): Незадължителна бележка (напр. „Работно време: 09:00 - 18:00 ч.“).

Обобщена сравнителна таблица

Тип елемент	Действие при натискане	Специфични полета	Валидация
URL	Отваря уеб страница в WebView	`Refresh on Focus`, `URL адрес`	Валиден URL синтаксис
JavaScript	Изпълнява JS функция на сайта	`JavaScript код`	Непразно текстово поле
Email	Отваря пощенски клиент (`mailto:`)	`Имейл адрес`	Валиден имейл формат
Telephone	Набира телефонен номер (`tel:`)	`Телефонен номер`	Непразно текстово поле

3. Подреждане, редакция и изтриване на елементи

Всеки създаден елемент се появява в списъка под формата на сгъваем панел (Card / Accordion):

Пренареждане с влачене (Drag & Drop):
- Хванете манипулатора с хоризонталните чертички (хендъла) в най-левия край на картата.
- Плъзнете елемента на желаната позиция нагоре или надолу.
- Новата подредба се запазва мигновено на заден фон и симулаторът се обновява в същата секунда!
Редакция на съществуващ елемент:
- Кликнете върху заглавието на елемента, за да разгънете пълната форма.
- Можете да смените иконата, етикетите за всеки език, действието или настройката Refresh on Focus.
- Натиснете бутона Актуализирай (Update), за да приложите промените.
Премахване на елемент (Remove):
- В долния ляв ъгъл на разгънатия панел има червен бутон Премахни (Remove).
- Системата отваря предпазен модален прозорец за потвърждение: „Премахване на елемент от навигацията? Това действие не може да бъде отменено.“

4. Виртуален симулатор на телефон (Live Preview)

В дясната колона на екрана се намира интерактивният телефонен симулатор:

Автоматично пресмятане на колоните: Симулаторът динамично преразпределя ширината на бутоните според техния брой и параметъра navbar_max_items.
Визуализация на бутон „Още“ (More): Ако елементите надвишават лимита, симулаторът веднага визуализира бутона за разширено меню.
Език на илюстрацията (Preview Language):
- Падащо меню, позволяващо да превключвате между активните езици на приложението (напр. Български и English).
- Позволява да се уверите, че по-дълги текстове на чужди езици се събират естетично и четливо в долната лента.