WindowGrid

The WindowGrid component is used as a performance improvement when rendering a large product grid on a page. This is usually used together with Infinite pagination.

It keeps the URL in sync with the page you're currently at.

There's two really important things you need to know when working with WindowGrid:

• The grid is styled using flex, and does not support CSS grids. All margin around the product card needs to be applied using padding or margin on an inner element.
• The component assumes that the product card has the data-product-card attribute, and uses that element to measure the height of the item. If this is not present, or if it is not set on the correct element, the grid will not work properly.

import { WindowGrid } from '@jetshop/ui/WindowGrid';

import { WindowGrid } from './WindowGrid';

Props

id?: string If you are using the WindowGrid in different places of the site, make sure to specify an ID for every place or you might end up with issues where the item height is inferred from usage in other places.

items: any[] The products that should be rendered in the grid.

className?: string Optional className that is applied to the container element.

prevOffset?: number If a subset of products is provided, and there are previous products that could be loaded, this value should be the offset used to load the previous page. E.g. if we only have the products for page 2, prevOffset should be set to 0 since that is the offset that will be used to fetch page 1 eventually.

itemsPerRow: number[] An array containing the amount of products per row in each breakpoint, starting from smallest to highest. If you supply null for a value, the previous one will be used.

E.g.: itemsPerRow={[2, 3, null, 4]} means that the grid will render 2 products on the smallest breakpoint, 3 on the next two breakpoints and 4 on all other devices.

component A component that is used to render the product cards. It gets some props that has to be applied to the outermost DOM element:

• style Style to apply to the dom element
• innerRef Ref to apply to the dom element. Used to measure the height of a product card.
• item The item (e.g. product) that should be rendered.

See example usage for how this should be used.

Example usage

See the documentation for Infinite pagination for an example of how this is used.