diff --git a/.env.example b/.env.example deleted file mode 100644 index 9ff0463db..000000000 --- a/.env.example +++ /dev/null @@ -1,7 +0,0 @@ -COMPANY_NAME="Vercel Inc." -TWITTER_CREATOR="@vercel" -TWITTER_SITE="https://nextjs.org/commerce" -SITE_NAME="Next.js Commerce" -SHOPIFY_REVALIDATION_SECRET="" -SHOPIFY_STOREFRONT_ACCESS_TOKEN="" -SHOPIFY_STORE_DOMAIN="[your-shopify-store-subdomain].myshopify.com" diff --git a/.vscode/settings.json b/.vscode/settings.json index 3fbb4ab25..8345c107c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,8 +2,8 @@ "typescript.tsdk": "node_modules/typescript/lib", "typescript.enablePromptUseWorkspaceTsdk": true, "editor.codeActionsOnSave": { - "source.fixAll": true, - "source.organizeImports": true, - "source.sortMembers": true + "source.fixAll": "explicit", + "source.organizeImports": "explicit", + "source.sortMembers": "explicit" } } diff --git a/README.md b/README.md index 981685d2b..3ea36191a 100644 --- a/README.md +++ b/README.md @@ -26,15 +26,6 @@ Vercel will only be actively maintaining a Shopify version [as outlined in our v Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with their own implementation while leaving the rest of the template mostly unchanged. - Shopify (this repository) -- [BigCommerce](https://github.com/bigcommerce/nextjs-commerce) ([Demo](https://next-commerce-v2.vercel.app/)) -- [Medusa](https://github.com/medusajs/vercel-commerce) ([Demo](https://medusa-nextjs-commerce.vercel.app/)) -- [Saleor](https://github.com/saleor/nextjs-commerce) ([Demo](https://saleor-commerce.vercel.app/)) -- [Shopware](https://github.com/shopwareLabs/vercel-commerce) ([Demo](https://shopware-vercel-commerce-react.vercel.app/)) -- [Swell](https://github.com/swellstores/verswell-commerce) ([Demo](https://verswell-commerce.vercel.app/)) -- [Umbraco](https://github.com/umbraco/Umbraco.VercelCommerce.Demo) ([Demo](https://vercel-commerce-demo.umbraco.com/)) -- [Wix](https://github.com/wix/nextjs-commerce) ([Demo](https://wix-nextjs-commerce.vercel.app/)) - -> Note: Providers, if you are looking to use similar products for your demo, you can [download these assets](https://drive.google.com/file/d/1q_bKerjrwZgHwCw0ovfUMW6He9VtepO_/view?usp=sharing). ## Integrations @@ -61,16 +52,6 @@ pnpm dev Your app should now be running on [localhost:3000](http://localhost:3000/). -
- Expand if you work at Vercel and want to run locally and / or contribute - -1. Run `vc link`. -1. Select the `Vercel Solutions` scope. -1. Connect to the existing `commerce-shopify` project. -1. Run `vc env pull` to get environment variables. -1. Run `pnpm dev` to ensure everything is working correctly. -
- ## Vercel, Next.js Commerce, and Shopify Integration Guide You can use this comprehensive [integration guide](http://vercel.com/docs/integrations/shopify) with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel. diff --git a/app/favicon.ico b/app/favicon.ico index dc7d8431e..b5c701120 100644 Binary files a/app/favicon.ico and b/app/favicon.ico differ diff --git a/app/page.tsx b/app/page.tsx index aefd19396..f6739d634 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -6,7 +6,7 @@ import { Suspense } from 'react'; export const runtime = 'edge'; export const metadata = { - description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.', + description: 'School Supplies Shopping', openGraph: { type: 'website' } diff --git a/app/product/layout.tsx b/app/product/layout.tsx new file mode 100644 index 000000000..aacaaa70d --- /dev/null +++ b/app/product/layout.tsx @@ -0,0 +1,12 @@ +export const metadata = { + title: 'Next.js', + description: 'Generated by Next.js' +}; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} diff --git a/components/cart/open-cart.tsx b/components/cart/open-cart.tsx index fa8226ab5..62c701a4d 100644 --- a/components/cart/open-cart.tsx +++ b/components/cart/open-cart.tsx @@ -9,9 +9,9 @@ export default function OpenCart({ quantity?: number; }) { return ( -
+
{quantity ? ( diff --git a/components/icons/logo.svg b/components/icons/logo.svg new file mode 100644 index 000000000..3b117f4ff --- /dev/null +++ b/components/icons/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx index 0058d5ec8..ff7c8da58 100644 --- a/components/layout/navbar/index.tsx +++ b/components/layout/navbar/index.tsx @@ -6,49 +6,53 @@ import { Menu } from 'lib/shopify/types'; import Link from 'next/link'; import { Suspense } from 'react'; import MobileMenu from './mobile-menu'; -import Search from './search'; const { SITE_NAME } = process.env; export default async function Navbar() { const menu = await getMenu('next-js-frontend-header-menu'); return ( - + ); } diff --git a/components/logo-square.tsx b/components/logo-square.tsx index eccf5cba7..19453db14 100644 --- a/components/logo-square.tsx +++ b/components/logo-square.tsx @@ -1,22 +1,15 @@ -import clsx from 'clsx'; -import LogoIcon from './icons/logo'; +import Image from 'next/image'; +import SKLogo from './icons/logo.svg'; export default function LogoSquare({ size }: { size?: 'sm' | undefined }) { return ( -
- + Logo
); diff --git a/lib/constants.ts b/lib/constants.ts index 56bc6cd12..95bc95360 100644 --- a/lib/constants.ts +++ b/lib/constants.ts @@ -28,4 +28,4 @@ export const TAGS = { export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden'; export const DEFAULT_OPTION = 'Default Title'; -export const SHOPIFY_GRAPHQL_API_ENDPOINT = '/api/2023-01/graphql.json'; +export const SHOPIFY_GRAPHQL_API_ENDPOINT = '/api/2024-01/graphql.json'; diff --git a/package.json b/package.json index 20453ceaf..42ca65187 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "@heroicons/react": "^2.0.18", "clsx": "^2.0.0", "geist": "^1.0.0", - "next": "14.0.0", + "next": "14.0.1", "react": "18.2.0", "react-dom": "18.2.0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 98d0b7921..cac308aff 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,8 +18,8 @@ dependencies: specifier: ^1.0.0 version: 1.0.0 next: - specifier: 14.0.0 - version: 14.0.0(react-dom@18.2.0)(react@18.2.0) + specifier: 14.0.1 + version: 14.0.1(react-dom@18.2.0)(react@18.2.0) react: specifier: 18.2.0 version: 18.2.0 @@ -228,8 +228,8 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 dev: true - /@next/env@14.0.0: - resolution: {integrity: sha512-cIKhxkfVELB6hFjYsbtEeTus2mwrTC+JissfZYM0n+8Fv+g8ucUfOlm3VEDtwtwydZ0Nuauv3bl0qF82nnCAqA==} + /@next/env@14.0.1: + resolution: {integrity: sha512-Ms8ZswqY65/YfcjrlcIwMPD7Rg/dVjdLapMcSHG26W6O67EJDF435ShW4H4LXi1xKO1oRc97tLXUpx8jpLe86A==} dev: false /@next/eslint-plugin-next@14.0.0: @@ -242,8 +242,8 @@ packages: resolution: {integrity: sha512-urmUq05uCVJsBqAAJEV+xK5OTTodrSxdiG+351SOSjlWctywdBM6qX+K9pIe3K48RxjfnxlBbXjGyOJAji+pfw==} dev: false - /@next/swc-darwin-arm64@14.0.0: - resolution: {integrity: sha512-HQKi159jCz4SRsPesVCiNN6tPSAFUkOuSkpJsqYTIlbHLKr1mD6be/J0TvWV6fwJekj81bZV9V/Tgx3C2HO9lA==} + /@next/swc-darwin-arm64@14.0.1: + resolution: {integrity: sha512-JyxnGCS4qT67hdOKQ0CkgFTp+PXub5W1wsGvIq98TNbF3YEIN7iDekYhYsZzc8Ov0pWEsghQt+tANdidITCLaw==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -251,8 +251,8 @@ packages: dev: false optional: true - /@next/swc-darwin-x64@14.0.0: - resolution: {integrity: sha512-4YyQLMSaCgX/kgC1jjF3s3xSoBnwHuDhnF6WA1DWNEYRsbOOPWjcYhv8TKhRe2ApdOam+VfQSffC4ZD+X4u1Cg==} + /@next/swc-darwin-x64@14.0.1: + resolution: {integrity: sha512-625Z7bb5AyIzswF9hvfZWa+HTwFZw+Jn3lOBNZB87lUS0iuCYDHqk3ujuHCkiyPtSC0xFBtYDLcrZ11mF/ap3w==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -260,8 +260,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-gnu@14.0.0: - resolution: {integrity: sha512-io7fMkJ28Glj7SH8yvnlD6naIhRDnDxeE55CmpQkj3+uaA2Hko6WGY2pT5SzpQLTnGGnviK85cy8EJ2qsETj/g==} + /@next/swc-linux-arm64-gnu@14.0.1: + resolution: {integrity: sha512-iVpn3KG3DprFXzVHM09kvb//4CNNXBQ9NB/pTm8LO+vnnnaObnzFdS5KM+w1okwa32xH0g8EvZIhoB3fI3mS1g==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -269,8 +269,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-musl@14.0.0: - resolution: {integrity: sha512-nC2h0l1Jt8LEzyQeSs/BKpXAMe0mnHIMykYALWaeddTqCv5UEN8nGO3BG8JAqW/Y8iutqJsaMe2A9itS0d/r8w==} + /@next/swc-linux-arm64-musl@14.0.1: + resolution: {integrity: sha512-mVsGyMxTLWZXyD5sen6kGOTYVOO67lZjLApIj/JsTEEohDDt1im2nkspzfV5MvhfS7diDw6Rp/xvAQaWZTv1Ww==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -278,8 +278,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-gnu@14.0.0: - resolution: {integrity: sha512-Wf+WjXibJQ7hHXOdNOmSMW5bxeJHVf46Pwb3eLSD2L76NrytQlif9NH7JpHuFlYKCQGfKfgSYYre5rIfmnSwQw==} + /@next/swc-linux-x64-gnu@14.0.1: + resolution: {integrity: sha512-wMqf90uDWN001NqCM/auRl3+qVVeKfjJdT9XW+RMIOf+rhUzadmYJu++tp2y+hUbb6GTRhT+VjQzcgg/QTD9NQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -287,8 +287,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-musl@14.0.0: - resolution: {integrity: sha512-WTZb2G7B+CTsdigcJVkRxfcAIQj7Lf0ipPNRJ3vlSadU8f0CFGv/ST+sJwF5eSwIe6dxKoX0DG6OljDBaad+rg==} + /@next/swc-linux-x64-musl@14.0.1: + resolution: {integrity: sha512-ol1X1e24w4j4QwdeNjfX0f+Nza25n+ymY0T2frTyalVczUmzkVD7QGgPTZMHfR1aLrO69hBs0G3QBYaj22J5GQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -296,8 +296,8 @@ packages: dev: false optional: true - /@next/swc-win32-arm64-msvc@14.0.0: - resolution: {integrity: sha512-7R8/x6oQODmNpnWVW00rlWX90sIlwluJwcvMT6GXNIBOvEf01t3fBg0AGURNKdTJg2xNuP7TyLchCL7Lh2DTiw==} + /@next/swc-win32-arm64-msvc@14.0.1: + resolution: {integrity: sha512-WEmTEeWs6yRUEnUlahTgvZteh5RJc4sEjCQIodJlZZ5/VJwVP8p2L7l6VhzQhT4h7KvLx/Ed4UViBdne6zpIsw==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -305,8 +305,8 @@ packages: dev: false optional: true - /@next/swc-win32-ia32-msvc@14.0.0: - resolution: {integrity: sha512-RLK1nELvhCnxaWPF07jGU4x3tjbyx2319q43loZELqF0+iJtKutZ+Lk8SVmf/KiJkYBc7Cragadz7hb3uQvz4g==} + /@next/swc-win32-ia32-msvc@14.0.1: + resolution: {integrity: sha512-oFpHphN4ygAgZUKjzga7SoH2VGbEJXZa/KL8bHCAwCjDWle6R1SpiGOdUdA8EJ9YsG1TYWpzY6FTbUA+iAJeww==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -314,8 +314,8 @@ packages: dev: false optional: true - /@next/swc-win32-x64-msvc@14.0.0: - resolution: {integrity: sha512-g6hLf1SUko+hnnaywQQZzzb3BRecQsoKkF3o/C+F+dOA4w/noVAJngUVkfwF0+2/8FzNznM7ofM6TGZO9svn7w==} + /@next/swc-win32-x64-msvc@14.0.1: + resolution: {integrity: sha512-FFp3nOJ/5qSpeWT0BZQ+YE1pSMk4IMpkME/1DwKBwhg4mJLB9L+6EXuJi4JEwaJdl5iN+UUlmUD3IsR1kx5fAg==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -752,6 +752,11 @@ packages: /caniuse-lite@1.0.30001554: resolution: {integrity: sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==} + dev: true + + /caniuse-lite@1.0.30001587: + resolution: {integrity: sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==} + dev: false /chalk@2.4.2: resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} @@ -2204,8 +2209,8 @@ packages: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} dev: true - /next@14.0.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-J0jHKBJpB9zd4+c153sair0sz44mbaCHxggs8ryVXSFBuBqJ8XdE9/ozoV85xGh2VnSjahwntBZZgsihL9QznA==} + /next@14.0.1(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-s4YaLpE4b0gmb3ggtmpmV+wt+lPRuGtANzojMQ2+gmBpgX9w5fTbjsy6dXByBuENsdCX5pukZH/GxdFgO62+pA==} engines: {node: '>=18.17.0'} hasBin: true peerDependencies: @@ -2219,25 +2224,25 @@ packages: sass: optional: true dependencies: - '@next/env': 14.0.0 + '@next/env': 14.0.1 '@swc/helpers': 0.5.2 busboy: 1.6.0 - caniuse-lite: 1.0.30001554 + caniuse-lite: 1.0.30001587 postcss: 8.4.31 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) styled-jsx: 5.1.1(react@18.2.0) watchpack: 2.4.0 optionalDependencies: - '@next/swc-darwin-arm64': 14.0.0 - '@next/swc-darwin-x64': 14.0.0 - '@next/swc-linux-arm64-gnu': 14.0.0 - '@next/swc-linux-arm64-musl': 14.0.0 - '@next/swc-linux-x64-gnu': 14.0.0 - '@next/swc-linux-x64-musl': 14.0.0 - '@next/swc-win32-arm64-msvc': 14.0.0 - '@next/swc-win32-ia32-msvc': 14.0.0 - '@next/swc-win32-x64-msvc': 14.0.0 + '@next/swc-darwin-arm64': 14.0.1 + '@next/swc-darwin-x64': 14.0.1 + '@next/swc-linux-arm64-gnu': 14.0.1 + '@next/swc-linux-arm64-musl': 14.0.1 + '@next/swc-linux-x64-gnu': 14.0.1 + '@next/swc-linux-x64-musl': 14.0.1 + '@next/swc-win32-arm64-msvc': 14.0.1 + '@next/swc-win32-ia32-msvc': 14.0.1 + '@next/swc-win32-x64-msvc': 14.0.1 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros diff --git a/tailwind.config.js b/tailwind.config.js index eaf8db155..8c4588432 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,11 +3,33 @@ const plugin = require('tailwindcss/plugin'); /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], + darkMode: false, theme: { extend: { - fontFamily: { - sans: ['var(--font-geist-sans)'] + colors: { + body: '#1B1B1B', + 'futura-color': '#073B4C', + 'custom-blue': '#0B80A7' }, + fontFamily: { + 'open-sans': ['Open Sans', 'sans-serif'], // add this line if not already present + futura: ['Futura', 'sans-serif'] + }, + fontSize: { + base: '1.5rem', // Tailwind's default for 'base' is 1rem, so you can name this size as you prefer + '2rem': '2rem' + }, + fontWeight: { + normal: '400', // Tailwind's default 'normal' is '400' + extrabold: '800' + }, + lineHeight: { + normal: '1.5' // 1.5 is the default value in Tailwind CSS for 'normal', you can adjust if necessary + }, + letterSpacing: { + custom: '0.04rem' + }, + keyframes: { fadeIn: { from: { opacity: 0 },