mirror of
https://github.com/vercel/commerce.git
synced 2025-05-18 23:46:58 +00:00
Merge pull request #5 from shopwareLabs/chore/update-main-from-origin
Update main branch with changes from vercel
This commit is contained in:
commit
a287ee55a2
2
.github/workflows/test.yml
vendored
2
.github/workflows/test.yml
vendored
@ -5,7 +5,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Cancel running workflows
|
||||
uses: styfle/cancel-workflow-action@0.11.0
|
||||
uses: styfle/cancel-workflow-action@0.12.0
|
||||
with:
|
||||
access_token: ${{ github.token }}
|
||||
- name: Checkout repo
|
||||
|
@ -20,7 +20,7 @@ export async function generateMetadata({
|
||||
}): Promise<Metadata> {
|
||||
// see https://github.com/facebook/react/issues/25994
|
||||
const collectionName = decodeURIComponent(transformHandle(params?.collection ?? ''));
|
||||
if (collectionName === 'react_devtools_backend_compact.js.map') {
|
||||
if (collectionName.includes('.js.map')) {
|
||||
return {};
|
||||
}
|
||||
|
||||
@ -47,7 +47,7 @@ export default async function CategoryPage({
|
||||
|
||||
// see https://github.com/facebook/react/issues/25994
|
||||
const collectionName = decodeURIComponent(transformHandle(params?.collection ?? ''));
|
||||
if (collectionName === 'react_devtools_backend_compact.js.map') {
|
||||
if (collectionName.includes('.js.map')) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
@ -1,11 +1,13 @@
|
||||
'use server';
|
||||
|
||||
import { TAGS } from 'lib/constants';
|
||||
import { ApiClientError } from '@shopware/api-client';
|
||||
import { getApiClient } from 'lib/shopware/api';
|
||||
import { ExtendedCart, ExtendedLineItem, messageKeys } from 'lib/shopware/api-extended';
|
||||
import { revalidateTag } from 'next/cache';
|
||||
import { cookies } from 'next/headers';
|
||||
|
||||
export const fetchCart = async function (cartId?: string): Promise<ExtendedCart | undefined> {
|
||||
async function fetchCart(cartId?: string): Promise<ExtendedCart | undefined> {
|
||||
try {
|
||||
const apiClient = getApiClient(cartId);
|
||||
const cart = await apiClient.invoke('readCart get /checkout/cart?name', {});
|
||||
@ -19,26 +21,17 @@ export const fetchCart = async function (cartId?: string): Promise<ExtendedCart
|
||||
console.error('==>', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export const addItem = async (variantId: string | undefined): Promise<Error | undefined> => {
|
||||
let cartId = cookies().get('sw-context-token')?.value;
|
||||
let cart;
|
||||
|
||||
if (cartId) {
|
||||
cart = await fetchCart(cartId);
|
||||
export async function addItem(prevState: any, selectedVariantId: string | undefined) {
|
||||
const cart = await getCart();
|
||||
if (!cart) {
|
||||
return 'Could not get cart';
|
||||
}
|
||||
const cartId = updateCartCookie(cart);
|
||||
|
||||
if (!cartId || !cart) {
|
||||
cart = await fetchCart();
|
||||
if (cart && cart.token) {
|
||||
cartId = cart.token;
|
||||
cookies().set('sw-context-token', cartId);
|
||||
}
|
||||
}
|
||||
|
||||
if (!variantId) {
|
||||
return { message: 'Missing product variant ID' } as Error;
|
||||
if (!selectedVariantId) {
|
||||
return 'Missing product variant ID';
|
||||
}
|
||||
|
||||
try {
|
||||
@ -46,7 +39,7 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
|
||||
const apiClient = getApiClient(cartId);
|
||||
|
||||
// this part allows us to click multiple times on addToCart and increase the qty with that
|
||||
const itemInCart = cart?.lineItems?.filter((item) => item.id === variantId) as
|
||||
const itemInCart = cart?.lineItems?.filter((item) => item.id === selectedVariantId) as
|
||||
| ExtendedLineItem
|
||||
| undefined;
|
||||
if (itemInCart && itemInCart.quantity) {
|
||||
@ -56,9 +49,9 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
|
||||
const response = await apiClient.invoke('addLineItem post /checkout/cart/line-item', {
|
||||
items: [
|
||||
{
|
||||
id: variantId,
|
||||
id: selectedVariantId,
|
||||
quantity: quantity,
|
||||
referencedId: variantId,
|
||||
referencedId: selectedVariantId,
|
||||
type: 'product'
|
||||
}
|
||||
]
|
||||
@ -66,8 +59,9 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
|
||||
|
||||
const errorMessage = alertErrorMessages(response);
|
||||
if (errorMessage !== '') {
|
||||
return { message: errorMessage } as Error;
|
||||
return errorMessage;
|
||||
}
|
||||
revalidateTag(TAGS.cart);
|
||||
} catch (error) {
|
||||
if (error instanceof ApiClientError) {
|
||||
console.error(error);
|
||||
@ -76,7 +70,33 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
|
||||
console.error('==>', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export async function getCart() {
|
||||
const cartId = cookies().get('sw-context-token')?.value;
|
||||
|
||||
if (cartId) {
|
||||
return await fetchCart(cartId);
|
||||
}
|
||||
|
||||
return await fetchCart();
|
||||
}
|
||||
|
||||
function updateCartCookie(cart: ExtendedCart): string | undefined {
|
||||
const cartId = cookies().get('sw-context-token')?.value;
|
||||
// cartId is set, but not valid anymore, update the cookie
|
||||
if (cartId && cart && cart.token && cart.token !== cartId) {
|
||||
cookies().set('sw-context-token', cart.token);
|
||||
return cart.token;
|
||||
}
|
||||
// cartId is not set (undefined), case for new cart, set the cookie
|
||||
if (!cartId && cart && cart.token) {
|
||||
cookies().set('sw-context-token', cart.token);
|
||||
return cart.token;
|
||||
}
|
||||
// cartId is set and the same like cart.token, return it
|
||||
return cartId;
|
||||
}
|
||||
|
||||
function alertErrorMessages(response: ExtendedCart): string {
|
||||
let errorMessages: string = '';
|
||||
@ -92,11 +112,46 @@ function alertErrorMessages(response: ExtendedCart): string {
|
||||
return errorMessages;
|
||||
}
|
||||
|
||||
export const removeItem = async (lineId: string): Promise<Error | undefined> => {
|
||||
export async function updateItemQuantity(
|
||||
prevState: any,
|
||||
payload: {
|
||||
lineId: string;
|
||||
variantId: string;
|
||||
quantity: number;
|
||||
}
|
||||
) {
|
||||
const cartId = cookies().get('sw-context-token')?.value;
|
||||
|
||||
if (!cartId) {
|
||||
return { message: 'Missing cart ID' } as Error;
|
||||
return 'Missing cart ID';
|
||||
}
|
||||
|
||||
const { lineId, variantId, quantity } = payload;
|
||||
|
||||
try {
|
||||
if (quantity === 0) {
|
||||
await removeItem(null, lineId);
|
||||
revalidateTag(TAGS.cart);
|
||||
return;
|
||||
}
|
||||
|
||||
await updateLineItem(lineId, variantId, quantity);
|
||||
revalidateTag(TAGS.cart);
|
||||
} catch (error) {
|
||||
if (error instanceof ApiClientError) {
|
||||
console.error(error);
|
||||
console.error('Details:', error.details);
|
||||
} else {
|
||||
return 'Error updating item quantity';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function removeItem(prevState: any, lineId: string) {
|
||||
const cartId = cookies().get('sw-context-token')?.value;
|
||||
|
||||
if (!cartId) {
|
||||
return 'Missing cart ID';
|
||||
}
|
||||
|
||||
try {
|
||||
@ -104,6 +159,7 @@ export const removeItem = async (lineId: string): Promise<Error | undefined> =>
|
||||
await apiClient.invoke('deleteLineItem delete /checkout/cart/line-item?id[]={ids}', {
|
||||
ids: [lineId]
|
||||
});
|
||||
revalidateTag(TAGS.cart);
|
||||
} catch (error) {
|
||||
if (error instanceof ApiClientError) {
|
||||
console.error(error);
|
||||
@ -112,17 +168,9 @@ export const removeItem = async (lineId: string): Promise<Error | undefined> =>
|
||||
console.error('==>', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export const updateItemQuantity = async ({
|
||||
lineId,
|
||||
variantId,
|
||||
quantity
|
||||
}: {
|
||||
lineId: string;
|
||||
variantId: string;
|
||||
quantity: number;
|
||||
}): Promise<Error | undefined> => {
|
||||
async function updateLineItem(lineId: string, variantId: string, quantity: number) {
|
||||
const cartId = cookies().get('sw-context-token')?.value;
|
||||
|
||||
if (!cartId) {
|
||||
@ -148,4 +196,4 @@ export const updateItemQuantity = async ({
|
||||
console.error('==>', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
@ -5,21 +5,79 @@ import clsx from 'clsx';
|
||||
import { addItem } from 'components/cart/actions';
|
||||
import LoadingDots from 'components/loading-dots';
|
||||
import { ProductVariant, Product } from 'lib/shopware/types';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useTransition } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import {
|
||||
// @ts-ignore
|
||||
experimental_useFormState as useFormState,
|
||||
experimental_useFormStatus as useFormStatus
|
||||
} from 'react-dom';
|
||||
|
||||
function SubmitButton({
|
||||
availableForSale,
|
||||
selectedVariantId
|
||||
}: {
|
||||
availableForSale: boolean;
|
||||
selectedVariantId: string | undefined;
|
||||
}) {
|
||||
const { pending } = useFormStatus();
|
||||
const buttonClasses =
|
||||
'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white';
|
||||
const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';
|
||||
|
||||
if (!availableForSale) {
|
||||
return (
|
||||
<button aria-disabled className={clsx(buttonClasses, disabledClasses)}>
|
||||
Out Of Stock
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
if (!selectedVariantId) {
|
||||
return (
|
||||
<button
|
||||
aria-label="Please select an option"
|
||||
aria-disabled
|
||||
className={clsx(buttonClasses, disabledClasses)}
|
||||
>
|
||||
<div className="absolute left-0 ml-4">
|
||||
<PlusIcon className="h-5" />
|
||||
</div>
|
||||
Add To Cart
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={(e: React.FormEvent<HTMLButtonElement>) => {
|
||||
if (pending) e.preventDefault();
|
||||
}}
|
||||
aria-label="Add to cart"
|
||||
aria-disabled={pending}
|
||||
className={clsx(buttonClasses, {
|
||||
'hover:opacity-90': true,
|
||||
disabledClasses: pending
|
||||
})}
|
||||
>
|
||||
<div className="absolute left-0 ml-4">
|
||||
{pending ? <LoadingDots className="mb-3 bg-white" /> : <PlusIcon className="h-5" />}
|
||||
</div>
|
||||
Add To Cart
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function AddToCart({
|
||||
product,
|
||||
variants,
|
||||
availableForSale
|
||||
}: {
|
||||
product: Product;
|
||||
variants: ProductVariant[];
|
||||
availableForSale: boolean;
|
||||
product: Product;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [message, formAction] = useFormState(addItem, null);
|
||||
const searchParams = useSearchParams();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const defaultVariantId = variants.length === 1 ? variants[0]?.id : product.id;
|
||||
const variant = variants.find((variant: ProductVariant) =>
|
||||
variant.selectedOptions.every(
|
||||
@ -27,46 +85,16 @@ export function AddToCart({
|
||||
)
|
||||
);
|
||||
const selectedVariantId = variant?.id || defaultVariantId;
|
||||
const title = !availableForSale
|
||||
? 'Out of stock'
|
||||
: !selectedVariantId
|
||||
? 'Please select options'
|
||||
: undefined;
|
||||
const actionWithVariant = formAction.bind(null, selectedVariantId);
|
||||
|
||||
return (
|
||||
<button
|
||||
aria-label="Add item to cart"
|
||||
disabled={isPending || !availableForSale || !selectedVariantId}
|
||||
title={title}
|
||||
onClick={() => {
|
||||
// Safeguard in case someone messes with `disabled` in devtools.
|
||||
if (!availableForSale || !selectedVariantId) return;
|
||||
|
||||
startTransition(async () => {
|
||||
const error = await addItem(selectedVariantId);
|
||||
|
||||
if (error) {
|
||||
alert(error.message); // this is not a real error, this can be also out of stock message for the user
|
||||
|
||||
// Example to trigger the error boundary in the root error.js
|
||||
// throw new Error(error.toString());
|
||||
}
|
||||
|
||||
router.refresh();
|
||||
});
|
||||
}}
|
||||
className={clsx(
|
||||
'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 hover:opacity-60': !availableForSale || !selectedVariantId,
|
||||
'cursor-not-allowed': isPending
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div className="absolute left-0 ml-4">
|
||||
{!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
|
||||
<form action={actionWithVariant}>
|
||||
<SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
|
||||
<div className="flex items-center px-4 py-3 text-sm font-bold text-black">
|
||||
<p aria-live="polite" className="h-6" role="status">
|
||||
{message}
|
||||
</p>
|
||||
</div>
|
||||
<span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
@ -1,40 +1,35 @@
|
||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
import LoadingDots from 'components/loading-dots';
|
||||
import { useRouter } from 'next/navigation';
|
||||
'use client';
|
||||
|
||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
import { removeItem } from 'components/cart/actions';
|
||||
import LoadingDots from 'components/loading-dots';
|
||||
import type { CartItem } from 'lib/shopware/types';
|
||||
import { useTransition } from 'react';
|
||||
import {
|
||||
// @ts-ignore
|
||||
experimental_useFormState as useFormState,
|
||||
experimental_useFormStatus as useFormStatus
|
||||
} from 'react-dom';
|
||||
|
||||
export default function DeleteItemButton({ item }: { item: CartItem }) {
|
||||
const router = useRouter();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
function SubmitButton() {
|
||||
const { pending } = useFormStatus();
|
||||
|
||||
return (
|
||||
<button
|
||||
aria-label="Remove cart item"
|
||||
onClick={() => {
|
||||
startTransition(async () => {
|
||||
const error = await removeItem(item.id);
|
||||
|
||||
if (error) {
|
||||
// Trigger the error boundary in the root error.js
|
||||
throw new Error(error.toString());
|
||||
}
|
||||
|
||||
router.refresh();
|
||||
});
|
||||
type="submit"
|
||||
onClick={(e: React.FormEvent<HTMLButtonElement>) => {
|
||||
if (pending) e.preventDefault();
|
||||
}}
|
||||
disabled={isPending}
|
||||
aria-label="Remove cart item"
|
||||
aria-disabled={pending}
|
||||
className={clsx(
|
||||
'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200',
|
||||
{
|
||||
'cursor-not-allowed px-0': isPending
|
||||
'cursor-not-allowed px-0': pending
|
||||
}
|
||||
)}
|
||||
>
|
||||
{isPending ? (
|
||||
{pending ? (
|
||||
<LoadingDots className="bg-white" />
|
||||
) : (
|
||||
<XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
|
||||
@ -42,3 +37,18 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function DeleteItemButton({ item }: { item: CartItem }) {
|
||||
const [message, formAction] = useFormState(removeItem, null);
|
||||
const itemId = item.id;
|
||||
const actionWithVariant = formAction.bind(null, itemId);
|
||||
|
||||
return (
|
||||
<form action={actionWithVariant}>
|
||||
<SubmitButton />
|
||||
<p aria-live="polite" className="sr-only" role="status">
|
||||
{message}
|
||||
</p>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
@ -1,54 +1,34 @@
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useTransition } from 'react';
|
||||
|
||||
import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
import { removeItem, updateItemQuantity } from 'components/cart/actions';
|
||||
import { updateItemQuantity } from 'components/cart/actions';
|
||||
import LoadingDots from 'components/loading-dots';
|
||||
import type { CartItem } from 'lib/shopware/types';
|
||||
import {
|
||||
// @ts-ignore
|
||||
experimental_useFormState as useFormState,
|
||||
experimental_useFormStatus as useFormStatus
|
||||
} from 'react-dom';
|
||||
|
||||
export default function EditItemQuantityButton({
|
||||
item,
|
||||
type
|
||||
}: {
|
||||
item: CartItem;
|
||||
type: 'plus' | 'minus';
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
|
||||
const { pending } = useFormStatus();
|
||||
|
||||
return (
|
||||
<button
|
||||
aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
|
||||
onClick={() => {
|
||||
startTransition(async () => {
|
||||
const error =
|
||||
type === 'minus' && item.quantity - 1 === 0
|
||||
? await removeItem(item.id)
|
||||
: await updateItemQuantity({
|
||||
lineId: item.id,
|
||||
variantId: item.merchandise.id,
|
||||
quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
|
||||
});
|
||||
|
||||
if (error) {
|
||||
// Trigger the error boundary in the root error.js
|
||||
throw new Error(error.toString());
|
||||
}
|
||||
|
||||
router.refresh();
|
||||
});
|
||||
type="submit"
|
||||
onClick={(e: React.FormEvent<HTMLButtonElement>) => {
|
||||
if (pending) e.preventDefault();
|
||||
}}
|
||||
disabled={isPending}
|
||||
aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
|
||||
aria-disabled={pending}
|
||||
className={clsx(
|
||||
'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80',
|
||||
{
|
||||
'cursor-not-allowed': isPending,
|
||||
'cursor-not-allowed': pending,
|
||||
'ml-auto': type === 'minus'
|
||||
}
|
||||
)}
|
||||
>
|
||||
{isPending ? (
|
||||
{pending ? (
|
||||
<LoadingDots className="bg-black dark:bg-white" />
|
||||
) : type === 'plus' ? (
|
||||
<PlusIcon className="h-4 w-4 dark:text-neutral-500" />
|
||||
@ -58,3 +38,22 @@ export default function EditItemQuantityButton({
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function EditItemQuantityButton({ item, type }: { item: CartItem; type: 'plus' | 'minus' }) {
|
||||
const [message, formAction] = useFormState(updateItemQuantity, null);
|
||||
const payload = {
|
||||
lineId: item.id,
|
||||
variantId: item.merchandise.id,
|
||||
quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
|
||||
};
|
||||
const actionWithVariant = formAction.bind(null, payload);
|
||||
|
||||
return (
|
||||
<form action={actionWithVariant}>
|
||||
<SubmitButton type={type} />
|
||||
<p aria-live="polite" className="sr-only" role="status">
|
||||
{message}
|
||||
</p>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
@ -1,17 +1,11 @@
|
||||
import { fetchCart } from 'components/cart/actions';
|
||||
import { cookies } from 'next/headers';
|
||||
import { getCart } from 'components/cart/actions';
|
||||
import CartModal from './modal';
|
||||
import { transformCart } from 'lib/shopware/transform';
|
||||
|
||||
export default async function Cart() {
|
||||
let resCart;
|
||||
const cartId = cookies().get('sw-context-token')?.value;
|
||||
|
||||
if (cartId) {
|
||||
resCart = await fetchCart(cartId);
|
||||
}
|
||||
|
||||
let cart;
|
||||
const resCart = await getCart();
|
||||
|
||||
if (resCart) {
|
||||
cart = transformCart(resCart);
|
||||
}
|
||||
|
@ -11,8 +11,8 @@ import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { Fragment, useEffect, useRef, useState } from 'react';
|
||||
import CloseCart from './close-cart';
|
||||
import DeleteItemButton from './delete-item-button';
|
||||
import EditItemQuantityButton from './edit-item-quantity-button';
|
||||
import { DeleteItemButton } from './delete-item-button';
|
||||
import { EditItemQuantityButton } from './edit-item-quantity-button';
|
||||
import OpenCart from './open-cart';
|
||||
|
||||
type MerchandiseSearchParams = {
|
||||
|
@ -50,7 +50,7 @@ export default function Pagination({
|
||||
<li
|
||||
key={currentPage + '-prev'}
|
||||
onClick={() => handlePageClick(currentPage - 1)}
|
||||
className="m-2 rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2"
|
||||
className="m-2 cursor-pointer rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2"
|
||||
>
|
||||
<a
|
||||
className="ml-0 flex h-10 items-center justify-center px-4 leading-tight"
|
||||
@ -65,7 +65,7 @@ export default function Pagination({
|
||||
<li
|
||||
key={i}
|
||||
onClick={() => handlePageClick(i)}
|
||||
className={`m-2 rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2 [&.active]:bg-gray-100${
|
||||
className={`m-2 rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2 [&.active]:bg-gray-100 cursor-pointer${
|
||||
i === currentPage ? ' active ' : ''
|
||||
}`}
|
||||
>
|
||||
@ -85,7 +85,7 @@ export default function Pagination({
|
||||
<li
|
||||
key={currentPage + '-next'}
|
||||
onClick={() => handlePageClick(currentPage + 1)}
|
||||
className="m-2 rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2"
|
||||
className="m-2 cursor-pointer rounded-lg border border-gray-300 bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:m-0 sm:mx-2"
|
||||
>
|
||||
<a
|
||||
className="ml-0 flex h-10 items-center justify-center px-4 leading-tight"
|
||||
|
@ -27,6 +27,7 @@ export default function Search() {
|
||||
return (
|
||||
<form onSubmit={onSubmit} className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
|
||||
<input
|
||||
key={searchParams?.get('q')}
|
||||
type="text"
|
||||
name="search"
|
||||
placeholder="Search for products..."
|
||||
|
@ -19,7 +19,11 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
|
||||
return (
|
||||
<>
|
||||
<nav>
|
||||
{title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null}
|
||||
{title ? (
|
||||
<h3 className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">
|
||||
{title}
|
||||
</h3>
|
||||
) : null}
|
||||
<ul className="hidden md:block">
|
||||
<FilterItemList list={list} />
|
||||
</ul>
|
||||
|
@ -26,7 +26,7 @@ export function ProductDescription({ product }: { product: Product }) {
|
||||
|
||||
{product.descriptionHtml ? (
|
||||
<Prose
|
||||
className="m-6 max-h-96 overflow-y-auto text-sm leading-tight dark:text-white/[60%]"
|
||||
className="m-6 mt-3 max-h-96 overflow-y-auto text-sm leading-tight dark:text-white/[60%]"
|
||||
html={product.descriptionHtml}
|
||||
/>
|
||||
) : null}
|
||||
|
@ -22,8 +22,10 @@ export const sorting: SortFilterItem[] = [
|
||||
|
||||
export const TAGS = {
|
||||
collections: 'collections',
|
||||
products: 'products'
|
||||
products: 'products',
|
||||
cart: 'cart'
|
||||
};
|
||||
|
||||
// ToDo: Should work with visability from product data
|
||||
export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden';
|
||||
export const DEFAULT_OPTION = 'Default Title';
|
||||
|
@ -21,7 +21,7 @@
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.7.17",
|
||||
"@heroicons/react": "^2.0.18",
|
||||
"@shopware/api-client": "0.0.0-canary-20230904132316",
|
||||
"@shopware/api-client": "0.0.0-canary-20231024141318",
|
||||
"clsx": "^2.0.0",
|
||||
"next": "13.5.4",
|
||||
"react": "18.2.0",
|
||||
|
26
pnpm-lock.yaml
generated
26
pnpm-lock.yaml
generated
@ -12,8 +12,8 @@ dependencies:
|
||||
specifier: ^2.0.18
|
||||
version: 2.0.18(react@18.2.0)
|
||||
'@shopware/api-client':
|
||||
specifier: 0.0.0-canary-20230904132316
|
||||
version: 0.0.0-canary-20230904132316
|
||||
specifier: 0.0.0-canary-20231024141318
|
||||
version: 0.0.0-canary-20231024141318
|
||||
clsx:
|
||||
specifier: ^2.0.0
|
||||
version: 2.0.0
|
||||
@ -365,8 +365,8 @@ packages:
|
||||
resolution: {integrity: sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==}
|
||||
dev: true
|
||||
|
||||
/@shopware/api-client@0.0.0-canary-20230904132316:
|
||||
resolution: {integrity: sha512-vE3RSoYhGkgSLozRy93aVOyUjQPrqUMliyo7zdJULJfcOYrtA4sNRq5gEINWo2GoJLkSMDirl3ZYJR//DqswFw==}
|
||||
/@shopware/api-client@0.0.0-canary-20231024141318:
|
||||
resolution: {integrity: sha512-zZVIvp0flHkPNRd96Orxy6RIctgCBsEOpiZMknM26W96wZDr5mWLySzJa2q0qte3zgmUEBdtDKkQSZGCKEDzMA==}
|
||||
dependencies:
|
||||
ofetch: 1.3.3
|
||||
dev: false
|
||||
@ -1096,8 +1096,8 @@ packages:
|
||||
engines: {node: '>=6'}
|
||||
dev: true
|
||||
|
||||
/destr@2.0.1:
|
||||
resolution: {integrity: sha512-M1Ob1zPSIvlARiJUkKqvAZ3VAqQY6Jcuth/pBKQ2b1dX/Qx0OnJ8Vux6J2H5PTMQeRzWrrbTu70VxBfv/OPDJA==}
|
||||
/destr@2.0.2:
|
||||
resolution: {integrity: sha512-65AlobnZMiCET00KaFFjUefxDX0khFA/E4myqZ7a6Sq1yZtR8+FVIvilVX66vF2uobSumxooYZChiRPCKNqhmg==}
|
||||
dev: false
|
||||
|
||||
/detect-libc@2.0.2:
|
||||
@ -2582,8 +2582,8 @@ packages:
|
||||
resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==}
|
||||
dev: false
|
||||
|
||||
/node-fetch-native@1.4.0:
|
||||
resolution: {integrity: sha512-F5kfEj95kX8tkDhUCYdV8dg3/8Olx/94zB8+ZNthFs6Bz31UpUi8Xh40TN3thLwXgrwXry1pEg9lJ++tLWTcqA==}
|
||||
/node-fetch-native@1.4.1:
|
||||
resolution: {integrity: sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==}
|
||||
dev: false
|
||||
|
||||
/node-releases@2.0.13:
|
||||
@ -2716,9 +2716,9 @@ packages:
|
||||
/ofetch@1.3.3:
|
||||
resolution: {integrity: sha512-s1ZCMmQWXy4b5K/TW9i/DtiN8Ku+xCiHcjQ6/J/nDdssirrQNOoB165Zu8EqLMA2lln1JUth9a0aW9Ap2ctrUg==}
|
||||
dependencies:
|
||||
destr: 2.0.1
|
||||
node-fetch-native: 1.4.0
|
||||
ufo: 1.3.0
|
||||
destr: 2.0.2
|
||||
node-fetch-native: 1.4.1
|
||||
ufo: 1.3.1
|
||||
dev: false
|
||||
|
||||
/once@1.4.0:
|
||||
@ -3798,8 +3798,8 @@ packages:
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/ufo@1.3.0:
|
||||
resolution: {integrity: sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==}
|
||||
/ufo@1.3.1:
|
||||
resolution: {integrity: sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==}
|
||||
dev: false
|
||||
|
||||
/unbox-primitive@1.0.2:
|
||||
|
Loading…
x
Reference in New Issue
Block a user