kirill-zhirnov / boundless-nextjs-ecommerce-template Goto Github PK

• При загрузке сайта, на стороне клиента, проверяем, есть ли cookie boundless_cart_id, если нет - создаем новую корзину: /orders/cart/retrieve. ID сохраняем в cookie. Если cookie есть, то получаем состояние корзины: /orders/cart/{cart_id}/total.

Total данные нужно сохранить в redux (а также добавить redux-thunk) и отрендерить компонент с total в шапке сайта:

Если корзина не пуста, отображаем также сумму в корзине:

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

Заодно переделать вставку FontAwersome через <FontAwesomeIcon icon=....

• border и HR оформить одинаково, расстояние между блоками должно быть одинаковым (как внешнее так и внутреннее):

Образец: https://i4421.my-sellios.ru/product/samsung-clear-cover

• Характеристики оформить также как на странице: https://i4421.my-sellios.ru/product/samsung-clear-cover Разметку сделать по БЭМ методологии.
• В характеристики добавить производителя, вес и габариты (если есть)
• Shipping - hardcoded блок, оформить также как:

3 иконки добавить из fontawersome (уже подключен)

• Под In/out stock выводим SKU. Если у товара есть варианты, выводим SKU варианта и только тогда, когда он выбран

Сейчас не совсем правильно: product.price.value есть только в том случае, когда у товара цена одна (те нет вариантов), когда у товара есть варианты, то у него приходит product.price.min, тогда цену нужно отображать как "From ".

Тоже самое и с old ценами. Посмотри, как это сделано сейчас на babylon или у нас в админке и сделай отдельный компонент PropductPrice, который будет резолвить цену. В babylon на фронтенде это вроде бы сделано.

Иконку с направлением сортировки добавлять только если по этому пункту производится сортировка (кроме default).

Образец:
https://i4421.my-sellios.ru/product/samsung-clear-cover

Сперва нужно сделать библиотеку для расчета новых размеров изоборажения, поскольку next/image требует габариты.

• Стрелочки и точки внизу (пагинацию) сделать в цветах темы.

• Нижний горизонтальный скролл убрать

Тк там фактически только работа с корзиной. Если все методы заказа поменстить в один файл - он будет слишком большим.

• Добавить страницу корзины: /cart

• На стороне клиента фетчим Items: /orders/cart/{cart_id}/items. Строим корзину, как в funlook. Разметку можно улучшить, вместо таблицы сделать на flex?

Фетчить нужно по ID из redux, если ID в redux нет, то нужно отображать Loading. Как только ID корзины появился в redux - запускаем фетч.

• Удаление/смена кол-ва: /orders/cart/set-qty, /orders/cart/rm-items

Добавление товара в корзину: /orders/cart/add

• Блочим кнопку, запускаем лодер
• Ждем пока в redux появится cart_id
• Отправляем запрос.

Результат может быть либо true с новым total, либо actionRequired - в этом случае нужно открыть модальное окно со списком вариантов и дать выбрать вариант.

На данном этапе просто открой окно, выбор сделаем чуть позже отдельным виджетом - он будет использоваться на странице товара.

Для теста добавления - добавляй товары без вариантов.

После открытия нужно показать CallToOrder виджет. Это отдельный компонент:

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

Разработать компонент HorizontalMenu. Компонент принимает массив - такой же как и Вертикальное меню: #36

Меню берется из Redux.

Образец: https://fun-look.ru/
Разметка с использованием http://schema.org/ItemList
При написании классов, использовать БЭМ.
Для оформления ввести переменные (посмотреть как было сделано на babylon).
Для расчета выпадающего пункта использовать popper.js
Добавить какую-то анимацию на раскрытие/закрытие.

Подключать предлагаю в MainLayout, если передан параметр horizontalMenu - выводим. Передавать параметр на странице категории и странице товара.

На странице категории есть фильтры:

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

