shadcn.io is not affiliated with official shadcn/ui
Bundles Storefront Block for Svelte
Three camp kitchen bundles in hairline cells: three drawn items each, a native select to swap one item for an alternate, the sum of the parts struck, the bundle price and the saving in dollars, and an Add that raises the bag.
Installation
Overview
Sell gear that goes together, with these ready-made bundles for Svelte with Ark UI. A header says what Cindermoor packs. A hairline frame with a plus mark on each corner holds three bundle cells under a heading that counts the bag. Each cell draws its three items, lists them with their prices, and has a labelled Native Select in a Field to swap one item (a kettle, a pot or a stove) for one of three alternates. The sum of the parts is struck, the bundle price is that sum less the bundle's percent off (12, 15 or 10, worked out in whole cents), and the saving is written in dollars, so a swap changes the drawing, the sum and the saving together. The featured bundle's Add is the block's one Shine Button; the others are outline Buttons. Add raises the bag by the bundle's three items and a status line says so. It's built from Badge, Button, Field, Native Select, Shine Button and Guides, with a CSS entrance only. For a product page, a collection page or a gear shop's front page.
FAQ
How do I fill it with my own bundles?
Edit BUNDLES. Each has a name, a blurb, the percent off (pct), the fixed items that stay, and the options for the one item that can be swapped, the first being the default. An item has an id, a name, a price in cents and a kind for its drawing. The sum, the bundle price and the saving are all worked out from those.
How is the price worked out?
In integer cents: the sum of the three items times (100 minus the percent), divided by 100 and rounded to the nearest cent. The saving is the sum less that price. No floating point money is stored or shown.
What stays local, and how do I wire it to a real cart?
The prices, the swaps and the bag count live in the page; nothing is bought or saved. In add, send the bundle's id and the id of the chosen option to your cart, and let your server confirm the price, since a bundle rule is a claim you must honour.
What does a swap change?
The swappable item's drawing, name and price, the struck sum, the bundle price and the saving, together, and the status line reads out the new bundle price. The select is a native one, so a phone opens its own picker.