Price-drop / restock notification image

Ecommerce runs this ad hoc. A price drops, or a product is back. You need a square image that shows the product name, the old price struck through, and the new price. The was and now values have to be the real ones.

This is not a standing campaign. It happens when the price or the stock changes. The next alert is a new event with new numbers. The card should stay the same.

The job is one alert card per event. You fill in the product, the old price, and the new price. You export a PNG. The next alert is the same component and a new data file. Nothing about the artboard changes between alerts. The values do.

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

The component is .lerret/commerce/alert-card.jsx. It draws the old price struck through, the new price, and the product name. The strike-through is part of the component. The prices are props. You do not draw a line through a text layer by hand.

The data is { product, oldPrice, newPrice } per alert, passed via --data. That is bulk pattern 1 if you have more than one alert: re-run export with a different --data file each time. Same component, new values, new image. --data applies to every artboard in the run and is never written back into .lerret/.

The image is a PNG 1080×1080.

The struck-through price is a prop, so the was and now values are always the real ones from the file. You are not typing the old price in one place and the new price in another. Both numbers sit in one small file you can check before you export.

Point --data at the alert file. The command writes the 1080×1080 PNG. The next alert is a new file and the same command. --data is never written back into .lerret/, so the default artboard stays clean. Check product, oldPrice, and newPrice in the file before you run.

npx @lerret/cli@latest export --data

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