Перенос каталога с Tilda на сайт: кейс Дом Пуэра

Задача: превратить demo-каталог в нормальную витрину

У проекта «Дом Пуэра» уже был отдельный раздел на сайте: каталог, корзина, popup товара и demo-админка. Но внутри ещё оставались тестовые товары, placeholder-картинки и временная структура.

Задача на день была понятная: забрать реальный каталог клиента с Tilda и перенести его в отдельный сайт, чтобы витрина выглядела не как пример, а как рабочий прототип будущего магазина.

Сайт проекта находится здесь: Дом Пуэра.

Что было до начала работ

До переноса уже существовал MVP:

публичный каталог;
корзина на localStorage;
popup товара;
фильтры, поиск и сортировка;
demo-админка товаров;
страницы добавления и редактирования товара;
тёмно-зелёный визуальный стиль.

Но каталог был тестовым. В нём было около 20 demo-товаров: пуэр, улуны, наборы, посуда и аксессуары. Этого хватало, чтобы показать идею, но не хватало для реального клиентского каталога.

Перенос каталога с Tilda

На Tilda у клиента был готовый каталог. Его нужно было не просто скопировать визуально, а привести к нормальной структуре данных.

В итоге было перенесено 58 реальных товаров.

Перенос шёл партиями:

товары 1–10;
товары 11–20;
товары 21–30;
товары 31–40;
товары 41–50;
товары 51–58.

Так проще контролировать результат: после каждой партии можно проверить, что товары не дублируются, нормально отображаются, открываются в popup и попадают в корзину.

Что изменилось в структуре товаров

Каждый товар был приведён к единому формату.

У товара появились поля:

id;
slug;
название;
категория;
тип;
формат или объём;
цена;
короткое описание;
полное описание;
характеристики;
вкус;
кому подойдёт;
изображение;
alt изображения;
ссылка на исходный товар;
статус активности;
статус синхронизации;
статус Telegram-канала.

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

Реальные фото вместо placeholder

Следующий этап — изображения.

С Tilda было скачано больше изображений, чем товаров, потому что у части позиций было несколько фото. Для каталога выбрали главное изображение каждого товара и подключили его к карточке.

Сейчас у всех 58 товаров есть реальные фото.

Картинки используются:

в карточке каталога;
в popup товара;
в админке;
на странице редактирования товара.

Часть старых demo-изображений ещё осталась в папке проекта, но они уже не используются в карточках. Это не ломает сайт, просто позже их можно убрать.

Категории и фильтры

После переноса стало понятно, какие категории реально нужны каталогу.

Сейчас товары распределены так:

Посуда;
Шэн пуэр;
Шу пуэр;
Номисян;
Аксессуары;
Благовония;
Улуны.

Старые пустые фильтры вроде «Красный чай», «Белый чай» и «Наборы» были скрыты, потому что в текущем реальном каталоге под них нет товаров.

Это важная мелочь: если на сайте есть пустые категории, пользователь кликает, видит пустоту и думает, что сайт недоделан. Лучше показывать только то, что реально наполнено.

Поиск и сортировка

В каталоге работает клиентская логика:

поиск по названию;
сортировка по умолчанию;
сортировка от дешёвых к дорогим;
сортировка от дорогих к дешёвым;
сортировка по названию;
сортировка по типу.

Для небольшого каталога на 58 товаров этого достаточно. Всё работает быстро и без лишней серверной логики.

Popup товара

Для товара не стали делать отдельную страницу. Вместо этого используется popup.

В карточке пользователь видит короткую информацию, а подробности открываются во всплывающем окне:

фото;
название;
цена;
категория;
формат;
описание;
вкус;
кому подойдёт;
кнопка добавления в корзину.

Мне нравится такой подход для небольшого каталога: пользователь не теряет контекст, не уходит со страницы и может быстро посмотреть несколько товаров подряд.

Корзина

Корзина работает через localStorage.

Это значит, что пользователь может добавить товары, изменить количество, удалить позицию и увидеть итоговую сумму без полноценного backend-заказа.

Сейчас корзина умеет:

хранить выбранные товары;
считать количество;
считать итоговую сумму;
менять количество;
удалять позиции;
очищать корзину.

