crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 14:42:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update to Next.js 13 (#870)

Browse Source
This commit is contained in:
Catalin Pinte 2022-12-21 17:51:55 +02:00 committed by GitHub
parent 6d783eae35
commit 4efa502666
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
60 changed files with 895 additions and 460 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/bigcommerce/package.json
View File

@ -58,7 +58,7 @@
"uuidv4": "^6.2.13"
},
"peerDependencies": {
"next": "^12",
"next": "^13",
"react": "^18",
"react-dom": "^18"
},
@ -73,7 +73,7 @@
"@types/node-fetch": "^2.6.2",
"@types/react": "^18.0.14",
"lint-staged": "^12.1.7",
"next": "^12.0.8",
"next": "^13.0.6",
"prettier": "^2.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

4
packages/bigcommerce/src/api/endpoints/checkout/get-checkout.ts
View File

@ -8,8 +8,8 @@ const getCheckout: CheckoutEndpoint['handlers']['getCheckout'] = async ({
config,
}) => {
const { cookies } = req
const cartId = cookies.get(config.cartCookie)
const customerToken = cookies.get(config.customerCookie)
const cartId = cookies.get(config.cartCookie)?.value
const customerToken = cookies.get(config.customerCookie)?.value
if (!cartId) {
return { redirectTo: '/cart' }

2
packages/bigcommerce/src/api/endpoints/customer/get-logged-in-customer.ts
View File

@ -27,7 +27,7 @@ export type Customer = NonNullable<GetLoggedInCustomerQuery['customer']>
const getLoggedInCustomer: CustomerEndpoint['handlers']['getLoggedInCustomer'] =
async ({ req, config }) => {
const token = req.cookies.get(config.customerCookie)
const token = req.cookies.get(config.customerCookie)?.value
if (token) {
const { data } = await config.fetch<GetLoggedInCustomerQuery>(

4
packages/commerce/package.json
View File

@ -55,7 +55,7 @@
"zod": "^3.19.1"
},
"peerDependencies": {
"next": "^12",
"next": "^13",
"react": "^18",
"react-dom": "^18"
},
@ -68,7 +68,7 @@
"@types/node-fetch": "2.6.2",
"@types/react": "^18.0.14",
"lint-staged": "^12.1.7",
"next": "^12.0.8",
"next": "^13.0.6",
"prettier": "^2.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

2
packages/commerce/src/api/endpoints/cart.ts
View File

@ -29,7 +29,7 @@ const cartEndpoint: GetAPISchema<
let output
const { cookies } = req
const cartId = cookies.get(config.cartCookie)
const cartId = cookies.get(config.cartCookie)?.value
// Return current cart info
if (req.method === 'GET') {

2
packages/commerce/src/api/endpoints/checkout.ts
View File

@ -22,7 +22,7 @@ const checkoutEndpoint: GetAPISchema<
})
const { cookies } = req
const cartId = cookies.get(config.cartCookie)!
const cartId = cookies.get(config.cartCookie)?.value
const input = await getInput(req)
// Get checkout

2
packages/commerce/src/api/endpoints/customer/address.ts
View File

@ -33,7 +33,7 @@ const customerShippingEndpoint: GetAPISchema<
const { cookies } = req
// Cart id might be usefull for anonymous shopping
const cartId = cookies.get(config.cartCookie)
const cartId = cookies.get(config.cartCookie)?.value
// Return customer addresses
if (req.method === 'GET') {

2
packages/commerce/src/api/endpoints/customer/card.ts
View File

@ -31,7 +31,7 @@ const customerCardEndpoint: GetAPISchema<
const { cookies } = req
// Cart id might be usefull for anonymous shopping
const cartId = cookies.get(config.cartCookie)
const cartId = cookies.get(config.cartCookie)?.value
// Create or add a card
if (req.method === 'GET') {

11
packages/commerce/src/api/endpoints/customer/index.ts
View File

@ -1,6 +1,6 @@
import type { CustomerSchema } from '../../../types/customer'
import type { GetAPISchema } from '../..'
import { z } from 'zod'
import { parse } from '../../utils'
import validateHandlers from '../../utils/validate-handlers'
@ -19,7 +19,14 @@ const customerEndpoint: GetAPISchema<
const body = null
const output = await handlers['getLoggedInCustomer']({ ...ctx, body })
return output ? parse(output, customerSchema) : { status: 204 }
return output
? parse(
output,
z.object({
customer: customerSchema,
})
)
: { status: 204 }
}
export default customerEndpoint

2
packages/commerce/src/api/endpoints/signup.ts
View File

@ -18,7 +18,7 @@ const signupEndpoint: GetAPISchema<
const input = await getInput(req)
const { cookies } = req
const cartId = cookies.get(config.cartCookie)
const cartId = cookies.get(config.cartCookie)?.value
const body = signupBodySchema.parse({ ...input, cartId })
return handlers['signup']({ ...ctx, body })

2
packages/commerce/src/api/endpoints/wishlist.ts
View File

@ -28,7 +28,7 @@ const wishlistEndpoint: GetAPISchema<
const { cookies } = req
const input = await getInput(req)
const customerToken = cookies.get(config.customerCookie)
const customerToken = cookies.get(config.customerCookie)?.value
const products = new URL(req.url).searchParams.get('products')
// Return current wishlist info

4
packages/commercejs/package.json
View File

@ -55,7 +55,7 @@
"lodash.debounce": "^4.0.8"
},
"peerDependencies": {
"next": "^12",
"next": "^13",
"react": "^18",
"react-dom": "^18"
},
@ -71,7 +71,7 @@
"@types/node": "^17.0.8",
"@types/react": "^18.0.14",
"lint-staged": "^12.1.7",
"next": "^12.0.8",
"next": "^13.0.6",
"prettier": "^2.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

5
packages/kibocommerce/package.json
View File

@ -53,11 +53,12 @@
"lodash.debounce": "^4.0.8"
},
"peerDependencies": {
"next": "^12",
"next": "^13",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@babel/core": "^7.20.5",
"@graphql-codegen/cli": "^2.7.0",
"@graphql-codegen/schema-ast": "^2.4.1",
"@graphql-codegen/typescript": "^2.4.2",
@ -71,7 +72,7 @@
"@types/react": "^18.0.14",
"graphql": "^16.0.0",
"lint-staged": "^12.1.7",
"next": "^12.0.8",
"next": "^13.0.6",
"prettier": "^2.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

3
packages/kibocommerce/src/api/endpoints/cart/remove-item.ts
View File

@ -8,7 +8,8 @@ const removeItem: CartEndpoint['handlers']['removeItem'] = async ({
body: { itemId },
config,
}) => {
const encodedToken = req.cookies.get(config.customerCookie)
const encodedToken = req.cookies.get(config.customerCookie)?.value
const token = encodedToken
? Buffer.from(encodedToken, 'base64').toString('ascii')
: null

2
packages/kibocommerce/src/api/endpoints/cart/update-item.ts
View File

@ -8,7 +8,7 @@ const updateItem: CartEndpoint['handlers']['updateItem'] = async ({
body: { itemId, item },
config,
}) => {
const encodedToken = req.cookies.get(config.cartCookie)
const encodedToken = req.cookies.get(config.cartCookie)?.value
const token = encodedToken
? Buffer.from(encodedToken, 'base64').toString('ascii')
: null

4
packages/kibocommerce/src/api/utils/cookie-handler.ts
View File

@ -19,7 +19,7 @@ export default class CookieHandler {
this.config = config
this.request = req
const encodedToken = req.cookies.get(config.customerCookie)
const encodedToken = req.cookies.get(config.customerCookie)?.value
const token = parseCookie(encodedToken)
this.accessToken = token ? token.accessToken : null
}
@ -36,7 +36,7 @@ export default class CookieHandler {
}
isShopperCookieAnonymous() {
const customerCookieKey = this.config.customerCookie
const shopperCookie = this.request.cookies.get(customerCookieKey)
const shopperCookie = this.request.cookies.get(customerCookieKey)?.value
const shopperSession = parseCookie(shopperCookie)
const isAnonymous = shopperSession?.customerAccount ? false : true
return isAnonymous

4
packages/local/package.json
View File

@ -50,7 +50,7 @@
"@vercel/commerce": "workspace:*"
},
"peerDependencies": {
"next": "^12",
"next": "^13",
"react": "^18",
"react-dom": "^18"
},
@ -62,7 +62,7 @@
"@types/react": "^18.0.14",
"@types/node-fetch": "2.6.2",
"lint-staged": "^12.1.7",
"next": "^12.0.8",
"next": "^13.0.6",
"prettier": "^2.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

4
packages/ordercloud/package.json
View File

@ -52,7 +52,7 @@
"cookie": "^0.4.1"
},
"peerDependencies": {
"next": "^12",
"next": "^13",
"react": "^18",
"react-dom": "^18"
},
@ -66,7 +66,7 @@
"@types/cookie": "^0.4.1",
"@types/node-fetch": "^2.6.2",
"lint-staged": "^12.1.7",
"next": "^12.0.8",
"next": "^13.0.6",
"prettier": "^2.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

2
packages/ordercloud/src/api/endpoints/cart/add-item.ts
View File

@ -10,7 +10,7 @@ const addItem: CartEndpoint['handlers']['addItem'] = async ({
config: { restBuyerFetch, cartCookie, tokenCookie },
}) => {
// Get token
let token = req.cookies.get(tokenCookie)
let token = req.cookies.get(tokenCookie)?.value
let headers: any = {}
// Create an order if it doesn't exist

2
packages/ordercloud/src/api/endpoints/cart/get-cart.ts
View File

@ -16,7 +16,7 @@ const getCart: CartEndpoint['handlers']['getCart'] = async ({
try {
// Get token
const token = req.cookies.get(tokenCookie)
const token = req.cookies.get(tokenCookie)?.value
// Get cart & line items
const [cart, { Items }] = await Promise.all([

2
packages/ordercloud/src/api/endpoints/cart/remove-item.ts
View File

@ -7,7 +7,7 @@ const removeItem: CartEndpoint['handlers']['removeItem'] = async ({
body: { cartId, itemId },
config: { restBuyerFetch, tokenCookie },
}) => {
const token = req.cookies.get(tokenCookie)
const token = req.cookies.get(tokenCookie)?.value
// Remove the item to the order
await restBuyerFetch(

2
packages/ordercloud/src/api/endpoints/cart/update-item.ts
View File

@ -9,7 +9,7 @@ const updateItem: CartEndpoint['handlers']['updateItem'] = async ({
body: { cartId, itemId, item },
config: { restBuyerFetch, tokenCookie },
}) => {
const token = req.cookies.get(tokenCookie)
const token = req.cookies.get(tokenCookie)?.value
// Store specs
let specs: RawVariant['Specs'] = []

2
packages/ordercloud/src/api/endpoints/catalog/products/get-products.ts
View File

@ -7,7 +7,7 @@ const getProducts: ProductsEndpoint['handlers']['getProducts'] = async ({
body: { search, categoryId },
config: { restBuyerFetch, tokenCookie },
}) => {
const token = req.cookies.get(tokenCookie)
const token = req.cookies.get(tokenCookie)?.value
//Use a dummy base as we only care about the relative path
const url = new URL('/me/products', 'http://a')

2
packages/ordercloud/src/api/endpoints/checkout/get-checkout.ts
View File

@ -5,7 +5,7 @@ const getCheckout: CheckoutEndpoint['handlers']['getCheckout'] = async ({
body: { cartId },
config: { restBuyerFetch },
}) => {
const token = req.cookies.get('token')
const token = req.cookies.get('token')?.value
// Register credit card
const payments = await restBuyerFetch(

2
packages/ordercloud/src/api/endpoints/checkout/submit-checkout.ts
View File

@ -5,7 +5,7 @@ const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
body: { cartId },
config: { restBuyerFetch, tokenCookie },
}) => {
const token = req.cookies.get(tokenCookie)
const token = req.cookies.get(tokenCookie)?.value
// Submit order
await restBuyerFetch('POST', `/orders/Outgoing/${cartId}/submit`, null, {

2
packages/ordercloud/src/api/endpoints/customer/address/add-item.ts
View File

@ -5,7 +5,7 @@ const addItem: CustomerAddressEndpoint['handlers']['addItem'] = async ({
body: { item, cartId },
config: { restBuyerFetch, tokenCookie },
}) => {
const token = req.cookies.get(tokenCookie)
const token = req.cookies.get(tokenCookie)?.value
// Register address
const address = await restBuyerFetch('POST', `/me/addresses`, {

2
packages/ordercloud/src/api/endpoints/customer/card/add-item.ts
View File

@ -7,7 +7,7 @@ const addItem: CustomerCardEndpoint['handlers']['addItem'] = async ({
config: { restBuyerFetch, tokenCookie },
}) => {
// Get token
const token = req.cookies.get(tokenCookie)
const token = req.cookies.get(tokenCookie)?.value
const [exp_month, exp_year] = item.cardExpireDate.split('/')
const stripeToken = await fetch('https://api.stripe.com/v1/tokens', {

5
packages/saleor/package.json
View File

@ -54,11 +54,12 @@
"lodash.debounce": "^4.0.8"
},
"peerDependencies": {
"next": "^12",
"next": "^13",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@babel/core": "^7.20.5",
"@graphql-codegen/cli": "^2.7.0",
"@graphql-codegen/schema-ast": "^2.4.1",
"@graphql-codegen/typescript": "^2.4.2",
@ -73,7 +74,7 @@
"@types/react": "^18.0.14",
"graphql": "^16.0.0",
"lint-staged": "^12.1.7",
"next": "^12.0.8",
"next": "^13.0.6",
"prettier": "^2.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

4
packages/sfcc/package.json
View File

@ -51,7 +51,7 @@
"commerce-sdk": "^2.7.0"
},
"peerDependencies": {
"next": "^12",
"next": "^13",
"react": "^18",
"react-dom": "^18"
},
@ -63,7 +63,7 @@
"@types/react": "^18.0.14",
"@types/node-fetch": "^2.6.2",
"lint-staged": "^12.1.7",
"next": "^12.0.8",
"next": "^13.0.6",
"prettier": "^2.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

7
packages/shopify/package.json
View File

@ -54,11 +54,12 @@
"lodash.debounce": "^4.0.8"
},
"peerDependencies": {
"next": "^12",
"next": "^13",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@babel/core": "^7.20.5",
"@graphql-codegen/cli": "2.7.0",
"@graphql-codegen/schema-ast": "^2.4.1",
"@graphql-codegen/typescript": "^2.6.0",
@ -69,10 +70,10 @@
"@types/js-cookie": "3.0.2",
"@types/lodash.debounce": "^4.0.7",
"@types/node": "^18.0.3",
"@types/react": "^18.0.14",
"@types/node-fetch": "2.6.2",
"graphql": "^16.0.0",
"@types/react": "^18.0.14",
"dotenv": "^16.0.1",
"graphql": "^16.0.0",
"lint-staged": "^13.0.3",
"next": "^12.2.1",
"prettier": "^2.7.1",

9
packages/shopify/src/api/endpoints/checkout/get-checkout.ts
View File

@ -11,15 +11,16 @@ const getCheckout: CheckoutEndpoint['handlers']['getCheckout'] = async ({
config,
}) => {
const { cookies } = req
const checkoutUrl = cookies.get(SHOPIFY_CHECKOUT_URL_COOKIE)
const customerCookie = cookies.get(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
const checkoutUrl = cookies.get(SHOPIFY_CHECKOUT_URL_COOKIE)?.value
const customerCookie = cookies.get(SHOPIFY_CUSTOMER_TOKEN_COOKIE)?.value
if (customerCookie) {
try {
await config.fetch(associateCustomerWithCheckoutMutation, {
variables: {
checkoutId: cookies.get(SHOPIFY_CHECKOUT_ID_COOKIE),
customerAccessToken: cookies.get(SHOPIFY_CUSTOMER_TOKEN_COOKIE),
checkoutId: cookies.get(SHOPIFY_CHECKOUT_ID_COOKIE)?.value,
customerAccessToken: cookies.get(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
?.value,
},
})
} catch (error) {

2
packages/shopify/src/utils/get-search-variables.ts
View File

@ -11,7 +11,7 @@ export const getSearchVariables = ({
let query = ''
if (search) {
query += `product_type:"${search}" OR title:"${search}" OR tag:"${search}" `
query += `(product_type:${search}) OR (title:${search}) OR (tag:${search}) `
}
if (brandId) {

4
packages/spree/package.json
View File

@ -54,7 +54,7 @@
"swr": "^1.3.0"
},
"peerDependencies": {
"next": "^12",
"next": "^13",
"react": "^18",
"react-dom": "^18"
},
@ -68,7 +68,7 @@
"@types/node-fetch": "^2.6.2",
"@types/react": "^18.0.14",
"lint-staged": "^12.1.7",
"next": "^12.0.8",
"next": "^13.0.6",
"prettier": "^2.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

4
packages/swell/package.json
View File

@ -54,7 +54,7 @@
"swell-js": "^4.0.0-next.0"
},
"peerDependencies": {
"next": "^12",
"next": "^13",
"react": "^18",
"react-dom": "^18"
},
@ -68,7 +68,7 @@
"@types/node-fetch": "^2.6.2",
"@types/react": "^18.0.14",
"lint-staged": "^12.1.7",
"next": "^12.0.8",
"next": "^13.0.6",
"prettier": "^2.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

2
packages/swell/src/api/endpoints/checkout/index.ts
View File

@ -7,7 +7,7 @@ const getCheckout: CheckoutEndpoint['handlers']['getCheckout'] = async ({
req,
}) => {
const { cookies } = req
const checkoutUrl = cookies.get(SWELL_CHECKOUT_URL_COOKIE)
const checkoutUrl = cookies.get(SWELL_CHECKOUT_URL_COOKIE)?.value
if (checkoutUrl) {
return { redirectTo: checkoutUrl }

5
packages/vendure/package.json
View File

@ -52,11 +52,12 @@
"@vercel/commerce": "workspace:*"
},
"peerDependencies": {
"next": "^12",
"next": "^13",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@babel/core": "^7.20.5",
"@graphql-codegen/cli": "2.7.0",
"@graphql-codegen/schema-ast": "^2.4.1",
"@graphql-codegen/typescript": "^2.4.2",
@ -69,7 +70,7 @@
"@types/node-fetch": "^2.6.2",
"graphql": "^16.0.0",
"lint-staged": "^12.1.7",
"next": "^12.0.8",
"next": "^13.0.6",
"prettier": "^2.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

848
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

6
site/assets/base.css
View File

@ -119,3 +119,9 @@ a {
opacity: 1;
}
}
@media not all and (min-resolution: 0.001dpcm) {
img[loading='lazy'] {
clip-path: inset(0.5px);
}
}

8
site/components/cart/CartItem/CartItem.module.css
View File

@ -17,13 +17,7 @@
}
.productImage {
position: absolute;
transform: scale(1.9);
width: 100%;
height: 100%;
left: 30% !important;
top: 30% !important;
z-index: 1;
@apply w-full h-full object-cover;
}
.productName {

37
site/components/cart/CartItem/CartItem.tsx
View File

@ -1,4 +1,4 @@
import { ChangeEvent, FocusEventHandler, useEffect, useState } from 'react'
import { ChangeEvent, useEffect, useState } from 'react'
import cn from 'clsx'
import Image from 'next/image'
import Link from 'next/link'
@ -84,31 +84,26 @@ const CartItem = ({
{...rest}
>
<div className="flex flex-row space-x-4 py-4">
<div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer z-0">
<div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer">
<Link href={`/product/${item.path}`}>
<a>
<Image
onClick={() => closeSidebarIfPresent()}
className={s.productImage}
width={150}
height={150}
src={item.variant.image?.url || placeholderImg}
alt={item.variant.image?.alt || 'Product Image'}
unoptimized
/>
</a>
<Image
onClick={() => closeSidebarIfPresent()}
className={s.productImage}
width={64}
height={64}
src={item.variant.image?.url || placeholderImg}
alt={item.variant.image?.alt || 'Product Image'}
/>
</Link>
</div>
<div className="flex-1 flex flex-col text-base">
<Link href={`/product/${item.path}`}>
<a>
<span
className={s.productName}
onClick={() => closeSidebarIfPresent()}
>
{item.name}
</span>
</a>
<span
className={s.productName}
onClick={() => closeSidebarIfPresent()}
>
{item.name}
</span>
</Link>
{options && options.length > 0 && (
<div className="flex items-center pb-1">

8
site/components/cart/CartSidebarView/CartSidebarView.tsx
View File

@ -74,11 +74,9 @@ const CartSidebarView: FC = () => {
<>
<div className="px-4 sm:px-6 flex-1">
<Link href="/cart">
<a>
<Text variant="sectionHeading" onClick={handleClose}>
My Cart
</Text>
</a>
<Text variant="sectionHeading" onClick={handleClose}>
My Cart
</Text>
</Link>
<ul className={s.lineItemsList}>
{data!.lineItems.map((item: any) => (

4
site/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
View File

@ -55,9 +55,7 @@ const CheckoutSidebarView: FC = () => {
>
<div className="px-4 sm:px-6 flex-1">
<Link href="/cart">
<a>
<Text variant="sectionHeading">Checkout</Text>
</a>
<Text variant="sectionHeading">Checkout</Text>
</Link>
<PaymentWidget

24
site/components/common/Footer/Footer.tsx
View File

@ -32,23 +32,25 @@ const Footer: FC<Props> = ({ className, pages }) => {
<Container>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accent-2 py-12 text-primary bg-primary transition-colors duration-150">
<div className="col-span-1 lg:col-span-2">
<Link href="/">
<a className="flex flex-initial items-center font-bold md:mr-24">
<span className="rounded-full border border-accent-6 mr-2">
<Logo />
</span>
<span>ACME</span>
</a>
<Link
href="/"
className="flex flex-initial items-center font-bold md:mr-24"
>
<span className="rounded-full border border-accent-6 mr-2">
<Logo />
</span>
<span>ACME</span>
</Link>
</div>
<div className="col-span-1 lg:col-span-7">
<div className="grid md:grid-rows-4 md:grid-cols-3 md:grid-flow-col">
{[...links, ...sitePages].map((page) => (
<span key={page.url} className="py-3 md:py-0 md:pb-4">
<Link href={page.url!}>
<a className="text-accent-9 hover:text-accent-6 transition ease-in-out duration-150">
{page.name}
</a>
<Link
href={page.url!}
className="text-accent-9 hover:text-accent-6 transition ease-in-out duration-150"
>
{page.name}
</Link>
</span>
))}

17
site/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
View File

@ -24,29 +24,21 @@ const HomeAllProductsGrid: FC<Props> = ({
<div className={s.aside}>
<ul className="mb-10">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={getCategoryPath('')}>
<a>All Categories</a>
</Link>
<Link href={getCategoryPath('')}>All Categories</Link>
</li>
{categories?.map((cat: any) => (
<li key={cat.path} className="py-1 text-accent-8 text-base">
<Link href={getCategoryPath(cat.path)}>
<a>{cat.name}</a>
</Link>
<Link href={getCategoryPath(cat.path)}>{cat.name}</Link>
</li>
))}
</ul>
<ul className="">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={getDesignerPath('')}>
<a>All Designers</a>
</Link>
<Link href={getDesignerPath('')}>All Designers</Link>
</li>
{brands?.map(({ path, name }) => (
<li key={path} className="py-1 text-accent-8 text-base">
<Link href={getDesignerPath(path)}>
<a>{name}</a>
</Link>
<Link href={getDesignerPath(path)}>{name}</Link>
</li>
))}
</ul>
@ -60,6 +52,7 @@ const HomeAllProductsGrid: FC<Props> = ({
product={product}
variant="simple"
imgProps={{
alt: product.name,
width: 480,
height: 480,
}}

14
site/components/common/I18nWidget/I18nWidget.tsx
View File

@ -81,13 +81,13 @@ const I18nWidget: FC = () => {
<ul>
{options.map((locale) => (
<li key={locale}>
<Link href={currentPath} locale={locale}>
<a
className={cn(s.item)}
onClick={() => setDisplay(false)}
>
{LOCALES_MAP[locale].name}
</a>
<Link
href={currentPath}
locale={locale}
className={cn(s.item)}
onClick={() => setDisplay(false)}
>
{LOCALES_MAP[locale].name}
</Link>
</li>
))}

14
site/components/common/Navbar/Navbar.tsx
View File

@ -19,18 +19,16 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
<Container clean className="mx-auto max-w-8xl px-6">
<div className={s.nav}>
<div className="flex items-center flex-1">
<Link href="/">
<a className={s.logo} aria-label="Logo">
<Logo />
</a>
<Link href="/" className={s.logo} aria-label="Logo">
<Logo />
</Link>
<nav className={s.navMenu}>
<Link href="/search">
<a className={s.link}>All</a>
<Link href="/search" className={s.link}>
All
</Link>
{links?.map((l) => (
<Link href={l.href} key={l.href}>
<a className={s.link}>{l.label}</a>
<Link href={l.href} key={l.href} className={s.link}>
{l.label}
</Link>
))}
</nav>

8
site/components/common/UserNav/MenuSidebarView/MenuSidebarView.tsx
View File

@ -17,9 +17,7 @@ export default function MenuSidebarView({
<nav>
<ul>
<li className={s.item} onClick={() => closeSidebar()}>
<Link href="/search">
<a>All</a>
</Link>
<Link href="/search">All</Link>
</li>
{links.map((l: any) => (
<li
@ -27,9 +25,7 @@ export default function MenuSidebarView({
className={s.item}
onClick={() => closeSidebar()}
>
<Link href={l.href}>
<a>{l.label}</a>
</Link>
<Link href={l.href}>{l.label}</Link>
</li>
))}
</ul>

2
site/components/common/UserNav/UserNav.tsx
View File

@ -59,7 +59,7 @@ const UserNav: React.FC<{
)}
{process.env.COMMERCE_WISHLIST_ENABLED && (
<li className={s.item}>
<Link href="/wishlist">
<Link href="/wishlist" legacyBehavior>
<a onClick={closeSidebarIfPresent} aria-label="Wishlist">
<Heart />
</a>

11
site/components/product/ProductCard/ProductCard.module.css
View File

@ -7,7 +7,7 @@
.root:hover {
& .productImage {
transform: scale(1.2625);
transform: scale(1.1);
}
& .header .name span,
@ -69,16 +69,11 @@
}
.imageContainer {
@apply flex items-center justify-center overflow-hidden;
}
.imageContainer > div {
min-width: 100%;
@apply flex items-center justify-center overflow-hidden w-full h-full;
}
.imageContainer .productImage {
@apply transform transition-transform duration-500
object-cover scale-120;
@apply transform transition-transform duration-500 object-cover w-auto h-full;
}
.root .wishlistButton {

175
site/components/product/ProductCard/ProductCard.tsx
View File

@ -38,99 +38,92 @@ const ProductCard: FC<Props> = ({
)
return (
<Link href={`/product/${product.slug}`}>
<a className={rootClassName} aria-label={product.name}>
{variant === 'slim' && (
<>
<div className={s.header}>
<span>{product.name}</span>
</div>
{product?.images && (
<div>
<Image
quality="85"
src={product.images[0]?.url || placeholderImg}
alt={product.name || 'Product Image'}
height={320}
width={320}
layout="fixed"
{...imgProps}
/>
</div>
)}
</>
)}
{variant === 'simple' && (
<>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0]}
/>
)}
{!noNameTag && (
<div className={s.header}>
<h3 className={s.name}>
<span>{product.name}</span>
</h3>
<div className={s.price}>
{`${price} ${product.price?.currencyCode}`}
</div>
</div>
)}
<div className={s.imageContainer}>
{product?.images && (
<div>
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
</div>
)}
</div>
</>
)}
{variant === 'default' && (
<>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0] as any}
/>
)}
<ProductTag
name={product.name}
price={`${price} ${product.price?.currencyCode}`}
<Link
href={`/product/${product.slug}`}
className={rootClassName}
aria-label={product.name}
>
{variant === 'slim' && (
<>
<div className={s.header}>
<span>{product.name}</span>
</div>
{product?.images && (
<Image
quality="85"
src={product.images[0]?.url || placeholderImg}
alt={product.name || 'Product Image'}
height={320}
width={320}
{...imgProps}
/>
<div className={s.imageContainer}>
{product?.images && (
<div>
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
</div>
)}
)}
</>
)}
{variant === 'simple' && (
<>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0]}
/>
)}
{!noNameTag && (
<div className={s.header}>
<h3 className={s.name}>
<span>{product.name}</span>
</h3>
<div className={s.price}>
{`${price} ${product.price?.currencyCode}`}
</div>
</div>
</>
)}
</a>
)}
<div className={s.imageContainer}>
{product?.images && (
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
{...imgProps}
/>
)}
</div>
</>
)}
{variant === 'default' && (
<>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0] as any}
/>
)}
<ProductTag
name={product.name}
price={`${price} ${product.price?.currencyCode}`}
/>
<div className={s.imageContainer}>
{product?.images && (
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
{...imgProps}
/>
)}
</div>
</>
)}
</Link>
)
}

2
site/components/product/ProductSidebar/ProductSidebar.module.css
View File

@ -50,7 +50,7 @@
}
.sliderContainer .img {
@apply w-full h-auto max-h-full object-cover;
@apply w-auto h-full max-h-full object-cover;
}
.button {

9
site/components/product/ProductSlider/ProductSlider.module.css
View File

@ -19,11 +19,11 @@
}
.thumb.selected {
@apply bg-white;
@apply bg-white/30;
}
.thumb img {
height: 85% !important;
@apply h-full w-full object-cover transition duration-500;
}
.album {
@ -44,10 +44,9 @@
}
@screen md {
.thumb:hover {
transform: scale(1.02);
.thumb:hover img {
@apply scale-110;
}
.album {
height: 182px;
}

8
site/components/product/ProductView/ProductView.module.css
View File

@ -17,15 +17,11 @@
}
.imageContainer {
@apply text-center h-full relative;
}
.imageContainer > span {
height: 100% !important;
@apply flex items-center justify-center w-full h-full relative;
}
.sliderContainer .img {
@apply w-full h-full max-h-full object-cover;
@apply object-cover h-full;
}
.button {

1
site/components/product/ProductView/ProductView.tsx
View File

@ -80,6 +80,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
variant="simple"
className="animated fadeIn"
imgProps={{
alt: p.name,
width: 300,
height: 300,
}}

11
site/components/search.tsx
View File

@ -125,6 +125,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
>
<Link
href={{ pathname: getCategoryPath('', brand), query }}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'categories')}
@ -151,6 +152,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
pathname: getCategoryPath(cat.path, brand),
query,
}}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'categories')}
@ -226,6 +228,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
pathname: getDesignerPath('', category),
query,
}}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'brands')}
@ -252,6 +255,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
pathname: getDesignerPath(path, category),
query,
}}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'brands')}
@ -326,6 +330,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
imgProps={{
width: 480,
height: 480,
alt: product.name,
}}
/>
))}
@ -390,7 +395,10 @@ export default function Search({ categories, brands }: SearchPropsType) {
}
)}
>
<Link href={{ pathname, query: filterQuery({ q }) }}>
<Link
href={{ pathname, query: filterQuery({ q }) }}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'sort')}
className={
@ -416,6 +424,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
pathname,
query: filterQuery({ q, sort: key }),
}}
legacyBehavior
>
<a
onClick={(e) => handleClick(e, 'sort')}

11
site/components/ui/Hero/Hero.tsx
View File

@ -17,11 +17,12 @@ const Hero: FC<HeroProps> = ({ headline, description }) => {
<h2 className={s.title}>{headline}</h2>
<div className={s.description}>
<p>{description}</p>
<Link href="/">
<a className="flex items-center text-accent-0 pt-3 font-bold hover:underline cursor-pointer w-max-content">
Read it here
<ArrowRight width="20" heigh="20" className="ml-1" />
</a>
<Link
href="/"
className="flex items-center text-accent-0 pt-3 font-bold hover:underline cursor-pointer w-max-content"
>
Read it here
<ArrowRight width="20" heigh="20" className="ml-1" />
</Link>
</div>
</div>

4
site/components/ui/Link/Link.tsx
View File

@ -6,8 +6,8 @@ const Link: React.FC<
}
> = ({ href, children, ...props }) => {
return (
<NextLink href={href}>
<a {...props}>{children}</a>
<NextLink href={href} {...props}>
{children}
</NextLink>
)
}

4
site/components/wishlist/WishlistCard/WishlistCard.tsx
View File

@ -73,9 +73,7 @@ const WishlistCard: React.FC<{
<div className={s.description}>
<div className="flex-1 mb-6">
<h3 className="text-2xl mb-2 -mt-1">
<Link href={`/product${product.path}`}>
<a>{product.name}</a>
</Link>
<Link href={`/product${product.path}`}>{product.name}</Link>
</h3>
<div className="mb-4">
<Text html={product.description} />

4
site/package.json
View File

@ -22,10 +22,10 @@
"@vercel/commerce-local": "workspace:*",
"@vercel/commerce-ordercloud": "workspace:*",
"@vercel/commerce-saleor": "workspace:*",
"@vercel/commerce-sfcc": "workspace:*",
"@vercel/commerce-shopify": "workspace:*",
"@vercel/commerce-spree": "workspace:*",
"@vercel/commerce-swell": "workspace:*",
"@vercel/commerce-sfcc": "workspace:*",
"@vercel/commerce-vendure": "workspace:*",
"autoprefixer": "^10.4.2",
"body-scroll-lock": "^4.0.0-beta.0",
@ -35,7 +35,7 @@
"keen-slider": "^6.7.0",
"lodash.random": "^3.2.0",
"lodash.throttle": "^4.1.1",
"next": "^12.3.0",
"next": "^13.0.4",
"next-themes": "^0.2.0",
"postcss": "^8.3.5",
"postcss-nesting": "^10.1.10",

2
site/pages/index.tsx
View File

@ -46,6 +46,7 @@ export default function Home({
key={product.id}
product={product}
imgProps={{
alt: product.name,
width: i === 0 ? 1080 : 540,
height: i === 0 ? 1080 : 540,
priority: true,
@ -68,6 +69,7 @@ export default function Home({
key={product.id}
product={product}
imgProps={{
alt: product.name,
width: i === 0 ? 1080 : 540,
height: i === 0 ? 1080 : 540,
}}