Cursor for Product View

This commit is contained in:
Belen Curcio 2020-10-20 13:28:58 -03:00
parent d171a3113c
commit 5a05cb41ea
2 changed files with 22 additions and 13 deletions

View File

@ -7,7 +7,7 @@ import { Swatch, ProductSlider } from '@components/product'
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
import { getProductOptions } from '../helpers'
import s from './ProductView.module.css'
import * as Bowser from 'bowser'
import { isDesktop } from '@lib/browser'
interface Props {
className?: string
children?: any
@ -18,24 +18,17 @@ const ProductView: FC<Props> = ({ product, className }) => {
const addItem = useAddItem()
const { openSidebar } = useUI()
const options = getProductOptions(product)
let notValidBrowser = null
const [loading, setLoading] = useState(false)
const [validMedia, setValidMedia] = useState(false)
const [choices, setChoices] = useState<Record<string, any>>({
size: null,
color: null,
})
const [loading, setLoading] = useState(false)
useEffect(() => {
const browser = Bowser.getParser(window.navigator.userAgent)
const notValidBrowser = browser.satisfies({
mobile: {
safari: '>=14',
android: '>81',
},
})
}, [notValidBrowser])
setValidMedia(isDesktop())
}, [])
const addToCart = async () => {
setLoading(true)
@ -97,7 +90,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
</ProductSlider>
</div>
{notValidBrowser && (
{!validMedia && (
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
<img src="/slider-arrows.png" />
</div>

16
lib/browser.ts Normal file
View File

@ -0,0 +1,16 @@
import * as Bowser from 'bowser'
export function isDesktop(): boolean {
const browser = Bowser.getParser(window.navigator.userAgent)
return browser.getPlatform().type === 'desktop'
}
export function isMobile(): boolean {
const browser = Bowser.getParser(window.navigator.userAgent)
return browser.getPlatform().type === 'mobile'
}
export function isTablet(): boolean {
const browser = Bowser.getParser(window.navigator.userAgent)
return browser.getPlatform().type === 'tablet'
}