«Смачно, як вдома» — презентація проєкту

Про проєкт

Інтернет-вітрина й система прийому замовлень для сімейного виробництва

Проєкт складається з двох частин: публічного лендінга, де клієнт обирає товари й лишає заявку, та власної адмін-панелі, через яку власник керує каталогом, цінами, містами, графіком доставки й обробляє замовлення.

Частина 1

Клієнтський сайт

Каталог за категоріями, кошик із пам’яттю, форма-«накладна» з підсумком замовлення, підписка на Telegram у два дотики, календар привозів, відгуки, три мови.

Частина 2

Адмін-панель (власна CMS)

Товари й категорії, ціни й вартість доставки по містах, довідник міст Галісії, календар і автоматизація дат доставки, замовлення, зведення по товарах, друк накладних, база клієнтів, розсилки, відгуки, вхід у два кроки.

Що це дає власнику бізнесу

01Єдина ціна на товар, доставка — за містомТовар коштує однаково в будь-якому місті. Різниться лише доставка: у кожного міста своя ціна за пункт видачі й за адресну, і вона йде окремим рядком у накладній.

02Календар привозів веде себе самПравило задається один раз — «кожна перша п’ятниця в Каріньйо». Далі дати створюються наперед, а минулі зникають.

03Клієнти вчасно дізнаються про привізАнонс у день створення дати й нагадування перед закриттям прийому — тим, хто ще не замовив. Без вашої участі.

04Прямий канал до клієнтаВласний Telegram-бот і пошта замість платних сервісів розсилок. Базу ніхто не заблокує й не візьме за неї гроші.

05Видно втрачені замовленняХто набрав кошик і не оформив, і на яку суму. Одна кнопка — і клієнту йде нагадування його мовою.

06Листи потрапляють у «Вхідні»Пошта налаштована як належить (SPF, DKIM, DMARC), тож підтвердження замовлення не губиться у спамі.

07Три мови — одна адмінкаУкраїнська, російська, іспанська. Клієнт бачить сайт і отримує листи своєю мовою; ви заповнюєте все в одному місці.

08Виробничий план в один клікСкільки чого зварити й закоптити під найближчий привіз — система рахує сама з відкритих замовлень. Аркуш можна роздрукувати й забрати в цех.

Будь-який скріншот далі можна розгорнути на весь екран — клікніть по ньому. На телефоні широкі кадри ще й гортаються вбік.

Ціноутворення й географія

Єдина ціна на товар, платна доставка за містом

Ціни на товари однакові в усіх містах. Клієнт обирає місто — і до замовлення додається вартість доставки саме цього міста: у пункт видачі або за адресою. Уся логіка цін і сум рахується на сервері, тож на неї не можна вплинути з боку браузера.

price coruna — **Луго** — сметана 12 €/л

price vigo — **Віго** — та сама сметана 12 €/л: ціна не залежить від міста

Різниця — лише в доставці: вона додається окремим рядком і залежить від міста та способу отримання.

a product prices — Те саме замовлення для Луго й Віго: товари однакові, доставка різна — 8 € і 20 €, тому різний і підсумок.

sheet no city — Поки місто не обране, доставка в накладній підсвічена як «оберіть місто», а підсумок показує «+ доставка».

Технології

«Чистий» стек без зайвих залежностей

Реалізовано без сторонніх фреймворків — сайт легко хоститься на звичайному shared-хостингу й так само легко підтримується.

BackendPHP без Composer і фреймворків

БазаMySQL через PDO, utf8mb4

Frontendсерверний рендеринг + ванільний JavaScript

Збіркавідсутня — жодних залежностей і білдів

Поштавласний мінімальний SMTP-клієнт з автентифікацією

Контентусе тягнеться з бази при кожному завантаженні

Жодного «зашитого» вручну контенту: тексти, товари, ціни, міста й дати живуть у базі та керуються з адмінки.

Розділ A

Клієнтський сайт

Каталог за категоріями

