feat(builder): visual footer builder with drag-and-drop columns
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> P0 user feedback: footer static pages were comma-separated text; no way to add extra phones/emails for different countries. - New FooterColumnConfig/FooterLinkConfig model (footer-config.model.ts): columns of links, each link pointing at an existing static page (resolved by key, so it survives route renames) or a custom URL - Footer Builder UI: add/remove columns and links, per-link toggle between 'existing page' (dropdown of real static pages) and 'custom URL', drag-and-drop reordering of both columns and links via @angular/cdk/drag-drop (same primitive already used by the homepage section builder) - Wired FooterResolverService (the service the real storefront footer actually renders through) to read footer.columns as the primary source when present - without this the builder would have saved data nobody ever displayed. Falls back to the existing legacy static-page auto-grouping when no columns are configured, so existing sites are unaffected - CompanyContactConfig gains additionalPhones/additionalEmails (primary phone/email field unchanged) with add/remove UI for country-specific support lines - Old comma-separated staticPageKeys input removed from the UI; field kept on the model as deprecated/read-compat only - New builder.* i18n keys (en/ru/hy); fixed an accidental duplicate-key collision with pre-existing navigation-section addLink/removeLink keys during the rename pass - Verified in browser: added column, added link, switched link source page->custom, added phone number - all reactive and error-free
This commit is contained in:
sdarbinyan
@@ -5,6 +5,28 @@
|
||||
<app-form-field [label]="'builder.address' | translate" [hint]="'builder.addressDesc' | translate"><app-input [ngModel]="bootstrap.company.address.street || ''" (ngModelChange)="updateAddress($event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.phone' | translate" [hint]="'builder.phoneDesc' | translate"><app-input [ngModel]="bootstrap.company.contacts.phone || ''" (ngModelChange)="updatePhone($event)" /></app-form-field>
|
||||
<app-form-field [label]="'builder.email' | translate" [hint]="'builder.emailDesc' | translate" [error]="fieldError('company.contacts.email')"><app-input [ngModel]="bootstrap.company.contacts.email" (ngModelChange)="updateEmail($event)" /></app-form-field>
|
||||
|
||||
<div class="full">
|
||||
<label><span>{{ 'builder.additionalPhones' | translate }}</span><small class="field-desc">{{ 'builder.additionalPhonesDesc' | translate }}</small></label>
|
||||
@for (phone of additionalPhones(); track $index) {
|
||||
<div class="contact-row">
|
||||
<app-input [ngModel]="phone" (ngModelChange)="updatePhoneAt($index, $event)" [placeholder]="'builder.phone' | translate" />
|
||||
<button type="button" class="contact-row__remove" (click)="removePhoneAt($index)" [attr.aria-label]="'builder.removePhone' | translate">×</button>
|
||||
</div>
|
||||
}
|
||||
<app-button variant="secondary" size="sm" (click)="addPhone()">{{ 'builder.addPhone' | translate }}</app-button>
|
||||
</div>
|
||||
|
||||
<div class="full">
|
||||
<label><span>{{ 'builder.additionalEmails' | translate }}</span><small class="field-desc">{{ 'builder.additionalEmailsDesc' | translate }}</small></label>
|
||||
@for (email of additionalEmails(); track $index) {
|
||||
<div class="contact-row">
|
||||
<app-input type="email" [ngModel]="email" (ngModelChange)="updateEmailAt($index, $event)" [placeholder]="'builder.email' | translate" />
|
||||
<button type="button" class="contact-row__remove" (click)="removeEmailAt($index)" [attr.aria-label]="'builder.removeEmail' | translate">×</button>
|
||||
</div>
|
||||
}
|
||||
<app-button variant="secondary" size="sm" (click)="addEmail()">{{ 'builder.addEmail' | translate }}</app-button>
|
||||
</div>
|
||||
<app-form-field class="full" [label]="'builder.copyright' | translate" [hint]="'builder.copyrightDesc' | translate"><app-input [ngModel]="copyrightValue()" (ngModelChange)="updateCopyright($event)" /></app-form-field>
|
||||
<app-form-field class="full" [label]="'builder.footerLogo' | translate" [hint]="'builder.footerLogoDesc' | translate">
|
||||
<app-image-field [value]="bootstrap.footer?.logoUrl || ''" (valueChange)="updateLogo($event)" />
|
||||
@@ -60,7 +82,51 @@
|
||||
</app-key-value-editor>
|
||||
</div>
|
||||
|
||||
<app-form-field class="full" [label]="'builder.staticPages' | translate" [hint]="'builder.staticPagesFieldDesc' | translate"><app-input [ngModel]="staticPagesValue()" (ngModelChange)="updateStaticPages($event)" /></app-form-field>
|
||||
<div class="full">
|
||||
<label><span>{{ 'builder.footerColumns' | translate }}</span><small class="field-desc">{{ 'builder.footerColumnsDesc' | translate }}</small></label>
|
||||
|
||||
<div class="footer-columns" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="dropColumn($event)">
|
||||
@for (column of columns(); track column.id) {
|
||||
<div class="footer-column" cdkDrag>
|
||||
<div class="footer-column__head" cdkDragHandle>
|
||||
<span class="pi pi-bars footer-column__grip" aria-hidden="true"></span>
|
||||
<app-input [ngModel]="column.title" (ngModelChange)="updateColumnTitle(column.id, $event)" [placeholder]="'builder.footerColumnTitlePlaceholder' | translate" />
|
||||
<button type="button" class="footer-column__remove" (click)="removeColumn(column.id)" [attr.aria-label]="'builder.removeColumn' | translate">×</button>
|
||||
</div>
|
||||
|
||||
<div class="footer-column__links" cdkDropList [cdkDropListData]="column.links" (cdkDropListDropped)="dropLink(column.id, $event)">
|
||||
@for (link of column.links; track link.id) {
|
||||
<div class="footer-link" cdkDrag>
|
||||
<span class="pi pi-bars footer-link__grip" cdkDragHandle aria-hidden="true"></span>
|
||||
<app-input [ngModel]="link.label" (ngModelChange)="updateLink(column.id, link.id, { label: $event })" [placeholder]="'builder.footerLinkLabelPlaceholder' | translate" />
|
||||
|
||||
<select class="footer-link__source" [ngModel]="linkSourceMode(link)" (ngModelChange)="setLinkSourceMode(column.id, link.id, $event)">
|
||||
<option value="page">{{ 'builder.footerLinkExistingPage' | translate }}</option>
|
||||
<option value="custom">{{ 'builder.footerLinkCustomUrl' | translate }}</option>
|
||||
</select>
|
||||
|
||||
@if (linkSourceMode(link) === 'page') {
|
||||
<select [ngModel]="link.pageKey" (ngModelChange)="updateLink(column.id, link.id, { pageKey: $event })">
|
||||
@for (page of availablePages(); track page.id) {
|
||||
<option [value]="page.id">{{ page.title }}</option>
|
||||
}
|
||||
</select>
|
||||
} @else {
|
||||
<app-input type="url" [ngModel]="link.url" (ngModelChange)="updateLink(column.id, link.id, { url: $event })" placeholder="https://" />
|
||||
}
|
||||
|
||||
<button type="button" class="footer-link__remove" (click)="removeLink(column.id, link.id)" [attr.aria-label]="'builder.removeColumnLink' | translate">×</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<app-button variant="secondary" size="sm" (click)="addLink(column.id)">{{ 'builder.addColumnLink' | translate }}</app-button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<app-button variant="secondary" size="sm" (click)="addColumn()">{{ 'builder.addColumn' | translate }}</app-button>
|
||||
</div>
|
||||
</div>
|
||||
</app-section-card>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user