Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Sources directory.npm install command. This command will load all necessary dependencies specified in the package.json file.npm install -g @angular/cli command to install Angular CLI (if not yet installed).To start a local HTTP server and runs the build process with change tracking run the command:
ng serveTo build for production, run the command:
ng build --prodAfter executing the command, the compiled project will be located in the dist directory.
For a complete list of available Angular CLI commands, go to this link.
Project source codes are in the Sources directory.
After downloading and unpacking the package, the Sources directory will look like this:
Sources/
e2e/
src/
app/
assets/
data/
environments/
scss/
svg/
browserslist
favicon.ico
index.html
karma.conf.js
main.ts
polyfills.ts
sprite-config.json
styles.scss
test.ts
tsconfig.app.json
tsconfig.spec.json
tslint.json
.editorconfig
.gitignore
angular.json
package.json
package-lock.json
README.md
tsconfig.json
tslint.jsonHere is a description of the most important files and directories of the project:
Sources/src/app/ - Contains components, modules, directives, etc. More details below.Sources/src/assets/ - This directory contains static files such as images, fonts, svg sprite, etc.Sources/src/data/ - Contains stubs data for the template, products, categories, etc.Sources/src/scss/ - Contains project styles. More details are described in the SCSS Files section.Sources/src/svg/ - Contains separate SVG files.Sources/src/sprite-config.json - This files contains necessary information to build svg sprite. See the SVG section for details.Sources/src/app is a main directory with the following structure:
components/
modules/
account/
blocks/
blog/
footer/
header/
mobile/
shop/
site/
widgets/
pages/
shared/
app.component.html
app.component.scss
app.component.ts
app.module.ts
app-routing.module.tsModules Description
modules/account/account.module.ts
Contains customer pages (currently only login page).
modules/blocks/blocks.nodule.ts
This module contains components used as a construction bricks for pages (mainly used on the home page).
modules/blog/blog.nodule.ts
Blog related components, pages, etc.
modules/footer/footer.nodule.ts
Contains the components used in the footer of the site.
modules/header/header.nodule.ts
Contains the components used in the header of the site.
modules/mobile/mobile.nodule.ts
Contains the components used in the mobile header and mobile menu.
modules/shop/shop.nodule.ts
Contains shop pages (category, product, cart, checkout, etc.) and components.
modules/site/site.nodule.ts
Contains rest site pages (About Us, Contact Us, etc.).
modules/widgets/widgets.nodule.ts
Contains components used in the shop or/and blog sidebar.
shared/shared.module.ts
Contains components, services, directives, interfaces used across all template.
app.module.ts
The main module contains home and "not found" pages.
Simplified routing scheme
/classic
/home (homeComponent)
/blog (modules/blog/blog.module#BlogModule)
... blog routes
/shop (modules/shop/shop.module#ShopModule)
... shop routes
/account (modules/account/account.module#AccountModule)
... account routes
/site (modules/site/site.module#SiteModule)
... site routes
/compact
/home (homeComponent)
/blog (modules/blog/blog.module#BlogModule)
... blog routes
/shop (modules/shop/shop.module#ShopModule)
... shop routes
/account (modules/account/account.module#AccountModule)
... account routes
/site (modules/site/site.module#SiteModule)
... site routesThis template uses four third-party modules:
ng5-slider (https://angular-slider.github.io/ng5-slider/)
Used in the price filter on the product category page.
ngx-owl-carousel-o (https://github.com/vitalii-andriiovskyi/ngx-owl-carousel-o)
Used to display interactive carousel on the home page and in the Related Products section on the product page.
ngx-bootstrap (https://valor-software.com/ngx-bootstrap/)
In fact, only its submodule ModalModule is used to show product "quick view".
ngx-toastr (https://scttcper.github.io/ngx-toastr/)
Used to show notifications after adding products to the cart, wish list and comparison list.
The following libraries and frameworks are also used:
bootstrap-4.3.1 (https://getbootstrap.com/)
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
photoswipe-4.1.3 (https://photoswipe.com/)
JavaScript gallery, no dependencies. Used on the product page.
The directory with SCSS files contains the following files and subdirectories:
scss/
blocks/
blog/
common/
components/
filters/
footer/
header/
mixins/
pages/
shop/
themes/
widgets/
_custom.scss
_custom-variables.scss
_functions.scss
_style.scss
_variables.scssYou can make changes to any of these files.
To make it easier for you in the future to upgrade the template to the new version,
we recommend (if possible) making changes only to _custom-variables.scss and _custom.scss files.
_custom-variables.scss - It is used to override the values of variables._custom.scss - Use to write your own scss code.To compile a template with one of the predefined color schemes,
open the _custom-variables.scss file, then find and uncomment one of the following lines:
//@import 'themes/theme-red/theme-variables';
//@import 'themes/theme-blue/theme-variables';
//@import 'themes/theme-black/theme-variables';
//@import 'themes/theme-green/theme-variables';After that, you need to rebuild the template.
The template supports two ways to use directions.
If you need only one direction, LTR or RTL:
Open src/scss/_custom-variables.scss, and define next variables:
$direction: ltr; // specify the direction you need (ltr or rtl)
$both-directions: false; // set to false to disable style compilation
// for two directionsThen open src/index.html and specify value of the dir attribute (ltr or rtl) for <html> tag:
...
<html lang="en" dir="ltr">
...If you need two directions simultaneously (your application will be available in at least two languages, one LTR and one RTL):
Open src/app/app.component.ts and define your logic to determine the direction in the
component constructor's function AppComponent.
Then use the DirectionService service to set direction:
constructor(
...
private direction: DirectionService
) {
const detectedDirection = 'rtl';
this.direction.value = detectedDirection;
}NOTE: Currently, on-the-fly (after loading and initialization) direction switching (ltr <--> rtl) is not supported.
The direction is controlled using two scss variables:
$direction - indicates direction. Possible values: ltr or rtl.$both-directions - if true compiles styles for two directions, the $direction variable will be ignored.
Possible values: true or false.Some "magic" variables are also used, which change their value depending on the given direction value.
The names of these variables are the same as the names of the
Logical Properties
(for example, variable $margin-inline-start).
These variables should only be used in the direction mixin.
This example demonstrates how it works:
.alert {
@include direction {
#{$margin-inline-start}: 20px;
}
}Will be compiled to:
If $direction == ltr and $both-directions == false:
.alert {
margin-left: 20px;
}If $direction == rtl and $both-directions == false:
.alert {
margin-right: 20px;
}If $both-directions == true:
[dir=ltr] .alert {
margin-left: 20px;
}
[dir=rtl] .alert {
margin-right: 20px;
}src/app/app.component.ts file and find the following code:this.currency.options = {
code: 'USD',
// display: 'symbol',
// digitsInfo: '1.2-2',
// locale: 'en-US'
};'USD' with the currency code you need.There is currently no easy way to set an arbitrary currency format (for example: dot instead of comma). But Angular allows you to change the format of the currency in accordance with the specified locale. I think in most cases this is what you need.
Here is an example for the it (it_IT, Italy) locale:
$1,019.00 -> 1.019,00 €src/app/app.module.ts file;import { LOCALE_ID, NgModule } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeIt from '@angular/common/locales/it';
registerLocaleData(localeIt, 'it');
// ...
@NgModule({
// ...
providers: [
{ provide: LOCALE_ID, useValue: 'it' }
],
bootstrap: [AppComponent]
})
export class AppModule { }How to add SVG icon?
Just put your file with SVG icon to the Sources/src/svg directory.
How to compile SVG sprite?
From the Sources directory, run the next command:
npm run spriteAfter executing the command, you can find the SVG sprite on this path Sources/src/assets/images/sprite.svg.
How to use icons in the template?
To display the icon, you can use the app-icon component.
For example, we have an SVG icon named my-icon.svg, whose width and height equals to 20px:
<app-icon name="my-icon" size="20x20"></app-icon>If the width and height are equal, then we can simplify the size property as follows:
<app-icon name="my-icon" size="20"></app-icon>What is the sprite-config.json file for?
sprite-config.json file contains configuration for svg-sprite module. It used to build svg sprite.
You can get more info here.
We used three fonts in this template:
Roboto (Google Web Font: https://fonts.google.com/specimen/Roboto) The main font used in the template.
FontAwesome (https://fontawesome.com/) Icon Font to display some icons in the template.
stroyka (src/assets/fonts/stroyka) Custom Icon Font to display some icons in the template. It is used only in Edge to solve performance issue associated with rendering a huge amount of SVG icons.
To simplify the process of updating the template, I recommend using the tools for visual comparison and merging, such as:
7 to 8 version, follow the official instructions
on update.angular.io;"module": "commonjs" to the src/tsconfig.server.json, as shown in the example below:{
...
"compilerOptions": {
...
"module": "commonjs"
},
...
}currency pipe to the currencyFormat pipe.Version 1.5.1 – August 2, 2019
Version 1.5.0 – July 7, 2019
8.0 to 8.1;7.1 to 8.1;1.2.1 to 1.2.4;4.3.0 to 5.0.0;1.1.5 to 1.1.6.Version 1.4.0 – June 14, 2019
7 to 8;5.8.1 to 5.9.0;1.1.13 to 1.2.1;10.0.2 to 10.0.4;4.0.1 to 4.3.0;1.1.0 to 1.1.5.Version 1.3.0 – May 22, 2019
currencyFormat, which now used instead of built-in pipe currency.
This makes it easy to change the currency for the entire template;Version 1.2.0 – April 24, 2019
Version 1.1.0 – April 04, 2019
1.0.11 to 1.1.0;3.2.0 to 4.0.1;Version 1.0.0 – March 25, 2019