Create a Route Module:

import { NgModule } from '@angular/core';
import { ConfigModule, OccConfig, RoutingConfig } from '@spartacus/core';

@NgModule({
  declarations: [].imports: [
    ConfigModule.withConfig({
      routing: {
        routes: {
          product: {
            paths: [
              'cameras/:productCode/:manufacturer/:name'.'cameras/:productCode/:name'.'cameras/:productCode/',]}}}}as RoutingConfig),



    ConfigModule.withConfig({
      backend: {
        occ: {
          endpoints: {
            productSearch:
              // tslint:disable-next-line: max-line-length
              'products/search? fields=products(code,manufacturer,name,summary,price(FULL),images(DEFAULT),stock(FULL),averageRating,variantOptions),fac ets,breadcrumbs,pagination(DEFAULT),sorts(DEFAULT),freeTextSearch,currentQuery',},},},}as OccConfig),
  ]
})
export class RoutingConfigurationModule {}Copy the code

The default url: the product/productCode/productName

The route URL I maintain in the TypeScript code contains the hard-coded camera as follows:

camera/productCode/productName

After enabling my custom routing Module, the runtime effect is:

Another URL that contains manufactor code:

This is because I specified to fetch the Manufacturer field in the API endpoint:

More of Jerry’s original articles can be found in “Wang Zixi” :