Кейс · веб-розробка · 2026

LEPIM

Ліпимо з любовʼю ♡

Сайт із замовленнями, кабінетом клієнта і власною адмін-панеллю для сімейного виробництва заморожених напівфабрикатів ручної роботи. Доставка по Сантьяго-де-Компостела та А-Коруньї, Галісія (Іспанія).

3частини: сайт, кабінет, CMS
3мови інтерфейсу
27товарів у 8 категоріях
193міста в довіднику
18розділів адмін-панелі
Про проєкт

Вітрина, кабінет і система керування для сімейної майстерні

Проєкт складається з трьох частин. Публічний сайт, де людина набирає кошик і лишає замовлення. Кабінет, у якому вона бачить свої замовлення й керує тим, як із нею зв'язуються. І власна адмін-панель, через яку господарі ведуть каталог, ціни, календар привозів, клієнтів і самі замовлення. Стороннього движка немає — усе написано під цей бізнес.

Частина 1

Сайт для покупця

Каталог за категоріями, сторінки-лендінги категорій, картка товару з галереєю, схожі товари й крос-сел, знижки, кошик із пам'яттю, аркуш замовлення просто на головній, календар привозів, відгуки, три мови.

Частина 2

Кабінет клієнта

Вхід без пароля — Telegram, Google або одноразове посилання. Історія замовлень, найближчий привіз, місто доставки, канали сповіщень, згода на розсилку, генерація пароля, вихід на всіх пристроях.

Частина 3

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

18 розділів: замовлення і звернення, каталог у трьох мовах, календар і автоматичні розклади доставки, довідник міст, картки клієнтів, розсилка, відгуки, тексти інтерфейсу, сторінки і SEO, журнал змін, адміни, двофакторка.

Що це дає власникам

01Замовлення без реєстраціїЛюдина набирає кошик і лишає номер — і все. Пароль вигадувати не треба: змусити придумати пароль заради однієї покупки означає втратити покупку.
02Один клієнт — одна карткаКлюч клієнта — телефон у єдиному форматі. Повторне замовлення доповнює картку, а не створює двійника, тож історія покупок не розсипається.
03Календар привозів веде себе самПравило задається один раз — «друга п'ятниця місяця, Сантьяго». Далі дати створюються наперед, анонс іде клієнтам, а перед закриттям прийому летить нагадування.
04Прямий канал до клієнтаВласний Telegram-бот і власна поштова скринька домену замість платних сервісів розсилок. Кожному пише своєю мовою, і тільки тим, хто дав згоду.
05Аркуш для цеху в один клікГосподиня відбирає в списку те, що везе — статус, місто, дати — і тими ж параметрами друкує: зведення «скільки чого зліпити» і накладні на кожне замовлення.
06Видно, кому не дійде сповіщенняДашборд сам попереджає: «стільки клієнтів без Telegram і без пошти — їм не піде ні підтвердження, ні анонс». З такими треба зв'язатися телефоном.
07Легке відновлення даних клієнтаЗ картки клієнта адмін скидає пароль, надсилає одноразове посилання на вхід або відв'язує Telegram — не питаючи в людини жодних даних.

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

Технічна база

Легкий стек без зайвих залежностей

Сайт має жити роками на звичайному хостингу й не ламатися від оновлення чужої бібліотеки. Тому — чистий PHP, ніяких фреймворків, ніякого збирання. Файли копіюються на сервер, і воно працює.

СерверPHP 8, без фреймворків і Composer
БазаMySQL 8 через PDO, 33 таблиці
ФронтСвій CSS і JS, без збирання
ПоштаВласний SMTP-клієнт, підпис DKIM
СповіщенняTelegram-бот на вебхуку
Планувальникcron раз на 5 хвилин
Оновлення стилів не залипає в кеші браузера: адреси файлів несуть мітку версії, яка міняється разом із самим файлом.
Частина 1 · сайт для покупця

Усе замовлення вміщається в одну сторінку

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

Перший екран і найближчі привози

Одразу під шапкою — темна смуга з двома найближчими датами привозу й містами. Це головне, що треба знати покупцеві замороженого: коли буде наступна доставка і чи встигне він у неї.

