Moving to Frontastic

When moving to Frontastic, there's a lot you might want to take with you from your old eCommerce project setup, like product data, code, designs, and so on. In this article, we'll go through what you can take with you, how you can do it, and which external systems are involved.

Product data

If you're not starting a brand new business and aren't yet using the headless backend system to use in combination with Frontastic, you'll want to take your existing data with you from your previous project setup. Such data will most probably include the product catalog database, with product variants, categories, attributes, and so on.

Since Frontastic doesn't store any of this data, you'll need to look to your future headless eCommerce system to get this data. Many headless eCommerce systems come with import tools that can connect directly to your deprecated system or import in standardized formats.

If your target system doesn't support an import, you'll need to implement a transfer mechanism using the APIs of your source and target system yourself. Frontastic connector code might give you inspiration on how to work with your target system. Feel free to build upon this code but we're unable to support changes here.

User data

Frontastic also doesn't store any user data, such as accounts, passwords, addresses, carts, orders, and wishlists. So, you'll need to use the same import process as for product data.

In many cases, our customers ignore migrating existing carts and wishlists because it's too much effort. Providing a voucher with a small discount to your customers who lose their cart or wishlist might mitigate their frustration or even revive old customer relations.

It's not possible to migrate your customer passwords because these are stored in an encrypted way that's not possible to recover for security reasons. Two options to manage this are:

• Ignore it and let your customers use the recover password function when they try to log in
• Send a bulk mail to your customers about the system change and proactively ask them for password recovery to re-activate their account

User sessions

It's 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

Frontastic provides you with a lot of flexibility regarding your URL scheme for static (for example, landing pages) and dynamic pages (for example, product detail pages), you can:

• Rebuild the URL paths for static pages in the site builder
• Manipulate the standard URL scheme for dynamic pages (see the customize product URLs article)

Still, it mightn't be entirely possible — or even desired — to keep the URL scheme of your old system. To maintain a decent search engine score, Frontastic provides you with a mechanism to manage redirects in the Frontastic studio (see our redirects in the Frontastic studio article).

If you want to import a large list of redirects, you can use a CSV to bulk upload redirects directly in the studio. Find out more about adding bulk redirects in our redirects article.

Content

Frontastic allows you to store simple text and Markdown annotated rich-text as page content which provides you with basic content management facilities. There's no way to import this information into the Frontastic studio yet. So, you'll need to copy and paste the content manually, which should be feasible for smaller content pieces.

If your site consists of large content blocks or a large number of content pages, you can also use our standard integrations to serve content from a headless Content Management System (CMS) to Frontastic (see our integrations section) or add a custom extension to your CMS (see our extensions section).

You can also implement your own microservice to serve content from an arbitrary source (for example, a database or even plain text files) and attach this to Frontastic using a custom extension (see our retrieving custom data article for more information).

Navigation

Frontastic doesn't provide you with a mandatory way to structure your site navigation. Instead, you're free to implement it in a Frontastic component specifically to your needs. This should also allow you to transfer your existing navigation structure by, for example:

• Hard-coding the navigation structure into JavaScript code
• Implementing a microservice that serves the navigation structure
• Retrieving navigation from the Frontastic page folder tree (see our header starter component for reference)

JavaScript/ReactJS components

If you developed your previous project in ReactJS, chances are that you can re-use these within Frontastic. The general precondition is that your components aren't hardbound to an application structure and have their logic well encapsulated. Ideally, you have a set of presentational components as a UI component library. You can wrap this into Frontastic components that hold the logic and deal as an adapter towards the Frontastic component API.

You can either copy the existing source code to your GitHub customer repository (see our where to put your code article) or source it as a dependence to your project through the Yarn package manager (see our using Yarn article for more information).

CSS

If you bring UI components into your Frontastic project, these will probably already have a CSS codebase. You only need to make sure that your CSS works well with our grid system (see our cells and responsive layouts article for more information).

If you include the components using Yarn, webpack will automatically include your component CSS. If you decide to copy our UI library, you can continue using this CSS by adding it into the library.

While we recommend using SASS and put all CSS code into src/scss, you're free to use a CSS mechanism of your choice and integrate it with our build system using a custom webpack extension. More information on different ways to include your CSS can be found in our CSS integration options article.