requirements:
- VC platform source code https://github.com/VirtoCommerce/vc-platform
- VC storefront source code https://github.com/VirtoCommerce/vc-storefront-core
- visual studio 2017+ https://visualstudio.microsoft.com/vs/community/
- visual studio code https://code.visualstudio.com/download
- angular https://angular.io/guide/setup-local
-
run VC platform v3 from source code, see: https://github.com/VirtoCommerce/vc-platform/blob/master/docs/deploy-from-source-code.md
-
create a new store:
-
create a new theme for the store:
-
open VS code, create a new angular app with a command âng new VCAngularâ
-
go to VC platform directory
âVirtoCommerce.Platform.Web\wwwroot\cms-content\Themes\VcAngularâ and remove your created theme folder. E.g if your theme named âdefaultâ you should delete âdefaultâ folder.
- open windows console (run as admin)
- in windows console go to directory âvc-platform\src\VirtoCommerce.Platform.Web\wwwroot\cms-content\Themes\VcAngularâ
- create a symlink with the following command âsymlink /d default E:\Projects\AngularVCâ
âE:\Projects\AngularVCâ should be set to your Angular app root path.
after that youâll see a picture like this:
in the picture, you can see that symlink successfully created with name âdefaultâ
- further, in your created angular app open angular.json file and change output path in build section to âassets/static/bundleâ. Here the diff that you should get:
and in VS Code terminal run command ânpm run buildâ
- in your angular app root directory create the following folders: templates, snippets, layout
- in the templates folder create an empty file âindex.liquidâ
- in the layout folder create a file âtheme.liquidâ, place the following content into your theme.liquid file:
-
open storefront project, open âappsettings.jsonâ file, change the default theme to âAngularVCâ:
-
donât forget to set current store to âSPAâ mode:
Now, you can run vc platform, and VC storefront. Youâll have to be able to see the following:
Profit!
Source code: https://github.com/t13ka/AngularVCTheme