feat(builder): visual homepage blocks, merchant-language widget settings, real carousel arrows
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
@@ -4,34 +4,72 @@
|
||||
@if (fieldError('pages'); as msg) {
|
||||
<p class="editor-error">{{ msg }}</p>
|
||||
}
|
||||
<div cdkDropList class="sortable-list" (cdkDropListDropped)="drop($event)">
|
||||
<p class="field-desc">{{ 'builder.homepageBlocksHint' | translate }}</p>
|
||||
|
||||
<div cdkDropList class="block-list" (cdkDropListDropped)="drop($event)">
|
||||
@for (section of sections(); track section.id) {
|
||||
<div class="sortable-item" cdkDrag>
|
||||
<div class="editor-grid four compact">
|
||||
<strong>{{ section.id }}</strong>
|
||||
<label class="toggle-row">
|
||||
<div class="block-card" cdkDrag [class.block-card--hidden]="section.visible === false">
|
||||
<div class="block-card__handle" cdkDragHandle [attr.aria-label]="'builder.dragToReorder' | translate">
|
||||
<span class="pi pi-bars" aria-hidden="true"></span>
|
||||
</div>
|
||||
|
||||
<div class="block-card__preview">
|
||||
<span class="pi {{ blockIcon(section.type) }}" aria-hidden="true"></span>
|
||||
</div>
|
||||
|
||||
<div class="block-card__body">
|
||||
<div class="block-card__title-row">
|
||||
<strong>{{ blockLabel(section.type) }}</strong>
|
||||
@if (section.visible === false) {
|
||||
<span class="block-card__hidden-badge">{{ 'builder.widgetHidden' | translate }}</span>
|
||||
}
|
||||
</div>
|
||||
<p class="block-card__desc">{{ blockDescription(section.type) }}</p>
|
||||
|
||||
<div class="editor-grid two compact">
|
||||
<label>
|
||||
<span>{{ 'builder.layoutStrategyLabel' | translate }}</span>
|
||||
<small class="field-desc">{{ layoutStrategyDescKey(section.layout?.strategy || 'stack') | translate }}</small>
|
||||
<select [ngModel]="section.layout?.strategy || 'stack'" (ngModelChange)="updateLayout(section.id, 'strategy', $event)">
|
||||
@for (option of layoutStrategyOptions; track option.value) {
|
||||
<option [value]="option.value">{{ option.labelKey | translate }}</option>
|
||||
}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>{{ 'builder.columns' | translate }}</span>
|
||||
<small class="field-desc">{{ 'builder.sectionColumnsDesc' | translate }}</small>
|
||||
<app-input type="number" [ngModel]="section.layout?.columns || 1" (ngModelChange)="updateLayout(section.id, 'columns', $event)" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-card__actions">
|
||||
<label class="block-card__visible-toggle">
|
||||
<app-toggle [ngModel]="section.visible !== false" (ngModelChange)="updateSection(section.id, 'visible', $event)" [ariaLabel]="'builder.visible' | translate" />
|
||||
<span>{{ 'builder.visible' | translate }}</span>
|
||||
<small class="field-desc">{{ 'builder.sectionVisibleDesc' | translate }}</small>
|
||||
</label>
|
||||
<label>
|
||||
<span>{{ 'builder.layoutStrategyLabel' | translate }}</span>
|
||||
<small class="field-desc">{{ 'builder.layoutStrategyDesc' | translate }}</small>
|
||||
<select [ngModel]="section.layout?.strategy || 'stack'" (ngModelChange)="updateLayout(section.id, 'strategy', $event)">
|
||||
@for (option of layoutStrategyOptions; track option.value) {
|
||||
<option [value]="option.value">{{ option.labelKey | translate }}</option>
|
||||
}
|
||||
</select>
|
||||
<small class="field-desc">{{ layoutStrategyDescKey(section.layout?.strategy || 'stack') | translate }}</small>
|
||||
</label>
|
||||
<label>
|
||||
<span>{{ 'builder.columns' | translate }}</span>
|
||||
<small class="field-desc">{{ 'builder.sectionColumnsDesc' | translate }}</small>
|
||||
<app-input type="number" [ngModel]="section.layout?.columns || 1" (ngModelChange)="updateLayout(section.id, 'columns', $event)" />
|
||||
</label>
|
||||
<button type="button" [attr.aria-label]="'builder.widgetDuplicate' | translate" (click)="duplicateBlock(section.id)">
|
||||
<span class="pi pi-copy" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button type="button" class="block-card__remove" [attr.aria-label]="'builder.widgetRemove' | translate" (click)="removeBlock(section.id)">
|
||||
<span class="pi pi-trash" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="block-catalog">
|
||||
<p class="field-desc">{{ 'builder.addBlockHint' | translate }}</p>
|
||||
<div class="block-catalog__grid">
|
||||
@for (entry of blockCatalog; track entry.type) {
|
||||
<button type="button" class="block-catalog__item" (click)="addBlock(entry.type)">
|
||||
<span class="pi {{ entry.icon }}" aria-hidden="true"></span>
|
||||
<span>{{ entry.labelKey | translate }}</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</app-section-card>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user