Moving to commercetools Frontend

Product data

commercetools Frontend does not store product data, therefore you should integrate Frontend with a headless commerce system to get product data. Frontend comes with an extension for commercetools Composable Commerce. If you need to migrate your product data from your legacy system, Composable Commerce provides you with data import features.

For further information on how Frontend and Composable Commerce can work together, see commercetools Foundry and Store launchpads.

Customer data

commercetools Frontend does not store customer data, such as accounts, passwords, addresses, carts, orders, or wishlists. Like for product data, you should integrate Frontend with a headless commerce system to manage this data. The out-of-the-box integration with Composable Commerce helps you with it.

User sessions

It is not possible to migrate user sessions due to privacy restrictions. We recommend that you either ignore this issue or put a prominent banner about your re-launch on your home or landing pages.

URLs

commercetools Frontend provides flexibility regarding your URL scheme for static pages (for example, landing pages) and dynamic pages (for example, product detail pages).

With commercetools Frontend you can:

• Rebuild the URL paths for static pages in the Site builder.
• Manipulate the standard URL scheme for dynamic pages.

However, you might want to change your old URL scheme. In such cases, you can manage redirects in the Studio to maintain a good search engine score. Furthermore, if you need to add many redirects to your commercetools Frontend project, you can upload a CSV file in the Studio.

Content

Content management and delivery is a pivotal consideration when migrating to a new solution for digital commerce. Depending on your needs we recommend considering whether to use a headless CMS together with commercetools Frontend.

For further information, see Using commercetools Frontend with headless CMSs and Integrating commercetools Frontend with a headless CMS

Navigation structure

The recommended way to transfer your existing navigation structure to commercetools Frontend is to model it using the group schema field type as any combination of commerce categories and a tree field type, as in the following example.

{
  // Other schema properties.
  "schema": [
    {
      // ...
      "fields": [
        {
          "label": "Top categories",
          "field": "topCategories",
          "type": "group",
          "itemLabelField": "name",
          "min": 1,
          "max": 5,
          "fields": [
            {
              "label": "Category name",
              "field": "name",
              "type": "string",
              "translatable": false,
              "required": true
            },
            {
              "label": "Navigation tree",
              "field": "tree",
              "type": "tree"
            }
            //...
        },
        // ...
      ]
    },
  ]
  // Other schema properties.
}

If this approach is not suitable for you, you can implement the navigation structure in a Frontend component specific to your needs. This also lets you transfer your existing navigation structure, for example, by:

• Hard-coding the navigation structure into JavaScript code.
• Implementing an extension to a micro service that serves the navigation structure.
• Retrieving navigation from the page folder tree.

JavaScript/ReactJS components

If you developed your previous project in ReactJS, you might want to re-use your components. To do so, your components must not be hardbound to an application structure and their logic must be well encapsulated. Ideally, you have a set of presentational components as a UI component library. You can wrap this into Frontend components that hold the logic and work as an adapter towards the Frontend component API.

You can copy the existing source code to your GitHub customer repository (see Customer repository structure and Coding guide for further informarion) or source it as a dependence on your project.

CSS

If you bring UI components into your project, they will probably already have the related CSS code. You only need to ensure that your CSS works well with our grid system.

If you include the components using Yarn, webpack will automatically include your components' CSS code. If you decide to copy commercetools Frontend's UI component library, you can continue using your CSS by adding it to the library.

For further information, see Styling your site.

Want to know more?

You can sign up for a guided demo to discover more on commercetools Frontend.