-
-
{{ section.id }}
-
+
+
+
{{ 'builder.addBlockHint' | translate }}
+
+ @for (entry of blockCatalog; track entry.type) {
+
+ }
+
+
}
diff --git a/src/app/features/project-editor/sections/homepage-section.component.scss b/src/app/features/project-editor/sections/homepage-section.component.scss
new file mode 100644
index 0000000..8794cca
--- /dev/null
+++ b/src/app/features/project-editor/sections/homepage-section.component.scss
@@ -0,0 +1,98 @@
+.block-list { display: grid; gap: 10px; margin: 10px 0; }
+
+.block-card {
+ display: grid;
+ grid-template-columns: auto auto 1fr auto;
+ gap: 12px;
+ align-items: start;
+ padding: 12px;
+ border: 1px solid var(--border-color, #d3dad9);
+ border-radius: var(--radius-sm);
+ background: #fff;
+
+ &.block-card--hidden { opacity: 0.6; }
+ &.cdk-drag-preview { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
+ &.cdk-drag-placeholder { opacity: 0.3; }
+}
+
+.block-card__handle {
+ cursor: grab;
+ color: var(--text-secondary, #6b7280);
+ padding-top: 4px;
+}
+
+.block-card__preview {
+ width: 44px;
+ height: 44px;
+ border-radius: var(--radius-sm);
+ background: var(--bg-secondary, #f7f8f8);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.2rem;
+ color: var(--color-primary, #2f8f5b);
+}
+
+.block-card__title-row { display: flex; align-items: center; gap: 8px; }
+.block-card__desc { margin: 2px 0 8px; color: var(--text-secondary, #6b7280); font-size: 0.85rem; }
+
+.block-card__hidden-badge {
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ letter-spacing: 0.4px;
+ color: var(--text-secondary, #6b7280);
+ border: 1px solid var(--border-color, #d3dad9);
+ border-radius: 999px;
+ padding: 1px 8px;
+}
+
+.block-card__actions {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 8px;
+
+ button {
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ color: var(--text-secondary, #6b7280);
+
+ &:hover { color: var(--text-primary, #1e3c38); }
+ }
+}
+
+.block-card__visible-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
+.block-card__remove:hover { color: var(--danger-color, #c0392b); }
+
+.block-catalog { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color, #d3dad9); }
+
+.block-catalog__grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+ gap: 8px;
+}
+
+.block-catalog__item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 6px;
+ padding: 12px 8px;
+ border: 1px dashed var(--border-color, #d3dad9);
+ border-radius: var(--radius-sm);
+ background: var(--bg-secondary, #f7f8f8);
+ cursor: pointer;
+ font-size: 0.8rem;
+ color: var(--text-primary, #1e3c38);
+
+ .pi { font-size: 1.2rem; color: var(--color-primary, #2f8f5b); }
+
+ &:hover { border-color: var(--color-primary, #2f8f5b); background: #fff; }
+ &:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }
+}
+
+@media (max-width: 640px) {
+ .block-card { grid-template-columns: auto 1fr; }
+ .block-card__actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
+}
diff --git a/src/app/features/project-editor/sections/homepage-section.component.ts b/src/app/features/project-editor/sections/homepage-section.component.ts
index 85d253b..82f77dc 100644
--- a/src/app/features/project-editor/sections/homepage-section.component.ts
+++ b/src/app/features/project-editor/sections/homepage-section.component.ts
@@ -5,9 +5,11 @@ import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { TranslateService } from '../../../i18n/translate.service';
import { InputComponent } from '../../../shared/ui/input/input.component';
+import { ButtonComponent } from '../../../shared/ui/button/button.component';
import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';
import { HomepageOverviewComponent } from './homepage/homepage-overview.component';
+import { SectionConfig } from '../../../shared/models/config';
export interface LayoutStrategyOption {
value: 'stack' | 'grid' | 'hero' | 'carousel' | 'split';
@@ -15,12 +17,34 @@ export interface LayoutStrategyOption {
descKey: string;
}
+/** Merchant-facing catalog of the block types an admin can add to the homepage. Not the widget manifest (that carries technical settingsSchema) - this is presentation-only, matching the pattern already used in widgets-section.component.ts. */
+interface BlockCatalogEntry {
+ type: string;
+ icon: string;
+ labelKey: string;
+ descKey: string;
+ defaultLayout: LayoutStrategyOption['value'];
+}
+
+const BLOCK_CATALOG: BlockCatalogEntry[] = [
+ { type: 'hero', icon: 'pi-image', labelKey: 'builder.blockHero', descKey: 'builder.blockHeroDesc', defaultLayout: 'hero' },
+ { type: 'categories', icon: 'pi-th-large', labelKey: 'builder.blockCategories', descKey: 'builder.blockCategoriesDesc', defaultLayout: 'grid' },
+ { type: 'product-collection', icon: 'pi-box', labelKey: 'builder.blockFeaturedProducts', descKey: 'builder.blockFeaturedProductsDesc', defaultLayout: 'grid' },
+ { type: 'product-carousel', icon: 'pi-images', labelKey: 'builder.blockProductCarousel', descKey: 'builder.blockProductCarouselDesc', defaultLayout: 'carousel' },
+ { type: 'recently-viewed', icon: 'pi-history', labelKey: 'builder.blockRecentlyViewed', descKey: 'builder.blockRecentlyViewedDesc', defaultLayout: 'grid' },
+ { type: 'banner', icon: 'pi-megaphone', labelKey: 'builder.blockBanner', descKey: 'builder.blockBannerDesc', defaultLayout: 'split' },
+ { type: 'partners', icon: 'pi-verified', labelKey: 'builder.blockPartners', descKey: 'builder.blockPartnersDesc', defaultLayout: 'stack' },
+ { type: 'html', icon: 'pi-code', labelKey: 'builder.blockCustomHtml', descKey: 'builder.blockCustomHtmlDesc', defaultLayout: 'stack' },
+];
+
+const BLOCK_BY_TYPE = new Map(BLOCK_CATALOG.map(entry => [entry.type, entry]));
+
@Component({
selector: 'app-project-editor-homepage-section',
standalone: true,
- imports: [DragDropModule, FormsModule, TranslatePipe, InputComponent, SectionCardComponent, ToggleComponent, HomepageOverviewComponent],
+ imports: [DragDropModule, FormsModule, TranslatePipe, InputComponent, ButtonComponent, SectionCardComponent, ToggleComponent, HomepageOverviewComponent],
templateUrl: './homepage-section.component.html',
- styleUrls: ['./section.shared.scss'],
+ styleUrls: ['./section.shared.scss', './homepage-section.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorHomepageSectionComponent {
@@ -33,6 +57,8 @@ export class ProjectEditorHomepageSectionComponent {
};
readonly sections = computed(() => [...(this.homePage()?.sections ?? [])].sort((a, b) => a.order - b.order));
+ readonly blockCatalog = BLOCK_CATALOG;
+
readonly layoutStrategyOptions: LayoutStrategyOption[] = [
{ value: 'stack', labelKey: 'builder.layoutStrategyStack', descKey: 'builder.layoutStrategyStackDesc' },
{ value: 'grid', labelKey: 'builder.layoutStrategyGrid', descKey: 'builder.layoutStrategyGridDesc' },
@@ -45,44 +71,96 @@ export class ProjectEditorHomepageSectionComponent {
return this.layoutStrategyOptions.find(option => option.value === strategy)?.descKey ?? '';
}
+ blockLabel(type: string): string {
+ const entry = BLOCK_BY_TYPE.get(type);
+ return entry ? this.translate.t(entry.labelKey) : type;
+ }
+
+ blockDescription(type: string): string {
+ const entry = BLOCK_BY_TYPE.get(type);
+ return entry ? this.translate.t(entry.descKey) : '';
+ }
+
+ blockIcon(type: string): string {
+ return BLOCK_BY_TYPE.get(type)?.icon ?? 'pi-stop';
+ }
+
drop(event: CdkDragDrop
): void {
const sections = [...this.sections()];
moveItemInArray(sections, event.previousIndex, event.currentIndex);
- this.facade.updateBootstrap(current => ({
- ...current,
- pages: current.pages.map(page => page.id !== this.homePage()?.id ? page : ({
- ...page,
- sections: sections.map((section, index) => ({ ...section, order: index + 1 }))
- }))
- }));
+ this.replaceSections(sections.map((section, index) => ({ ...section, order: index + 1 })));
}
updateSection(sectionId: string, field: 'visible' | 'type', value: unknown): void {
- this.facade.updateBootstrap(current => ({
- ...current,
- pages: current.pages.map(page => page.id !== this.homePage()?.id ? page : ({
- ...page,
- sections: page.sections.map(section => section.id !== sectionId ? section : ({
- ...section,
- ...(field === 'type' ? { type: String(value) } : { visible: Boolean(value) })
- }))
- }))
- }));
+ this.replaceSections(this.sections().map(section => section.id !== sectionId ? section : ({
+ ...section,
+ ...(field === 'type' ? { type: String(value) } : { visible: Boolean(value) })
+ })));
}
updateLayout(sectionId: string, key: 'strategy' | 'columns', value: string): void {
+ this.replaceSections(this.sections().map(section => section.id !== sectionId ? section : ({
+ ...section,
+ layout: {
+ ...section.layout,
+ [key]: key === 'columns' ? Number(value) || 1 : value,
+ }
+ })));
+ }
+
+ addBlock(type: string): void {
+ const entry = BLOCK_BY_TYPE.get(type);
+ if (!entry) {
+ return;
+ }
+ const id = `section-${type}-${Date.now()}`;
+ const widgetId = `widget-${type}-${Date.now()}`;
+ const newSection: SectionConfig = {
+ id,
+ type,
+ order: this.sections().length + 1,
+ layout: { strategy: entry.defaultLayout, columns: 1, gap: '1.5rem', align: 'stretch' },
+ visibility: { desktop: true, tablet: true, mobile: true },
+ visible: true,
+ widgets: [{
+ id: widgetId,
+ type,
+ version: '1.0.0',
+ order: 1,
+ visibility: { desktop: true, tablet: true, mobile: true },
+ visible: true,
+ props: {},
+ }],
+ };
+ this.replaceSections([...this.sections(), newSection]);
+ }
+
+ duplicateBlock(sectionId: string): void {
+ const source = this.sections().find(section => section.id === sectionId);
+ if (!source) {
+ return;
+ }
+ const suffix = Date.now();
+ const copy: SectionConfig = {
+ ...source,
+ id: `${source.id}-copy-${suffix}`,
+ order: this.sections().length + 1,
+ widgets: source.widgets.map(widget => ({ ...widget, id: `${widget.id}-copy-${suffix}` })),
+ };
+ this.replaceSections([...this.sections(), copy]);
+ }
+
+ removeBlock(sectionId: string): void {
+ if (!confirm(this.translate.t('builder.blockRemoveConfirm'))) {
+ return;
+ }
+ this.replaceSections(this.sections().filter(section => section.id !== sectionId));
+ }
+
+ private replaceSections(sections: SectionConfig[]): void {
this.facade.updateBootstrap(current => ({
...current,
- pages: current.pages.map(page => page.id !== this.homePage()?.id ? page : ({
- ...page,
- sections: page.sections.map(section => section.id !== sectionId ? section : ({
- ...section,
- layout: {
- ...section.layout,
- [key]: key === 'columns' ? Number(value) || 1 : value,
- }
- }))
- }))
+ pages: current.pages.map(page => page.id !== this.homePage()?.id ? page : ({ ...page, sections }))
}));
}
}
diff --git a/src/app/features/project-editor/sections/widgets-section.component.html b/src/app/features/project-editor/sections/widgets-section.component.html
index 2dfb1c4..841ac4e 100644
--- a/src/app/features/project-editor/sections/widgets-section.component.html
+++ b/src/app/features/project-editor/sections/widgets-section.component.html
@@ -35,10 +35,39 @@
@switch (entry.widget.type) {
@case ('hero') {
-
-
+
+
+
+
+
+
{{ 'builder.heroSlidesHint' | translate }}
+ @for (slide of heroSlides(entry.widget); track $index) {
+
+ }
+
{{ 'builder.addSlide' | translate }}
+
{{ data?.emptyMessage }}
- }
+ }
`,
styles: [
@@ -33,6 +57,48 @@ import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';
}
.product-carousel-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
+
+ .product-carousel-widget__track {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .product-carousel-widget__scroller {
+ flex: 1;
+ overflow-x: auto;
+ scroll-behavior: smooth;
+ scrollbar-width: none;
+
+ &::-webkit-scrollbar { display: none; }
+
+ ::ng-deep .catalog-product-grid {
+ display: flex;
+ flex-wrap: nowrap;
+ gap: var(--space-md, 16px);
+ }
+
+ ::ng-deep .catalog-product-shell {
+ flex: 0 0 auto;
+ width: 220px;
+ }
+ }
+
+ .product-carousel-widget__arrow {
+ flex-shrink: 0;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ border: 1px solid var(--border-color, #d3dad9);
+ background: #fff;
+ color: var(--text-primary, #1e3c38);
+ cursor: pointer;
+ font-size: 1rem;
+
+ &:hover:not(:disabled) { background: var(--primary-color, #497671); color: #fff; }
+ &:disabled { opacity: 0.35; cursor: default; }
+ &:focus-visible { outline: 2px solid var(--primary-color, #497671); outline-offset: 2px; }
+ }
`
],
changeDetection: ChangeDetectionStrategy.OnPush
@@ -42,4 +108,30 @@ export class ProductCarouselWidgetComponent {
@Input() data: ProductCollectionWidgetData | null = null;
@Output() productSelected = new EventEmitter();
+
+ @ViewChild('scroller') private scroller?: ElementRef;
+
+ readonly atStart = signal(true);
+ readonly atEnd = signal(false);
+
+ get isCarousel(): boolean {
+ return this.section?.layout?.strategy === 'carousel';
+ }
+
+ scrollBy(direction: -1 | 1): void {
+ const el = this.scroller?.nativeElement;
+ if (!el) {
+ return;
+ }
+ el.scrollBy({ left: direction * el.clientWidth * 0.8, behavior: 'smooth' });
+ }
+
+ onScroll(): void {
+ const el = this.scroller?.nativeElement;
+ if (!el) {
+ return;
+ }
+ this.atStart.set(el.scrollLeft <= 4);
+ this.atEnd.set(el.scrollLeft + el.clientWidth >= el.scrollWidth - 4);
+ }
}