gether-store-core
v0.1.3
Published
Core e-commerce components for Gether tenant stores
Readme
@gether/store-core
Core e-commerce components for Gether tenant stores.
Installation
npm install @gether/store-coreUsage
1. Wrap your app with TenantProvider
// app/layout.tsx
import { TenantProvider } from '@gether/store-core'
import { tenantConfig } from '../tenant.config'
export default function RootLayout({ children }) {
return (
<html>
<body>
<TenantProvider config={tenantConfig}>
{children}
</TenantProvider>
</body>
</html>
)
}2. Create your tenant configuration
// tenant.config.ts
import { TenantConfig } from '@gether/store-core'
export const tenantConfig: Partial<TenantConfig> = {
name: 'My Store',
slug: 'mystore',
theme: {
primaryColor: '#E63946',
secondaryColor: '#1D3557',
},
features: {
configurator3D: true,
customerAccounts: true,
},
}3. Use core components
// app/page.tsx
import { CoreHomePage, ProductCard } from '@gether/store-core'
export default function HomePage() {
return (
<CoreHomePage
featuredProductsContent={
<>
<ProductCard product={...} />
</>
}
/>
)
}Customization (Overrides)
You can customize specific parts of the UI by providing overrides:
// overrides/CustomHero.tsx
export function CustomHero() {
return (
<section className="bg-gradient-to-r from-purple-500 to-pink-500 py-32">
<h1>My Custom Hero</h1>
</section>
)
}
// app/layout.tsx
import { TenantProvider, TenantOverrides } from '@gether/store-core'
import { CustomHero } from '../overrides/CustomHero'
const overrides: TenantOverrides = {
HomeHero: CustomHero,
}
export default function RootLayout({ children }) {
return (
<TenantProvider config={tenantConfig} overrides={overrides}>
{children}
</TenantProvider>
)
}Available Extension Points
HomeHero- Hero section on homepageFeaturedProducts- Featured products sectionExtraSectionsAfterHero- Additional sections after heroExtraSectionsAfterFeatured- Additional sections after featured productsExtraSectionsBeforeFooter- Additional sections before footerCheckoutSidebar- Sidebar in checkout pageHeaderExtra- Additional content in headerFooterExtra- Additional content in footer
License
Proprietary - Gether Agency