sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(builder): visual homepage blocks, merchant-language widget settings, real carousel arrows

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

P0 user feedback: homepage builder showed raw section.id like 'section-hero'/'section-categories'; hero widget exposed 'full-bleed'/'boxed' and raw px/vh as free text with no explanation; Overlay/Autoplay toggles made no sense without a slides concept; product carousel widgets rendered arrows nowhere near a working carousel.

Homepage section (sections list -> visual blocks):
- Replaced raw section.id display with a merchant-facing block catalog (icon + name + one-line explanation) for hero/categories/featured-products/product-carousel/recently-viewed/banner/partners/custom-html
- Added block catalog picker to append new blocks (was fixed at whatever the seed data had - task asked 'what if we add manually? not fixed 3')
- Added duplicate and remove per block, alongside the existing drag-to-reorder
- Verified in browser: labels render correctly, add-block and duplicate both confirmed working end-to-end

Widgets section (hero widget):
- 'Layout' free-text replaced with a select (Full width / Boxed) instead of typing 'full-bleed'/'boxed' blind
- 'Height' free-text replaced with a select (Compact/Medium/Tall/Full screen) mapped to real vh values
- New Slides editor: title/subtitle pairs an admin can add/remove: this is the actual multi-slide data the Overlay/Autoplay toggles were referring to with nothing to point at before
- HeroWidgetData contract gains slides[]/autoplay; HeroWidgetComponent now renders a real rotator (dots, click-to-jump, autoplay interval) when more than one slide exists - previously autoplay/overlay props existed but there was no slideshow behavior anywhere to control

Carousel arrows root cause and fix:
- widget-manifest.json offers 'carousel' as a layout option for product-collection/product-carousel widgets, and the admin UI let you select it, but ProductCarouselWidgetComponent always rendered a static CSS grid regardless - there was no carousel implementation to have arrows in the first place
- Now renders a real horizontally-scrollable strip with working prev/next buttons (native scrollBy, disabled at each end) when section.layout.strategy === 'carousel'; falls back to the existing grid otherwise
- Confirmed src/app/components/items-carousel (a PrimeNG p-carousel) is dead code, not wired into any route or widget - not the source of the reported bug

New builder.* i18n keys (en/ru/hy), zero duplicate-key collisions verified via scan
This commit is contained in:
sdarbinyan
2026-07-19 14:14:29 +04:00
parent 726df0cee0
commit 71d5f4d320
14 changed files with 705 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/app/features/project-editor/sections/homepage-section.component.ts
View File

@@ -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<unknown[]>): 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 }))
}));
}
}