Merge branch 'main' into poc/react-nextjs-new-design

This commit is contained in:
Björn Meyer 2023-07-31 13:08:09 +02:00
commit cf1f7c2957
7 changed files with 111 additions and 103 deletions

View File

@ -12,7 +12,9 @@ A Next.js 13 and App Router-ready ecommerce template featuring:
- Styling with Tailwind CSS - Styling with Tailwind CSS
- Automatic light/dark mode based on system settings - Automatic light/dark mode based on system settings
> Note: Looking for Next.js Commerce v1? View the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store), and [release notes](https://github.com/vercel/commerce/releases/tag/v1) <h3 id="v1-note"></h3>
> Note: Looking for Next.js Commerce v1? View the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store), and [release notes](https://github.com/vercel/commerce/releases/tag/v1).
## Prerequisites ## Prerequisites

View File

@ -53,7 +53,7 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
quantity = itemInCart.quantity + 1; quantity = itemInCart.quantity + 1;
} }
await apiClient.invoke('addLineItem post /checkout/cart/line-item', { const response = await apiClient.invoke('addLineItem post /checkout/cart/line-item', {
items: [ items: [
{ {
id: variantId, id: variantId,
@ -63,6 +63,11 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
} }
] ]
}); });
const errorMessage = alertErrorMessages(response);
if (errorMessage !== '') {
return { message: errorMessage } as Error;
}
} catch (error) { } catch (error) {
if (error instanceof ApiClientError) { if (error instanceof ApiClientError) {
console.error(error); console.error(error);
@ -73,6 +78,20 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
} }
}; };
function alertErrorMessages(response: ExtendedCart): string {
let errorMessages: string = '';
if (response.errors) {
Object.values(response.errors).forEach(function (value) {
// @ts-ignore
if (value.messageKey && value.message && value.messageKey === 'product-out-of-stock') {
errorMessages += value.message;
}
});
}
return errorMessages;
}
export const removeItem = async (lineId: string): Promise<Error | undefined> => { export const removeItem = async (lineId: string): Promise<Error | undefined> => {
const cartId = cookies().get('sw-context-token')?.value; const cartId = cookies().get('sw-context-token')?.value;

View File

@ -6,7 +6,7 @@ import { addItem } from 'components/cart/actions';
import LoadingDots from 'components/loading-dots'; import LoadingDots from 'components/loading-dots';
import { ProductVariant, Product } from 'lib/shopware/types'; import { ProductVariant, Product } from 'lib/shopware/types';
import { useRouter, useSearchParams } from 'next/navigation'; import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState, useTransition } from 'react'; import { useTransition } from 'react';
export function AddToCart({ export function AddToCart({
product, product,
@ -17,34 +17,36 @@ export function AddToCart({
availableForSale: boolean; availableForSale: boolean;
product: Product; product: Product;
}) { }) {
const [selectedVariantId, setSelectedVariantId] = useState(product.id);
const router = useRouter(); const router = useRouter();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [isPending, startTransition] = useTransition(); const [isPending, startTransition] = useTransition();
const defaultVariantId = variants.length === 1 ? variants[0]?.id : product.id;
useEffect(() => { const variant = variants.find((variant: ProductVariant) =>
const variant = variants.find((variant: ProductVariant) => variant.selectedOptions.every(
variant.selectedOptions.every( (option) => option.value === searchParams.get(option.name.toLowerCase())
(option) => option.value === searchParams.get(option.name.toLowerCase()) )
) );
); const selectedVariantId = variant?.id || defaultVariantId;
const title = !availableForSale
if (variant) { ? 'Out of stock'
setSelectedVariantId(variant.id); : !selectedVariantId
} ? 'Please select options'
}, [searchParams, variants, setSelectedVariantId, selectedVariantId]); : undefined;
return ( return (
<button <button
aria-label="Add item to cart" aria-label="Add item to cart"
disabled={isPending} disabled={isPending || !availableForSale || !selectedVariantId}
title={title}
onClick={() => { onClick={() => {
if (!availableForSale) return; // Safeguard in case someone messes with `disabled` in devtools.
if (!availableForSale || !selectedVariantId) return;
startTransition(async () => { startTransition(async () => {
const error = await addItem(selectedVariantId); const error = await addItem(selectedVariantId);
if (error) { if (error) {
console.error(error); alert(error.message);
return; return;
} }
@ -54,7 +56,7 @@ export function AddToCart({
className={clsx( className={clsx(
'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90', 'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
{ {
'cursor-not-allowed opacity-60': !availableForSale, 'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
'cursor-not-allowed': isPending 'cursor-not-allowed': isPending
} }
)} )}

View File

@ -53,7 +53,7 @@ export default async function Footer() {
</div> </div>
</div> </div>
<div className="border-t border-neutral-200 py-6 text-sm dark:border-neutral-700"> <div className="border-t border-neutral-200 py-6 text-sm dark:border-neutral-700">
<div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 md:flex-row md:gap-0"> <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 px-4 md:flex-row md:gap-0 md:px-4 xl:px-0">
<p> <p>
&copy; {copyrightDate} {copyrightName} &copy; {copyrightDate} {copyrightName}
{copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved. {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.

View File

@ -5,22 +5,17 @@ import { SortFilterItem } from 'lib/constants';
import { createUrl } from 'lib/utils'; import { createUrl } from 'lib/utils';
import Link from 'next/link'; import Link from 'next/link';
import { usePathname, useSearchParams } from 'next/navigation'; import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import type { ListItem, PathFilterItem } from '.'; import type { ListItem, PathFilterItem } from '.';
function PathFilterItem({ item }: { item: PathFilterItem }) { function PathFilterItem({ item }: { item: PathFilterItem }) {
const pathname = usePathname(); const pathname = usePathname();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [active, setActive] = useState(pathname === item.path); const active = pathname === item.path;
const newParams = new URLSearchParams(searchParams.toString()); const newParams = new URLSearchParams(searchParams.toString());
const DynamicTag = active ? 'p' : Link; const DynamicTag = active ? 'p' : Link;
newParams.delete('q'); newParams.delete('q');
useEffect(() => {
setActive(pathname === item.path);
}, [pathname, item.path]);
return ( return (
<li className="mt-2 flex text-black dark:text-white" key={item.title}> <li className="mt-2 flex text-black dark:text-white" key={item.title}>
<DynamicTag <DynamicTag
@ -41,7 +36,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
function SortFilterItem({ item }: { item: SortFilterItem }) { function SortFilterItem({ item }: { item: SortFilterItem }) {
const pathname = usePathname(); const pathname = usePathname();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [active, setActive] = useState(searchParams.get('sort') === item.slug); const active = searchParams.get('sort') === item.slug;
const q = searchParams.get('q'); const q = searchParams.get('q');
const page = searchParams.get('page'); const page = searchParams.get('page');
const href = const href =
@ -57,10 +52,6 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
: pathname; : pathname;
const DynamicTag = active ? 'p' : Link; const DynamicTag = active ? 'p' : Link;
useEffect(() => {
setActive(searchParams.get('sort') === item.slug);
}, [searchParams, item.slug]);
return ( return (
<li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}> <li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}>
<DynamicTag <DynamicTag

View File

@ -4,17 +4,12 @@ import clsx from 'clsx';
import { ProductOption, ProductVariant } from 'lib/shopware/types'; import { ProductOption, ProductVariant } from 'lib/shopware/types';
import { createUrl } from 'lib/utils'; import { createUrl } from 'lib/utils';
import Link from 'next/link'; import Link from 'next/link';
import { usePathname, useRouter, useSearchParams } from 'next/navigation'; import { usePathname, useSearchParams } from 'next/navigation';
type ParamsMap = { type Combination = {
[key: string]: string; // ie. { color: 'Red', size: 'Large', ... }
};
type OptimizedVariant = {
id: string; id: string;
availableForSale: boolean; availableForSale: boolean;
params: URLSearchParams; [key: string]: string | boolean; // ie. { color: 'Red', size: 'Large', ... }
[key: string]: string | boolean | URLSearchParams; // ie. { color: 'Red', size: 'Large', ... }
}; };
export function VariantSelector({ export function VariantSelector({
@ -25,8 +20,7 @@ export function VariantSelector({
variants: ProductVariant[]; variants: ProductVariant[];
}) { }) {
const pathname = usePathname(); const pathname = usePathname();
const currentParams = useSearchParams(); const searchParams = useSearchParams();
const router = useRouter();
const hasNoOptionsOrJustOneOption = const hasNoOptionsOrJustOneOption =
!options.length || (options.length === 1 && options[0]?.values.length === 1); !options.length || (options.length === 1 && options[0]?.values.length === 1);
@ -34,78 +28,55 @@ export function VariantSelector({
return null; return null;
} }
// Discard any unexpected options or values from url and create params map. const combinations: Combination[] = variants.map((variant) => ({
const paramsMap: ParamsMap = Object.fromEntries( id: variant.id,
Array.from(currentParams.entries()).filter(([key, value]) => availableForSale: variant.availableForSale,
options.find((option) => option.name.toLowerCase() === key && option.values.includes(value)) // Adds key / value pairs for each variant (ie. "color": "Black" and "size": 'M").
...variant.selectedOptions.reduce(
(accumulator, option) => ({ ...accumulator, [option.name.toLowerCase()]: option.value }),
{}
) )
); }));
// Optimize variants for easier lookups.
const optimizedVariants: OptimizedVariant[] = variants.map((variant) => {
const optimized: OptimizedVariant = {
id: variant.id,
availableForSale: variant.availableForSale,
params: new URLSearchParams()
};
variant.selectedOptions.forEach((selectedOption) => {
const name = selectedOption.name.toLowerCase();
const value = selectedOption.value;
optimized[name] = value;
optimized.params.set(name, value);
});
return optimized;
});
// Find the first variant that is:
//
// 1. Available for sale
// 2. Matches all options specified in the url (note that this
// could be a partial match if some options are missing from the url).
//
// If no match (full or partial) is found, use the first variant that is
// available for sale.
const selectedVariant: OptimizedVariant | undefined =
optimizedVariants.find(
(variant) =>
variant.availableForSale &&
Object.entries(paramsMap).every(([key, value]) => variant[key] === value)
) || optimizedVariants.find((variant) => variant.availableForSale);
const selectedVariantParams = new URLSearchParams(selectedVariant?.params);
const currentUrl = createUrl(pathname, currentParams);
const selectedVariantUrl = createUrl(pathname, selectedVariantParams);
if (currentUrl !== selectedVariantUrl) {
router.replace(selectedVariantUrl);
}
return options.map((option) => ( return options.map((option) => (
<dl className="mb-8" key={option.id}> <dl className="mb-8" key={option.id}>
<dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt> <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
<dd className="flex flex-wrap gap-3"> <dd className="flex flex-wrap gap-3">
{option.values.map((value) => { {option.values.map((value) => {
// Base option params on selected variant params. const optionNameLowerCase = option.name.toLowerCase();
const optionParams = new URLSearchParams(selectedVariantParams);
// Update the params using the current option to reflect how the url would change.
optionParams.set(option.name.toLowerCase(), value);
const optionUrl = createUrl(pathname, optionParams); // Base option params on current params so we can preserve any other param state in the url.
const optionSearchParams = new URLSearchParams(searchParams.toString());
// The option is active if it in the url params. // Update the option params using the current option to reflect how the url *would* change,
const isActive = selectedVariantParams.get(option.name.toLowerCase()) === value; // if the option was clicked.
optionSearchParams.set(optionNameLowerCase, value);
const optionUrl = createUrl(pathname, optionSearchParams);
// The option is available for sale if it fully matches the variant in the option's url params. // In order to determine if an option is available for sale, we need to:
// It's super important to note that this is the options params, *not* the selected variant's params. //
// This is the "magic" that will cross check possible future variant combinations and preemptively // 1. Filter out all other param state
// disable combinations that are not possible. // 2. Filter out invalid options
const isAvailableForSale = optimizedVariants.find((a) => // 3. Check if the option combination is available for sale
Array.from(optionParams.entries()).every(([key, value]) => a[key] === value) //
)?.availableForSale; // This is the "magic" that will cross check possible variant combinations and preemptively
// disable combinations that are not available. For example, if the color gray is only available in size medium,
// then all other sizes should be disabled.
const filtered = Array.from(optionSearchParams.entries()).filter(([key, value]) =>
options.find(
(option) => option.name.toLowerCase() === key && option.values.includes(value)
)
);
const isAvailableForSale = combinations.find((combination) =>
filtered.every(
([key, value]) => combination[key] === value && combination.availableForSale
)
);
// The option is active if it's in the url params.
const isActive = searchParams.get(optionNameLowerCase) === value;
// You can't disable a link, so we need to render something that isn't clickable.
const DynamicTag = isAvailableForSale ? Link : 'p'; const DynamicTag = isAvailableForSale ? Link : 'p';
const dynamicProps = { const dynamicProps = {
...(isAvailableForSale && { scroll: false }) ...(isAvailableForSale && { scroll: false })

View File

@ -10,6 +10,7 @@ type operationsWithoutOriginal = Omit<
| 'readProductCrossSellings' | 'readProductCrossSellings'
| 'readProductListing' | 'readProductListing'
| 'searchPage' | 'searchPage'
| 'addLineItem'
| 'readCart' | 'readCart'
| 'deleteLineItem' | 'deleteLineItem'
>; >;
@ -21,6 +22,7 @@ export type extendedPaths =
| 'readProductCrossSellings post /product/{productId}/cross-selling' | 'readProductCrossSellings post /product/{productId}/cross-selling'
| 'readProductListing post /product-listing/{categoryId}' | 'readProductListing post /product-listing/{categoryId}'
| 'searchPage post /search' | 'searchPage post /search'
| 'addLineItem post /checkout/cart/line-item'
| 'readCart get /checkout/cart?name' | 'readCart get /checkout/cart?name'
| 'deleteLineItem delete /checkout/cart/line-item?id[]={ids}' | 'deleteLineItem delete /checkout/cart/line-item?id[]={ids}'
| operationPaths; | operationPaths;
@ -32,6 +34,7 @@ export type extendedOperations = operationsWithoutOriginal & {
readProductCrossSellings: extendedReadProductCrossSellings; readProductCrossSellings: extendedReadProductCrossSellings;
readProductListing: extendedReadProductListing; readProductListing: extendedReadProductListing;
searchPage: extendedSearchPage; searchPage: extendedSearchPage;
addLineItem: extendedAddLineItem;
readCart: extendedReadCart; readCart: extendedReadCart;
deleteLineItem: extendedDeleteLineItem; deleteLineItem: extendedDeleteLineItem;
}; };
@ -340,6 +343,26 @@ type extendedReadProductListing = {
}; };
}; };
type extendedCartItems = components['schemas']['ArrayStruct'] & {
items?: Partial<ExtendedLineItem>[];
};
type extendedAddLineItem = {
requestBody?: {
content: {
'application/json': extendedCartItems;
};
};
responses: {
/** The updated cart. */
200: {
content: {
'application/json': ExtendedCart;
};
};
};
};
type extendedReadCart = { type extendedReadCart = {
parameters: { parameters: {
query?: { query?: {