I'm working with SAP Spartacus/Composable Storefront 6.7, and getting some issues about page titles.
On my backoffice, I've configured all page titles, but I need to add " - Company Name" as suffix to all page titles, including all PLP, and PDP.
I tried the solution below and works fine on all Content Pages, but defects on PLP and PDP.
The PLP keeps without any title (showing the last page title I've open or page URL), and the PDP shows only the product name, without the suffix.
On app.module.ts
, I've added this provider:
{
provide: PageMetaResolver,
useExisting: CustomPageMetaService,
multi: true,
},
And created this class:
import { Injectable } from '@angular/core';
import {
BasePageMetaResolver,
PageHeadingResolver,
ContentPageMetaResolver,
PageTitleResolver,
PageType,
PageMetaResolver,
} from '@spartacus/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root',
})
export class CustomPageMetaService
extends PageMetaResolver
implements PageTitleResolver, PageHeadingResolver
{
constructor(private basePageMetaResolver: BasePageMetaResolver) {
super();
this.pageType = PageType.CONTENT_PAGE; // If I change this line to any other PageType, its stop working on all pages.
}
resolveHeading(): Observable<string | undefined> {
return this.basePageMetaResolver.resolveTitle();
}
resolveTitle(): Observable<string | undefined> {
return this.basePageMetaResolver
.resolveTitle()
.pipe(
map((title) =>
title
? `${title} - Company Name`
: 'Company Name'
)
);
}
}
Instead of extending PageMetaResolver extend ProductPageMetaResolver. Use like below
import { ProductPageMetaResolver } from "@spartacus/core"
import { Observable, switchMap } from "rxjs"
export class CustomProductPageMetaResolver extends ProductPageMetaResolver {
override resolveHeading(): Observable<string> {
return super.resolveHeading();
}
override resolveTitle(): Observable<string> {
return this.product$.pipe(
switchMap((product) => {
// let title = product.name;
// title += this.resolveFirstCategory(product);
// title += this.resolveManufacturer(product);
let title = 'My Company Store';
return this.translation.translate('pageMetaResolver.product.title', {
title: title,
});
})
);
}
}