diff --git a/.env.template b/.env.template index 9e42e2f31..b68daaffe 100644 --- a/.env.template +++ b/.env.template @@ -1,5 +1,5 @@ -# Available providers: bigcommerce, shopify -COMMERCE_PROVIDER=bigcommerce +# Available providers: bigcommerce, shopify, swell +COMMERCE_PROVIDER= BIGCOMMERCE_STOREFRONT_API_URL= BIGCOMMERCE_STOREFRONT_API_TOKEN= @@ -10,3 +10,6 @@ BIGCOMMERCE_CHANNEL_ID= NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN= NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN= + +NEXT_PUBLIC_SWELL_STORE_ID= +NEXT_PUBLIC_SWELL_PUBLIC_KEY= diff --git a/.gitignore b/.gitignore index 50d4285ba..22f1bf4f3 100644 --- a/.gitignore +++ b/.gitignore @@ -18,6 +18,7 @@ out/ # misc .DS_Store *.pem +.idea # debug npm-debug.log* diff --git a/README.md b/README.md index 941b1699b..8f29734e5 100644 --- a/README.md +++ b/README.md @@ -7,8 +7,10 @@ Start right now at [nextjs.org/commerce](https://nextjs.org/commerce) Demo live at: [demo.vercel.store](https://demo.vercel.store/) -- Shopify Demo: https://shopify.demo.vercel.store/ -- BigCommerce Demo: https://bigcommerce.demo.vercel.store/ +- Shopify Demo: https://shopify.vercel.store/ +- Swell Demo: https://swell.vercel.store/ +- BigCommerce Demo: https://bigcommerce.vercel.store/ +- Vendure Demo: https://vendure.vercel.store ## Features @@ -40,6 +42,23 @@ Next.js Commerce integrates out-of-the-box with BigCommerce and Shopify. We plan Open `.env.local` and change the value of `COMMERCE_PROVIDER` to the provider you would like to use, then set the environment variables for that provider (use `.env.template` as the base). +The setup for Shopify would look like this for example: + +``` +COMMERCE_PROVIDER=shopify +NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxx +NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=xxxxxxx.myshopify.com +``` + +And check that the `tsconfig.json` resolves to the chosen provider: + +``` + "@framework": ["framework/shopify"], + "@framework/*": ["framework/shopify/*"] +``` + +That's it! + ### Features Every provider defines the features that it supports under `framework/{provider}/commerce.config.json` diff --git a/commerce.config.json b/commerce.config.json index 08ea78814..a0e7afc5d 100644 --- a/commerce.config.json +++ b/commerce.config.json @@ -1,6 +1,5 @@ { "features": { - "wishlist": true, - "customCheckout": false + "wishlist": true } } diff --git a/components/common/FeatureBar/FeatureBar.module.css b/components/common/FeatureBar/FeatureBar.module.css index a3cb61cd2..419fd4b08 100644 --- a/components/common/FeatureBar/FeatureBar.module.css +++ b/components/common/FeatureBar/FeatureBar.module.css @@ -1,7 +1,9 @@ .root { @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30 transition-all duration-300 ease-out; +} - @screen md { +@screen md { + .root { @apply flex text-left; } } diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx index a15cfdc2d..4190815ec 100644 --- a/components/common/Footer/Footer.tsx +++ b/components/common/Footer/Footer.tsx @@ -44,20 +44,6 @@ const Footer: FC = ({ className, pages }) => { -
  • - - - Careers - - -
    • -
  • - - - Blog - - -
    • {sitePages.map((page) => (
  • diff --git a/components/common/I18nWidget/I18nWidget.module.css b/components/common/I18nWidget/I18nWidget.module.css index b216f5706..f100fd475 100644 --- a/components/common/I18nWidget/I18nWidget.module.css +++ b/components/common/I18nWidget/I18nWidget.module.css @@ -16,14 +16,16 @@ .dropdownMenu { @apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full; +} - @screen lg { +@screen lg { + .dropdownMenu { @apply absolute border border-accents-1 shadow-lg w-56 h-auto; } } -.closeButton { - @screen md { +@screen md { + .closeButton { @apply hidden; } } diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx index 37f5933e7..c5de5739a 100644 --- a/components/common/Layout/Layout.tsx +++ b/components/common/Layout/Layout.tsx @@ -1,17 +1,17 @@ -import cn from 'classnames' -import dynamic from 'next/dynamic' -import s from './Layout.module.css' -import { useRouter } from 'next/router' import React, { FC } from 'react' +import { useRouter } from 'next/router' +import dynamic from 'next/dynamic' +import cn from 'classnames' +import type { Page } from '@commerce/types/page' +import type { Category } from '@commerce/types/site' +import { CommerceProvider } from '@framework' +import { useAcceptCookies } from '@lib/hooks/useAcceptCookies' import { useUI } from '@components/ui/context' import { Navbar, Footer } from '@components/common' -import { useAcceptCookies } from '@lib/hooks/useAcceptCookies' import { Sidebar, Button, Modal, LoadingDots } from '@components/ui' import CartSidebarView from '@components/cart/CartSidebarView' - import LoginView from '@components/auth/LoginView' -import { CommerceProvider } from '@framework' -import type { Page } from '@commerce/types/page' +import s from './Layout.module.css' const Loading = () => (
    @@ -41,13 +41,13 @@ const FeatureBar = dynamic( interface Props { pageProps: { pages?: Page[] - commerceFeatures: Record + categories: Category[] } } const Layout: FC = ({ children, - pageProps: { commerceFeatures, ...pageProps }, + pageProps: { categories = [], ...pageProps }, }) => { const { displaySidebar, @@ -58,10 +58,16 @@ const Layout: FC = ({ } = useUI() const { acceptedCookies, onAcceptCookies } = useAcceptCookies() const { locale = 'en-US' } = useRouter() + + const navBarlinks = categories.slice(0, 2).map((c) => ({ + label: c.name, + href: `/search/${c.slug}`, + })) + return (
    - +
    {children}