home heroГортайте вбік
Перший екран: обіцянка, три головні переваги і фото продукту.
home delivГортайте вбік
Дві найближчі дати підтягуються самі — руками нічого не правлять.

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

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

home catalogГортайте вбік
Кнопка «в кошик» показує стан: якщо товар уже взяли, над лічильником з'являється окрема позначка «у кошику».
ЗнижкаЗадається у відсотках або в сумі. На картці з'являється значок «−20 %», стара ціна закреслюється, поруч — «вигода 3,50 €». Рахує це сервер в одному місці, тому кошик, замовлення й лист беруть уже правильну суму.
ФасовкаЦіна завжди показується разом із фасовкою: «14,00 € / 1 кг», «12,00 € / 10 шт», «6,00 € / 250 мл» — щоб не порівнювали несумірне.

★ Сторінка категорії — не список, а лендінг

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

category seoГортайте вбік
Угорі — товари категорії з цінами й знижками.
category textГортайте вбік
Нижче — розділи тексту з фото: рецептура, зберігання, приготування, доставка.
Увесь цей текст правиться з адмінки, у трьох мовах, разом із заголовком і описом сторінки для пошуку.

Подробиці — вікном, без переходу

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

product modalГортайте вбік
Галерея зі стрілками, лічильником і мініатюрами. Клік по головному фото розгортає його на весь екран.

Сторінка товару: схожі й «з цим купують»

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

product relatedГортайте вбік
До пельменів пропонуються вареники і джем — так налаштовано в картці категорії.

Кошик пам'ятає, що набрали

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

cart popupГортайте вбік
Кнопка «Оформити» липне до низу вікна — на маленькому екрані її не треба шукати прокруткою.

★ Аркуш замовлення: ліворуч кошик, праворуч форма

Склад замовлення й форма стоять поруч, і людина весь час бачить, за що платить. Місто вибирається у формі — і тією ж дією перераховується доставка в кошику: Сантьяго безкоштовно, А-Корунья 7 € на замовлення.

order sheet corunaГортайте вбік
Вибрали А-Корунью — у підсумку одразу з'явилися 7 € доставки. Хто вже замовляв, може увійти й отримати підставлені дані.
ОплатаГотівкою при отриманні, переказом на картку або Bizum. Це інформаційне поле для господарів — жодних платіжних даних сайт не приймає й не зберігає.
Знімок цінНазва, фасовка й ціна записуються в замовлення на момент оформлення. Зміна прайсу завтра не перепише вчорашню накладну.
Захист від ботівПрихована пастка в формі й підписаний час її показу: миттєва відправка не проходить.

Підтвердження — на місці форми

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

order doneГортайте вбік
Замовлення вже в базі, господарям пішло сповіщення в Telegram і на пошту.

Сторінки, які продають і відповідають на питання

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

delivery
Доставка й оплата: чотири кроки, графік по містах, три способи розрахунку.
about
Про нас: історія, дев'ять цінностей зі значками, галерея роботи.
contacts
Контакти: Telegram, WhatsApp, Instagram, телефон, пошта — і форма.
Частина 2 · кабінет клієнта

Вхід без пароля — бо пароль ніхто не пам'ятає

Аудиторія цього магазину не буде вигадувати й запам'ятовувати паролі. Тому основний вхід — один дотик: Telegram, Google або одноразове посилання. Пароль є, але він опційний, і кабінет навіть пропонує згенерувати його за людину й надіслати в Telegram чи на пошту.

Вікно входу замість сторінки входу

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

login modalГортайте вбік
Telegram, Google, вхід за номером і паролем — і посилання «не можу увійти».

★ Що є в кабінеті

Кабінет зібраний з того, що людині справді треба після покупки, — і нічого зайвого поруч.

