4
0
forked from crowetic/commerce

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 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
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'
}