product-list.tsx

import type {
  HydrogenComponentProps,
  HydrogenComponentSchema,
  ComponentLoaderArgs,
} from '@weaverse/hydrogen';
import {getPaginationVariables} from '@shopify/hydrogen';
import {forwardRef} from 'react';

import {ProductSwimlane} from '~/components';
import {COLLECTION_QUERY} from '~/data/queries';
import type {SortParam} from '~/components/SortFilter';
import {getSortValuesFromParam} from '~/routes/($locale).collections.$collectionHandle';
import {PAGINATION_SIZE} from '~/lib/const';

interface ProductListProps
  extends HydrogenComponentProps<Awaited<ReturnType<typeof loader>>> {
  heading: string;
  productsCount: number;
}

let ProductList = forwardRef<HTMLElement, ProductListProps>((props, ref) => {
  let {loaderData, heading, productsCount, ...rest} = props;
  let products = loaderData?.collection?.products;
  return (
    <section ref={ref} {...rest}>
      {products?.nodes?.length ? (
        <ProductSwimlane
          products={products}
          title={heading}
          count={productsCount}
        />
      ) : null}
    </section>
  );
});

export default ProductList;

export let loader = async ({weaverse, data}: ComponentLoaderArgs) => {
  let {language, country} = weaverse.storefront.i18n;
  let collectionHandle = data?.collection?.handle;

  const searchParams = new URL(weaverse.request.url).searchParams;

  const {sortKey, reverse} = getSortValuesFromParam(
    searchParams.get('sort') as SortParam,
  );
  const paginationVariables = getPaginationVariables(weaverse.request, {
    pageBy: PAGINATION_SIZE,
  });
  return await weaverse.storefront.query(COLLECTION_QUERY, {
    variables: {
      ...paginationVariables,
      handle: collectionHandle,
      country,
      language,
      sortKey,
      reverse,
      filters: [],
    },
  });
};

export let schema: HydrogenComponentSchema = {
  type: 'product-list',
  title: 'Product List',
  limit: 1,
  inspector: [
    {
      group: 'Product List',
      inputs: [
        {
          type: 'collection',
          name: 'collection',
          label: 'Collection',
        },
        {
          type: 'text',
          name: 'heading',
          label: 'Heading',
          defaultValue: 'Product List',
          placeholder: 'Product List',
        },
        {
          type: 'range',
          name: 'productsCount',
          label: 'Number of products',
          defaultValue: 4,
          configs: {
            min: 1,
            max: 12,
            step: 1,
          },
        },
      ],
    },
  ],
  toolbar: ['general-settings', ['duplicate', 'delete']],
};