Світ садових фігурок — сайт-каталог із замовленням у месенджерах

Про клієнта

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

Задача

Садову фігурку купують очима: людині треба роздивитися її з усіх боків, зрозуміти розмір і дізнатися ціну. До того ж бетонні фігурки важкі, і від ваги залежить вартість доставки. Якщо асортименту немає в одному місці, все це доводиться щоразу пояснювати в особистих повідомленнях.

Потрібен був сайт, який:

• показує весь асортимент з фото, висотою, вагою та ціною;
• дає роздивитися кожну фігурку з кількох ракурсів;
• приймає замовлення там, де покупцям звично писати: у Telegram, Viber або телефоном;
• швидко відкривається на смартфоні, навіть на повільному мобільному інтернеті;
• гарно виглядає, коли посилання на фігурку пересилають у месенджері;
• дає самостійно додавати нові фігурки, змінювати ціни й наявність без програміста.

Формат обрали такий: сайт-каталог без кошика й онлайн-оплати. Найбільші фігурки важать понад 20 кг, тому вартість доставки простіше порахувати разом із покупцем. А оплата при отриманні дає змогу спершу оглянути фігурку на відділенні.

Що ми зробили

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

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

Галерея і власна адреса для кожної фігурки

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

Кожна фігурка має власну адресу, тож посилання на неї можна переслати. Кнопка «Назад» на телефоні просто закриває вікно й повертає до каталогу.

Замовлення в Telegram в один дотик

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

Окреме прев'ю для кожного посилання

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

Адмінка без програміста

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

• додати нову фігурку, продублювати схожу або видалити;
• змінити назву, категорію, розміри, вагу, ціну й наявність;
• перетягнути фото прямо на картку товару та вибрати головне;
• змінити порядок фігурок у каталозі;
• оновити телефон, Telegram, Viber і місто самовивозу.

Фото стискаються ще на пристрої, тому нову фігурку можна додати з телефона навіть через мобільний інтернет. Копії фото потрібних розмірів і прев'ю для посилань сервер готує сам. Адреса фігурки формується з назви автоматично, а адмінка підказує, якщо в товару немає назви чи фото, і попереджає про незбережені зміни перед закриттям вкладки.

Швидкість на смартфоні

Дані каталогу вбудовані прямо в сторінку: HTML з усіма фігурками, стилями й скриптами важить близько 13 КБ у стиснутому вигляді, і список з'являється без окремих запитів до сервера. Фото сервер віддає у трьох розмірах: 400 і 600 px для карток і 1200 px для галереї. Браузер бере розмір під свій екран, а фото нижче першого ряду вантажаться під час прокручування.

Доставка, оплата і часті питання

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

Пошук і розмітка

Метатеги сторінки написані під запити на кшталт «садові фігурки з бетону». Для товарів додана розмітка Schema.org з назвою, фото, розмірами, ціною в гривнях і наявністю, щоб пошуковики розуміли, що на сторінці каталог товарів із цінами. Адмінка закрита від індексації.

Технології

• Python — сервер: сторінка каталогу, адмінка, копії фото в кількох розмірах і прев'ю посилань;
• JavaScript без фреймворків — каталог, фільтри, галерея й кнопки замовлення;
• Telegram і Viber — замовлення з готовим текстом повідомлення;
• Open Graph — окреме прев'ю з фото й ціною для кожної фігурки;
• Schema.org — розмітка товарів із цінами та наявністю.

Результат

Сайт працює за адресою svitsadovihfigurok.store. Сьогодні він:

• показує весь асортимент із фото, розмірами, вагою та цінами;
• дає замовити фігурку в Telegram, Viber чи телефоном в один дотик, з назвою й ціною вже в повідомленні;
• перетворює кожне пересилання посилання на картку з фото й ціною;
• оновлюється з комп'ютера чи телефона без участі розробника.

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

Хочете такий самий сайт?

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