@akinon/projectzero 2.0.0-beta.19 → 2.0.0-beta.20

package/app-template/src/views/category/filters/index.tsx

@@ -1,27 +1,56 @@
 'use client';
 
 import clsx from 'clsx';
-import { Button, Icon } from '@theme/components';
-import { useLocalization } from '@akinon/next/hooks';
+import { Button, Icon, Select } from '@theme/components';
+import { useRouter, useLocalization } from '@akinon/next/hooks';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { resetSelectedFacets } from '@theme/redux/reducers/category';
 import CategoryActiveFilters from '@theme/views/category/category-active-filters';
-import { useMemo, useTransition } from 'react';
+import { useMemo, useTransition, useState, CSSProperties } from 'react';
 import { FilterItem } from './filter-item';
+import { SortOption } from '@akinon/next/types';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useProductList } from '../product-list-registrar';
+import { useNativeWidget } from '../native-widget-context';
 
 interface Props {
   isMenuOpen: boolean;
   setIsMenuOpen: (isMenuOpen: boolean) => void;
+  totalCount?: number;
+  sortOptions: SortOption[];
 }
 
 export const Filters = (props: Props) => {
   const facets = useAppSelector((state) => state.category.facets);
   const dispatch = useAppDispatch();
   const { t } = useLocalization();
-  const { isMenuOpen, setIsMenuOpen } = props;
+  const { isMenuOpen, setIsMenuOpen, totalCount, sortOptions } = props;
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
 
   const [isPending, startTransition] = useTransition();
 
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  // Get styles and properties from both contexts
+  const {
+    isDesigner,
+    filterStyles: registrarStyles,
+    filterProperties: registrarProps
+  } = useProductList();
+  const { filterStyles: widgetStyles, filterProperties: widgetProps } =
+    useNativeWidget();
+
+  // Use registrar data in designer mode, widget data otherwise
+  const filterStyles = isDesigner ? registrarStyles : widgetStyles;
+
+  // Merge properties - registrar props override widget props for live updates
+  const filterProperties = {
+    ...widgetProps,
+    ...registrarProps
+  };
+
   const haveFilter = useMemo(() => {
     return facets?.some((facet) =>
       facet?.data?.choices?.some((choice) => choice.is_selected)
@@ -32,50 +61,181 @@ export const Filters = (props: Props) => {
     dispatch(resetSelectedFacets());
   };
 
-  return (
-    <div
-      className={clsx(
-        'w-9/10 fixed left-0 top-0 bottom-0 bg-white z-20 p-6 transition-all ease-in duration-300 lg:static lg:block lg:mr-16 lg:text-sm lg:p-0 lg:pt-4',
-        isMenuOpen
-          ? 'flex flex-col opacity-100 overflow-auto'
-          : 'opacity-0 invisible absolute -translate-x-full lg:opacity-100 lg:visible lg:translate-x-0'
-      )}
-    >
-      <div className="flex justify-between mb-6 lg:hidden">
-        <h3 className="text-2xl">{t('category.filters.title')}</h3>
-        <Icon name="close" size={22} onClick={() => setIsMenuOpen(false)} />
-      </div>
-      <div className="flex justify-between items-center mb-6 lg:hidden">
-        <span className="text-sm">1 {t('category.filters.results')}</span>
-        <span>{t('category.filters.ready_to_wear')}</span>
-      </div>
-
-      {facets?.map((facet) => {
-        return (
-          <FilterItem
-            key={facet.key}
-            facet={facet}
-            isPending={isPending}
-            startTransition={startTransition}
+  const handleSelectFilter = ({
+    key,
+    value
+  }: {
+    key: string;
+    value: string;
+  }) => {
+    const urlSearchParams = new URLSearchParams(searchParams.toString());
+
+    urlSearchParams.set(key, value);
+
+    router.push(pathname + '?' + urlSearchParams.toString());
+  };
+
+  // Get layout from properties
+  const layout = (filterProperties.layout as string) || 'top';
+  const containerStyles = filterStyles as CSSProperties;
+
+  // Parse item properties (they come as strings like '14px' from Theme Editor)
+  const itemPaddingY =
+    typeof filterProperties['item-padding-y'] === 'number'
+      ? filterProperties['item-padding-y']
+      : typeof filterProperties['item-padding-y'] === 'string'
+      ? parseInt(filterProperties['item-padding-y'], 10)
+      : 6;
+  const itemPaddingX =
+    typeof filterProperties['item-padding-x'] === 'number'
+      ? filterProperties['item-padding-x']
+      : typeof filterProperties['item-padding-x'] === 'string'
+      ? parseInt(filterProperties['item-padding-x'], 10)
+      : 0;
+  const itemMarginBottom =
+    typeof filterProperties['item-margin-bottom'] === 'number'
+      ? filterProperties['item-margin-bottom']
+      : typeof filterProperties['item-margin-bottom'] === 'string'
+      ? parseInt(filterProperties['item-margin-bottom'], 10)
+      : 0;
+
+  // Sidebar layout (desktop + mobile)
+  if (layout === 'sidebar') {
+    return (
+      <>
+        {/* Mobile overlay backdrop */}
+        {isMenuOpen && (
+          <div
+            className="fixed inset-0 bg-black/80 z-40 lg:hidden transition-opacity duration-300"
+            onClick={() => setIsMenuOpen(false)}
           />
-        );
-      })}
-
-      <div className="lg:hidden">
-        <CategoryActiveFilters />
-      </div>
-
-      {haveFilter && (
-        <div className="lg:hidden">
-          <Button
-            onClick={handleResetFilter}
-            appearance="outlined"
-            className="w-full mt-4 lg:hidden"
-          >
-            {t('category.filters.clear_all')}
-          </Button>
+        )}
+
+        {/* Mobile slide-in menu */}
+        <div
+          className={clsx(
+            'w-11/12 fixed left-0 top-0 bottom-0 bg-white z-50 transition-all ease-in duration-300 lg:hidden',
+            isMenuOpen
+              ? 'flex flex-col opacity-100 overflow-auto'
+              : 'opacity-0 invisible absolute -translate-x-full'
+          )}
+          style={containerStyles}
+          data-section-id="filters-section"
+        >
+          <div className="relative flex items-center justify-center mb-6 border-b border-black-650 pt-2 pb-3">
+            <div className="flex flex-col items-center text-center gap-1 text-black-750">
+              <h3 className="text-sm">{t('category.filters.mobile_title')}</h3>
+              <span className="text-[10px]">
+                {totalCount} {t('category.header.results')}
+              </span>
+            </div>
+            <Button
+              type="button"
+              appearance="ghost"
+              aria-label="Close Filter Menu"
+              onClick={() => setIsMenuOpen(false)}
+              className="absolute right-4 p-0 text-black bg-transparent hover:bg-transparent hover:text-black"
+            >
+              <Icon name="close" size={16} />
+            </Button>
+          </div>
+
+          <div className="px-4">
+            {facets?.map((facet) => {
+              return (
+                <FilterItem
+                  key={facet.key}
+                  facet={facet}
+                  isPending={isPending}
+                  startTransition={startTransition}
+                  itemPaddingY={itemPaddingY}
+                  itemPaddingX={itemPaddingX}
+                  itemMarginBottom={itemMarginBottom}
+                />
+              );
+            })}
+          </div>
+
+          <div className="px-4 flex items-center justify-between text-black-750 text-sm">
+            {t('category.header.sort_by')}:
+            <Select
+              options={sortOptions}
+              value={sortOptions?.find(({ is_selected }) => is_selected)?.value}
+              data-testid="list-sorter"
+              className="border-0 text-black-750 text-sm"
+              onChange={(e) => {
+                handleSelectFilter({
+                  key: 'sorter',
+                  value: e.currentTarget.value
+                });
+              }}
+              borderless={false}
+            />
+          </div>
+
+          <div className="p-8">
+            <CategoryActiveFilters />
+          </div>
+
+          {haveFilter && (
+            <div className="px-4">
+              <Button
+                onClick={handleResetFilter}
+                appearance="filled"
+                className="w-full mt-4"
+                data-section-id="filters-section"
+              >
+                {t('category.filters.clear_all')}
+              </Button>
+            </div>
+          )}
         </div>
-      )}
-    </div>
-  );
+
+        {/* Desktop sidebar */}
+        <aside
+          className="hidden lg:block lg:col-span-1"
+          style={containerStyles}
+          data-section-id="filters-section"
+        >
+          <div className="sticky top-24">
+            <h3 className="text-lg font-medium mb-4">
+              {t('category.filters.title')}
+            </h3>
+
+            <div>
+              {facets?.map((facet) => {
+                return (
+                  <FilterItem
+                    key={facet.key}
+                    facet={facet}
+                    isPending={isPending}
+                    startTransition={startTransition}
+                    itemPaddingY={itemPaddingY}
+                    itemPaddingX={itemPaddingX}
+                    itemMarginBottom={itemMarginBottom}
+                  />
+                );
+              })}
+            </div>
+
+            {haveFilter && (
+              <div className="mt-6">
+                <Button
+                  onClick={handleResetFilter}
+                  appearance="outlined"
+                  className="w-full"
+                  data-section-id="filters-section"
+                >
+                  {t('category.filters.clear_all')}
+                </Button>
+              </div>
+            )}
+          </div>
+        </aside>
+      </>
+    );
+  }
+
+  // Top layout - return null, handled in category-header
+  return null;
 };

package/app-template/src/views/category/layout.tsx

@@ -1,8 +1,10 @@
 import clsx from 'clsx';
 import { BreadcrumbResultType, GetCategoryResponse } from '@akinon/next/types';
+import ThemePlaceholder from '@akinon/next/components/theme-editor/theme-placeholder';
 import Breadcrumb from '@theme/views/breadcrumb';
 import { CategoryBanner } from '@theme/views/category/category-banner';
 import ListPage from '@theme/views/category/category-info';
+import ProductListRegistrar from '@theme/views/category/product-list-registrar';
 
 export default async function Layout({
   data,
@@ -14,7 +16,8 @@ export default async function Layout({
   breadcrumbData?: BreadcrumbResultType[];
 }) {
   return (
-    <>
+    <ProductListRegistrar>
+      <ThemePlaceholder slug="list-page-body-new" />
       <div
         className={clsx(
           data?.category?.attributes?.category_banner
@@ -25,16 +28,16 @@ export default async function Layout({
         {children}
         <div
           className={clsx(
-            'my-4 lg:mt-7',
+            'my-10 lg:my-16',
             data?.category?.attributes?.category_banner &&
               'lg:absolute lg:inset-x-0 z-10 container lg:my-4 mx-auto'
           )}
         >
           <Breadcrumb breadcrumbList={breadcrumbData} />
         </div>
-        <CategoryBanner {...data?.category?.attributes?.category_banner} />
+        <CategoryBanner {...data?.category?.attributes?.banner} />
       </div>
       <ListPage data={data} />
-    </>
+    </ProductListRegistrar>
   );
 }

package/app-template/src/views/category/native-widget-context.tsx

@@ -0,0 +1,257 @@
+'use client';
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  PropsWithChildren
+} from 'react';
+import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+
+// Constants
+export const PLACEHOLDER_ID = 'product-list-page';
+export const FILTERS_SECTION_ID = 'filters-section';
+export const PRODUCTS_SECTION_ID = 'products-section';
+export const PRODUCT_ITEM_SECTION_ID = 'product-item-section';
+export const PAGINATION_SECTION_ID = 'pagination-section';
+export const WIDGET_SLUG = 'product-list-page-styles';
+
+interface NativeWidgetContextValue {
+  filterStyles: Record<string, unknown>;
+  filterProperties: Record<string, unknown>;
+  productsProperties: Record<string, unknown>;
+  productsStyles: Record<string, unknown>;
+  productItemProperties: Record<string, unknown>;
+  productItemStyles: Record<string, unknown>;
+  paginationProperties: Record<string, unknown>;
+  paginationStyles: Record<string, unknown>;
+}
+
+const NativeWidgetContext = createContext<NativeWidgetContextValue>({
+  filterStyles: {},
+  filterProperties: {
+    layout: 'top',
+    'item-padding-y': 6,
+    'item-padding-x': 0,
+    'item-margin-bottom': 0
+  },
+  productsProperties: {
+    'show-layout-buttons': true,
+    'available-layouts': ['2', '3', '4']
+  },
+  productsStyles: {},
+  productItemProperties: {
+    'show-fav-button': true,
+    'fav-button-position': 'top-right'
+  },
+  productItemStyles: {},
+  paginationProperties: {
+    type: 'list'
+  },
+  paginationStyles: {}
+});
+
+export function NativeWidgetProvider({ children }: PropsWithChildren) {
+  const [filterStyles, setFilterStyles] = useState<Record<string, unknown>>({});
+  const [filterProperties, setFilterProperties] = useState<
+    Record<string, unknown>
+  >({
+    layout: 'top',
+    'item-padding-y': 6,
+    'item-padding-x': 0,
+    'item-margin-bottom': 0
+  });
+  const [productsProperties, setProductsProperties] = useState<
+    Record<string, unknown>
+  >({
+    'show-layout-buttons': true,
+    'available-layouts': ['2', '3', '4']
+  });
+  const [productsStyles, setProductsStyles] = useState<Record<string, unknown>>(
+    {}
+  );
+  const [productItemProperties, setProductItemProperties] = useState<
+    Record<string, unknown>
+  >({
+    'show-fav-button': true,
+    'fav-button-position': 'top-right'
+  });
+  const [productItemStyles, setProductItemStyles] = useState<
+    Record<string, unknown>
+  >({});
+  const [paginationProperties, setPaginationProperties] = useState<
+    Record<string, unknown>
+  >({
+    type: 'list'
+  });
+  const [paginationStyles, setPaginationStyles] = useState<
+    Record<string, unknown>
+  >({});
+
+  // Fetch styles from widget
+  const { data: widgetData } = useGetWidgetQuery(WIDGET_SLUG);
+
+  // Load styles from widget (initial load)
+  useEffect(() => {
+    if (!widgetData) return;
+
+    const attributes = widgetData.attributes || {};
+
+    // Load filters section
+    const filtersData = attributes[FILTERS_SECTION_ID];
+    if (filtersData) {
+      let parsedData: unknown;
+      if (typeof filtersData === 'string') {
+        try {
+          parsedData = JSON.parse(filtersData);
+        } catch {
+          // ignore
+        }
+      } else if (typeof filtersData === 'object' && 'value' in filtersData) {
+        try {
+          parsedData = JSON.parse((filtersData as { value: string }).value);
+        } catch {
+          // ignore
+        }
+      } else {
+        parsedData = filtersData;
+      }
+
+      if (parsedData && typeof parsedData === 'object') {
+        const data = parsedData as Record<string, unknown>;
+        setFilterStyles((data.styles as Record<string, string>) || {});
+        setFilterProperties(
+          (data.properties as Record<string, unknown>) || {
+            layout: 'top',
+            'item-padding-y': 6,
+            'item-padding-x': 0,
+            'item-margin-bottom': 0
+          }
+        );
+      }
+    }
+
+    // Load products section
+    const productsData = attributes[PRODUCTS_SECTION_ID];
+    if (productsData) {
+      let parsedData: unknown;
+      if (typeof productsData === 'string') {
+        try {
+          parsedData = JSON.parse(productsData);
+        } catch {
+          // ignore
+        }
+      } else if (typeof productsData === 'object' && 'value' in productsData) {
+        try {
+          parsedData = JSON.parse((productsData as { value: string }).value);
+        } catch {
+          // ignore
+        }
+      } else {
+        parsedData = productsData;
+      }
+
+      if (parsedData && typeof parsedData === 'object') {
+        const data = parsedData as Record<string, unknown>;
+        setProductsStyles((data.styles as Record<string, string>) || {});
+        setProductsProperties(
+          (data.properties as Record<string, unknown>) || {
+            'show-layout-buttons': true,
+            'available-layouts': ['2', '3', '4']
+          }
+        );
+      }
+    }
+
+    // Load product-item section
+    const productItemData = attributes[PRODUCT_ITEM_SECTION_ID];
+    if (productItemData) {
+      let parsedData: unknown;
+      if (typeof productItemData === 'string') {
+        try {
+          parsedData = JSON.parse(productItemData);
+        } catch {
+          // ignore
+        }
+      } else if (
+        typeof productItemData === 'object' &&
+        'value' in productItemData
+      ) {
+        try {
+          parsedData = JSON.parse((productItemData as { value: string }).value);
+        } catch {
+          // ignore
+        }
+      } else {
+        parsedData = productItemData;
+      }
+
+      if (parsedData && typeof parsedData === 'object') {
+        const data = parsedData as Record<string, unknown>;
+        setProductItemStyles((data.styles as Record<string, string>) || {});
+        setProductItemProperties(
+          (data.properties as Record<string, unknown>) || {
+            'show-fav-button': true,
+            'fav-button-position': 'top-right'
+          }
+        );
+      }
+    }
+
+    // Load pagination section
+    const paginationData = attributes[PAGINATION_SECTION_ID];
+    if (paginationData) {
+      let parsedData: unknown;
+      if (typeof paginationData === 'string') {
+        try {
+          parsedData = JSON.parse(paginationData);
+        } catch {
+          // ignore
+        }
+      } else if (
+        typeof paginationData === 'object' &&
+        'value' in paginationData
+      ) {
+        try {
+          parsedData = JSON.parse((paginationData as { value: string }).value);
+        } catch {
+          // ignore
+        }
+      } else {
+        parsedData = paginationData;
+      }
+
+      if (parsedData && typeof parsedData === 'object') {
+        const data = parsedData as Record<string, unknown>;
+        setPaginationStyles((data.styles as Record<string, string>) || {});
+        setPaginationProperties(
+          (data.properties as Record<string, unknown>) || {
+            type: 'list'
+          }
+        );
+      }
+    }
+  }, [widgetData]);
+
+  const value: NativeWidgetContextValue = {
+    filterStyles,
+    filterProperties,
+    productsProperties,
+    productsStyles,
+    productItemProperties,
+    productItemStyles,
+    paginationProperties,
+    paginationStyles
+  };
+
+  return (
+    <NativeWidgetContext.Provider value={value}>
+      {children}
+    </NativeWidgetContext.Provider>
+  );
+}
+
+export function useNativeWidget() {
+  return useContext(NativeWidgetContext);
+}