forked from crowetic/commerce
Merge branch 'master' of https://github.com/okbel/e-comm-example
This commit is contained in:
commit
35ac41e04d
2
.env
Normal file
2
.env
Normal file
@ -0,0 +1,2 @@
|
||||
BIGCOMMERCE_STOREFRONT_API_URL=https://store-qfzerv205w.mybigcommerce.com/graphql
|
||||
BIGCOMMERCE_STOREFRONT_API_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJlYXQiOjIxMzM0NDM2NjEsInN1Yl90eXBlIjoyLCJ0b2tlbl90eXBlIjoxLCJjb3JzIjpbImh0dHBzOi8vd3d3LnRlc3QuY29tIl0sImNpZCI6MSwiaWF0IjoxNjAwODQyOTk0LCJzdWIiOiJja3I2ZXZ6bjkyNzhjMHB3NWlhdmIzY3A0bDFvaXAxIiwic2lkIjoxMDAxNDEyMjAyLCJpc3MiOiJCQyJ9.RvBvNZ8SPC5MFckploPW1VvD-XGy6pGHENLIxCinguX9P2eNrhrDp9t821Ng2rw7O0eLMKB7YuDF4E15MK13tA
|
@ -1,7 +0,0 @@
|
||||
BIGCOMMERCE_STOREFRONT_API_URL=https://your-site.mybigcommerce.com/graphql
|
||||
BIGCOMMERCE_STOREFRONT_API_TOKEN=
|
||||
BIGCOMMERCE_STORE_API_URL=https://api.bigcommerce.com/stores/xxxxxxxxxxx
|
||||
BIGCOMMERCE_STORE_API_CLIENT_ID=
|
||||
BIGCOMMERCE_STORE_API_SECRET=
|
||||
BIGCOMMERCE_STORE_API_TOKEN=
|
||||
BIGCOMMERCE_TOKEN_SECRET="this-is-a-secret-value-with-at-least-32-characters"
|
@ -1,33 +1,34 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
// import s from "./CartSidebarView.module.css";
|
||||
import { UserNav } from "@components/core";
|
||||
import { Button } from "@components/ui";
|
||||
import { Trash, Cross } from "@components/icon";
|
||||
import { useUI } from "@components/ui/context";
|
||||
|
||||
const CartSidebarView: FunctionComponent = () => {
|
||||
const { dispatch } = useUI();
|
||||
const { closeSidebar } = useUI();
|
||||
return (
|
||||
<>
|
||||
<header className="px-4 py-6 sm:px-6 border-b border-gray-200">
|
||||
<div className="flex items-start justify-between space-x-3">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-lg leading-7 font-medium text-gray-900 uppercase">
|
||||
My Cart
|
||||
</h2>
|
||||
</div>
|
||||
<div className="h-7 flex items-center">
|
||||
<button
|
||||
onClick={() => dispatch("CLOSE_SIDEBAR")}
|
||||
onClick={closeSidebar}
|
||||
aria-label="Close panel"
|
||||
className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
|
||||
>
|
||||
<Cross className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<UserNav />
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="pt-6 text-lg leading-7 font-medium text-gray-900 uppercase">
|
||||
My Cart
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<div className="px-4 sm:px-6 py-4">
|
||||
<div className="px-4 sm:px-6 py-4 flex-1">
|
||||
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
|
||||
<li className="flex flex-row space-x-6">
|
||||
<div className="h-12 w-12 bg-violet"></div>
|
||||
|
@ -15,19 +15,21 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
|
||||
const rootClassName = cn(s.root, className);
|
||||
const { displaySidebar } = useUI();
|
||||
return (
|
||||
<Container className={rootClassName}>
|
||||
<div className={rootClassName}>
|
||||
<Featurebar
|
||||
title="Free Standard Shipping on orders over $99.99"
|
||||
description="Due to COVID-19, some orders may experience processing and delivery delays."
|
||||
/>
|
||||
<Navbar />
|
||||
<main className="h-screen">{children}</main>
|
||||
<Container>
|
||||
<Navbar />
|
||||
<main className="h-screen">{children}</main>
|
||||
</Container>
|
||||
{displaySidebar && (
|
||||
<Sidebar>
|
||||
<CartSidebarView />
|
||||
</Sidebar>
|
||||
)}
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -2,20 +2,14 @@ import cn from "classnames";
|
||||
import React, { FunctionComponent } from "react";
|
||||
import s from "./Navbar.module.css";
|
||||
import { Logo, Container } from "@components/ui";
|
||||
import { Avatar, Searchbar } from "@components/core";
|
||||
import { Heart, Bag } from "@components/icon";
|
||||
import { useUI } from "@components/ui/context";
|
||||
import { Searchbar } from "@components/core";
|
||||
import { UserNav } from "@components/core";
|
||||
interface Props {
|
||||
className?: string;
|
||||
children?: any;
|
||||
}
|
||||
|
||||
const Navbar: FunctionComponent<Props> = ({ className }) => {
|
||||
const rootClassName = cn(s.root, className);
|
||||
const { dispatch } = useUI();
|
||||
|
||||
const handleCartClick = () => dispatch("OPEN_SIDEBAR");
|
||||
|
||||
return (
|
||||
<Container className={rootClassName}>
|
||||
<Logo />
|
||||
@ -27,11 +21,7 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
|
||||
<a>Accesories</a>
|
||||
</nav>
|
||||
</div>
|
||||
<nav className="flex flex-row items-center">
|
||||
<Bag className="mr-6" onClick={handleCartClick} />
|
||||
<Heart className="mr-6" />
|
||||
<Avatar />
|
||||
</nav>
|
||||
<UserNav />
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
10
components/core/UserNav/UserNav.module.css
Normal file
10
components/core/UserNav/UserNav.module.css
Normal file
@ -0,0 +1,10 @@
|
||||
.root {
|
||||
}
|
||||
|
||||
.list {
|
||||
@apply flex flex-row items-center;
|
||||
}
|
||||
|
||||
.item {
|
||||
@apply mr-6 cursor-pointer;
|
||||
}
|
33
components/core/UserNav/UserNav.tsx
Normal file
33
components/core/UserNav/UserNav.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import cn from "classnames";
|
||||
import React, { FunctionComponent } from "react";
|
||||
import s from "./UserNav.module.css";
|
||||
import { Avatar } from "@components/core";
|
||||
import { Heart, Bag } from "@components/icon";
|
||||
import { useUI } from "@components/ui/context";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const UserNav: FunctionComponent<Props> = ({ className }) => {
|
||||
const rootClassName = cn(s.root, className);
|
||||
const { openSidebar } = useUI();
|
||||
|
||||
return (
|
||||
<nav className={rootClassName}>
|
||||
<ul className={s.list}>
|
||||
<li className={s.item}>
|
||||
<Bag onClick={openSidebar} />
|
||||
</li>
|
||||
<li className={s.item}>
|
||||
<Heart />
|
||||
</li>
|
||||
<li className={s.item}>
|
||||
<Avatar />
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserNav;
|
1
components/core/UserNav/index.ts
Normal file
1
components/core/UserNav/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default } from "./UserNav";
|
@ -4,3 +4,4 @@ export { default as Footer } from "./Footer";
|
||||
export { default as Layout } from "./Layout";
|
||||
export { default as Navbar } from "./Navbar";
|
||||
export { default as Searchbar } from "./Searchbar";
|
||||
export { default as UserNav } from "./UserNav";
|
||||
|
@ -11,12 +11,12 @@ const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
|
||||
const rootClassName = cn(s.root, className);
|
||||
return (
|
||||
<div className={rootClassName}>
|
||||
<div className="fixed inset-0 overflow-hidden">
|
||||
<div className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25">
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 ">
|
||||
<div className="w-screen max-w-2xl">
|
||||
<div className="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
|
||||
<div className="flex-1">{children}</div>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
@ -1,13 +1,42 @@
|
||||
import React, { Context, FunctionComponent } from "react";
|
||||
import React, { FunctionComponent } from "react";
|
||||
|
||||
export interface UIState {
|
||||
displaySidebar: boolean;
|
||||
openSidebar: () => {};
|
||||
closeSidebar: () => {};
|
||||
}
|
||||
|
||||
const initialState = {
|
||||
displaySidebar: false,
|
||||
dispatch: null,
|
||||
openSidebar: null,
|
||||
closeSidebar: null,
|
||||
};
|
||||
|
||||
export const UIContext = React.createContext(initialState);
|
||||
UIContext.displayName = "UIContext";
|
||||
|
||||
export const UIProvider: FunctionComponent = (props) => {
|
||||
const [state, dispatch] = React.useReducer(uiReducer, initialState);
|
||||
|
||||
const openSidebar = () => dispatch("OPEN_SIDEBAR");
|
||||
const closeSidebar = () => dispatch("CLOSE_SIDEBAR");
|
||||
|
||||
const value = {
|
||||
...state,
|
||||
openSidebar,
|
||||
closeSidebar,
|
||||
};
|
||||
|
||||
return <UIContext.Provider value={value} {...props} />;
|
||||
};
|
||||
|
||||
export const useUI = () => {
|
||||
const context = React.useContext(UIContext);
|
||||
if (context === undefined) {
|
||||
throw new Error(`useUI must be used within a UIProvider`);
|
||||
}
|
||||
return context;
|
||||
};
|
||||
export interface UIState {
|
||||
displaySidebar: boolean;
|
||||
dispatch: (string) => void;
|
||||
}
|
||||
|
||||
function uiReducer(state, action) {
|
||||
switch (action) {
|
||||
@ -25,23 +54,3 @@ function uiReducer(state, action) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const UIContext = React.createContext<UIState>(initialState);
|
||||
UIContext.displayName = "UIContext";
|
||||
|
||||
export const UIProvider: FunctionComponent = (props) => {
|
||||
const [state, dispatch] = React.useReducer(uiReducer, initialState);
|
||||
const value = {
|
||||
...state,
|
||||
dispatch,
|
||||
};
|
||||
return <UIContext.Provider value={value} {...props} />;
|
||||
};
|
||||
|
||||
export const useUI = () => {
|
||||
const context = React.useContext(UIContext);
|
||||
if (context === undefined) {
|
||||
throw new Error(`useUI must be used within a UIProvider`);
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
9
lib/commerce-api.ts
Normal file
9
lib/commerce-api.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import BigcommerceAPI from "./bigcommerce/api";
|
||||
|
||||
const API_URL = process.env.NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_URL!;
|
||||
const API_TOKEN = process.env.NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_TOKEN!;
|
||||
|
||||
export const commerce = new BigcommerceAPI({
|
||||
commerceUrl: API_URL,
|
||||
apiToken: API_TOKEN,
|
||||
});
|
Loading…
x
Reference in New Issue
Block a user