kirill-zhirnov / boundless-nextjs-ecommerce-template

Next.js E-Commerce template. Strong TypeScript, Ready to use, For high-performance e-commerce websites.

Home Page:https://boundless-commerce.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CallToOrder

kirill-zhirnov opened this issue · comments

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

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

Снимок экрана 2022-01-11 в 17 36 29

Снимок экрана 2022-01-11 в 17 36 35

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

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

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

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

CSS ом эту задачу не решить. Нужно обернуть компонент в Affix, в качестве входящего параметра добавить affixOffset - в разных тема, офсет может отличаться.