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. This article will 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.

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.

Our customers often 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 pagesdynamic pages - A type of page that creates the default layout of pages that use the same structure but with different data, for example, a Product Details Page, wishlist, cart, search, and so on. Previously known as `master pages`. (for example, product detail pages), you can:

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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. (see our redirects in the Frontastic studio article).

If you want to import a large list of redirects, you can contact our Support team to do an initial import for you using a CSV file. 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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. 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 create an extensionextension - Data connectors that you add specifically to your project. to serve content from a headless Content Management System (CMS) to Frontastic. Or serve the content from an arbitrary source (for example, a database or even plain text files). See the Frontastic extensions 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 componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. 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 an extension to a microservice that serves the navigation structure
  • Retrieving navigation from the Frontastic page folder tree

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 componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. that hold the logic and deal as an adapter towards the Frontastic component API.

You can copy the existing source code to your GitHub customer repositoryGitHub customer repository - Where your code lives in GitHub for all your projects, you can have many project folders within your customer repository. (see the Frontastic coding guide article for where to put your code or source it as a dependence to your project.

CSS

If you bring UI components into your Frontastic project, these will probably already have a CSS codebase. 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 component CSS. If you decide to copy our UI library, you can continue using this CSS by adding it into the library.

See the styling your site article for more information.


Did this page help you?