@altazion/commerce-sdk-htmx 1.0.0 → 26.331.7501
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 +107 -0
- package/package.json +11 -4
package/README.md
ADDED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
# @altazion/commerce-sdk-htmx
|
|
2
|
+
|
|
3
|
+
Extension HTMX et helpers Handlebars pour l'Altazion Commerce SDK. Permet d'intégrer le SDK dans des projets à rendu serveur utilisant [htmx](https://htmx.org) et/ou [Handlebars](https://handlebarsjs.com), sans framework JavaScript.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @altazion/commerce-sdk-htmx @altazion/commerce-sdk-core
|
|
9
|
+
npm install htmx.org handlebars # peer dependencies (optionnelles)
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Initialisation
|
|
13
|
+
|
|
14
|
+
```ts
|
|
15
|
+
import { CommerceClient } from '@altazion/commerce-sdk-core'
|
|
16
|
+
import { initAltazionHtmx } from '@altazion/commerce-sdk-htmx'
|
|
17
|
+
import Handlebars from 'handlebars'
|
|
18
|
+
|
|
19
|
+
const client = new CommerceClient({
|
|
20
|
+
baseUrl: 'https://votre-api.altazion.com',
|
|
21
|
+
})
|
|
22
|
+
|
|
23
|
+
initAltazionHtmx({
|
|
24
|
+
client,
|
|
25
|
+
handlebars: Handlebars, // optionnel — active les helpers HBS
|
|
26
|
+
offlineSelector: '#app', // optionnel — élément qui reçoit la classe altz-offline
|
|
27
|
+
})
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Mode CDN (sans bundler)
|
|
31
|
+
|
|
32
|
+
```html
|
|
33
|
+
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2/dist/htmx.min.js"></script>
|
|
34
|
+
<script src="https://cdn.jsdelivr.net/npm/handlebars/dist/handlebars.min.js"></script>
|
|
35
|
+
<script src="https://cdn.jsdelivr.net/npm/@altazion/commerce-sdk-core/dist/index.iife.js"></script>
|
|
36
|
+
<script src="https://cdn.jsdelivr.net/npm/@altazion/commerce-sdk-htmx/dist/index.iife.js"></script>
|
|
37
|
+
<script>
|
|
38
|
+
const client = new AltazionCommerceCore.CommerceClient({
|
|
39
|
+
baseUrl: 'https://votre-api.altazion.com'
|
|
40
|
+
})
|
|
41
|
+
AltazionCommerceSdkHtmx.initAltazionHtmx({ client, handlebars: Handlebars })
|
|
42
|
+
</script>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Helpers Handlebars
|
|
46
|
+
|
|
47
|
+
### Prix
|
|
48
|
+
|
|
49
|
+
| Helper | Description | Exemple |
|
|
50
|
+
|---|---|---|
|
|
51
|
+
| `{{formatPrice value}}` | Prix formaté selon la locale | `12,90 €` |
|
|
52
|
+
| `{{formatPriceNoSymbol value}}` | Prix sans symbole monétaire | `12,90` |
|
|
53
|
+
|
|
54
|
+
### Produit
|
|
55
|
+
|
|
56
|
+
| Helper | Description |
|
|
57
|
+
|---|---|
|
|
58
|
+
| `{{productUrl sku}}` | URL canonique d'un produit |
|
|
59
|
+
| `{{productImageUrl url size}}` | URL d'image redimensionnée |
|
|
60
|
+
|
|
61
|
+
### Panier
|
|
62
|
+
|
|
63
|
+
| Helper | Description |
|
|
64
|
+
|---|---|
|
|
65
|
+
| `{{cartItemCount}}` | Nombre total d'articles dans le panier |
|
|
66
|
+
| `{{cartTotal}}` | Total TTC formaté |
|
|
67
|
+
| `{{#cartHasItems}}...{{/cartHasItems}}` | Bloc conditionnel si panier non vide |
|
|
68
|
+
| `{{cartLineCount}}` | Nombre de lignes dans le panier |
|
|
69
|
+
|
|
70
|
+
## Templates pré-compilés
|
|
71
|
+
|
|
72
|
+
Le package expose des templates Handlebars prêts à l'emploi accessibles via :
|
|
73
|
+
|
|
74
|
+
```ts
|
|
75
|
+
import { templates } from '@altazion/commerce-sdk-htmx'
|
|
76
|
+
|
|
77
|
+
// templates.productCard — carte produit
|
|
78
|
+
// templates.cartMini — mini panier
|
|
79
|
+
// templates.productList — liste de produits
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Extension d'authentification HTMX
|
|
83
|
+
|
|
84
|
+
L'initialisation enregistre automatiquement une extension HTMX `altazion-auth` qui injecte les headers de session sur toutes les requêtes HTMX vers le domaine de l'API :
|
|
85
|
+
|
|
86
|
+
```html
|
|
87
|
+
<div hx-ext="altazion-auth">
|
|
88
|
+
<button hx-post="/api/cart/add" hx-vals='{"ref":"REF-001","qty":1}'>
|
|
89
|
+
Ajouter au panier
|
|
90
|
+
</button>
|
|
91
|
+
</div>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Détection offline
|
|
95
|
+
|
|
96
|
+
Lorsque la connexion est perdue, la classe CSS `altz-offline` est ajoutée sur l'élément ciblé par `offlineSelector` (par défaut `body`), permettant d'afficher un bandeau ou de masquer des actions :
|
|
97
|
+
|
|
98
|
+
```css
|
|
99
|
+
body.altz-offline .altz-cart-actions {
|
|
100
|
+
opacity: 0.5;
|
|
101
|
+
pointer-events: none;
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## Licence
|
|
106
|
+
|
|
107
|
+
Propriétaire — © Altazion SAS. Tous droits réservés.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@altazion/commerce-sdk-htmx",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "26.331.7501",
|
|
4
4
|
"description": "Altazion Commerce SDK — Extension HTMX + helpers Handlebars",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -13,7 +13,10 @@
|
|
|
13
13
|
"types": "./dist/index.d.ts"
|
|
14
14
|
}
|
|
15
15
|
},
|
|
16
|
-
"files": [
|
|
16
|
+
"files": [
|
|
17
|
+
"dist",
|
|
18
|
+
"README.md"
|
|
19
|
+
],
|
|
17
20
|
"scripts": {
|
|
18
21
|
"build": "vite build",
|
|
19
22
|
"dev": "vite build --watch",
|
|
@@ -28,8 +31,12 @@
|
|
|
28
31
|
"htmx.org": "^2.0.0"
|
|
29
32
|
},
|
|
30
33
|
"peerDependenciesMeta": {
|
|
31
|
-
"handlebars": {
|
|
32
|
-
|
|
34
|
+
"handlebars": {
|
|
35
|
+
"optional": true
|
|
36
|
+
},
|
|
37
|
+
"htmx.org": {
|
|
38
|
+
"optional": true
|
|
39
|
+
}
|
|
33
40
|
},
|
|
34
41
|
"devDependencies": {
|
|
35
42
|
"handlebars": "^4.7.0",
|