@zevcommerce/theme-starter 1.0.0
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 +27 -0
- package/src/components/ThemeStyles.tsx +92 -0
- package/src/helpers/format-price.ts +50 -0
- package/src/index.ts +26 -0
- package/src/preset.json +126 -0
- package/src/registry.ts +35 -0
- package/src/sections/Announcement.tsx +30 -0
- package/src/sections/CartSection.tsx +156 -0
- package/src/sections/CheckoutSection.tsx +21 -0
- package/src/sections/ContactInfo.tsx +129 -0
- package/src/sections/FeaturedProducts.tsx +114 -0
- package/src/sections/Footer.tsx +167 -0
- package/src/sections/Header.tsx +307 -0
- package/src/sections/Hero.tsx +83 -0
- package/src/sections/ProductDetail.tsx +252 -0
- package/src/sections/ProductList.tsx +76 -0
- package/src/settings.ts +140 -0
- package/tsconfig.json +20 -0
- package/tsup.config.ts +9 -0
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useTheme, useCollection, ProductCard } from '@zevcommerce/storefront-api';
|
|
4
|
+
import { useParams } from 'next/navigation';
|
|
5
|
+
|
|
6
|
+
export default function ProductList() {
|
|
7
|
+
const { storeConfig } = useTheme();
|
|
8
|
+
const { collection } = useCollection();
|
|
9
|
+
const params = useParams();
|
|
10
|
+
const domain = (params?.domain as string) || storeConfig?.handle || '';
|
|
11
|
+
|
|
12
|
+
if (!collection) {
|
|
13
|
+
return (
|
|
14
|
+
<div className="py-24 text-center" style={{ backgroundColor: 'var(--color-background)' }}>
|
|
15
|
+
<div className="animate-pulse flex flex-col items-center">
|
|
16
|
+
<div className="h-8 w-48 rounded mb-4" style={{ backgroundColor: '#e5e7eb' }} />
|
|
17
|
+
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 w-full max-w-6xl mx-auto px-4">
|
|
18
|
+
{[1, 2, 3, 4].map(i => (
|
|
19
|
+
<div key={i} className="aspect-[3/4] rounded-lg" style={{ backgroundColor: '#e5e7eb' }} />
|
|
20
|
+
))}
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const products = collection.products?.map((p: any) => p.product || p) || [];
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<section className="py-8 md:py-16" style={{ backgroundColor: 'var(--color-background)' }}>
|
|
31
|
+
<div className="container mx-auto px-4 sm:px-6 max-w-6xl">
|
|
32
|
+
{/* Collection Header */}
|
|
33
|
+
<div className="mb-8 md:mb-10">
|
|
34
|
+
<h1
|
|
35
|
+
className="text-2xl md:text-3xl font-bold mb-2"
|
|
36
|
+
style={{ color: 'var(--color-text)' }}
|
|
37
|
+
>
|
|
38
|
+
{collection.title}
|
|
39
|
+
</h1>
|
|
40
|
+
{collection.description && (
|
|
41
|
+
<p className="text-sm max-w-2xl" style={{ color: 'var(--color-text)', opacity: 0.6 }}>
|
|
42
|
+
{collection.description}
|
|
43
|
+
</p>
|
|
44
|
+
)}
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
{/* Product Grid */}
|
|
48
|
+
{products.length > 0 ? (
|
|
49
|
+
<div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
|
50
|
+
{products.map((product: any) => (
|
|
51
|
+
<ProductCard
|
|
52
|
+
key={product.id}
|
|
53
|
+
product={product}
|
|
54
|
+
domain={domain}
|
|
55
|
+
/>
|
|
56
|
+
))}
|
|
57
|
+
</div>
|
|
58
|
+
) : (
|
|
59
|
+
<div className="py-16 text-center">
|
|
60
|
+
<p className="text-sm" style={{ color: 'var(--color-text)', opacity: 0.5 }}>
|
|
61
|
+
No products found in this collection.
|
|
62
|
+
</p>
|
|
63
|
+
</div>
|
|
64
|
+
)}
|
|
65
|
+
</div>
|
|
66
|
+
</section>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
export const schema = {
|
|
71
|
+
type: 'product-list',
|
|
72
|
+
name: 'Product List',
|
|
73
|
+
settings: [],
|
|
74
|
+
disabled_on: { templates: ['*'] },
|
|
75
|
+
enabled_on: { templates: ['collection'] },
|
|
76
|
+
};
|
package/src/settings.ts
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import { defineSettings } from '@zevcommerce/theme-sdk';
|
|
2
|
+
|
|
3
|
+
export const settingsSchema = defineSettings([
|
|
4
|
+
// ============================================================
|
|
5
|
+
// BRAND
|
|
6
|
+
// ============================================================
|
|
7
|
+
{
|
|
8
|
+
name: 'Brand',
|
|
9
|
+
icon: 'palette',
|
|
10
|
+
settings: [
|
|
11
|
+
{ type: 'color', id: 'brand.primary', label: 'Primary Color', default: '#2563EB' },
|
|
12
|
+
{ type: 'color', id: 'brand.background', label: 'Background Color', default: '#ffffff' },
|
|
13
|
+
{ type: 'color', id: 'brand.text', label: 'Text Color', default: '#374151' },
|
|
14
|
+
{ type: 'color', id: 'brand.accent', label: 'Accent Color', default: '#F59E0B' },
|
|
15
|
+
{
|
|
16
|
+
type: 'select',
|
|
17
|
+
id: 'brand.font',
|
|
18
|
+
label: 'Body Font',
|
|
19
|
+
default: 'Inter',
|
|
20
|
+
options: [
|
|
21
|
+
{ value: 'Inter', label: 'Inter' },
|
|
22
|
+
{ value: 'Roboto', label: 'Roboto' },
|
|
23
|
+
{ value: 'Open Sans', label: 'Open Sans' },
|
|
24
|
+
{ value: 'Poppins', label: 'Poppins' },
|
|
25
|
+
{ value: 'Lato', label: 'Lato' },
|
|
26
|
+
],
|
|
27
|
+
},
|
|
28
|
+
],
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
// ============================================================
|
|
32
|
+
// HEADER
|
|
33
|
+
// ============================================================
|
|
34
|
+
{
|
|
35
|
+
name: 'Header',
|
|
36
|
+
icon: 'layout',
|
|
37
|
+
settings: [
|
|
38
|
+
{ type: 'image', id: 'header.logo', label: 'Logo Image' },
|
|
39
|
+
{ type: 'range', id: 'header.logoHeight', label: 'Logo Height (px)', min: 20, max: 80, step: 4, default: 36 },
|
|
40
|
+
{ type: 'checkbox', id: 'header.sticky', label: 'Sticky Header', default: true },
|
|
41
|
+
{ type: 'checkbox', id: 'header.showSearch', label: 'Show Search Icon', default: true },
|
|
42
|
+
{ type: 'text', id: 'header.menuHandle', label: 'Menu Handle', default: 'main-menu' },
|
|
43
|
+
],
|
|
44
|
+
},
|
|
45
|
+
|
|
46
|
+
// ============================================================
|
|
47
|
+
// HERO BANNER
|
|
48
|
+
// ============================================================
|
|
49
|
+
{
|
|
50
|
+
name: 'Hero Banner',
|
|
51
|
+
icon: 'image',
|
|
52
|
+
settings: [
|
|
53
|
+
{ type: 'checkbox', id: 'hero.enabled', label: 'Show Hero', default: true },
|
|
54
|
+
{ type: 'image', id: 'hero.backgroundImage', label: 'Background Image' },
|
|
55
|
+
{ type: 'text', id: 'hero.heading', label: 'Heading', default: 'Welcome to our store' },
|
|
56
|
+
{ type: 'textarea', id: 'hero.subheading', label: 'Subheading', default: 'Discover amazing products at great prices.' },
|
|
57
|
+
{ type: 'text', id: 'hero.buttonText', label: 'Button Text', default: 'Shop Now' },
|
|
58
|
+
{ type: 'text', id: 'hero.buttonLink', label: 'Button Link', default: '/collections/all' },
|
|
59
|
+
{ type: 'range', id: 'hero.overlayOpacity', label: 'Overlay Opacity', min: 0, max: 100, step: 5, default: 50 },
|
|
60
|
+
{ type: 'color', id: 'hero.overlayColor', label: 'Overlay Color', default: '#000000' },
|
|
61
|
+
{ type: 'color', id: 'hero.textColor', label: 'Text Color', default: '#ffffff' },
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
|
|
65
|
+
// ============================================================
|
|
66
|
+
// PRODUCTS
|
|
67
|
+
// ============================================================
|
|
68
|
+
{
|
|
69
|
+
name: 'Products',
|
|
70
|
+
icon: 'shopping-bag',
|
|
71
|
+
settings: [
|
|
72
|
+
{ type: 'checkbox', id: 'products.enabled', label: 'Show Featured Products', default: true },
|
|
73
|
+
{ type: 'text', id: 'products.heading', label: 'Section Heading', default: 'Featured Products' },
|
|
74
|
+
{ type: 'collection_picker', id: 'products.collection', label: 'Collection', default: 'all' },
|
|
75
|
+
{ type: 'range', id: 'products.limit', label: 'Number of Products', min: 4, max: 24, step: 4, default: 8 },
|
|
76
|
+
{
|
|
77
|
+
type: 'select',
|
|
78
|
+
id: 'products.columns',
|
|
79
|
+
label: 'Grid Columns (Desktop)',
|
|
80
|
+
default: '4',
|
|
81
|
+
options: [
|
|
82
|
+
{ value: '2', label: '2 Columns' },
|
|
83
|
+
{ value: '3', label: '3 Columns' },
|
|
84
|
+
{ value: '4', label: '4 Columns' },
|
|
85
|
+
],
|
|
86
|
+
},
|
|
87
|
+
],
|
|
88
|
+
},
|
|
89
|
+
|
|
90
|
+
// ============================================================
|
|
91
|
+
// CONTACT
|
|
92
|
+
// ============================================================
|
|
93
|
+
{
|
|
94
|
+
name: 'Contact',
|
|
95
|
+
icon: 'phone',
|
|
96
|
+
settings: [
|
|
97
|
+
{ type: 'checkbox', id: 'contact.enabled', label: 'Show Contact Section', default: false },
|
|
98
|
+
{ type: 'text', id: 'contact.heading', label: 'Section Heading', default: 'Get in Touch' },
|
|
99
|
+
{ type: 'checkbox', id: 'contact.showPhone', label: 'Show Phone', default: true },
|
|
100
|
+
{ type: 'text', id: 'contact.phone', label: 'Phone Number', default: '' },
|
|
101
|
+
{ type: 'checkbox', id: 'contact.showEmail', label: 'Show Email', default: true },
|
|
102
|
+
{ type: 'text', id: 'contact.email', label: 'Email Address', default: '' },
|
|
103
|
+
{ type: 'checkbox', id: 'contact.showWhatsApp', label: 'Show WhatsApp', default: false },
|
|
104
|
+
{ type: 'text', id: 'contact.whatsapp', label: 'WhatsApp Number', default: '' },
|
|
105
|
+
{ type: 'checkbox', id: 'contact.showAddress', label: 'Show Address', default: false },
|
|
106
|
+
{ type: 'textarea', id: 'contact.address', label: 'Address', default: '' },
|
|
107
|
+
],
|
|
108
|
+
},
|
|
109
|
+
|
|
110
|
+
// ============================================================
|
|
111
|
+
// FOOTER
|
|
112
|
+
// ============================================================
|
|
113
|
+
{
|
|
114
|
+
name: 'Footer',
|
|
115
|
+
icon: 'align-bottom',
|
|
116
|
+
settings: [
|
|
117
|
+
{ type: 'textarea', id: 'footer.description', label: 'Store Description', default: '' },
|
|
118
|
+
{ type: 'text', id: 'footer.menuHandle', label: 'Footer Menu Handle', default: 'footer' },
|
|
119
|
+
{ type: 'text', id: 'footer.copyright', label: 'Copyright Text', default: '' },
|
|
120
|
+
{ type: 'text', id: 'footer.instagram', label: 'Instagram URL', default: '' },
|
|
121
|
+
{ type: 'text', id: 'footer.facebook', label: 'Facebook URL', default: '' },
|
|
122
|
+
{ type: 'text', id: 'footer.twitter', label: 'Twitter / X URL', default: '' },
|
|
123
|
+
{ type: 'text', id: 'footer.tiktok', label: 'TikTok URL', default: '' },
|
|
124
|
+
],
|
|
125
|
+
},
|
|
126
|
+
|
|
127
|
+
// ============================================================
|
|
128
|
+
// ANNOUNCEMENT
|
|
129
|
+
// ============================================================
|
|
130
|
+
{
|
|
131
|
+
name: 'Announcement',
|
|
132
|
+
icon: 'megaphone',
|
|
133
|
+
settings: [
|
|
134
|
+
{ type: 'checkbox', id: 'announcement.enabled', label: 'Show Announcement Bar', default: false },
|
|
135
|
+
{ type: 'text', id: 'announcement.text', label: 'Announcement Text', default: 'Free shipping on orders over $50!' },
|
|
136
|
+
{ type: 'color', id: 'announcement.backgroundColor', label: 'Background Color', default: '#2563EB' },
|
|
137
|
+
{ type: 'color', id: 'announcement.textColor', label: 'Text Color', default: '#ffffff' },
|
|
138
|
+
],
|
|
139
|
+
},
|
|
140
|
+
]);
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"moduleResolution": "bundler",
|
|
6
|
+
"jsx": "react-jsx",
|
|
7
|
+
"strict": true,
|
|
8
|
+
"esModuleInterop": true,
|
|
9
|
+
"skipLibCheck": true,
|
|
10
|
+
"outDir": "dist",
|
|
11
|
+
"declaration": true,
|
|
12
|
+
"declarationDir": "dist",
|
|
13
|
+
"paths": {
|
|
14
|
+
"@zevcommerce/storefront-api": ["../zevcommerce-theme-sdk/src/storefront-api"],
|
|
15
|
+
"@zevcommerce/theme-sdk": ["../zevcommerce-theme-sdk/src"]
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
"include": ["src/**/*"],
|
|
19
|
+
"exclude": ["node_modules", "dist"]
|
|
20
|
+
}
|
package/tsup.config.ts
ADDED