How clients find a material in the catalog

#367

The material catalog is the main screen for picking positions for a project-order. The client opens it via the «Add» menu (the «+» icon in the project header) — the «Material/ goods» item. The platform currently runs two catalogs in parallel: the new extended search (opens by default) and the classic one (available through a switcher). The content of both is the same — the data is unified, only the interface differs.

New extended search (default)

This is what the client sees first after choosing «Material/ goods». Optimized for speed: more data in a single card, fewer screen switches.

Page structure:

  • Folders — pick a catalog section.
  • Material type selector — «Panel material», «Edge» or «Goods». It is a toggle above the list: one type is active at a time, several cannot be selected at once.
  • Text search — by name, article number, decor. Case-insensitive; press the «Filter» button to apply the query.
  • Filter fields — manufacturer, dimensions (x/y/z) and sale type are always visible next to the search; the «Extended search» block adds thresholds for stock balance, non-whole leftovers and minimum order quantity.
  • Extended product card — photo, dimensions (X×Y×Z mm), code, price per sheet and per m², stock balance. Directly inside the card:
    • Linked edges — list of compatible edges with «in color only» and «already in project» badges. The «Add» button next to each edge adds it to the project with one click.
    • Stock balance table — sizes, quantity, arrival date for partial remainders.
    • «Add to project» / «Remove from project» buttons — directly in the card, without opening a separate material screen.
    • «Unavailable» badge — for positions with zero stock or disabled for the current client.
  • Pagination — 50 positions per page; the selector also offers 100 or 200.

Classic catalog (via the switcher)

In the header of the new search there is a switch icon to the classic interface (with a «classic look» thumbnail). Clicking opens the classic interface:

  • Left sidebar with category tree — hierarchy by type and catalog subsections. Clicking a tree node filters the list by that section.
  • «All materials» heading in the sidebar — returns to the flat list.
  • «Back» button in the corner — returns to the project.
  • Search bar + collapsible filter panel:
    • Name, code, ID, length, width, thickness, manufacturer; the «Clear all» and «Apply» buttons.
  • Card grid — thumbnail, name, price, balance. Only the eye icon is clickable — it opens the decor image in a large view; the card itself does not open a separate screen.
  • Pagination at the bottom of the list.

The classic interface fits clients who are used to browsing the category tree and don’t need dense information packed into one card.

Switching between interfaces

The switch icon sits in the header of each interface. Click: new → classic or classic → new. The choice is kept for the current client session; on the next entry to the project, the default (new) opens again.

A factory admin sees the same catalog as the client: the same material search and the same switch between the new and the classic interface — there is no separate «admin mode» here.

What matters for the factory admin

  • Folder structure (new) and category tree (classic) — shared and defined in the admin panel under «Catalog». The hierarchy affects navigation in both interfaces.
  • Characteristics fill rate — defines whether a material passes the client’s filter. An empty «manufacturer», «decor» or dimensions excludes the position from the matching queries.
  • Images — thumbnails significantly speed up selection. Without an image a position is often skipped by the client.
  • Linked edges and stock balance table — the main advantages of the new interface. Fill these for panel materials so that the «everything in one card» approach is convenient for the client.

Related topics