@deneb-ui/create-template 2.0.48 → 2.0.49
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/package.json +1 -1
- package/template/README.md +35 -0
- package/template/package.json +2 -2
package/package.json
CHANGED
package/template/README.md
CHANGED
|
@@ -75,6 +75,41 @@ When you run **`npm run lab`**, you can click directly on any element with a `da
|
|
|
75
75
|
|
|
76
76
|
---
|
|
77
77
|
|
|
78
|
+
## Backend Data Fetching & Commerce Hooks
|
|
79
|
+
|
|
80
|
+
The root layout wraps your application with `<SiteDataProvider>`, which automatically connects to the Fivora backend (`api.catalogUrl`) on live sites and listens to live visual editing updates in the Lab.
|
|
81
|
+
|
|
82
|
+
Import hooks from `@/lib/siteDataContext` or `@deneb-ui/ui`:
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
import { useProducts, useSiteCatalog, useSiteApi, useSiteData } from '@/lib/siteDataContext';
|
|
86
|
+
import { EditableProductGrid, EditableProductCard } from '@deneb-ui/ui';
|
|
87
|
+
|
|
88
|
+
export default function MyCommercePage() {
|
|
89
|
+
// 1. Get live products (automatically handles backend hydration & editor changes)
|
|
90
|
+
const products = useProducts();
|
|
91
|
+
|
|
92
|
+
// 2. Access backend API endpoints
|
|
93
|
+
const api = useSiteApi(); // api?.catalogUrl, api?.contactUrl, api?.baseUrl
|
|
94
|
+
|
|
95
|
+
// 3. Get full catalog & project metadata
|
|
96
|
+
const { services, project } = useSiteCatalog();
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<section>
|
|
100
|
+
<h2>{project?.title} Products</h2>
|
|
101
|
+
<EditableProductGrid
|
|
102
|
+
products={products}
|
|
103
|
+
cardVariant="modern-glass"
|
|
104
|
+
columns={{ mobile: 1, tablet: 2, desktop: 3 }}
|
|
105
|
+
/>
|
|
106
|
+
</section>
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
78
113
|
## How to Customize
|
|
79
114
|
|
|
80
115
|
### 1. Change Theme & Colors
|
package/template/package.json
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"next": "15.5.23",
|
|
19
19
|
"react": "19.2.8",
|
|
20
20
|
"react-dom": "19.2.8",
|
|
21
|
-
"@deneb-ui/ui": "^2.0.
|
|
21
|
+
"@deneb-ui/ui": "^2.0.49"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@eslint/eslintrc": "3.3.6",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"eslint": "9.39.5",
|
|
29
29
|
"eslint-config-next": "15.5.23",
|
|
30
30
|
"typescript": "5.8.3",
|
|
31
|
-
"@deneb-ui/cli": "^2.0.
|
|
31
|
+
"@deneb-ui/cli": "^2.0.49",
|
|
32
32
|
"tailwindcss": "^3.4.17",
|
|
33
33
|
"postcss": "8.5.26",
|
|
34
34
|
"autoprefixer": "^10.4.20"
|