Товари згруповані за категоріями; у кожного — опис і одиниця виміру. Не треба вгадувати кількість: можна швидко обрати зі зручного списку або вписати свою — навіть більшу за максимум у списку. Наприклад, комусь треба 48 л молока (6 баклажок по 8 л) — він просто вписує свою кількість.

Для клієнтаШвидкий вибір зі списку або власна кількість.

Для бізнесуЗроблено під різні типи клієнтів — і тих, кому легше обрати, і тих, хто впише сам.

qty dropdown — Випадайка кількості з кроком, заданим в адмінці.

catalog cheese — Категорія «Сири»: ціна, опис, одиниця виміру, кнопка «Додати».

Категорія, яка ще готується

Асортимент росте, і нову категорію зручно відкрити ще до того, як у ній з'явиться перший товар. Якщо категорія активна, але порожня, замість діри в каталозі показується охайна плашка «Скоро»: заголовок і рядок про те, що тут готують щось смачне. Текст перекладено всіма трьома мовами.

Для клієнтаПорожнє місце в каталозі виглядало б як помилка сайту; плашка натомість читається як анонс.

Для бізнесуМожна заздалегідь заявити новий напрямок і підігріти інтерес, не чекаючи, доки все буде готово.

cat soon — Категорії «Морозиво» та «Йогурт» уже відкриті, товарів ще немає — на їхньому місці плашка «Скоро».

Кошик із пам’яттю

Кошик зберігається у браузері клієнта: можна закрити вкладку й повернутися пізніше — набране не зникне.

Для клієнтаНе треба збирати замовлення заново, якщо відволікся.

Для бізнесуМенше покинутих кошиків — більше доведених до заявки замовлень.

cart — Панель кошика: зміна кількості, видалення позицій, вага/об’єм, сума до сплати.

Покинуті кошики

Незавершені кошики тихо фіксуються — щоб бачити втрачені замовлення й повертати клієнтів. Для повторних клієнтів, яких система впізнає за номером телефону, збережеться повний кошик — з товарами, містом і сумою. Для нових та анонімних відвідувачів — лише знеособлений лічильник (скільки таких кошиків і скільки в них позицій), без вмісту. Кошик стає покинутим, коли настала нова дата, а замовлення так і не оформили; щойно клієнт оформлює замовлення — його кошик зникає з покинутих автоматично.

Для клієнтаНа сайті нічого зайвого — трекінг непомітний.

Для бізнесуВидно, хто почав, але не завершив замовлення, і на яку суму. Кнопка «Нагадати»: Telegram або email, єдиний редагований шаблон, лист приходить мовою клієнта.

ЗахистКошик прив’язується до клієнта лише за його ж номером телефону; анонімні — взагалі без персональних даних.

a carts — Екран «Покинуті кошики» в адмінці: ідентифіковані, анонімні та ті, що ще в процесі сьогодні.

Форма замовлення — «накладна»

Проста форма: ім’я, телефон, за бажанням Telegram і email. Перед відправкою клієнт бачить підсумок — що саме й на яку суму замовляє, з вартістю доставки окремим рядком. Місто підставляється автоматично або обирається зі списку.

Для клієнтаНаочно видно склад, суму та умови замовлення ще до відправки.

Для бізнесуМенше помилок і «я замовляв не те»: клієнт підтверджує те, що бачить.

order tg — Ліворуч — «накладна» з позиціями, доставкою і сумою, праворуч — контактні поля та кнопка Telegram-підписки.

Telegram-підписка прямо з форми замовлення

Клієнт підписується на повідомлення у два дотики. Кнопка «Отримувати сповіщення про замовлення і дати доставки» вмикається, щойно введено коректний номер (той самий номер — єдиний ідентифікатор клієнта в системі). Клік — відкривається бот і одразу відповідає: «Готово, ви підписані».

Для клієнтаНічого не треба шукати в телефоні — досить клікнути й перейти за посиланням.

Для бізнесуПрямий безкоштовний канал до кожного клієнта. Бот сам пише: підтвердження замовлення, дата привозу в його місто, нагадування перед закриттям прийому заявок. Плюс довільні розсилки.

ЗахистПерсональне посилання має цифровий підпис: підписати чужий номер або підробити запит неможливо.

