forked from crowetic/commerce
Cursor for Product View
This commit is contained in:
parent
d171a3113c
commit
5a05cb41ea
@ -7,7 +7,7 @@ import { Swatch, ProductSlider } from '@components/product'
|
|||||||
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
||||||
import { getProductOptions } from '../helpers'
|
import { getProductOptions } from '../helpers'
|
||||||
import s from './ProductView.module.css'
|
import s from './ProductView.module.css'
|
||||||
import * as Bowser from 'bowser'
|
import { isDesktop } from '@lib/browser'
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
children?: any
|
children?: any
|
||||||
@ -18,24 +18,17 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
const addItem = useAddItem()
|
const addItem = useAddItem()
|
||||||
const { openSidebar } = useUI()
|
const { openSidebar } = useUI()
|
||||||
const options = getProductOptions(product)
|
const options = getProductOptions(product)
|
||||||
let notValidBrowser = null
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [validMedia, setValidMedia] = useState(false)
|
||||||
|
|
||||||
const [choices, setChoices] = useState<Record<string, any>>({
|
const [choices, setChoices] = useState<Record<string, any>>({
|
||||||
size: null,
|
size: null,
|
||||||
color: null,
|
color: null,
|
||||||
})
|
})
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false)
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const browser = Bowser.getParser(window.navigator.userAgent)
|
setValidMedia(isDesktop())
|
||||||
const notValidBrowser = browser.satisfies({
|
}, [])
|
||||||
mobile: {
|
|
||||||
safari: '>=14',
|
|
||||||
android: '>81',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}, [notValidBrowser])
|
|
||||||
|
|
||||||
const addToCart = async () => {
|
const addToCart = async () => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
@ -97,7 +90,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
</ProductSlider>
|
</ProductSlider>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{notValidBrowser && (
|
{!validMedia && (
|
||||||
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
|
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
|
||||||
<img src="/slider-arrows.png" />
|
<img src="/slider-arrows.png" />
|
||||||
</div>
|
</div>
|
||||||
|
16
lib/browser.ts
Normal file
16
lib/browser.ts
Normal 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'
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user