Composable Storefront Multi-country under one domain name

[joris_quenee]

Introduction

This article will explain shortly how to setup Composable Storefront in order to get multi-country website with unique domain name. 

Idea is to have this kind of URL path pattern : https://<company.com>/<country>/<language>

Commerce BackOffice

Content Catalog

First thing is to setup a multi-country content catalog structure for supporting this website. Parent content catalog will contain global website data where Childs content catalog will contain specific country content. Then, you will need to create one child content catalog for each country.

CMSSite

Now, you need to create a CMSSite for each country. CMSSite makes the link with your content catalog and your product catalog. We could imagine to have global product catalog shared by all countries or to create a dedicated product catalog for each country. This design decision should be made according your organisation.

Another aspect is the BaseStore. This object represents your legal entity that will receive orders. Again, we could imagine to have a global BaseStore or a dedicated BaseStore by country. 

BaseSite mapping

After you created all your CMSSites, you have now to indicate for Composable Storefront which BaseSite/CMSite must be loaded regarding URL pattern.

You should find in CMSSite item a property name URLPatterns

In our design, you must add this following pattern/regex rule at the beginning. For example, Electronics UK will have 

(?i)^https?://www.electronics.com/uk+(|/.*|\\?.*)$

BaseSite URL Encoding

You need also to indicate for Composable Storefront how URL path should be computed according site context. For that, you need to update the property URL encoding attributes

BaseSite Default Country

In native default country doesn't exist at BaseSite level. You will need to extend data model for adding this property as Base Configuration. Then this new value can be transmitted to Composable Storefront through OCC API BaseSite : /occ/v2/basesites

Composable Storefront

Site Context

Composable Storefront needs to compute correctly new URL path according BaseSite setting. Country parameter is not native and it must be introduced. For that, you have to customize SiteContextConfigInitializer 

https://github.com/SAP/spartacus/blob/develop/projects/core/src/site-context/config/config-loader/si...

You can review the following method getConfig(source: BaseSite): SiteContextConfig

Multi Country Selector Component

Last optional step is to introduce a new component that will help your customer to switch from a country to another.

First, you need to create a CMSFlexComponent in BackOffice with flexType as MulticountrySelectorComponent

In Composable Storefront side, you need to create this new component and map this Angular component to Commerce CMS Component. For that, you just have to declare the following mapping

// CMS Component mapping
  // with CMSFlexComponent flexType = MulticountrySelectorComponent
  providers: [
    provideDefaultConfig(<CmsConfig>{
      cmsComponents: {
        MulticountrySelectorComponent: {
          component: MulticountrySelectorComponent,
        },
      },
    }),]

In side Angular Component, you can use BaseSiteService to get data from OCC BaseSite call and do all the rendering logic

import { BaseSiteService } from '@spartacus/core';

Then in MulticountrySelectorComponent template, you can use simple <a href> to do redirect toward other country website.

In this context, each country will be considered as different SPA. It is why we cannot use Angular <a routerLink>

Conclusion

SAP Commerce Cloud and Composable Storefront are very flexible. And with few adaptions, we can easily create multi-country website. 

If you need to enter in more detail or/and need more support for your business, please don't hesitate to contact SAP Expert Services.

We can can help you to design the best solution according your business needs.