Копія замовлення на email і вибір доставки

Окремий чекбокс «надіслати лист зі змістом замовлення»: якщо позначено — email стає обов’язковим, поруч є умови отримання листів і можливість відписатися. Нижче клієнт обирає доставку — у пункт видачі або за адресою — з цінами саме свого міста; для адресної з’являється підказка, як узяти координати або посилання з Google Maps.

order email addr — Згода на лист, вибір доставки з цінами міста і поле коментаря.

maps modal — Модалка-інструкція: як узяти посилання або координати з Google Maps.

Календар привозів і відгуки

У блоці «Коли ми у вашому місті» видно дати привозів і час, до якого приймаються заявки; минулі дати зникають самі. Відгуки клієнтів — з фото за наявності, додаються вручну з адмінки: сайт сам вкладає текст у фірмову картку й підбирає розмір шрифту під довжину.

calendar — Дати привозів із дедлайном прийому заявок і статусом «приймаємо».

reviews — Блок відгуків на головній — фірмова картка, фото, автопідбір кегля.

Зворотній зв’язок і мультимовність

Окреме віконце у футері: ім’я, телефон, повідомлення, email — щоб написати, не оформлюючи замовлення; звернення надходять на пошту так само, як заявки. Сайт працює трьома мовами (укр / рос / ісп): мова визначається автоматично за браузером або вручну через перемикач, у кожної мови свої SEO-адреси.

feedback — Форма зворотного зв’язку — зокрема для відписки від розсилок.

es hero — Іспанська версія: власна адреса /es, повністю перекладений інтерфейс.

es catalog — Каталог іспанською — назви, описи й одиниці виміру теж із бази.

Валідація й UX-дрібниці

Перевірка телефону й email у реальному часі з підказками, автопідбір міста, кнопка «нагору», стрічка переваг, коректна робота на телефоні — менше помилок при заповненні й зручність з мобільного.

order ok — Після відправки клієнт одразу бачить підсумок прийнятої заявки з номером.

Розділ B

Обробка замовлень на сервері

Телефон — єдиний ідентифікатор клієнта

Номер нормалізується: українські та іспанські формати зводяться до єдиного вигляду, тож один клієнт — один запис, навіть якщо щоразу вписує номер трохи інакше. Чиста база без дублів, уся історія клієнта в одному місці.

Дбайливе оновлення даних

Порожні поля нової заявки не затирають те, що вже відомо про клієнта. Згода на розсилку «липка»: якщо колись була дана — не злітає через порожній чекбокс.

a order card — Картка замовлення: контакти, ID клієнта, виведений із телефону за єдиним правилом, місто, спосіб доставки з її вартістю й статус.

Розділ C

Адмін-панель — власна CMS

Тринадцять розділів, у яких власник тримає весь бізнес: каталог, ціни, географію, графік доставки, замовлення, виробниче зведення, клієнтів і комунікацію.

a dashboard — Дашборд: типи цін, категорії, товари, активні міста й повний довідник муніципалітетів.

Товари й категорії

Категорія має назву трьома мовами, іконку (завантажена картинка або емодзі), порядок і статус (активна / чернетка). Товар належить до категорії й має назви й описи трьома мовами, одиницю виміру, мінімальну кількість, крок і межу випадайки, порядок, статус, а також ціну — одну на всі міста. Чернетки на сайті не показуються.

a products — Список товарів: категорія, одиниця, заповненість цін (1/1) і статус.

a categories — Категорії з іконками, кількістю товарів і статусом.

a product edit — Картка товару: три мови, одиниця, мінімум, крок і межа випадайки, порядок, статус.

Ціни й вартість доставки по містах

Ціна товару одна на всі міста, тож у картці товару — одне поле ціни. Географія й доставка живуть у довіднику міст: він містить усі муніципалітети Галісії, а активному місту задають спосіб доставки (лише пункт видачі / пункт видачі + адресна), дві ціни доставки — у пункт видачі й за адресою — та назву російською. Порожнє поле ціни означає «вартість уточнимо»: так і буде написано на сайті, а підсумок покаже «+ доставка».

