The router configuration for product routes is driven by static ULR parts and dynamic content form the product model. By default, the product code and name are used in the route configuration, to build out the URL. You can however customise the so-called route parameters. This is a common thing to do when you need a pretty product name in the URL.
Step 1:
normalise the product model, by mapping the product name to a "pretty name". You can do this by implementing a normalizer:
@Injectable({
providedIn: 'root',
})
export class ProductPrettyNameNormalizer
implements Converter<Occ.Product, Product> {
convert(source: Occ.Product, target?: any): Product {
target.prettyName = source.name.replace(/ /g, '-');
return target;
}
}
The normalizer can be provided in Angular, using DI. https://github.com/tobi-or-not-tobi/spartacus-bootcamp/blob/master/src/app/features/routing/product-routes.module.ts shows you an example.
Step 2:
configure the router configuration to use the prettyName
as a route parameter. You see an example of this in the fore-mentioned link.
The actual mapping is up to the project. Spartacus does not have a standard mapping as of now.