The theme is no longer being maintained by Virto Commerce. Developers are encouraged to check out Vue B2B Theme .
You can continue to use the theme with Virto Commerce Platform 3.x and Storefront 5.x; however, this repo will not be kept up-to-date.
Default theme for VirtoCommerce Storefront used by Electronics sample store. It includes the largest number of features and support latest updates of Storefront so it always stay actual.
Main article: theme development on virtocommerce.com/docs
git clone https://github.com/VirtoCommerce/vc-theme-default.git "C:\vc-theme-default"
(where C:\vc-theme-default is path to folder where you want to clone repo).
mklink /d "C:\vc-platform\VirtoCommerce.Platform.Web\App_Data\cms-content\Themes\Electronics\default" "C:\vc-theme-default"
(where C:\vc-platform\VirtoCommerce.Platform.Web\App_Data\cms-content is path to CMS content storage configured at platform & storefront deployment steps, 'Electronics' is your store name and 'C:\vc-theme-default' is path to your theme repo).
npm install
to install Node.js dependencies.
You need to have local installation of storefront. Follow this article step-by-step to install storefront from binaries or source code.
If you have Visual Studio 2015 with Update 3 and above, you don't need install any prerequisites. Latest versions of Node.js and Gulp already included in your Visual Studio installation and supported in built-in Task Runner Explorer.
Task Runner Explorer, Node.js and Gulp already included in your Visual Studio installation. However, you need update your Node.js to at least 4.0.0.
You need install:
npm install gulp -g
npm install gulp -g
Liquid is the templating engine that powers Virto Commerce templates. Go to Liquid documentation.
Main article: bundling & minification on virtocommerce.com/docs
Bundling is a technique you can use to improve request load time. Bundling improves load time by reducing the number of requests to the server (assets such as CSS and JavaScript will be combined to single file per file format).
The code
let someVar = 1;
will produce an error during minification.
The code
var id = 1;
var someObj = {id};
will result in an error during minification.
{{ 'bundle/scripts.js' | static_asset_url | append_version | script_tag }}
<script ... >
or
<link rel="stylesheet" ... >
When you run the default task to bundle & minify theme, the following happens:
Bundling & minification will work automatically when you save file and on build.
Bundling & minification will work automatically on build. If you want to automatically bundle & minify files on save, please, install & configure Blade Runnner Visual Studio Code extension.
Run
gulp watch
on command line if you want to bundle & minify files on save or run
gulp default
manually when you need to bundle & minify theme files.
Each time you get theme sources from git or when you change dependencies in bower.json, you need to run
bower install
to build Bower dependencies and run the task
gulp packJavaScript
that bundles 3rd party dependencies.
Attention: while theme including bundlesconfig.json file, you must not use Bundler & Minifier Visual Studio extension with theme. We're using gulp to bundle & minify files on theme, because it support a lot of possible customizations and has a plugins for css minification and correct source maps generation. Wrong source map generation and lack of css minification is a primary reason why we do not use Bundler & Minifier extension in Visual Studio.
Tip: if bundling & minification failed, you, probably, need to run gulp watch task manually after that. In Visual Studio, go to Task Runner Explorer and click Run on task watch. In Visual Studio Code go to Command Palette (Ctrl+Shift+P) and type
task watch
then press Enter.
The following gulp tasks available to you:
Main article: how to localize theme on virtocommerce.com/docs
Storefront theme localization is very similar to VirtoCommerce Platform localization. Check it for details on working with translation files.