a cities — Міста: спосіб доставки, дві ціни доставки, тип ціни й назви трьома мовами; активні вмикаються з повного довідника.

★ Календар доставки й автоматизація дат

Кожен запис календаря — назва розвозки (напр. «Корунья + Сантьяго»), дата й час привозу, дедлайн прийому замовлень, коментар трьома мовами й одне або кілька міст. Вести можна вручну, а можна доручити конструктору: власник задає правило — тиждень місяця й день тижня (напр. «кожна перша п’ятниця»), час привозу й дедлайну, за скільки днів наперед створювати дату й за скільки закривати прийом, міста та шаблон повідомлення. Далі планувальник працює сам: наперед створює дати за графіком, у момент створення шле анонс підписникам потрібних міст, а в день дедлайну — нагадування тим, хто ще не замовив. Минулі дати прибираються самі.

Для власникаРутина з календарем і розсилками зникає — усе працює саме, без щоденних дій.

Для бізнесуКлієнти вчасно дізнаються про привіз і встигають замовити — більше замовлень із кожної дати.

a deliv list — Календар доставки: назва розвозки, дата й час привозу, міста, дедлайн і статус прийому.

a deliv name — Додавання дати вручну: назва розвозки, час привозу й дедлайну, міста, коментар трьома мовами.

a constructor1 — Правило розкладу: тиждень місяця, день тижня, час привозу й дедлайну, міста.

a constructor2 — Шаблон повідомлення з мітками {date}, {cities}, {deadline}.

a schedules — Готовий конструктор: «Каріньйо — кожна перша п’ятниця», далі все відбувається без участі людини.

Замовлення

Список усіх замовлень із фільтрами (усі / нові / виконані), окремим фільтром за містами з лічильниками й пагінацією. Картка замовлення: контакти клієнта, місто, спосіб і вартість доставки, позиції з цінами й сумою, коментар клієнта, статус «виконано» та примітка для себе. Поруч — вкладки «Покинуті кошики» і «Зведення по товарах».

a orders — Список замовлень із фільтрами й перемиканням статусу в один клік.

a order items — Позиції замовлення, доставка окремим рядком і коментар клієнта.

★ Зведення по товарах — виробничий план

Окремий розділ рахує сумарну кількість кожного товару по всіх замовленнях «у роботі»: скільки всього кілограмів творогу, літрів сметани чи копчення треба зробити. Рахунок можна звузити фільтром за розвозками (конкретні дати привозу) або за містами — у дужках одразу видно, скільки невиконаних замовлень у кожному. Клік по товару відкриває всі замовлення з ним, а кнопка «Друкувати зведення» дає готовий аркуш формату A4.

Для власникаНе треба зводити замовлення вручну в зошиті чи таблиці — цифра рахується сама й завжди свіжа.

Для бізнесуВиробляється рівно стільки, скільки замовили: менше недовозу й менше зіпсованого залишку.

a summary — Фільтри: за розвозками (дата привозу) і за містами з кількістю невиконаних замовлень.

a summary table — Підсумок: кожен товар, загальна кількість і в скількох замовленнях він є.

a summary product — Клік по товару — усі замовлення з ним, із позначкою «в роботі» / «виконано».

a summary print — Версія для друку: A4, із зазначенням фільтра й часу формування.

Друк накладних

Кожне замовлення друкується як охайна накладна формату A4: шапка з назвою виробництва, номер і дата, клієнт, телефон, місто, спосіб і вартість доставки, таблиця позицій із цінами, доставкою окремим рядком і підсумком, коментар клієнта. У списку замовлень є чекбокси: відмічаєте потрібні й друкуєте всі накладні одним завданням друку — кожна з нової сторінки.

Для власникаПеред виїздом друкуються всі накладні на розвозку за один раз, а не по одній.

Для бізнесуПаперова накладна їде разом із товаром — клієнт бачить склад і суму, менше суперечок на місці.

a orders print — Вибір замовлень чекбоксами й кнопка «Друкувати обрані» — одним завданням друку.