Нужно добавить логику для колонки с категориями и фильтрами, такую же как тут: https://fun-look.ru/category/vzroslye-kigurumi
Колонка скрывается, вместо нее появляется кнопка "Filters", которая показывает левую колонку в модальном окне.

Есть два варианта реализации:

• дублирование кода и показ колонки в bootstrap-modal
• Самостоятельно реализовать "модальное окно", как это сделано на fun-look.ru

Реализацию нужно обсудить перед началом работы.

• Вместо div.no-image нужно использовать <NoImage />
• Независимо от того, есть изображение нет - ссылка с изображения или его mock всегда должна быть.

• Переделать Checkboxes на кнопки, как на Fun-look.

Если кол-во опций больше 6 - скрываем остальные. Перед скрытием нужно пересортировывать список, если товаров по опции нет - она уходит в конец, после этого также сортируем по sort (как и сейчас)

• Для цены добавить слайдер, образец: Fun-look.

CallToOrder - это generic (общий) компонент, который используется в разных темах для информирования об успешном добавлении в корзину. Нужно разработать не решение, которые бы работало в данном конкретном demo-магазине, а общий компонент, который можно переиспользовать в разных темах. Мы можем внедрять доп. настройки к компоненты, которые будут определятся в конкретных темах.

• Добавить Sticky позиционирование. Нужно чтобы блок был прикреплен под меню (хидером), а при скролинге - к верхнему углу. пример https://fun-look.ru

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

https://i3703.my-sellios.ru/
https://i562.my-sellios.ru/
https://i860.my-sellios.ru/

Если нельзя решить средствами CSS, то можно использовать JS - отслеживать прокрутку.

• Добавить анимацию на исчезание - такую же как и в сайтах выше или слайд вправо.
• Для мобильных (X-Small) ширина должна быть 90% от ширины экрана.

пропущено, сделать до запуска

og:title, img, etc.

Для страницы товара должны быть свои картинки, для категории также, если картинка задана.

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

В целях тестирования, добавь товар, у которого вариант строится в 2-3м свойствам, например размер и цвет.

Пример выбора варианта можно посмотреть в проекте Babylon: https://github.com/kirill-zhirnov/babylon/blob/master/htdocs/app/packages/catalog/vue/web/product/ChooseVariant.vue

Логигу/разметку возьми с демо-сайта или Катиного магазина.

• должен появляться по правой границе container
• должен появляться с анимацией (см fun-look.ru).
• No-img картинка в случае твоара без изображения

Нужно, чтобы компонент принимал массив {title: string, isActive?: boolean, url?: stirng}[] и по нему строил хлебный крошки. Сейчас, BreadCrumbs привязан к категориям, нужно, чтобы это был универсальный компонент (те мы можем в будущем его вызывать не только со страницы категории или товара).

Доработать Aside Menu:

• Меню берется из Redux, выводим mainMenu

• Добавить закрытие по свайпу вправо. Взять @use-gesture/react, useDrag - при открытии ловим свайп вправо и закрываем.

• Вывести в Aside:

1. В правом верхнем углу добавляем кнопку с крестиком, при клике - закрываем
2. Корзина. Можно взять из шапки блок.
3. Main menu: Schema.org разметка, если есть подменю - раскрытие как на https://fun-look.ru, CSS разметка бэм

Стили сделать такими как на Fun-look, ввести переменные при необходимости.

• При переходе на другую страницу (те если начинает открываться страница) - закрываем AsideMenu.

Пример блока:
https://fun-look.ru/page/some-test-landing

Настройки блока (создай магазтин на sellios, чтобы поиграть с настройками и понять как они устроены):

Те у тебя получится интерфейс что-то вроде:

<CoverTextInCenter img={путь до картинки} .../>

Также нужно, чтобы на мобильной версии (xs и sm) - использовалась другая картинка. Сейчас на fun-look это не сделано, но надо чтобы на мобильных экранах блок был растянут на всю высоту viewport: 100vh (при этом картинка бы менялась).

