feat(poc): carousel and improved sub-collections

2025-05-15 05:56:59 +00:00 · 2023-07-13 12:05:07 +02:00 · 2023-07-13 12:05:07 +02:00 · 8550185eae
commit 8550185eae
parent 8dcf6db08f
10 changed files with 239 additions and 127 deletions
--- a/app/search/(collection)/[...collection]/page.tsx
+++ b/app/search/(collection)/[...collection]/page.tsx
@ -3,6 +3,8 @@ import { Metadata } from 'next';
 import { notFound } from 'next/navigation';

 import Grid from 'components/grid';
+import Collections from 'components/layout/search/collections';
+import FilterList from 'components/layout/search/filter';
 import ProductGridItems from 'components/layout/product-grid-items';
 import Pagination from 'components/collection/pagination';
 import { defaultSort, sorting } from 'lib/constants';
@ -47,13 +49,21 @@ export default async function CategoryPage({
      {products.length === 0 ? (
        <p className="py-3 text-lg">{`No products found in this collection`}</p>
      ) : (
-        <div>
-          <Grid className="grid-cols-2 lg:grid-cols-3">
-            <ProductGridItems products={products} />
-          </Grid>
-          <nav aria-label="Collection pagination" className='block sm:flex items-center'>
-            <Pagination itemsPerPage={limit} itemsTotal={total} currentPage={page ? parseInt(page) - 1 : 0} />
-          </nav>
+        <div className='mx-auto flex max-w-7xl flex-col bg-white py-6 text-black dark:bg-black dark:text-white md:flex-row'>
+          <div className="order-first flex-none md:w-1/6">
+            <Collections collection={params.collection} />
+          </div>
+          <div className="order-last min-h-screen w-full md:order-none">
+            <Grid className="grid-cols-2 lg:grid-cols-3">
+              <ProductGridItems products={products} />
+            </Grid>
+            <nav aria-label="Collection pagination" className='block sm:flex items-center'>
+              <Pagination itemsPerPage={limit} itemsTotal={total} currentPage={page ? parseInt(page) - 1 : 0} />
+            </nav>
+          </div>
+          <div className="order-none md:order-last md:w-1/6 md:flex-none">
+            <FilterList list={sorting} title="Sort by" />
+          </div>
        </div>
      )}
    </section>
--- a/app/search/layout.tsx
+++ b/app/search/layout.tsx
@ -1,21 +1,11 @@
 import Footer from 'components/layout/footer';
-import Collections from 'components/layout/search/collections';
-import FilterList from 'components/layout/search/filter';
-import { sorting } from 'lib/constants';
 import { Suspense } from 'react';

+// @ToDo: We could use dynamic Layout per page, see https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#with-typescript
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
  return (
    <Suspense>
-      <div className="mx-auto flex max-w-7xl flex-col bg-white py-6 text-black dark:bg-black dark:text-white md:flex-row">
-        <div className="order-first flex-none md:w-1/6">
-          <Collections />
-        </div>
-        <div className="order-last min-h-screen w-full md:order-none">{children}</div>
-        <div className="order-none md:order-last md:w-1/6 md:flex-none">
-          <FilterList list={sorting} title="Sort by" />
-        </div>
-      </div>
+      {children}
      <Footer />
    </Suspense>
  );
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@ -1,5 +1,6 @@
 import Grid from 'components/grid';
 import ProductGridItems from 'components/layout/product-grid-items';
+import FilterList from 'components/layout/search/filter';
 import { defaultSort, sorting } from 'lib/constants';
 import { getSearchCollectionProducts } from 'lib/shopware';

@ -22,19 +23,32 @@ export default async function SearchPage({
  const resultsText = products.length > 1 ? 'results' : 'result';

  return (
-    <>
-      {searchValue ? (
+    <>{searchValue && products.length === 0 ? (
+      <div className='mx-auto flex max-w-7xl flex-col bg-white py-6 text-black dark:bg-black dark:text-white md:flex-row'>
        <p>
-          {products.length === 0
-            ? 'There are no products that match '
-            : `Showing ${products.length} ${resultsText} for `}
+          {'There are no products that match '}
          <span className="font-bold">&quot;{searchValue}&quot;</span>
        </p>
-      ) : null}
+      </div>
+    ) : null}
      {products.length > 0 ? (
-        <Grid className="grid-cols-2 lg:grid-cols-3">
-          <ProductGridItems products={products} />
-        </Grid>
+        <div className='mx-auto flex max-w-7xl flex-col bg-white py-6 text-black dark:bg-black dark:text-white md:flex-row'>
+          <div className="order-first flex-none md:w-1/6">
+            {searchValue ? (
+              <p>
+                {`Showing ${products.length} ${resultsText} for `}
+                <span className="font-bold">&quot;{searchValue}&quot;</span>
+              </p>
+            ) : null}
+            <p className='pt-4'>Good place to add other suggest search terms ;)</p>
+          </div>
+          <Grid className="grid-cols-2 lg:grid-cols-3">
+            <ProductGridItems products={products} />
+          </Grid>
+          <div className="order-none md:order-last md:w-1/6 md:flex-none">
+            <FilterList list={sorting} title="Sort by" />
+          </div>
+        </div>
      ) : null}
    </>
  );
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@ -3,39 +3,36 @@ import Image from 'next/image';
 import Link from 'next/link';

 export async function Carousel() {
-  // Collections that start with `hidden-*` are hidden from the search page.
-  // const products = await getCollectionProducts({ collection: 'hidden-homepage-carousel' });
+  const { products } = await getCollectionProducts({ collection: 'Summer-BBQ/Hidden-Carousel-Category' });

-  // if (!products?.length) return null;
+  if (!products?.length) return null;

-  return null;
-
-  // return (
-  //   <div className="relative w-full overflow-hidden bg-black dark:bg-white">
-  //     <div className="flex animate-carousel">
-  //       {[...products, ...products].map((product, i) => (
-  //         <Link
-  //           key={`${product.handle}${i}`}
-  //           href={`/product/${product.handle}`}
-  //           className="relative h-[30vh] w-1/2 flex-none md:w-1/3"
-  //         >
-  //           {product.featuredImage ? (
-  //             <Image
-  //               alt={product.title}
-  //               className="h-full object-contain"
-  //               fill
-  //               sizes="33vw"
-  //               src={product.featuredImage.url}
-  //             />
-  //           ) : null}
-  //           <div className="absolute inset-y-0 right-0 flex items-center justify-center">
-  //             <div className="inline-flex bg-white p-4 text-xl font-semibold text-black dark:bg-black dark:text-white">
-  //               {product.title}
-  //             </div>
-  //           </div>
-  //         </Link>
-  //       ))}
-  //     </div>
-  //   </div>
-  // );
+  return (
+    <div className="relative w-full overflow-hidden bg-white dark:bg-black">
+      <div className="flex animate-carousel">
+        {[...products, ...products].map((product, i) => (
+          <Link
+            key={`${product.path}${i}`}
+            href={`/product/${product.path}`}
+            className="relative h-[30vh] w-1/2 flex-none md:w-1/3"
+          >
+            {product.featuredImage ? (
+              <Image
+                alt={product.title}
+                className="h-full object-contain"
+                fill
+                sizes="33vw"
+                src={product.featuredImage.url}
+              />
+            ) : null}
+            <div className="absolute inset-y-0 right-0 flex items-center justify-center">
+              <div className="inline-flex bg-white p-4 text-xl font-semibold text-black dark:bg-black dark:text-white">
+                {product.title}
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
 }
--- a/components/collection/pagination.tsx
+++ b/components/collection/pagination.tsx
@ -1,10 +1,18 @@
-'use client'
+'use client';

 import ReactPaginate from 'react-paginate';
 import { createUrl } from 'lib/utils';
 import { usePathname, useSearchParams, useRouter } from 'next/navigation';

-export default function Pagination({ itemsPerPage, itemsTotal, currentPage }: { itemsPerPage: number, itemsTotal: number, currentPage: number }) {
+export default function Pagination({
+  itemsPerPage,
+  itemsTotal,
+  currentPage
+}: {
+  itemsPerPage: number;
+  itemsTotal: number;
+  currentPage: number;
+}) {
  const router = useRouter();
  const pathname = usePathname();
  const currentParams = useSearchParams();
@ -12,20 +20,26 @@ export default function Pagination({ itemsPerPage, itemsTotal, currentPage }: {
  const sort = currentParams.get('sort');
  const pageCount = Math.ceil(itemsTotal / itemsPerPage);

-  // Invoke when user click to request another page. test
+  // Invoke when user click to request another page.
  const handlePageClick = (event: clickEvent) => {
    const page = event.selected;
    const newPage = page + 1;
-    let newUrl = createUrl(pathname, new URLSearchParams({
-      ...(q && { q }),
-      ...(sort && { sort }),
-    }));
-    if (page !== 0) {
-      newUrl = createUrl(pathname, new URLSearchParams({
+    let newUrl = createUrl(
+      pathname,
+      new URLSearchParams({
        ...(q && { q }),
-        ...(sort && { sort }),
-        page: newPage.toString(),
-      }));
+        ...(sort && { sort })
+      })
+    );
+    if (page !== 0) {
+      newUrl = createUrl(
+        pathname,
+        new URLSearchParams({
+          ...(q && { q }),
+          ...(sort && { sort }),
+          page: newPage.toString()
+        })
+      );
    }
    router.replace(newUrl);
  };
@ -65,4 +79,4 @@ type clickEvent = {
  isNext: boolean;
  isBreak: boolean;
  isActive: boolean;
-}
+};
--- a/components/layout/search/collections.tsx
+++ b/components/layout/search/collections.tsx
@ -1,15 +1,15 @@
 import clsx from 'clsx';
 import { Suspense } from 'react';

-import { getStaticCollections } from 'lib/shopware';
+import { getSubCollections } from 'lib/shopware';
 import FilterList from './filter';
-import { transformStaticCollectionToList } from 'lib/shopware/transform';
+import { transformCollectionToList } from 'lib/shopware/transform';

-async function CollectionList() {
-  const collections = await getStaticCollections();
+async function CollectionList({ collection }: { collection: string }) {
+  const collections = await getSubCollections(collection);
  if (collections) {
-    const list = transformStaticCollectionToList(collections);
-    return <FilterList list={list} title="Collections" />;
+    const list = transformCollectionToList(collections);
+    if (list.length > 0) return <FilterList list={list} title="Sub-Collections" />;
  }
 }

@ -17,7 +17,7 @@ const skeleton = 'mb-3 h-4 w-5/6 animate-pulse rounded';
 const activeAndTitles = 'bg-gray-800 dark:bg-gray-300';
 const items = 'bg-gray-400 dark:bg-gray-700';

-export default function Collections() {
+export default function Collections({ collection }: { collection: string }) {
  return (
    <Suspense
      fallback={
@ -35,7 +35,7 @@ export default function Collections() {
        </div>
      }
    >
-      <CollectionList />
+      <CollectionList collection={collection} />
    </Suspense>
  );
 }
--- a/lib/shopware/criteria.ts
+++ b/lib/shopware/criteria.ts
@ -165,7 +165,7 @@ export function getStaticCollectionCriteria(page: number = 1, limit: number = 20
 export function getDefaultSubCategoriesCriteria(
  categoryId: string,
  page: number = 1,
-  limit: number = 10
+  limit: number = 1
 ) {
  return {
    page: page,
--- a/lib/shopware/index.ts
+++ b/lib/shopware/index.ts
@ -1,4 +1,3 @@
-import { Cart } from 'lib/shopify/types';
 import {
  requestCart,
  requestCategory,
@ -19,8 +18,8 @@ import {
  getDefaultProductCriteria,
  getDefaultProductsCriteria,
  getDefaultSearchProductsCriteria,
-  getSortingCriteria,
-  getStaticCollectionCriteria
+  getDefaultSubCategoriesCriteria,
+  getSortingCriteria
 } from './criteria';
 import {
  transformCollection,
@ -29,10 +28,12 @@ import {
  transformPage,
  transformProduct,
  transformProducts,
-  transformStaticCollection
+  transformSubCollection
 } from './transform';
 import {
  ApiSchemas,
+  Cart,
+  CategoryListingResultSW,
  Menu,
  Page,
  Product,
@ -55,9 +56,17 @@ export async function getPage(handle: string | []): Promise<Page | undefined> {
  const pageHandle = transformHandle(handle).replace('cms/', '');
  const seoUrlElement = await getFirstSeoUrlElement(pageHandle);
  if (seoUrlElement) {
-    const resCategory = await getCategory(seoUrlElement);
+    const category = await getCategory(seoUrlElement);

-    return resCategory ? transformPage(seoUrlElement, resCategory) : undefined;
+    if (!category) {
+      console.log('[getPage] Did not found any category with page handle:', pageHandle);
+    }
+
+    return category ? transformPage(seoUrlElement, category) : undefined;
+  }
+
+  if (!seoUrlElement) {
+    console.log('[getPage] Did not found any seoUrl element with page handle:', pageHandle);
  }
 }

@ -79,12 +88,19 @@ export async function getFirstProduct(productId: string): Promise<ExtendedProduc
 }

 // ToDo: should be more dynamic (depending on handle), should work with server and not client see generateStaticParams from next.js
-export async function getStaticCollections() {
-  // @ToDo: This is an example about multi-filter with new store API client
-  // @ts-ignore
-  const resCategory = await requestCategoryList(getStaticCollectionCriteria());
+export async function getSubCollections(collection: string) {
+  let res: CategoryListingResultSW | undefined = undefined;
+  const parentCollectionName =
+    Array.isArray(collection) && collection[0] ? collection[0] : undefined;
+  const collectionName = transformHandle(collection ?? '');
+  const seoUrlElement = await getFirstSeoUrlElement(collectionName);
+  if (seoUrlElement) {
+    const criteria = getDefaultSubCategoriesCriteria(seoUrlElement.foreignKey);
+    // @ts-ignore
+    res = await requestCategoryList(criteria);
+  }

-  return resCategory ? transformStaticCollection(resCategory) : [];
+  return res ? transformSubCollection(res, parentCollectionName) : [];
 }

 export async function getSearchCollectionProducts(params?: {
@ -220,6 +236,7 @@ export async function getProductRecommendations(productId: string): Promise<Prod
 export async function getCart(): Promise<Cart> {
  const cartData = await requestCart();

+  // @ToDo: should be moved to transformCart function
  let cart: Cart = {
    checkoutUrl: 'https://frontends-demo.vercel.app',
    cost: {
@ -240,33 +257,44 @@ export async function getCart(): Promise<Cart> {
    lines:
      cartData.lineItems?.map((lineItem) => ({
        id: lineItem.id || '',
-        quantity: lineItem.quantity,
+        quantity: lineItem.quantity ?? 0,
        cost: {
          totalAmount: {
-            amount: (lineItem as any)?.price?.totalPrice || ''
+            amount: (lineItem as any)?.price?.totalPrice || '',
+            currencyCode: 'EUR'
          }
        },
        merchandise: {
-          id: lineItem.referencedId,
-          title: lineItem.label,
+          id: lineItem.referencedId ?? '',
+          title: lineItem.label ?? '',
          selectedOptions: [],
          product: {
-            description: lineItem.description,
-            descriptionHtml: lineItem.description,
-            id: lineItem.referencedId,
+            description: lineItem.description ?? '',
+            descriptionHtml: lineItem.description ?? '',
+            id: lineItem.referencedId ?? '',
            images: [],
+            path: '',
            seo: {
-              description: lineItem.description,
-              title: lineItem.label
+              description: lineItem.description ?? '',
+              title: lineItem.label ?? ''
            },
            availableForSale: true,
            featuredImage: (lineItem as any).cover?.url,
            handle: '',
            options: [],
            variants: [],
-            priceRange: {},
+            priceRange: {
+              minVariantPrice: {
+                amount: '', // @ToDo: should be correct value
+                currencyCode: 'EUR'
+              },
+              maxVariantPrice: {
+                amount: '', // @ToDo: should be correct value
+                currencyCode: 'EUR'
+              }
+            },
            tags: [],
-            title: lineItem.label,
+            title: lineItem.label ?? '',
            updatedAt: (lineItem as any)?.payload?.updatedAt
          }
        }
--- a/lib/shopware/transform.ts
+++ b/lib/shopware/transform.ts
@ -104,40 +104,69 @@ export function transformCollection(
  };
 }

-export function transformStaticCollection(resCategory: CategoryListingResultSW): Collection[] {
+export function transformSubCollection(
+  category: CategoryListingResultSW,
+  parentCollectionName?: string
+): Collection[] {
  const collection: Collection[] = [];

-  if (resCategory.elements && resCategory.elements.length > 0) {
-    resCategory.elements.map((item) =>
-      collection.push({
-        handle:
-          item.seoUrls && item.seoUrls.length > 0 && item.seoUrls[0] && item.seoUrls[0].seoPathInfo
-            ? item.seoUrls[0].seoPathInfo
-            : '',
-        title: item.translated?.metaTitle ?? item.name ?? '',
-        description: item.description ?? '',
-        seo: {
-          title: item.translated?.metaTitle ?? item.name ?? '',
-          description: item.translated?.metaDescription ?? item.description ?? ''
-        },
-        updatedAt: item.updatedAt ?? item.createdAt ?? ''
-      })
-    );
+  if (category.elements && category.elements[0] && category.elements[0].children) {
+    // we do not support type links at the moment and show only visible categories
+    category.elements[0].children
+      .filter((item) => item.visible)
+      .filter((item) => item.type !== 'link')
+      .map((item) => {
+        const handle = item.seoUrls ? findHandle(item.seoUrls, parentCollectionName) : undefined;
+        if (handle) {
+          collection.push({
+            handle: handle,
+            title: item.translated?.metaTitle ?? item.name ?? '',
+            description: item.description ?? '',
+            seo: {
+              title: item.translated?.metaTitle ?? item.name ?? '',
+              description: item.translated?.metaDescription ?? item.description ?? ''
+            },
+            childCount: item.childCount ?? 0,
+            updatedAt: item.updatedAt ?? item.createdAt ?? ''
+          });
+        }
+      });
  }

  return collection;
 }

-export function transformStaticCollectionToList(collection: Collection[]): ListItem[] {
+// small function to find longest handle and to make sure parent collection name is in the path
+function findHandle(seoUrls: ApiSchemas['SeoUrl'][], parentCollectionName?: string): string {
+  let handle: string = '';
+  seoUrls.map((item) => {
+    if (
+      !item.isDeleted &&
+      item.isCanonical &&
+      item.seoPathInfo &&
+      item.seoPathInfo.length > handle.length &&
+      item.seoPathInfo.includes(parentCollectionName ?? '')
+    ) {
+      handle = item.seoPathInfo;
+    }
+  });
+
+  return handle;
+}
+
+export function transformCollectionToList(collection: Collection[]): ListItem[] {
  const listItem: ListItem[] = [];

  if (collection && collection.length > 0) {
-    collection.map((item) =>
+    collection.map((item) => {
+      // we asume that when there is not product child count it must be a cms page
+      const pagePrefix = item.childCount === 0 ? '/cms' : '/search';
+      const newHandle = item.handle.replace('Main-navigation/', '');
      listItem.push({
        title: item.title,
-        path: `/search/${item.handle}`
-      })
-    );
+        path: `${pagePrefix}/${newHandle}`
+      });
+    });
  }

  return listItem;
--- a/lib/shopware/types.ts
+++ b/lib/shopware/types.ts
@ -96,5 +96,35 @@ export type Collection = {
  title: string;
  description: string;
  seo: SEO;
+  childCount: number;
  updatedAt: string;
 };
+
+export type Cart = {
+  id: string;
+  checkoutUrl: string;
+  cost: {
+    subtotalAmount: Money;
+    totalAmount: Money;
+    totalTaxAmount: Money;
+  };
+  lines: CartItem[];
+  totalQuantity: number;
+};
+
+export type CartItem = {
+  id: string;
+  quantity: number;
+  cost: {
+    totalAmount: Money;
+  };
+  merchandise: {
+    id: string;
+    title: string;
+    selectedOptions: {
+      name: string;
+      value: string;
+    }[];
+    product: Product;
+  };
+};