30 | {title}
31 |
32 | {description}
33 |
34 | {action && action}
35 |
36 | )
37 | }
38 |
39 | export default FeatureBar
40 |
--------------------------------------------------------------------------------
/sections/Hero/Hero.builder.ts:
--------------------------------------------------------------------------------
1 | import dynamic from 'next/dynamic'
2 | import { Builder } from '@builder.io/react'
3 |
4 | const LazyHero = dynamic(async () => {
5 | return (await import('./Hero')).default
6 | })
7 |
8 | Builder.registerComponent(LazyHero, {
9 | name: 'Hero',
10 | inputs: [
11 | {
12 | name: 'headline',
13 | type: 'string',
14 | defaultValue: 'The simplest way to build Ecommerce sites with Next.js',
15 | },
16 | {
17 | name: 'description',
18 | type: 'string',
19 | defaultValue:
20 | 'Stop waiting on development release cycles. Start dragging and dropping to build and optimize digital experiences for your website, app, or ecommerce store.',
21 | },
22 | {
23 | name: 'ctaLink',
24 | type: 'string',
25 | defaultValue: '/shop',
26 | },
27 | {
28 | name: 'ctaText',
29 | type: 'string',
30 | defaultValue: 'read more',
31 | },
32 | ],
33 | })
34 |
--------------------------------------------------------------------------------
/components/ui/Grid/Grid.tsx:
--------------------------------------------------------------------------------
1 | import cn from 'classnames'
2 | import { FC, ReactNode, Component } from 'react'
3 | import s from './Grid.module.css'
4 |
5 | export interface GridProps {
6 | className?: string
7 | children?: ReactNode[] | Component[] | any[]
8 | layout?: 'A' | 'B' | 'C' | 'D' | 'normal'
9 | variant?: 'default' | 'filled'
10 | }
11 |
12 | const Grid: FC{children}
32 | }
33 |
34 | export default Grid
35 |
--------------------------------------------------------------------------------
/components/ui/Input/Input.tsx:
--------------------------------------------------------------------------------
1 | import cn from 'classnames'
2 | import s from './Input.module.css'
3 | import React, { InputHTMLAttributes } from 'react'
4 |
5 | export interface Props extends InputHTMLAttributes
25 | {/* Add an image - We're generating a gradient as placeholder ![]()
*/}
26 |
27 | )
28 | }
29 |
30 | export default Avatar
31 |
--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '@assets/main.css'
2 | import 'keen-slider/keen-slider.min.css'
3 |
4 | import { FC } from 'react'
5 | import type { AppProps } from 'next/app'
6 |
7 | import { ManagedUIContext } from '@components/ui/context'
8 | import { Head } from '@components/common'
9 | import { builder } from '@builder.io/react'
10 | import builderConfig from '@config/builder'
11 | builder.init(builderConfig.apiKey)
12 |
13 | import '../sections/ProductGrid/ProductGrid.builder'
14 | import '../sections/CollectionView/CollectionView.builder'
15 | import '../sections/Hero/Hero.builder'
16 |
17 | const Noop: FC = ({ children }) => <>{children}
18 |
19 | export default function MyApp({ Component, pageProps }: AppProps) {
20 | const Layout = (Component as any).Layout || Noop
21 |
22 | return (
23 | <>
24 |
17 |
18 |
35 |
36 | )
37 | }
38 |
39 | export default Hero
40 |
--------------------------------------------------------------------------------
/components/icons/Trash.tsx:
--------------------------------------------------------------------------------
1 | const Trash = ({ ...props }) => {
2 | return (
3 |
40 | )
41 | }
42 |
43 | export default Trash
44 |
--------------------------------------------------------------------------------
/lib/colors.ts:
--------------------------------------------------------------------------------
1 | import random from 'lodash.random'
2 |
3 | export function getRandomPairOfColors() {
4 | const colors = ['#37B679', '#DA3C3C', '#3291FF', '#7928CA', '#79FFE1']
5 | const getRandomIdx = () => random(0, colors.length - 1)
6 | let idx = getRandomIdx()
7 | let idx2 = getRandomIdx()
8 |
9 | // Has to be a different color
10 | while (idx2 === idx) {
11 | idx2 = getRandomIdx()
12 | }
13 |
14 | // Returns a pair of colors
15 | return [colors[idx], colors[idx2]]
16 | }
17 |
18 | function hexToRgb(hex: string = '') {
19 | // @ts-ignore
20 | const match = hex.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i)
21 |
22 | if (!match) {
23 | return [0, 0, 0]
24 | }
25 |
26 | let colorString = match[0]
27 |
28 | if (match[0].length === 3) {
29 | colorString = colorString
30 | .split('')
31 | .map((char: string) => {
32 | return char + char
33 | })
34 | .join('')
35 | }
36 |
37 | const integer = parseInt(colorString, 16)
38 | const r = (integer >> 16) & 0xff
39 | const g = (integer >> 8) & 0xff
40 | const b = integer & 0xff
41 |
42 | return [r, g, b]
43 | }
44 |
45 | export function isDark(color = '') {
46 | // Equation from http://24ways.org/2010/calculating-color-contrast
47 | const rgb = hexToRgb(color.toLowerCase())
48 | const res = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000
49 | return res < 128
50 | }
51 |
--------------------------------------------------------------------------------
/components/icons/Github.tsx:
--------------------------------------------------------------------------------
1 | const Github = ({ ...props }) => {
2 | return (
3 |
17 | )
18 | }
19 |
20 | export default Github
21 |
--------------------------------------------------------------------------------
/components/ui/Skeleton/Skeleton.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from 'react'
2 | import cn from 'classnames'
3 | import px from '@lib/to-pixels'
4 | import s from './Skeleton.module.css'
5 |
6 | interface Props {
7 | width?: string | number
8 | height?: string | number
9 | boxHeight?: string | number
10 | style?: CSSProperties
11 | show?: boolean
12 | block?: boolean
13 | className?: string
14 | }
15 |
16 | const Skeleton: React.FC
19 |
34 | 20 | {headline} 21 |
22 |
23 |
33 | 24 | {description} 25 |
26 | 27 | 28 | {ctaText} 29 |
38 |
51 | ) : null}
52 |
39 |
50 |
40 |
47 |
48 | {children}
49 |
36 |
50 | ) : null}
51 |
37 |
41 |
42 |
48 |
49 |
43 |
47 |
44 | {children}
45 |
46 |
21 |
24 | {
30 | e.preventDefault()
31 |
32 | if (e.key === 'Enter') {
33 | const q = e.currentTarget.value
34 |
35 | router.push(
36 | {
37 | pathname: `/search`,
38 | query: q ? { q } : {},
39 | },
40 | undefined,
41 | { shallow: true }
42 | )
43 | }
44 | }}
45 | />
46 |
56 | )
57 | }
58 |
59 | export default Searchbar
60 |
--------------------------------------------------------------------------------
/components/ui/Button/Button.tsx:
--------------------------------------------------------------------------------
1 | import cn from 'classnames'
2 | import React, {
3 | forwardRef,
4 | ButtonHTMLAttributes,
5 | JSXElementConstructor,
6 | useRef,
7 | } from 'react'
8 | import mergeRefs from 'react-merge-refs'
9 | import s from './Button.module.css'
10 | import { LoadingDots } from '@components/ui'
11 |
12 | export interface ButtonProps extends ButtonHTMLAttributes
47 |
54 |
55 |
25 | {children}
27 |
28 |
29 |
35 |
37 |
38 | onAcceptCookies()}>
43 | Accept cookies
44 |
45 | }
46 | />
47 |
48 |
61 |
72 |
73 | )
74 | }
75 |
76 | export default CollectionPreview
77 |
--------------------------------------------------------------------------------
/pages/collection/[handle].tsx:
--------------------------------------------------------------------------------
1 | import type {
2 | GetStaticPathsContext,
3 | GetStaticPropsContext,
4 | InferGetStaticPropsType,
5 | } from 'next'
6 | import { useRouter } from 'next/router'
7 | import { Layout } from '@components/common'
8 | import { BuilderComponent, Builder, builder } from '@builder.io/react'
9 | import { resolveBuilderContent } from '@lib/resolve-builder-content'
10 | import builderConfig from '@config/builder'
11 | import {
12 | getCollection,
13 | getAllCollectionPaths,
14 | } from '@lib/shopify/storefront-data-hooks/src/api/operations-builder'
15 | import DefaultErrorPage from 'next/error'
16 | import Head from 'next/head'
17 |
18 | builder.init(builderConfig.apiKey!)
19 | Builder.isStatic = true
20 | const builderModel = 'collection-page'
21 |
22 | export async function getStaticProps({
23 | params,
24 | locale,
25 | }: GetStaticPropsContext<{ handle: string }>) {
26 | const collection = await getCollection(builderConfig, {
27 | handle: params?.handle,
28 | })
29 |
30 | const page = await resolveBuilderContent(builderModel, {
31 | collectionHandle: params?.handle,
32 | locale,
33 | })
34 |
35 | return {
36 | props: {
37 | page,
38 | collection,
39 | },
40 | // 4 hours in production, 1s in development
41 | // todo: 14400
42 | revalidate: 1,
43 | }
44 | }
45 |
46 | export async function getStaticPaths({ locales }: GetStaticPathsContext) {
47 | const paths = await getAllCollectionPaths(builderConfig)
48 | return {
49 | paths: paths.map((path) => `/collection/${path}`),
50 | fallback: 'blocking',
51 | }
52 | }
53 |
54 | export default function Handle({
55 | collection,
56 | page,
57 | }: InferGetStaticPropsType
62 |
67 |
68 | {title}
63 |
64 |
66 |
69 |
71 | Loading...
// TODO (BC) Add Skeleton Views 75 | ) : ( 76 |
22 |
27 |
32 |
74 | )
75 | }
76 |
77 | export default ProductSlider
78 |
--------------------------------------------------------------------------------
/components/icons/Vercel.tsx:
--------------------------------------------------------------------------------
1 | const Vercel = ({ ...props }) => {
2 | return (
3 |
37 | )
38 | }
39 |
40 | export default Vercel
41 |
--------------------------------------------------------------------------------
/pages/product/[handle].tsx:
--------------------------------------------------------------------------------
1 | import type {
2 | GetStaticPathsContext,
3 | GetStaticPropsContext,
4 | InferGetStaticPropsType,
5 | } from 'next'
6 | import { useRouter } from 'next/router'
7 | import { Layout } from '@components/common'
8 | import { BuilderComponent, Builder, builder } from '@builder.io/react'
9 | import { resolveBuilderContent } from '@lib/resolve-builder-content'
10 | import '../../sections/ProductView/ProductView.builder'
11 | import builderConfig from '@config/builder'
12 | import {
13 | getAllProductPaths,
14 | getProduct,
15 | } from '@lib/shopify/storefront-data-hooks/src/api/operations-builder'
16 | import DefaultErrorPage from 'next/error'
17 | import Head from 'next/head'
18 |
19 | builder.init(builderConfig.apiKey!)
20 | Builder.isStatic = true
21 |
22 | const builderModel = 'product-page'
23 |
24 | export async function getStaticProps({
25 | params,
26 | locale,
27 | }: GetStaticPropsContext<{ handle: string }>) {
28 | const product = await getProduct(builderConfig, {
29 | handle: params?.handle,
30 | })
31 |
32 | const page = await resolveBuilderContent(builderModel, {
33 | productHandle: params?.handle,
34 | locale,
35 | })
36 |
37 | return {
38 | props: {
39 | page,
40 | product,
41 | },
42 | revalidate: 120,
43 | }
44 | }
45 |
46 | export async function getStaticPaths({ locales }: GetStaticPathsContext) {
47 | const paths = await getAllProductPaths(builderConfig)
48 | return {
49 | paths: paths.map((path) => `/product/${path}`),
50 | fallback: 'blocking',
51 | }
52 | }
53 |
54 | export default function Handle({
55 | product,
56 | page,
57 | }: InferGetStaticPropsType
37 | {Children.map(children, (child) => {
38 | // Add the keen-slider__slide className to children
39 | if (isValidElement(child)) {
40 | return {
41 | ...child,
42 | props: {
43 | ...child.props,
44 | className: `${
45 | child.props.className ? `${child.props.className} ` : ''
46 | }keen-slider__slide`,
47 | },
48 | }
49 | }
50 | return child
51 | })}
52 |
53 | {slider && (
54 |
55 | {[...Array(slider.details().size).keys()].map((idx) => {
56 | return (
57 |
69 | )
70 | })}
71 |
72 | )}
73 | Loading...
// TODO (BC) Add Skeleton Views 75 | ) : ( 76 |
45 |
62 | ) : (
63 | <>
64 |
65 |
46 |
47 | {p.title}
48 |
49 |
50 |
66 |
73 |
67 |
72 | 68 | {p.title} 69 |
70 | {price} 71 |
74 |
87 |
88 | )}
89 |
90 |
91 | )
92 | }
93 |
94 | export default ProductCard
95 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nextjs-commerce",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "dev": "next dev",
6 | "build": "next build",
7 | "start": "next start",
8 | "analyze": "BUNDLE_ANALYZE=both yarn build",
9 | "find:unused": "next-unused",
10 | "prettier": "prettier"
11 | },
12 | "prettier": {
13 | "semi": false,
14 | "singleQuote": true
15 | },
16 | "next-unused": {
17 | "alias": {
18 | "@lib/*": [
19 | "lib/*"
20 | ],
21 | "@assets/*": [
22 | "assets/*"
23 | ],
24 | "@config/*": [
25 | "config/*"
26 | ],
27 | "@components/*": [
28 | "components/*"
29 | ],
30 | "@utils/*": [
31 | "utils/*"
32 | ]
33 | },
34 | "debug": true,
35 | "include": [
36 | "components",
37 | "lib",
38 | "pages",
39 | "sections"
40 | ],
41 | "exclude": [],
42 | "entrypoints": [
43 | "pages"
44 | ]
45 | },
46 | "dependencies": {
47 | "@builder.io/react": "^1.1.34-10",
48 | "@builder.io/utils": "^1.0.3",
49 | "@reach/portal": "^0.11.2",
50 | "@tailwindcss/ui": "^0.6.2",
51 | "@testing-library/react-hooks": "^3.7.0",
52 | "@types/body-scroll-lock": "^2.6.1",
53 | "@types/lodash.throttle": "^4.1.6",
54 | "@types/qs": "^6.9.5",
55 | "@types/react-sticky": "^6.0.3",
56 | "@types/shopify-buy": "^2.10.3",
57 | "@types/traverse": "^0.6.32",
58 | "@vercel/fetch": "^6.1.0",
59 | "atob": "^2.1.2",
60 | "body-scroll-lock": "^3.1.5",
61 | "bowser": "^2.11.0",
62 | "classnames": "^2.2.6",
63 | "css-color-names": "^1.0.1",
64 | "email-validator": "^2.0.4",
65 | "jest": "^26.6.3",
66 | "js-cookie": "^2.2.1",
67 | "keen-slider": "^5.2.4",
68 | "lodash.random": "^3.2.0",
69 | "lodash.throttle": "^4.1.1",
70 | "next": "^10.0.5",
71 | "next-seo": "^4.11.0",
72 | "next-themes": "^0.0.4",
73 | "postcss-nesting": "^7.0.1",
74 | "qs": "^6.9.6",
75 | "react": "^16.14.0",
76 | "react-dom": "^16.14.0",
77 | "react-intersection-observer": "^8.30.1",
78 | "react-json-tree": "^0.13.0",
79 | "react-merge-refs": "^1.1.0",
80 | "react-sticky": "^6.0.3",
81 | "react-ticker": "^1.2.2",
82 | "shopify-buy": "^2.11.0",
83 | "tailwindcss": "^1.9",
84 | "traverse": "^0.6.6"
85 | },
86 | "devDependencies": {
87 | "@next/bundle-analyzer": "^10.0.1",
88 | "@types/atob": "^2.1.2",
89 | "@types/bunyan": "^1.8.6",
90 | "@types/bunyan-prettystream": "^0.1.31",
91 | "@types/classnames": "^2.2.10",
92 | "@types/js-cookie": "^2.2.6",
93 | "@types/lodash.random": "^3.2.6",
94 | "@types/node": "^14.11.2",
95 | "@types/react": "^16.9.49",
96 | "bunyan": "^1.8.14",
97 | "bunyan-prettystream": "^0.1.3",
98 | "next-unused": "^0.0.3",
99 | "postcss-flexbugs-fixes": "^4.2.1",
100 | "postcss-preset-env": "^6.7.0",
101 | "prettier": "^2.1.2",
102 | "typescript": "^4.0.3"
103 | },
104 | "resolutions": {
105 | "webpack": "^5.0.0-beta.30"
106 | },
107 | "license": "MIT"
108 | }
109 |
--------------------------------------------------------------------------------
/assets/base.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --primary: #ffffff;
3 | --primary-2: #f1f3f5;
4 | --secondary: #000000;
5 | --secondary-2: #111;
6 |
7 | --selection: var(--cyan);
8 |
9 | --text-base: #000000;
10 | --text-primary: #000000;
11 | --text-secondary: white;
12 |
13 | --hover: rgba(0, 0, 0, 0.075);
14 | --hover-1: rgba(0, 0, 0, 0.15);
15 | --hover-2: rgba(0, 0, 0, 0.25);
16 |
17 | --cyan: #22b8cf;
18 | --green: #37b679;
19 | --red: #da3c3c;
20 | --pink: #e64980;
21 | --purple: #f81ce5;
22 |
23 | --blue: #0070f3;
24 |
25 | --violet-light: #7048e8;
26 | --violet: #5f3dc4;
27 |
28 | --accents-0: #f8f9fa;
29 | --accents-1: #f1f3f5;
30 | --accents-2: #e9ecef;
31 | --accents-3: #dee2e6;
32 | --accents-4: #ced4da;
33 | --accents-5: #adb5bd;
34 | --accents-6: #868e96;
35 | --accents-7: #495057;
36 | --accents-8: #343a40;
37 | --accents-9: #212529;
38 | --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue',
39 | 'Helvetica', sans-serif;
40 | }
41 |
42 | [data-theme='dark'] {
43 | --primary: #000000;
44 | --primary-2: #111;
45 | --secondary: #ffffff;
46 | --secondary-2: #f1f3f5;
47 | --hover: rgba(255, 255, 255, 0.075);
48 | --hover-1: rgba(255, 255, 255, 0.15);
49 | --hover-2: rgba(255, 255, 255, 0.25);
50 | --selection: var(--purple);
51 |
52 | --text-base: white;
53 | --text-primary: white;
54 | --text-secondary: black;
55 |
56 | --accents-0: #212529;
57 | --accents-1: #343a40;
58 | --accents-2: #495057;
59 | --accents-3: #868e96;
60 | --accents-4: #adb5bd;
61 | --accents-5: #ced4da;
62 | --accents-6: #dee2e6;
63 | --accents-7: #e9ecef;
64 | --accents-8: #f1f3f5;
65 | --accents-9: #f8f9fa;
66 | }
67 |
68 | *,
69 | *:before,
70 | *:after {
71 | box-sizing: inherit;
72 | }
73 |
74 | html {
75 | height: 100%;
76 | box-sizing: border-box;
77 | touch-action: manipulation;
78 | font-feature-settings: 'case' 1, 'rlig' 1, 'calt' 0;
79 | text-rendering: optimizeLegibility;
80 | -webkit-font-smoothing: antialiased;
81 | -moz-osx-font-smoothing: grayscale;
82 | }
83 |
84 | html,
85 | body {
86 | font-family: var(--font-sans);
87 | text-rendering: optimizeLegibility;
88 | -webkit-font-smoothing: antialiased;
89 | -moz-osx-font-smoothing: grayscale;
90 | background-color: var(--primary);
91 | color: var(--text-primary);
92 | }
93 |
94 | body {
95 | position: relative;
96 | min-height: 100%;
97 | margin: 0;
98 | }
99 |
100 | a {
101 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
102 | }
103 |
104 | .animated {
105 | -webkit-animation-duration: 1s;
106 | animation-duration: 1s;
107 | -webkit-animation-duration: 1s;
108 | animation-duration: 1s;
109 | -webkit-animation-fill-mode: both;
110 | animation-fill-mode: both;
111 | }
112 |
113 | .fadeIn {
114 | -webkit-animation-name: fadeIn;
115 | animation-name: fadeIn;
116 | }
117 |
118 | @-webkit-keyframes fadeIn {
119 | from {
120 | opacity: 0;
121 | }
122 |
123 | to {
124 | opacity: 1;
125 | }
126 | }
127 |
128 | @keyframes fadeIn {
129 | from {
130 | opacity: 0;
131 | }
132 |
133 | to {
134 | opacity: 1;
135 | }
136 | }
137 |
--------------------------------------------------------------------------------
/components/common/I18nWidget/I18nWidget.tsx:
--------------------------------------------------------------------------------
1 | import cn from 'classnames'
2 | import Link from 'next/link'
3 | import { FC, useState } from 'react'
4 | import { useRouter } from 'next/router'
5 | import s from './I18nWidget.module.css'
6 | import { Cross, ChevronUp } from '@components/icons'
7 | import ClickOutside from '@lib/click-outside'
8 | interface LOCALE_DATA {
9 | name: string
10 | img: {
11 | filename: string
12 | alt: string
13 | }
14 | }
15 |
16 | const LOCALES_MAP: RecordLoading...
61 | } 62 | // This includes setting the noindex header because static files always return a status 200 but the rendered not found page page should obviously not be indexed 63 | if (!page && !Builder.isEditing && !Builder.isPreviewing) { 64 | return ( 65 | <> 66 | 67 | 68 | 69 | 70 |
79 | {title && (
80 |
107 | )
108 | }
109 |
110 | Path.Layout = Layout
111 |
--------------------------------------------------------------------------------
/components/common/Navbar/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useState, useEffect } from 'react'
2 | import Link from 'next/link'
3 | import s from './Navbar.module.css'
4 | import { Logo, Container } from '@components/ui'
5 | import { Searchbar, UserNav } from '@components/common'
6 | import cn from 'classnames'
7 | import throttle from 'lodash.throttle'
8 | import { getAllCollections } from '@lib/shopify/storefront-data-hooks/src/api/operations-builder'
9 | import builderConfig from '@config/builder'
10 | import { BuilderComponent, builder } from '@builder.io/react'
11 | import { useCart } from '@lib/shopify/storefront-data-hooks'
12 |
13 | const Navbar: FC = () => {
14 | const [hasScrolled, setHasScrolled] = useState(false)
15 | const [collections, setCollections] = useState([] as any[])
16 | const [announcement, setAnnouncement] = useState()
17 | const cart = useCart()
18 | useEffect(() => {
19 | async function fetchContent() {
20 | const items = cart?.lineItems || []
21 | const anouncementContent = await builder
22 | .get('announcement-bar', {
23 | userAttributes: {
24 | itemInCart: items.map((item: any) => item.variant.product.handle),
25 | } as any,
26 | })
27 | .toPromise()
28 | setAnnouncement(anouncementContent)
29 | }
30 | fetchContent()
31 | }, [cart?.lineItems])
32 |
33 | useEffect(() => {
34 | const handleScroll = throttle(() => {
35 | const offset = 0
36 | const { scrollTop } = document.documentElement
37 | const scrolled = scrollTop > offset
38 | setHasScrolled(scrolled)
39 | }, 200)
40 |
41 | document.addEventListener('scroll', handleScroll)
42 | return () => {
43 | document.removeEventListener('scroll', handleScroll)
44 | }
45 | }, [])
46 |
47 | useEffect(() => {
48 | const fetchCollections = async () => {
49 | const result = await getAllCollections(
50 | builderConfig,
51 | 3,
52 | 0,
53 | 'data.handle,data.title'
54 | )
55 | setCollections(result)
56 | }
57 | fetchCollections()
58 | }, [])
59 |
60 | return (
61 |
62 |
64 |
88 |
89 |
93 |
94 | )
95 | }
96 |
97 | export default Navbar
98 |
--------------------------------------------------------------------------------
/pages/search.tsx:
--------------------------------------------------------------------------------
1 | import cn from 'classnames'
2 | import type {
3 | GetServerSidePropsContext,
4 | InferGetServerSidePropsType,
5 | } from 'next'
6 | import { useState, useEffect } from 'react'
7 | import { useRouter } from 'next/router'
8 | import { Layout } from '@components/common'
9 | import { Container, Grid, LoadingDots, Skeleton } from '@components/ui'
10 | import builderConfig from '@config/builder'
11 | import rangeMap from '@lib/range-map'
12 | import { ProductCard } from '@components/product'
13 | import { searchProducts } from '@lib/shopify/storefront-data-hooks/src/api/operations-builder'
14 | import NoSSR from '@components/common/NoSSR/NoSSR'
15 |
16 | const castIfNumber = (num: any) => {
17 | const res = Number(num)
18 | if (!isNaN(res)) {
19 | return res
20 | }
21 | }
22 |
23 | export async function getServerSideProps({
24 | preview,
25 | locale,
26 | }: GetServerSidePropsContext) {
27 | // Maybe ssr search results?
28 | return {
29 | props: { products: [] as ShopifyBuy.Product[] },
30 | }
31 | }
32 |
33 | export default function Search({
34 | products: initialProducts,
35 | }: InferGetServerSidePropsType
90 |
92 |
69 |
70 | {products.length ? (
71 |
72 | {products.map((product: ShopifyBuy.Product) => (
73 |
83 | ) : loading ? (
84 | skeleton
85 | ) : (
86 | 0,
90 | })}
91 | >
92 | {q ? (
93 | <>
94 | There are no products that match "{q}"
95 |
96 | ) : (
97 | <>Search for something ...
98 | )}
99 |
100 | )}
101 |
102 |
103 |
52 |
59 | {display && (
60 |
103 | -
61 | {LINKS.map(({ name, href }) => (
62 |
- 63 | 78 | 79 | ))} 80 |
-
81 | {
84 | theme === 'dark' ? setTheme('light') : setTheme('dark')
85 | setDisplay(false)
86 | }}
87 | >
88 | 89 | Theme: {theme}{' '} 90 |91 |92 | {theme == 'dark' ? ( 93 |98 | 99 |
94 | ) : ( 95 | 96 | )} 97 |
100 |
82 |
92 |
93 | {/** TODO: Replace this. No `path` found at Cart */}
94 |
95 |
96 | {item.title}
97 |
98 |
99 |
100 |
120 |
101 |
104 |
115 |
118 |
119 |
121 | {price}
122 |
125 |
126 |
21 |
102 | )
103 | }
104 |
105 | Cart.Layout = Layout
106 |
--------------------------------------------------------------------------------
/components/ui/context.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useMemo } from 'react'
2 | import { ThemeProvider } from 'next-themes'
3 |
4 | export interface State {
5 | displaySidebar: boolean
6 | displayDropdown: boolean
7 | displayModal: boolean
8 | displayToast: boolean
9 | modalView: string
10 | toastText: string
11 | }
12 |
13 | const initialState = {
14 | displaySidebar: false,
15 | displayDropdown: false,
16 | displayModal: false,
17 | modalView: 'LOGIN_VIEW',
18 | displayToast: false,
19 | toastText: '',
20 | }
21 |
22 | type Action =
23 | | {
24 | type: 'OPEN_SIDEBAR'
25 | }
26 | | {
27 | type: 'CLOSE_SIDEBAR'
28 | }
29 | | {
30 | type: 'OPEN_TOAST'
31 | }
32 | | {
33 | type: 'CLOSE_TOAST'
34 | }
35 | | {
36 | type: 'SET_TOAST_TEXT'
37 | text: ToastText
38 | }
39 | | {
40 | type: 'OPEN_DROPDOWN'
41 | }
42 | | {
43 | type: 'CLOSE_DROPDOWN'
44 | }
45 | | {
46 | type: 'OPEN_MODAL'
47 | }
48 | | {
49 | type: 'CLOSE_MODAL'
50 | }
51 | | {
52 | type: 'SET_MODAL_VIEW'
53 | view: MODAL_VIEWS
54 | }
55 |
56 | type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
57 | type ToastText = string
58 |
59 | export const UIContext = React.createContext
22 | {isEmpty ? (
23 |
62 |
24 |
25 |
34 | ) : (
35 | 28 | Your cart is empty 29 |
30 |31 | Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. 32 |
33 |
36 | My Cart
37 | Review your Order
38 |
60 | )}
61 | -
39 | {items.map((item: any) => (
40 |
49 |
50 | Before you leave, take a look at these items. We picked them
51 | just for you
52 |
53 |
59 |
54 | {[1, 2, 3, 4, 5, 6].map((x) => (
55 |
56 | ))}
57 |
58 |
63 |
101 |
64 |
100 |
65 |
84 | -
66 |
- 67 | Subtotal 68 | {subTotal} 69 | 70 |
- 71 | Taxes 72 | Calculated at checkout 73 | 74 |
- 75 | Estimated Shipping 76 | FREE 77 | 78 |
80 | Total
81 | {total}
82 |
83 |
85 |
99 |
86 | {isEmpty ? (
87 |
90 | ) : checkoutUrl ? (
91 |
94 | ) : (
95 | <>
96 | )}
97 |
98 |
45 |
46 |
61 |
62 | {isEmpty ? (
63 |
126 | )
127 | }
128 |
129 | export default CartSidebarView
130 |
--------------------------------------------------------------------------------
/sections/ProductView/ProductView.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useState, useMemo, useEffect } from 'react'
2 | import cn from 'classnames'
3 | import Image from 'next/image'
4 | import { NextSeo } from 'next-seo'
5 |
6 | import s from './ProductView.module.css'
7 | import { useUI } from '@components/ui/context'
8 | import { Swatch, ProductSlider } from '@components/product'
9 | import { Button, Container, Text } from '@components/ui'
10 |
11 | import { useAddItemToCart } from '@lib/shopify/storefront-data-hooks'
12 | import {
13 | prepareVariantsWithOptions,
14 | getPrice,
15 | } from '@lib/shopify/storefront-data-hooks/src/utils/product'
16 |
17 | interface Props {
18 | className?: string
19 | children?: any
20 | product: ShopifyBuy.Product
21 | }
22 |
23 | const ProductView: FC
47 |
60 |
48 |
55 |
56 |
57 |
59 |
64 |
65 |
74 | ) : (
75 | <>
76 | 68 | Your cart is empty 69 |
70 |71 | Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. 72 |
73 |
77 |
91 |
92 | 78 | My Cart 79 |
80 |-
81 | {items.map((item: any) => (
82 |
93 |
123 |
124 | )}
125 |
94 |
113 | -
95 |
- 96 | Subtotal 97 | {subTotal} 98 | 99 |
- 100 | Taxes 101 | Calculated at checkout 102 | 103 |
- 104 | Estimated Shipping 105 | FREE 106 | 107 |
109 | Total
110 | {total}
111 |
112 |
88 |
173 |
89 |
114 |
115 |
90 |
95 |
96 | {product.title}
91 |
92 | {getPrice(variant.priceV2.amount, variant.priceV2.currencyCode)}
93 |
94 |
97 |
98 | {product.images.map((image, i) => (
99 |
112 |
113 |
100 |
110 | ))}
111 |
116 |
117 | {colors && colors?.length > 0 && (
118 |
159 |
172 |
119 |
135 | )}
136 | {sizes && sizes.length > 0 && (
137 | Color:
120 |
121 | {colors.map((option) => (
122 | {
129 | setColor(option)
130 | }}
131 | />
132 | ))}
133 |
134 |
138 |
153 | )}
154 |
155 | Size
139 |
140 | {sizes.map((option) => (
141 | {
147 | setSize(option)
148 | }}
149 | />
150 | ))}
151 |
152 |
156 |
158 |
160 |
170 |
171 |