accountГортайте вбік
Ліворуч історія замовлень, праворуч — усе керування: місто, канали, пароль, згода, пристрої.
Найближчий привізУгорі кабінету — дата наступної доставки в місто клієнта й час, до якого приймають замовлення.
Історія замовленьКожне розкривається: склад, фасовка, кількість, ціни на момент покупки, доставка й підсумок.
Місто доставкиМіняється в один клік і впливає лише на нові замовлення — старі лишаються як були.
Канали зв'язкуВидно, що прив'язано: Telegram, пошта Google. Звідси ж прив'язується те, чого бракує.
Пароль за бажанням«Не хочете вигадувати пароль? Ми придумаємо його самі й надішлемо вам» — у Telegram або на пошту. Старий одразу перестає діяти.
Згода на розсилкуОдин прапорець, який вимикається будь-коли. Дата згоди фіксується в базі.
Вихід на всіх пристрояхВидно, на скількох пристроях відкрито вхід, і однією кнопкою всі сесії закриваються.
Захист від перебору15 хвилин пам'яті: 10 невдач з однієї адреси або 5 на один номер — і вхід блокується. Відповідь на «немає такого номера» і «не той пароль» однакова, щоб форма не стала довідником клієнтів.

Коли клієнт усе одно не може увійти

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

help modalГортайте вбік
Форма допомоги: досить вказати Telegram або пошту — телефон тут не питають навмисно, бо він і може бути причиною.
adm clientГортайте вбік
Картка клієнта в адмінці: скинути пароль, надіслати посилання на вхід, відв'язати Telegram.
Прив'язка TelegramПосилання в бота несе одноразовий токен, а не номер телефону. Телефон у Telegram і телефон на сайті часто різні — зв'язувати їх жорстко не можна.
Після замовлення вже всерединіОформив замовлення — сесія відкрилася сама. Кабінет доступний одразу, без окремої реєстрації.
Видалення на вимогуАдмін може зняти з клієнта всі прив'язки. Замовлення при цьому лишаються в базі знеособленими — і в адмінці прямо написано, що саме станеться.
Частина 3 · адмін-панель

Власна CMS на 18 розділів

Панель писалася під конкретних людей, які ведуть сайт самі. Тому в ній немає універсальних «типів контенту» й конструкторів — є рівно ті розділи, якими користуються щодня, підказки прямо в інтерфейсі й попередження про те, що може піти не так.

★ Дашборд, який попереджає

Перше, що бачать при вході: скільки нових замовлень і звернень, найближчий привіз із дедлайном, останні замовлення й останні дії в панелі. А над усім цим — попередження, які нема де більше побачити.

adm dashГортайте вбік
«Двом клієнтам не піде ні підтвердження, ні анонс — з ними доведеться зв'язатися телефоном». І окремо: «ваш вхід захищений тільки паролем — прив'яжіть Telegram».

Замовлення

Список із фільтрами за статусом, містом і датою, з пошуком за телефоном та ім'ям. Зверху — лічильники по статусах і сума того, що зараз у фільтрі.

adm ordersГортайте вбік
Друкується саме те, що зараз у фільтрі: відібрали місто й статус — отримали накладні на завтрашню розвозку.

Картка замовлення

Склад із цінами на момент замовлення, підсумок із доставкою, спосіб оплати, картка клієнта з каналом зв'язку, зміна статусу і службова примітка, якої клієнт не бачить.

adm orderГортайте вбік
Блок «Звідки»: з якої сторінки прийшло замовлення, з якої адреси і яке місто показує геосервіс. Довідково — воно може не збігатися з містом доставки.

Звернення з сайту

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

adm requestsГортайте вбік
Кожне звернення має стан «опрацьовано» і кнопку «у роботу».

Каталог у трьох мовах

Назва, склад, вага, термін зберігання, порада з приготування й опис — кожне поле в трьох вкладках. Ціна, фасовка, знижка і фото — спільні.

adm productsГортайте вбік
Список товарів із категоріями, цінами й станом.
adm productГортайте вбік
Редагування: російська, українська, іспанська — вкладками, в одній формі.
Файли фотографій називаються за адресою товару — не випадковим набором літер. Ім'я файлу індексується разом зі сторінкою, тож це безкоштовний сигнал для пошуку.

Категорія — це сторінка, а не папка

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

