Кастомизация
Персонализация
Заменим везде имя на "Arty-Crafty", изменим описание в package.json
. Найдем в интернете подходящую иконку для логотипа, и заменим штатную.
Теперь скроем сайдбар в tablet
и desktop
режимах, потому что в нем должен быть каталог только в мобильном режиме. Для других каталог будет из меню в хедере.
Далее, мы будем делать приложение в модульной архитектуре. Общие компоненты, утилиты, композаблы и ресурсы у нас будут в модуле app
, то, что относится к каталогу, категориям товаров и самим товарам - в products
, и так далее. Поэтому нужно в src
создать дирректорию app
и перенести всё в неё, с заменой путей, где надо.
Загружаем все на GitHub и ставим тэг - v0.1
. Для этого нужно опубликовать релиз.
Views
Чистим главную страницу, i18n
убираем пока подальше. Переименовываем основные view на:
- HomeView (остается)
- ProductCategoryView
- ProductView
Замечание
Предпочтительно использовать термин View, а не Page потому, что View может быть частью другого View, а Page - нет (семантически).
ProductCategoryView
и ProductView
убираем в директорию views
модуля products
.
Routes
Обновляем routes
. Добавляем роуты для product
, category
, favourites
, cart
и login
const routes: RouteRecordRaw[] = [
// ...
{
path: "/product/:productId",
name: "product",
component: ProductView,
},
{
path: "/category/:categoryId",
name: "category",
component: ProductCategoryView,
},
{
path: "/favourites",
name: "favourites",
component: ProductCategoryView,
},
// ...
];
Маршруты пока оставляем в главном модуле, при росте их числа - разобьем.
Отмечаем, что в солидных магазинах ссылка на категорию выглядит примерно так: /category/muzhskaya-odezhda-7542/
. То есть, slug названия категории и её id. У нас будет пока только categoryId
, но в дальнейшем мы сделаем такую человеко-понятную ссылку - это полезно для UX и для SEO. То же самое с продуктами.
Header
Делаем хедер - с лого, поисковой строкой, иконками корзины, логина/аккаунта, избранного справа, и снизу меню с 2-3 категориями.
На аналогичных сайтах поисковая строка может быть весьма непростой - с выпадающим меню с подсказками, например, или каталогом. Поэтому сразу выделим её в отдельный компонент - AppSearchBar
. Находим в интернете подходящую стилизацию input
и используем её.
Подходящие иконки можно поискать на iconbuddy.app и icones.js.org. Для их отображения используем BaseIcon
.
Добавляем немного эффектов, адаптивности, и получаем:
Sidebar
В выдвигающемся слева сайдбаре также захардкодим несколько категорий. Более тщательную кастомизацию оставим на потом.
В итоге:
Небольшой рефакторинг
Переименуем наш кастомизированный компонент MantineSimpleHeader
в AppHeader
и все остальные также.
Загружаем в репозиторий и ставим тэг - v0.2
.