Добро пожаловать на двенадцатый день журнала сборки useaffiliates.com! В этой серии рассказывается о моем путешествии по созданию публичного бизнеса с нуля. Если вы пропустили одиннадцатый день, вы можете проверить это здесь. Я также загрузил сегодняшний Twitch стрим на YouTube, если хотите посмотреть повтор.

Прощай, статическая генерация. 👋😢

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

Для этого я решил использовать параметры запроса. Однако на прошлой неделе я обнаружил, что они не работают с SSG (генерация статических сайтов), чего и следовало ожидать, если подумать.

В качестве альтернативы я переключился на SSR (рендеринг на стороне сервера), что нормально, но время до первого байта (TTFB) при таком подходе будет выше. Итак, прежде чем запускать проект, я должен убедиться, что реализую кэширование для всех страниц.

Небольшие, но существенные улучшения. ✍️

Теперь, когда листинг работает, в сервисе возникло несколько незначительных проблем. После столь долгой работы над одним важным аспектом проекта было интересно поработать над несколькими более мелкими задачами. Ведь эти мелочи улучшают UX проекта.

Индикатор загрузки рядом с фильтрами.

Когда пользователь обновляет фильтр тип оплаты или период файла cookie, может возникнуть небольшая задержка, поскольку приложение получает новые (некэшированные) данные с сервера. Это может быть не очень понятно и может привести к тому, что пользователь перезагрузится или решит, что пора посмотреть YouTube, вместо того, чтобы проводить больше времени на useaffiliates.com.

В зависимости от того, насколько велика область просмотра пользователя, вполне может случиться так, что первый элемент списка будет немного за кадром, поэтому я хотел включить индикатор загрузки в представление с фильтрами.

Теперь я мог бы пойти по пути реализации анимации для этого, но сейчас не время тратить время на это. Пока я просто покажу простую метку «загрузка…», которая исчезает после обновления данных.

Просто, понятно и эффективно. ✅

Очистите фильтры, когда вы получите 0 результатов.

На прошлой неделе я реализовал сообщение «нет результатов» внутри листинга. Единственный способ получить это сообщение — установить фильтры, которые возвращают 0 строк из базы данных. Поэтому было бы разумно включить кнопку для очистки фильтров, чтобы пользователь мог продолжать изучение, не возвращаясь каждый раз на домашнюю страницу.

Таким образом, эта кнопка не очищает категорию, что является некоторой проблемой, поскольку с некоторыми категориями еще не связаны никакие партнерские программы. Однако мне еще нужно добавить еще партнерки 20/30, после чего я удалю любую пустую категорию.

Эти категории могут вернуться позже, но зачем предлагать категорию в качестве опции фильтра, если я знаю, что она не возвращает пользователю никаких результатов, верно?

Спонсорские ряды. 💰

Работая над фильтрами списка, я также реализовал сортировку спонсируемых товаров. Даже при фильтрации по периоду использования файлов cookie я всегда хочу, чтобы спонсируемые элементы списка отображались вверху, потому что этого ожидает клиент (рекламодатель).

Особенно с параметром фильтра cookie внутри URL-адреса я не могу показывать рекламу только тогда, когда страница не фильтруется. В противном случае, если ссылка будет опубликована внутри с включенным фильтром, я думаю, рекламодатели почувствуют себя облажавшимися и не вернутся во второй раз (я бы сделал).

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

Самое сложное в этом было то, что у меня возникла проблема с добавлением абсолютно позиционированного ярлыка «спонсируемый». Высоту элементов внутри столбца сетки было раздражающе трудно получить правильно и центрировать. Но, в конце концов, с небольшой помощью flexbox, я переместил карточку «внедрить спонсируемые строки» на полосу «завершено».

Настройка страницы 404. ⚠

Со всеми этими категориями увеличивается вероятность того, что люди могут попасть на страницу 404. Я сделаю все возможное, чтобы свести это к минимуму, но наличие доброй и снисходительной страницы 404 поможет поддерживать активность сессий.

Для этого я немного модифицировал шаблон Defaultlayout, чтобы он также принимал свойство объекта button. Таким образом, я мог бы добавить сообщение «oops» и кнопку, чтобы вернуть пользователя на безопасную домашнюю страницу.

Теперь страница все еще выглядит немного пустой, поэтому я хотел бы включить забавный мем. Предпочтительно короткое (менее 10 секунд) видео или гифка, чтобы люди могли посмеяться, прежде чем вернуться на главную страницу. Если у вас есть какие-либо предложения, оставляйте их в комментариях или напишите мне!

Настройте маршруты для страниц about и submit. 📄

В конце дня я настроил шаблоны для страницы «О программе» и «Опубликовать программу». Завтра мне нужно будет подумать о цели страницы «О нас». Я все еще не знаю, к кому обратиться, к создателям или к бизнесу? Оба?

Это также означает, что мы близки к запуску! Перед запуском я хочу провести небольшую бету со всеми вами. Я хочу убедиться, что мы уловим все причуды и ответные вопросы. И какой лучший способ сделать это, чем со всеми вами!

Однако до запуска «беты» осталось еще одно препятствие: подача партнерских программ и спонсорство. Я хочу, чтобы это был несколько автоматизированный процесс, чтобы единственное, что мне нужно было сделать (в 90%+ случаев), это добавить партнерскую программу в базу данных. Это означает добавление формы и оплаты.

Захватывающие вещи! Я с нетерпением жду завершения этого проекта и начала тестирования различных маркетинговых стратегий.

Еще раз спасибо за чтение этого журнала сборки, и я надеюсь увидеть вас завтра!

Если вы хотите оставаться в курсе тем временем, подпишитесь на меня в Твиттере.

С любовью,

Тванкруи