Поиграй сперва с настройками на Sellios, продумай интерфейс, посмотри стили на babylon: htdocs/app/views/less/common/components/blocks/covers/textInCenter.less и сделай компонент, который бы принимал все эти настройки в качестве св-в.

• server side prerendered

• АНалогично AsideMenu: dynamic(() => import('../components/AsideMenu'), {ssr: false})
• В _app.tsx подгружаются стили свайпер - их тоже нужно вынести в этот динамически подключаемый компонент
• Может имеет смысл обернуть свайпер в какой-нить враппер. Свайпер будет использоаться для карусели товаров и для галлереи на странице товара.

При субмите фильтра, присходит 3 запроса к filters-range.

Нужно в FilterForm в useEffect, проверять - изменились ли фильтры от queryParams и только если изменились - фетчить.

Возможно также, нужно разделить логику - фетч при создании компонента и фетч при изменении параметров (хотя это не точно).

<ProductsSlider product={products}/> - отображает слайдер по массиву из товаров

<ProductsSliderByQuery query={query} /> - отображает слайдер по запросу - компонент сам запрашивает по API и выводит слайдер через ProductsSlider. Пока идет загрузка отображается SVG прелодер. Важно, чтобы высота прелодера и слайдера совпадали (чтобы контент не прыгал при загрузке)

Нужно разработать слайдер с вкладками. Пример слайдера: https://i4421.my-sellios.ru ,

Вы можете создать магазин на https://sellios.ru и поиграть с настройками слайдера.

Предлагаю, следующий интерфейс к компоненту:

<TabbedProductSlider>
	<SliderCollectionTab 
		title={'Tab title'}
		productsQuery={params: IGetProductsParams}
		rows={1}
		swiperProps={{loop: boolean...}}
	/>
</TabbedProductSlider>

Каждая вкладка фетчит список товаров по API: api.catalog.getProducts(productsQuery). Пока все вкладки не загрузятся нужно показывать react-content-loader в виде списка товаров с одинковой со списком высотой (на первом шаге можно пропистить и просто показывать слово Loading...).

В качестве библиотеки для карусели используем Swiper (https://swiperjs.com). Swiper должен подгружаться динамически. Блок нет необходимости рендерить на сервере.

Пока сделаем вкладки со списком товаров, потом добавим вкладки с произвольным контентом (см пример).

Generic компонент, футер делаем по образцу: https://i3703.my-sellios.ru/

Компонент принимает меню (интерфейс такой же как в #36), подключается в MainLayout. Страницы передают footerMenu в MainLayout.

Футер на весь экран, контейнер по центру, в контейнере 4 колонки:

• логотип + короткий текст
• меню (берется из Redux)
• конткаты
• иконки соц сетей со ссылками

В css ввести переменные front-footer-bg, front-footer-text-color, front-footer-link-color, возможно еще что-то - посмотреть как сделан футер в babylon, тема neptune.

Разметка БЭМ.

Для меню в футере разметка Schema.org/List.

Для упрощения использования, предлагаю в конструктор передавать объект с параметрами:

constructor(params: {imgLocalPath?, maxSize? и так все параметры}) 

тоже самое для makeThumb

Нужно сделать отдельный компонент VerticalMenu, который на входе бы принимал массив IMenuItem[]:

Меню берется из Redux.

Это нужно, чтобы можно было в меню добавить обычные ссылки на страницы помимо категорий.
Разметка с использованием http://schema.org/ItemList (пример на странице категории, в меню категории: http://localhost:3001/category/chekhly-na-iphone)

Оформить, примерно вот так:

https://i563.my-sellios.ru/

При написании классов, использовать БЭМ.

Для оформления ввести переменные: front-v-menu-bg, front-v-menu-color, front-v-menu-active

Тег компонента nav.

Также нужно проверить пагинацию.