mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Changes
This commit is contained in:
parent
26a2090b11
commit
d171a3113c
17
components/product/ProductSlider/ProductSlider.module.css
Normal file
17
components/product/ProductSlider/ProductSlider.module.css
Normal file
@ -0,0 +1,17 @@
|
||||
.root {
|
||||
@apply relative w-full h-full;
|
||||
}
|
||||
|
||||
.rootPanel {
|
||||
@apply absolute flex flex-row inset-0 z-20 overflow-hidden;
|
||||
}
|
||||
|
||||
.leftPanel {
|
||||
@apply flex-1;
|
||||
cursor: url('/cursor-left.png'), auto;
|
||||
}
|
||||
|
||||
.rightPanel {
|
||||
@apply flex-1;
|
||||
cursor: url('/cursor-right.png'), auto;
|
||||
}
|
@ -1,7 +1,6 @@
|
||||
import { FC, useState } from 'react'
|
||||
import React from 'react'
|
||||
import React, { FC, useState } from 'react'
|
||||
import SwipeableViews from 'react-swipeable-views'
|
||||
|
||||
import s from './ProductSlider.module.css'
|
||||
interface Props {
|
||||
children?: any
|
||||
}
|
||||
@ -19,10 +18,10 @@ const ProductSlider: FC<Props> = ({ children }) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full">
|
||||
<div className="absolute flex flex-row inset-0 z-10 opacity-0">
|
||||
<div className="flex-1 bg-cyan" onClick={goBack}></div>
|
||||
<div className="flex-1 bg-pink" onClick={goNext}></div>
|
||||
<div className={s.root}>
|
||||
<div className={s.rootPanel}>
|
||||
<div className={s.leftPanel} onClick={goBack}></div>
|
||||
<div className={s.rightPanel} onClick={goNext}></div>
|
||||
</div>
|
||||
<SwipeableViews index={idx} onChangeIndex={setIdx}>
|
||||
{children}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { NextSeo } from 'next-seo'
|
||||
import { FC, useState } from 'react'
|
||||
import { FC, useState, useEffect } from 'react'
|
||||
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
|
||||
import { useUI } from '@components/ui/context'
|
||||
import { Button, Container } from '@components/ui'
|
||||
@ -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'
|
||||
interface Props {
|
||||
className?: string
|
||||
children?: any
|
||||
@ -18,6 +18,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
||||
const addItem = useAddItem()
|
||||
const { openSidebar } = useUI()
|
||||
const options = getProductOptions(product)
|
||||
let notValidBrowser = null
|
||||
|
||||
const [choices, setChoices] = useState<Record<string, any>>({
|
||||
size: null,
|
||||
@ -26,6 +27,16 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const browser = Bowser.getParser(window.navigator.userAgent)
|
||||
const notValidBrowser = browser.satisfies({
|
||||
mobile: {
|
||||
safari: '>=14',
|
||||
android: '>81',
|
||||
},
|
||||
})
|
||||
}, [notValidBrowser])
|
||||
|
||||
const addToCart = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
@ -85,9 +96,13 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
||||
))}
|
||||
</ProductSlider>
|
||||
</div>
|
||||
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
|
||||
<img src="/slider-arrows.png" />
|
||||
</div>
|
||||
|
||||
{notValidBrowser && (
|
||||
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
|
||||
<img src="/slider-arrows.png" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={s.squareBg}></div>
|
||||
</div>
|
||||
|
||||
|
11839
package-lock.json
generated
11839
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -22,18 +22,15 @@
|
||||
"@headlessui/react": "^0.2.0",
|
||||
"@tailwindcss/ui": "^0.6.2",
|
||||
"animate.css": "^4.1.1",
|
||||
"bowser": "^2.11.0",
|
||||
"bunyan": "^1.8.14",
|
||||
"bunyan-prettystream": "^0.1.3",
|
||||
"classnames": "^2.2.6",
|
||||
"cookie": "^0.4.1",
|
||||
"js-cookie": "^2.2.1",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
<<<<<<< HEAD
|
||||
"next": "^9.5.5",
|
||||
=======
|
||||
"lodash.random": "^3.2.0",
|
||||
"next": "^9.5.6-canary.4",
|
||||
>>>>>>> 0922c87621a6a34986bf811a1f2e55ed0bc7edf4
|
||||
"next-seo": "^4.11.0",
|
||||
"next-themes": "^0.0.4",
|
||||
"nextjs-progressbar": "^0.0.6",
|
||||
|
BIN
public/cursor-left.png
Normal file
BIN
public/cursor-left.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.4 KiB |
BIN
public/cursor-right.png
Normal file
BIN
public/cursor-right.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.4 KiB |
Loading…
x
Reference in New Issue
Block a user