How to make FO components

You need to determine what kind of component to create a package

Ex: component cartList is commerce component, so you create new folder name cartList. The name must be followed rule camelCase.

Because this is commerce component, it supports multi-sites so you need to follow How to create component for multi-sites

You can test your component in local by create page inside folder src/pages

Ex: I create page cart.vue to test component cartList

Because this is commerce component so I create file inside folder commerce and you can access to this page by: http://local.i-on.net:8000/commerce/cart

The default theme was configured in folder: config/loc.config.js

As you see, defaultTheme is multikart, if you want to test all pages with theme unishop , you can change defaultTheme to unishop

*Tips: If you just want to test 1 page you made, you can switch theme by add param: _theme=unishop on url

*Notice: You can test static only on this link, if you want to integrate with API, please move to next step

After implement FO component, you need to register component on backendCore to use in ICE4

Access to this file: resource/schema/commerce/curations/foComponentData.json

This is a template to register a new component, here is explanation of some fields you need to change

typeId: foComponent

componentId: this is what you name your component in file collection

componentName: Name of your component which is used on builder

componentCategory: 2000 is Commerce

thumbnail: you can take a screenshot of your component and put it in folder: schema/core/builder/frontoffice/componentImages

After registered your component, you need to reload schema (replace [YOUR-DIRECTORY] by yours):

Access to builder and go to Platform Console/Sites/Pages and select Commerce Site Id on top bar

Create your new page and click on button Edit to move to templateEditor

Select any Template, you can find your component in left side bar

Just drag & drop your component and that's all

Hope you can do it by yourself