B2B theme for VirtoCommerce Storefront

B2B theme for VirtoCommerce Storefront used by B2B-Store sample store. It is a showcase for b2b features support of VirtoCommerce.

Main article: theme development on virtocommerce.com/docs

CMS Content folder structure

Getting started

Install prerequisites.
Clone repo.
1. In Visual Studio, go to Team Explorer → Clone → Enter https://github.com/VirtoCommerce/vc-theme-b2b.git as URL and C:\vc-theme-b2b (for example) as path.
2. Or execute command
```
git clone https://github.com/VirtoCommerce/vc-theme-b2b.git "C:\vc-theme-b2b"
```
  (where C:\vc-theme-b2b is path to folder where you want to clone repo).
Link you theme repo to store. Execute:
```
mklink /d "C:\vc-platform\VirtoCommerce.Platform.Web\App_Data\cms-content\Themes\B2B-Store\default" "C:\vc-theme-b2b"
```
(where C:\vc-platform\VirtoCommerce.Platform.Web\App_Data\cms-content is path to CMS content storage configured at platform & storefront deployment steps, 'B2B-Store' is your store name and 'C:\vc-theme-b2b' is path to your theme repo).
Open theme folder in your IDE
1. Go to File → Open → Folder
2. Select C:\vc-theme-b2b (where C:\vc-theme-b2b is path to folder where you want to clone repo) and open it.
Install Node.js dependencies. Run
```
npm install
```
to install Node.js dependencies.

Prerequisites

Storefront

You need to have local installation of storefront. Follow this article step-by-step to install storefront from binaries or source code.

Node.js

Install Node.js v12.0.0 or above (we recommend latest LTS version)
Execute the following command: npm install --global --production windows-build-tools

Liquid reference

Liquid is the templating engine that powers Virto Commerce templates. Go to Liquid documentation.

Bundling & minification

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).

How bundling and minification works

How to add bundle to layout

{% raw %}{{ 'bundle/scripts.js' | static_asset_url | append_version | script_tag }}{% endraw %}

static_asset_url means that this file is static content of site

script_tag or stylesheet_tag will generate

<script ... >

<link rel="stylesheet" ... >

append_version is used to correctly invalidate browser cache for bundles. It calculate hash of file and append it as part of query string in url. Make sure that it's added after static_content_url (or other url filter), not after script_tag, stylesheet_tag (or other html tags).

Bundling and minification process workflow

When you run the default task to bundle & minify theme, the following happens:

ESLint runs and output warnings and errors in javascript code.
Javascript minifies and source maps generates.
CSS processes by Autoprefixer with the following browsers support (documentation may be sometimes outdated; browser versions specified in gulpfile then specified in docs, not vice versa).
CSS minifies and source maps generates.

Commands

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.

Run

npx gulp watch

on command line if you want to bundle & minify files on save or run

npx gulp default

manually when you need to bundle & minify theme files.

The following gulp tasks available to you:

default: default task. Bundles and minifies theme files.
clean: removes bundled & minified files.
lint: runs eslint to check for warnings & errors in javascript files. Look at eslint site for details.
min and min:js, min:css, min:html: minify all or specified types of files.
watch: watching to any changes on bundled & configuration files and update bundles when any change occurs.
compress: creates zip package with all needed files to deploy theme on storefront.

How to localize theme

Main article: how to localize theme on virtocommerce.com/docs

Adding new translation to theme

Storefront theme localization is very similar to VirtoCommerce Platform localization. Check it for details on working with translation files.

Make a copy of <theme repository location>\locales\en.default.json file
Rename the copied file to begin with your needed language 2 letter code (e.g., "es.default.json").
Translate the file content.

Adding new language to store

Open your store in VirtoCommerce Platform ( More → Browse → Stores → <your store> ).
Check whether your language exists in the "Additional languages" available values list or add it in case it's missing:

License

Licensed under the Virto Commerce Open Software License (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://virtocommerce.com/opensourcelicense

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

CreativeOthman/vc-demo-theme-b2b