@htmlbricks/hb-product-comparison 0.66.8 → 0.66.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -0
- package/manifest.json +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
## `hb-product-comparison` — product comparison
|
|
2
|
+
|
|
3
|
+
**Category:** commerce
|
|
4
|
+
**Tags:** commerce, product
|
|
5
|
+
|
|
6
|
+
### What it does
|
|
7
|
+
|
|
8
|
+
Product comparison matrix: columns per product (model, description, promotion, price, purchase button) and rows per feature header with icons or text from each product’s characteristics. Supports preferred product and sale styling; dispatches `purchaseClick` with product id. Desktop table vs stacked mobile layout.
|
|
9
|
+
|
|
10
|
+
### Custom element
|
|
11
|
+
|
|
12
|
+
`hb-product-comparison`
|
|
13
|
+
|
|
14
|
+
### Attributes (snake_case; use string values in HTML)
|
|
15
|
+
|
|
16
|
+
- `id`, `style` (optional): strings.
|
|
17
|
+
- `headers` (required): JSON string — `{ id; label }[]` feature rows.
|
|
18
|
+
- `products` (required): JSON string — `Product[]` (`id`, `model`, `price`, `characteristics` map, optional `description`, `note`, `promotion`, `columnColor`).
|
|
19
|
+
- `options` (required): JSON string — `Options` (`currency`, optional `preferredProductId`).
|
|
20
|
+
|
|
21
|
+
### Events
|
|
22
|
+
|
|
23
|
+
- `purchaseClick`: `{ id: string }` — product id for checkout handoff.
|
|
24
|
+
|
|
25
|
+
### Usage notes
|
|
26
|
+
|
|
27
|
+
- **CSS parts:** `container`, `col`, `row`.
|
|
28
|
+
- Characteristic values drive per-cell visuals (`valid`, `disabled`, `blocked`, etc. per examples in `extra/docs.ts`).
|
|
29
|
+
|
|
30
|
+
### Minimal HTML example
|
|
31
|
+
|
|
32
|
+
```html
|
|
33
|
+
<hb-product-comparison
|
|
34
|
+
headers='[{"id":"f1","label":"Feature 1"}]'
|
|
35
|
+
products='[{"id":"p1","model":"Basic","price":10,"characteristics":{"f1":"valid"}}]'
|
|
36
|
+
options='{"currency":"€"}'
|
|
37
|
+
></hb-product-comparison>
|
|
38
|
+
```
|
package/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@htmlbricks/hb-product-comparison",
|
|
3
|
-
"version": "0.66.
|
|
3
|
+
"version": "0.66.10",
|
|
4
4
|
"contributors": [],
|
|
5
5
|
"description": "Product comparison matrix: columns per product (model, description, promotion, price, purchase button) and rows per feature header with icons or text from each product’s characteristics. Supports preferred product and sale styling; dispatches purchaseClick with product id. Desktop table vs stacked mobile layout.",
|
|
6
6
|
"licenses": [
|