Оформление заказа пока остаётся demo-частью. Это нормально для текущего этапа: сначала нужно показать механику каталога, а потом уже подключать реальные заказы, доставку и оплату.

Demo-админка товаров

Отдельная часть работы — админка.

Сначала в админке случайно появился контур статей и гайдов. Для этого проекта он был лишним, потому что «Дом Пуэра» сейчас не про блог, а про товары. Поэтому контур статей убрали, а фокус вернули на товарную CMS.

Сейчас в demo-админке есть:

список товаров;
форма нового товара;
страницы редактирования товаров;
preview карточки;
preview будущего Telegram-поста;
блоки статусов;
визуальная логика синхронизации.

Админка пока не сохраняет изменения по-настоящему, но уже показывает будущую механику: один товар становится единым источником данных для сайта, бота, оплаты и Telegram-канала.

Авторизация админки

Ещё один важный шаг — закрыть demo-админку от публичного доступа.

Была добавлена отдельная страница входа:

/dom-puera/admin-demo/login

После этого защищены страницы:

/dom-puera/admin-demo;
/dom-puera/admin-demo/products;
/dom-puera/admin-demo/products/new;
страницы редактирования товаров.

Публичный каталог и корзина остались открытыми, а админка теперь доступна только после входа.

Для demo-этапа этого достаточно. Для боевой версии логин и пароль лучше вынести в .env, а товары — в базу данных.

Что получилось хорошо

Главный результат дня — проект перестал быть просто красивой демкой.

Теперь есть:

58 реальных товаров;
реальные изображения;
рабочие категории;
непустые фильтры;
поиск;
сортировка;
popup товара;
корзина;
закрытая demo-админка;
страницы добавления и редактирования товара.

Это уже можно показывать клиенту как рабочий прототип.

Не как финальный интернет-магазин, а как понятную основу, на которой видно, как будет работать будущая система.

Что пока осталось demo-режимом

Не всё пока сделано по-настоящему.

В demo-режиме остаются:

сохранение товара из админки;
загрузка и замена фото через форму;
публикация товара в Telegram-канал;
синхронизация с Telegram-ботом;
оплата;
оформление заказа;
база данных товаров.

Сейчас товары хранятся в Python-файле, а не в базе. Для прототипа это нормально, но для полноценной CMS следующим шагом нужно выносить товары в БД.

Что можно сделать дальше

Следующий большой этап — превратить demo-админку в настоящую CMS.

Я бы двигался так:

Подключить базу данных товаров.
Сделать реальное сохранение из админки.
Добавить загрузку и замену фото.
Вынести логин и пароль админки в .env.
Подключить Telegram-бота.
Продумать оформление заказа.
Подключить оплату.
Сделать синхронизацию товара с Telegram-каналом.

После этого сайт сможет быть не просто витриной, а полноценным инструментом управления каталогом.

Почему это полезно для бизнеса

Часто у бизнеса уже есть товары где-то в Tilda, таблице, маркетплейсе или старом каталоге. Но данные лежат неструктурированно: где-то длинные описания, где-то разные категории, где-то кривые картинки, где-то нет единого формата.

В этом проекте задача была как раз в том, чтобы привести каталог к единой логике.

Не просто “перенести карточки”, а сделать основу, с которой дальше можно строить нормальную систему:

сайт;
корзину;
админку;
Telegram-бота;
канал;
оплату;
заказы.

Если вам нужен похожий каталог, сайт, Telegram-бот или автоматизация, можно посмотреть мои услуги или другие digital-проекты.

Коротко по теме

За день demo-каталог превратился в рабочий прототип с 58 реальными товарами.
Товары с Tilda были приведены к единой структуре: названия, цены, категории, описания, фото и slug.
В каталоге работают фильтры, поиск, сортировка, popup и корзина.
Demo-админка закрыта авторизацией и показывает будущую логику товарной CMS.
Следующий этап — подключить базу данных и сделать настоящее сохранение товаров.

Обсудим вашу задачу?

Если вам нужен сайт, каталог, Telegram-бот или автоматизация для бизнеса, оставьте заявку. Я посмотрю задачу и предложу понятный следующий шаг.