adm categoryГортайте вбік
Крос-сел налаштовується галочками, без жодного рядка коду.

★ Аркуш для цеху й накладні на розвозку

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

print summaryГортайте вбік
Зведення для фасування: скільки чого разом, з розбивкою по містах і колонкою для галочок.
print invoiceГортайте вбік
Накладна: одне замовлення — одна сторінка A4, з сумою й способом оплати.

Тексти інтерфейсу правляться з адмінки

Будь-який напис на сайті — від кнопки «В кошик» до підпису під формою — міняється в адмінці, у трьох мовах. Правка лягає поверх мовних файлів, тому оновлення сайту її не затирає; очистили поле — повернувся стандартний текст.

adm textsГортайте вбік
Розділ «Тексти сайту»: пошук по ключу, три мови поруч, підказка про призначення напису.

Контент головної, сторінки і SEO

Головна сторінка розкладена на п'ять вкладок: банер, акції, галерея, переваги й заголовки блоків. Статичні сторінки мають власні заголовки, описи й адреси в кожній мові.

adm contentГортайте вбік
Головна сторінка: банер, акції, галерея, переваги, заголовки.
adm pagesГортайте вбік
Сторінки і SEO: окремі адреси й описи для кожної мови.

Відгуки, міста і журнал змін

Відгук має ім'я, місто, оцінку, дату, текст у трьох мовах, до трьох фото і прив'язку до товару. Місто — назву в трьох мовах, провінцію, вартість доставки й прапорець «показувати у формі». Журнал сам чиститься за лічильником записів, старе йде в архів.

adm reviews
Відгуки з фото й модерацією.
adm cities
193 міста Галісії: які показувати і скільки коштує доставка.
adm log
Журнал змін: хто, коли і що правив.

Розсилка й налаштування

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

adm broadcastГортайте вбік
Текст у трьох мовах і «перевірити перед відправкою».
adm settingsГортайте вбік
Налаштування сайту: контакти, доставка, аналітика, сповіщення.

Адміни й власний акаунт

Адмінів троє, у кожного свій вхід, свій Telegram для коду й свій аварійний код. У розділі «Мій акаунт» людина сама міняє пароль, прив'язує пристрої для двофакторки й перегенеровує аварійний код.

adm accountГортайте вбік
Код входу приходить тільки у ваші чати — інші адміни його не бачать. Пристроїв можна прив'язати кілька.
adm adminsГортайте вбік
Список адмінів: хто має Telegram, хто аварійний код, коли востаннє заходив.
Доставка

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

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

adm deliveriesГортайте вбік
Календар: дата, міста, час приїзду, коли закривається прийом і чи пішов анонс.
adm schedulesГортайте вбік
Розклад: «перша субота місяця, А-Корунья» — і дати з'являються наперед самі.
Правило замість датЗадається один раз: який тиждень місяця, який день, які міста, за скільки днів створювати дату й за скільки закривати прийом.
Анонс і нагадуванняУ день створення дати клієнтам іде анонс, а перед закриттям прийому — нагадування тим, хто ще не замовив. Кожному своєю мовою.
Разові дати не конфліктуютьПозаплановий привіз додається вручну в календарі й живе поряд із автоматичними — розклад його не чіпає.
Усе це тримається на одному завданні планувальника, яке хостинг відкриває раз на п'ять хвилин. Воно ж створює дати, розсилає анонси й чистить журнал.
Пошук

Сайт написаний так, щоб його знаходили

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

Три мови — три адреси

Основна мова живе на голому домені, інші — з префіксом. У кожної сторінки свій заголовок, опис і адреса в кожній мові, а в коді стоять взаємні посилання hreflang і x-default — щоб пошуковик не вважав переклади дублями.

Карта сайту з перекладами

sitemap.xml збирається сам із категорій, товарів і сторінок, несе дати зміни й альтернативні мовні адреси. Поруч — людська карта сайту для відвідувачів.

Розмітка для пошукових карток

JSON-LD: картка бізнесу з контактами й містами доставки, товар із ціною та наявністю, хлібні крихти. Вигаданих оцінок там немає навмисно — за них розмітку знімають цілком.

