Skip to content

Commit

Permalink
Product list nudges (saleor#938)
Browse files Browse the repository at this point in the history
Co-authored-by: Michal Miszczyszyn <[email protected]>
  • Loading branch information
timuric and typeofweb authored Oct 13, 2023
1 parent 509f85a commit b91d229
Show file tree
Hide file tree
Showing 7 changed files with 11 additions and 19 deletions.
13 changes: 3 additions & 10 deletions src/app/(main)/categories/[slug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,9 @@ export default async function Page({ params }: { params: { slug: string } }) {
const { name, products } = category;

return (
<div>
<div>
<div className="mx-auto max-w-7xl p-8">
<h1 className="text-xl font-semibold">{name}</h1>
</div>
</div>
<section className="sm:py-18 mx-auto max-w-2xl px-8 sm:px-6 lg:max-w-7xl">
<h2 className="sr-only">Products in category {category.name}</h2>
<ProductsList products={products.edges.map((e) => e.node)} />
</section>
<div className="mx-auto max-w-7xl p-8 pb-16">
<h1 className="pb-8 text-xl font-semibold">{name}</h1>
<ProductsList products={products.edges.map((e) => e.node)} />
</div>
);
}
3 changes: 1 addition & 2 deletions src/app/(main)/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,7 @@ export default async function Page() {

return (
<div>
<h1 className="sr-only">Saleor Storefront example</h1>
<section className="mx-auto max-w-7xl p-8">
<section className="mx-auto max-w-7xl p-8 pb-16">
<h2 className="sr-only">Product list</h2>
<ProductsList products={products} />
</section>
Expand Down
2 changes: 1 addition & 1 deletion src/app/(main)/products/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default async function Page({ searchParams }: Props) {

return (
<div>
<section className="mx-auto max-w-7xl p-8">
<section className="mx-auto max-w-7xl p-8 pb-16">
<h2 className="sr-only">Product list</h2>
<ProductsList products={products.edges.map((e) => e.node)} />
<Pagination pageInfo={products.pageInfo} />
Expand Down
2 changes: 1 addition & 1 deletion src/ui/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const footer = {
};
export function Footer() {
return (
<footer className="border-t border-neutral-300 bg-neutral-50">
<footer className="border-neutral-300 bg-neutral-50">
<div className="mx-auto max-w-7xl px-4 lg:px-8">
<div className="grid grid-cols-3 gap-8 py-16">
<h2 className="sr-only">Quick links</h2>
Expand Down
2 changes: 1 addition & 1 deletion src/ui/components/Nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export async function Nav() {
const lineCount = checkout ? checkout.lines.reduce((result, line) => result + line.quantity, 0) : 0;

return (
<div className="sticky top-0 z-20 border-b bg-neutral-100/50 backdrop-blur-md">
<div className="sticky top-0 z-20 bg-neutral-100/50 backdrop-blur-md">
<div className="mx-auto max-w-7xl px-2 sm:px-8">
<div className="flex h-16 justify-between gap-4 md:gap-8">
<div className="flex items-center font-bold">
Expand Down
2 changes: 1 addition & 1 deletion src/ui/components/Pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export async function Pagination({
};
}) {
return (
<nav className="flex items-center justify-center gap-x-4 border-neutral-200 px-4">
<nav className="flex items-center justify-center gap-x-4 border-neutral-200 px-4 pt-12">
<Link
href={pageInfo.hasNextPage ? `/products?cursor=${pageInfo.endCursor}` : "#"}
className={clsx("px-4 py-2 text-sm font-medium ", {
Expand Down
6 changes: 3 additions & 3 deletions src/ui/components/ProductElement.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,10 @@ export function ProductElement({
)}
<div className="mt-2 flex justify-between">
<div>
<h3 className="text-sm font-semibold text-neutral-700">{product.name}</h3>
<p className="text-sm text-neutral-500">{product?.category?.name}</p>
<h3 className="mt-1 text-sm font-semibold text-neutral-900">{product.name}</h3>
<p className="mt-1 text-sm text-neutral-400">{product?.category?.name}</p>
</div>
<p className="text-sm font-medium text-neutral-900">
<p className="mt-1 text-sm font-medium text-neutral-900">
{formatMoneyRange({
start: product?.pricing?.priceRange?.start?.gross,
stop: product?.pricing?.priceRange?.stop?.gross,
Expand Down

0 comments on commit b91d229

Please sign in to comment.