a invoice print — Готова накладна A4 — так вона виходить із принтера.

Клієнти

Клієнт = номер телефону (ID). Список із пошуком за ім’ям чи телефоном і пагінацією. Картка клієнта: контакти, місто, мова, згоди на розсилки (Telegram і email окремо), примітка, статус підписки на Telegram-бота з персональним посиланням і повна історія — і замовлення, і покинуті кошики. Клієнта можна створити вручну з адмінки: один і той самий номер у будь-якому форматі веде до одного клієнта — повторне додавання відкриває наявну картку, а не створює дубль.

a clients — Список клієнтів: ID-телефон, місто, статус Telegram, кількість замовлень.

a client card — Картка клієнта: контакти, згоди на канали, місто й мова спілкування.

a client tg — Персональне підписане посилання на бота, якщо клієнт ще не підписаний.

a client cart — Повна історія клієнта — замовлення й покинуті кошики в одному місці.

Розсилка клієнтам і відгуки

Ручна розсилка: текст трьома мовами, вибір каналів (Telegram / email) і таргет за містами. Кожен отримує повідомлення своєю мовою за карткою і лише на дозволені ним канали; є заготовка тексту з найближчої дати доставки, а внизу кожного листа — посилання на відписку. Відгуки додаються й редагуються окремо: текст-оригінал, поле перекладу іспанською, фото й порядок (більше число — лівіше на сайті; новий відгук стає першим автоматично).

a broadcast1 — Таргет за містами — у дужках кількість клієнтів із контактом.

a broadcast2 — Текст трьома мовами; порожні мови автоматично беруть українську версію.

a reviews — Керування відгуками: текст, фото, порядок і показ на сайті.

Вхід у два кроки (2FA)

Кілька користувачів адмінки. Вхід у два кроки: пароль, потім одноразовий код, що приходить у Telegram (треба раз прив’язати свій чат із ботом). Код надходить в усі підключені чати — тож користувачі бачать спроби входу одне одного й помітять чужого. Є аварійний код на випадок недоступного Telegram. Сесія тримається 30 днів.

a 2fa — Прив’язані чати для кодів входу — нікнейми й посилання умовні.

Розділ D

Пошта з гарантованою доставністю

Листи шлються через автентифікований SMTP і підписуються DKIM; для домену налаштовані SPF, DKIM і DMARC. У результаті листи є довіреними й потрапляють у «Вхідні», а не в спам.

SPFперелік серверів, яким дозволено слати пошту від імені домену

DKIMкожен лист підписується криптографічно

DMARCполітика для листів, що не пройшли перевірку

Розділ E

Безпека

Захист форм від ботів

Непомітний для людини захист: приховане поле-пастка, яке заповнюють лише боти, і підписаний час-токен, що відсіює миттєві та підроблені відправлення.

Захист адмінки

Усі дії в адмінці захищені від підробки запитів (CSRF) — кожна форма несе одноразовий токен, прив’язаний до сесії.

Розрахунки на сервері

Уся валідація й розрахунок цін відбуваються на сервері: підмінити ціну чи суму з боку браузера неможливо.

Мобільна версія

Повноцінна робота з телефона

Більшість замовлень приходить із телефона, тож мобільна версія — не «зменшена копія», а окремо продуманий сценарій: липка нижня панель із сумою кошика, вертикальні картки товарів і читабельна «накладна».

Підсумок

Повноцінний робочий продукт «під ключ»

Від вітрини з кошиком, єдиними цінами й платною доставкою за містом — до власної адмін-панелі, бази клієнтів, автоматичного календаря доставки, поштових сповіщень із гарантованою доставністю та захисту форм. Усе побудовано на легкому стеку без зайвих залежностей, що спрощує підтримку й хостинг.

Вітрина з кошиком, єдиною ціною і доставкою за містом

Власна адмін-панель на 12 розділів

База клієнтів з єдиним ID за телефоном

Автоматичний календар доставки

Telegram-бот і email-розсилки

Пошта, що не потрапляє у спам

Три мови з окремими SEO-адресами

Захист форм, CSRF і 2FA

Відкрити сайт ↗