Картка для месенджерів

Open Graph і Twitter-картка з власним зображенням і описом: посилання на товар, кинуте в Telegram чи WhatsApp, розгортається у нормальний прев'ю, а не в голий рядок.

Тексти категорій, заголовки й описи сторінок правляться з адмінки. Програміст для цього не потрібен — і це головне, бо SEO живе на постійних дрібних правках.
Зв'язок із клієнтом

Telegram і пошта — свої, не орендовані

Сповіщення про замовлення, підтвердження клієнту, анонси привозів і розсилка йдуть через власного Telegram-бота і власну поштову скриньку домену.

Telegram-бот

Господарям — сповіщення про кожне замовлення й звернення. Клієнту — підтвердження й нагадування про привіз. Прив'язка в один дотик, відписка теж.

Пошта домену

Власний SMTP-клієнт відправляє листи через поштовий сервер домену, тому вони підписані DKIM і не осідають у спамі. SPF і DMARC налаштовані.

Розсилка

З адмінки — за містом, мовою і згодою на розсилку. Кожен лист несе рядок про те, як відписатися, а згода фіксується з датою.

adm broadcastГортайте вбік або торкніться, щоб роздивитися
Розсилка: спершу видно, скільком людям піде повідомлення і якими каналами.
Текст від людини йде в Telegram екранованим. Один символ «<» у коментарі до замовлення інакше тихо вбивав би все сповіщення — воно просто не доходило б.
Безпека

Що зроблено, щоб не було неприємностей

Гроші рахує сервер У кошику браузера немає цін — тільки коди товарів і кількість. Суму, знижку і доставку рахує сервер при кожному показі, тож підмінити її з боку клієнта неможливо.
Вхід в адмінку у два кроки Після пароля адмін підтверджує вхід кодом, який приходить у Telegram. Вимкнений адмін втрачає доступ одразу, а не після закінчення сесії.
Форми захищені від ботів і підробки Прихована пастка, підписаний час показу форми й CSRF-токен у кожній формі — і на сайті, і в кабінеті, і в адмінці.
Аварійний код замість Telegram Якщо Telegram недоступний, адмін заходить за персональним аварійним кодом. Код показується один раз при створенні, у базі лишається тільки його відбиток.
Жодних платіжних даних Онлайн-оплати немає за задумом. Спосіб оплати — це просто позначка для господарів; номери карток сайт ніколи не бачить і не зберігає.
adm loginГортайте вбік або торкніться, щоб роздивитися
Вхід в адмін-панель. Сама адреса панелі теж не вгадується з сайту.
Мобільна версія

З телефона працює все, без винятків

Більшість замовлень приходить із телефона, тому адаптив перевірявся не на око: 336 автоматичних знімків — три мови × чотирнадцять сторінок × вісім ширин від 320 до 1440 пікселів. Жодного виїзду за екран, жодної битої картинки.

m home
Головна: привози й каталог
m catalog
Каталог у дві колонки
m cart
Кошик із липкою кнопкою
m order
Аркуш замовлення
Адмінкою теж користуються з телефона — таблиці замовлень і календар на вузькому екрані перебудовуються, а не з'їжджають убік.
Підсумок

Готовий робочий інструмент, а не просто сайт

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

Вітрина з кошиком і замовленням в один екран
Кабінет клієнта зі входом без пароля
Власна адмін-панель на 18 розділів
Автоматичний календар привозів
Лендінги категорій і розмітка для пошуку
Знижки, схожі товари й крос-сел
Telegram-бот, пошта домену, розсилка
Друк накладних і аркуша для цеху
Три мови з окремими адресами й SEO
Тексти сайту правляться без програміста
Двофакторка адмінів і аварійний код
Жодних платіжних даних на сайті

Потрібне таке саме для вашого бізнесу?

відповідаємо за день

Домовитися про дзвінок

Need the same for your business?

we reply within a day

Book a call

¿Necesitas lo mismo para tu negocio?

respondemos en un día

Reservar una llamada

Нужно такое же для вашего бизнеса?

отвечаем в течение дня

Договориться о звонке