Bundle / kit composite image

Ecommerce uses this for bundle SKUs. A kit is a set of items sold together at a combined price, with a savings line. The listing image has to show what is in the bundle, name the items, and show that combined price.

This happens when a kit is created or when its contents change. Some kits have three items. Some have six. The image still has to lay out, and it has to match the kit that is actually on sale.

The job is one composite listing image per bundle. The grid of included items has to grow and shrink with the item list. The combined price and the savings figure have to come from the same data as the items, so the image cannot advertise a kit the catalog no longer sells. When the kit changes, the image has to change with it.

Give Lerret a React component under .lerret/ and optional data. export writes a JPEG. Same component, data swapped. There is no batch product, no queue, no orchestrator.

The component is .lerret/commerce/bundle.jsx. It is a grid of included items with names and a combined price. The grid maps over an array. You do not draw a new frame when the kit gains or loses a product. The names and the price sit in the same component as the grid.

The data is { items: [], bundlePrice, savings } per bundle. items is the list the grid maps over. bundlePrice is the combined price on the card. savings is the savings line. One bundle, one data file. If you have several kits, each kit has its own data. You run export for the bundle you are shipping.

The image is a JPEG at listing size.

The item grid maps over an array, so a three-item and a six-item bundle both lay out without a redesign. Adding an item is adding an array element. The names, the combined price, and the savings stay in one file you can edit as the kit changes. The count of cells is the length of items. A design file would need the grid rebuilt when that count changes.

Pass the bundle’s fields: items, bundlePrice, and savings. export writes a JPEG at listing size. A three-item kit and a six-item kit use the same .lerret/commerce/bundle.jsx. The grid length is the length of items.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.