forked from crowetic/commerce
Merge branch 'master' of https://github.com/okbel/e-comm-example
This commit is contained in:
Luis Alvarez
commit
0779985340
@ -53,8 +53,6 @@ const CartItem = ({
|
||||
}
|
||||
}, [item.quantity])
|
||||
|
||||
console.log(item)
|
||||
|
||||
return (
|
||||
<li className="flex flex-row space-x-8 py-6">
|
||||
<div className="w-12 h-12 bg-violet relative overflow-hidden">
|
||||
|
||||
@ -27,9 +27,6 @@ const CartSidebarView: FC = () => {
|
||||
|
||||
const items = data?.line_items.physical_items ?? []
|
||||
|
||||
console.log('CART', data, isEmpty)
|
||||
|
||||
// This should come from the API via hook I guess
|
||||
const error = null
|
||||
const success = null
|
||||
|
||||
@ -95,7 +92,7 @@ const CartSidebarView: FC = () => {
|
||||
<h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
|
||||
My Cart
|
||||
</h2>
|
||||
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 border-t border-gray-200">
|
||||
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-3 border-t border-accents-3">
|
||||
{items.map((item) => (
|
||||
<CartItem
|
||||
key={item.id}
|
||||
@ -107,7 +104,7 @@ const CartSidebarView: FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 px-4 py-5 sm:px-6">
|
||||
<div className="border-t border-gray-200">
|
||||
<div className="border-t border-accents-3">
|
||||
<ul className="py-3">
|
||||
<li className="flex justify-between py-1">
|
||||
<span>Subtotal</span>
|
||||
@ -122,7 +119,7 @@ const CartSidebarView: FC = () => {
|
||||
<span>FREE</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="flex justify-between border-t border-gray-300 py-3 font-bold mb-10">
|
||||
<div className="flex justify-between border-t border-accents-3 py-3 font-bold mb-10">
|
||||
<span>Total</span>
|
||||
<span>{total}</span>
|
||||
</div>
|
||||
|
||||
18
components/core/Head/Head.tsx
Normal file
18
components/core/Head/Head.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import { FC } from 'react'
|
||||
import NextHead from 'next/head'
|
||||
import { DefaultSeo } from 'next-seo'
|
||||
import config from '@config/seo.json'
|
||||
|
||||
const Head: FC = () => {
|
||||
return (
|
||||
<>
|
||||
<DefaultSeo {...config} />
|
||||
<NextHead>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="manifest" href="/site.webmanifest" key="site-manifest" />
|
||||
</NextHead>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Head
|
||||
1
components/core/Head/index.ts
Normal file
1
components/core/Head/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './Head'
|
||||
@ -1,58 +1,40 @@
|
||||
import { FC } from 'react'
|
||||
import cn from 'classnames'
|
||||
import { ThemeProvider } from 'next-themes'
|
||||
import { SSRProvider, OverlayProvider } from 'react-aria'
|
||||
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
|
||||
import { CommerceProvider } from '@lib/bigcommerce'
|
||||
import { Navbar, Featurebar, Footer } from '@components/core'
|
||||
import { Container, Sidebar } from '@components/ui'
|
||||
import { CartSidebarView } from '@components/cart'
|
||||
import { UIProvider, useUI } from '@components/ui/context'
|
||||
import { useUI } from '@components/ui/context'
|
||||
import s from './Layout.module.css'
|
||||
|
||||
interface LayoutProps {
|
||||
interface Props {
|
||||
pageProps: {
|
||||
pages?: Page[]
|
||||
}
|
||||
}
|
||||
|
||||
interface Props {
|
||||
pages?: Page[]
|
||||
}
|
||||
|
||||
const CoreLayout: FC<Props> = ({ children, pages }) => {
|
||||
const Layout: FC<Props> = ({ children, pageProps }) => {
|
||||
const { displaySidebar, closeSidebar } = useUI()
|
||||
|
||||
return (
|
||||
<div className={cn(s.root)}>
|
||||
<Featurebar
|
||||
title="Free Standard Shipping on orders over $99.99"
|
||||
description="Due to COVID-19, some orders may experience processing and delivery delays."
|
||||
/>
|
||||
<Container>
|
||||
<Navbar />
|
||||
</Container>
|
||||
<main className="fit">{children}</main>
|
||||
<Footer pages={pages} />
|
||||
<Sidebar show={displaySidebar} close={closeSidebar}>
|
||||
<CartSidebarView />
|
||||
</Sidebar>
|
||||
</div>
|
||||
<CommerceProvider locale="en-us">
|
||||
<div className={cn(s.root)}>
|
||||
<Featurebar
|
||||
title="Free Standard Shipping on orders over $99.99"
|
||||
description="Due to COVID-19, some orders may experience processing and delivery delays."
|
||||
/>
|
||||
<Container>
|
||||
<Navbar />
|
||||
</Container>
|
||||
<main className="fit">{children}</main>
|
||||
<Footer pages={pageProps.pages} />
|
||||
<Sidebar show={displaySidebar} close={closeSidebar}>
|
||||
<CartSidebarView />
|
||||
</Sidebar>
|
||||
</div>
|
||||
</CommerceProvider>
|
||||
)
|
||||
}
|
||||
|
||||
const Layout: FC<LayoutProps> = ({ children, pageProps }) => (
|
||||
<ThemeProvider>
|
||||
<SSRProvider>
|
||||
<OverlayProvider>
|
||||
<CommerceProvider locale="en-us">
|
||||
<UIProvider>
|
||||
<CoreLayout pages={pageProps.pages}>{children}</CoreLayout>
|
||||
</UIProvider>
|
||||
</CommerceProvider>
|
||||
</OverlayProvider>
|
||||
</SSRProvider>
|
||||
</ThemeProvider>
|
||||
)
|
||||
|
||||
export default Layout
|
||||
|
||||
@ -6,3 +6,4 @@ export { default as Navbar } from './Navbar'
|
||||
export { default as Searchbar } from './Searchbar'
|
||||
export { default as UserNav } from './UserNav'
|
||||
export { default as Toggle } from './Toggle'
|
||||
export { default as Head } from './Head'
|
||||
|
||||
@ -6,31 +6,31 @@
|
||||
@apply scale-75;
|
||||
}
|
||||
|
||||
& .productTitle,
|
||||
& .productTitle > span,
|
||||
& .productPrice,
|
||||
& .wishlistButton {
|
||||
@apply bg-secondary text-secondary;
|
||||
}
|
||||
|
||||
&:nth-child(6n + 1) .productTitle,
|
||||
&:nth-child(6n + 1) .productTitle > span,
|
||||
&:nth-child(6n + 1) .productPrice,
|
||||
&:nth-child(6n + 1) .wishlistButton {
|
||||
@apply bg-violet text-white;
|
||||
}
|
||||
|
||||
&:nth-child(6n + 5) .productTitle,
|
||||
&:nth-child(6n + 5) .productTitle > span,
|
||||
&:nth-child(6n + 5) .productPrice,
|
||||
&:nth-child(6n + 5) .wishlistButton {
|
||||
@apply bg-blue text-white;
|
||||
}
|
||||
|
||||
&:nth-child(6n + 3) .productTitle,
|
||||
&:nth-child(6n + 3) .productTitle > span,
|
||||
&:nth-child(6n + 3) .productPrice,
|
||||
&:nth-child(6n + 3) .wishlistButton {
|
||||
@apply bg-pink text-white;
|
||||
}
|
||||
|
||||
&:nth-child(6n + 6) .productTitle,
|
||||
&:nth-child(6n + 6) .productTitle > span,
|
||||
&:nth-child(6n + 6) .productPrice,
|
||||
&:nth-child(6n + 6) .wishlistButton {
|
||||
@apply bg-cyan text-white;
|
||||
@ -66,29 +66,13 @@
|
||||
}
|
||||
|
||||
.productTitle {
|
||||
/* @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex; */
|
||||
/* max-width: calc(100% - 50px); */
|
||||
line-height: 1.3;
|
||||
padding: 2px 0;
|
||||
border-left: 20px solid #c0c;
|
||||
width: 400px;
|
||||
margin: 20px auto;
|
||||
line-height: 51px;
|
||||
width: 200px;
|
||||
|
||||
& h2 {
|
||||
background-color: #c0c;
|
||||
padding: 4px 0;
|
||||
color: #fff;
|
||||
display: inline;
|
||||
margin: 0;
|
||||
|
||||
& .strong {
|
||||
position: relative;
|
||||
left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
@apply text-2xl;
|
||||
& span {
|
||||
@apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold;
|
||||
box-decoration-break: clone;
|
||||
-webkit-box-decoration-break: clone;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -46,17 +46,11 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
|
||||
</div>
|
||||
<div className={s.squareBg} />
|
||||
<div className="flex flex-row justify-between box-border w-full z-10 relative">
|
||||
<div className="flex flex-col flex-1 overflow-hidden">
|
||||
<div className="flex-1">
|
||||
<span className={s.productTitle}>
|
||||
<h2>
|
||||
<strong>{p.name}</strong>
|
||||
</h2>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-0">
|
||||
<div className={s.productPrice}>${p.prices.price.value}</div>
|
||||
<div className="">
|
||||
<div className={s.productTitle}>
|
||||
<span>{p.name}</span>
|
||||
</div>
|
||||
<span className={s.productPrice}>${p.prices.price.value}</span>
|
||||
</div>
|
||||
<div className={s.wishlistButton}>
|
||||
<Heart />
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import React, { FC } from 'react'
|
||||
import { ThemeProvider } from 'next-themes'
|
||||
import { SSRProvider, OverlayProvider } from 'react-aria'
|
||||
|
||||
export interface State {
|
||||
displaySidebar: boolean
|
||||
@ -63,3 +65,13 @@ function uiReducer(state: State, action: Action) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const ManagedUIContext: FC = ({ children }) => (
|
||||
<UIProvider>
|
||||
<ThemeProvider>
|
||||
<SSRProvider>
|
||||
<OverlayProvider>{children}</OverlayProvider>
|
||||
</SSRProvider>
|
||||
</ThemeProvider>
|
||||
</UIProvider>
|
||||
)
|
||||
|
||||
18
config.json
18
config.json
@ -1,18 +0,0 @@
|
||||
{
|
||||
"seo": {
|
||||
"title": "ACME Storefront | Powered by Next.js Commerce",
|
||||
"titleTemplate": "%s - ACME Storefront",
|
||||
"description": "Next.js Commerce -> https://www.nextjs.org/commerce",
|
||||
"openGraph": {
|
||||
"type": "website",
|
||||
"locale": "en_IE",
|
||||
"url": "https://nextjs.org/commerce",
|
||||
"site_name": "Next.js Commerce"
|
||||
},
|
||||
"twitter": {
|
||||
"handle": "@nextjs",
|
||||
"site": "@nextjs",
|
||||
"cardType": "summary_large_image"
|
||||
}
|
||||
}
|
||||
}
|
||||
16
config/seo.json
Normal file
16
config/seo.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"title": "ACME Storefront | Powered by Next.js Commerce",
|
||||
"titleTemplate": "%s - ACME Storefront",
|
||||
"description": "Next.js Commerce -> https://www.nextjs.org/commerce",
|
||||
"openGraph": {
|
||||
"type": "website",
|
||||
"locale": "en_IE",
|
||||
"url": "https://nextjs.org/commerce",
|
||||
"site_name": "Next.js Commerce"
|
||||
},
|
||||
"twitter": {
|
||||
"handle": "@nextjs",
|
||||
"site": "@nextjs",
|
||||
"cardType": "summary_large_image"
|
||||
}
|
||||
}
|
||||
@ -3,11 +3,10 @@ import '@assets/tailwind.css'
|
||||
import '@assets/utils.css'
|
||||
import 'animate.css'
|
||||
import { FC } from 'react'
|
||||
import { DefaultSeo } from 'next-seo'
|
||||
import type { AppProps } from 'next/app'
|
||||
import Head from 'next/head'
|
||||
|
||||
import config from '../config.json'
|
||||
import { ManagedUIContext } from '@components/ui/context'
|
||||
import { Head } from '@components/core'
|
||||
|
||||
const Noop: FC = ({ children }) => <>{children}</>
|
||||
|
||||
@ -16,14 +15,12 @@ export default function MyApp({ Component, pageProps }: AppProps) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="manifest" href="/site.webmanifest" key="site-manifest" />
|
||||
</Head>
|
||||
<DefaultSeo {...config.seo} />
|
||||
<Layout pageProps={pageProps}>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
<Head />
|
||||
<ManagedUIContext>
|
||||
<Layout pageProps={pageProps}>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
</ManagedUIContext>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -18,7 +18,8 @@
|
||||
"@lib/*": ["lib/*"],
|
||||
"@assets/*": ["assets/*"],
|
||||
"@components/*": ["components/*"],
|
||||
"@utils/*": ["utils/*"]
|
||||
"@utils/*": ["utils/*"],
|
||||
"@config/*": ["config/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user