shadcn.io is not affiliated with official shadcn/ui
Cross Sell Storefront Block for Ark UI
A bought-together section for a leather belt: the belt with a waist-size select, three complements as rows with a checkbox, a size select and the reason from sample order data (214 of 300 orders), and a running total with no invented discount.
Installation
Overview
Suggest what goes with an item, and say why, with this cross-sell section for React with Ark UI. A header says what other Beeston customers add to the bag with this belt. A hairline frame with a plus mark on each corner opens with the belt itself, drawn, with its waist size in a labelled Native Select. A second band lists three complements as rows: a native checkbox, a drawn thumbnail, the name, a size select and the reason it is suggested, typed from sample order data ("Added in 214 of 300 orders, 71%") with the percent worked out from the counts. There is no discount, only plain prices: the foot shows the total, in whole cents, of the belt and whatever is ticked, with the block's one Shine Button, "Add 3 to the bag", counting the lines. It's built from Field, Native Select, Shine Button and Guides, with a CSS entrance only. For a product page, a cart suggestion or a quick-view.
FAQ
How do I fill it with my own products and reasons?
Edit BELT and EXTRAS. Each has an id, a name, a drawing kind and its sizes with a price in cents. A complement also has orders, how many of the ORDER_COUNT sample orders had it in the same bag; the reason line and its percent are built from those two numbers.
Where do the reasons come from?
From typed sample counts, not a model: 214 of 300 orders is 71%. In your shop, count orders that contained the main product and each complement, store the two numbers, and show them the same way. If you have no such data, drop the line rather than invent one.
Why is there no discount?
Because bought together is a suggestion, not a deal, and the numbers are honest. If you do offer a saving, add a figures list with the rule written out, as the bundle blocks do.
What stays local, and how do I wire it to a real cart?
The ticks, sizes and total live in the page; the Add button only says "Added 3 lines in this demo". In add, send the main item and every ticked item with its size id to your cart.