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 serve
To build for production, run the command:
ng build --prod
After 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.
To build server and client version of angular application, and start an ExpressJS server run the command:
npm run dev:ssr
Other useful commands related to SSR:
serve:ssr
- Starts an ExpressJS server;build:ssr
- Builds client and server version of the angular application and build ExpressJS server;start:ssr
- Builds production version of the server, application and starts ExpressJS server.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/
fake-server/
scss/
svg/
favicon.ico
index.html
main.server.ts
main.ts
polyfills.ts
sprite-config.json
styles.scss
test.ts
tslint.json
.browserslistrc
.editorconfig
.gitignore
angular.json
karma.conf.js
package.json
package-lock.json
README.md
server.ts
tsconfig.app.json
tsconfig.base.json
tsconfig.json
tsconfig.server.json
tsconfig.spec.json
tslint.json
Here 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/fake-server/
- Contains functionality needed for demo purposes only. More details in the
Integration section.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.ts
Modules 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
/ (homeComponent)
/shop (modules/shop/shop.module#ShopModule)
... shop routes
/blog (modules/blog/blog.module#BlogModule)
... blog routes
/account (modules/account/account.module#AccountModule)
... account routes
/site (modules/site/site.module#SiteModule)
... site routes
This template uses four third-party modules:
@angular-slider/ngx-slider (https://github.com/angular-slider/ngx-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.
ngx-red-zoom (https://scompiler.github.io/red-zoom-angular/)
RedZoom is a modern very easy-to-use image zoom library which made as Angular directive and fully stylable via CSS/SCSS.
The following libraries and frameworks are also used:
bootstrap (https://getbootstrap.com/)
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
photoswipe (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.scss
You 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 directions
Then 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 sprite
After 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:
First of all, you should understand that the process of integrating a template with your server is likely to be quite time-consuming and complicated. This is due to the fact that in the world of online stores there are no uniform standards. Some use integers as identifiers, others use UUID strings, and the third use something else. Nevertheless, I took some steps to simplify this process as much as possible. This will be discussed in this section.
The template has several services that are designed to interact with the server by sending AJAX requests.
All of them are in the src/app/shared/api
directory. All you need is to replace requests to a fake
server with requests to your (real) server. You can find out more about the fake server below.
Also below, several solutions are proposed if the composition of the fields of your data differs from the interfaces used in the template.
export class ProductsService {
constructor(private http: HttpClient) { }
getProduct(productSlug: string): Observable<Product> {
const url = `https://example.com/api/products/${productSlug}.json`;
return this.http.get<Product>(url);
}
}
Related links:
The root service is designed to generate the URLs used in the template (src/app/shared/services/root.service.ts
).
You can use it to quickly change the URLs of products, categories, etc.
For example, this is how you can get the product URL containing its identifier:
export class RootService {
product(product: Partial<Product>): string {
return `/products/${product.id}`;
}
}
Remember to make the appropriate changes to the routes and components.
Well, I can offer several solutions to this problem (they are sorted by complexity, from simple to complex):
This method involves converting data when it is received from the server:
export class ProductsService {
getProduct(productSlug): Observable<Product> {
const url = `https://example.com/api/products/${productSlug}.json`;
return this.http.get<Product>(url).pipe(
map(product => {
return {
id: product.productId,
name: product.description,
images: product.pictures,
...
};
})
);
}
}
If there is no suitable property in the product interface, you can use custom fields:
export class ProductsService {
getProduct(productSlug): Observable<Product> {
const url = `https://example.com/api/products/${productSlug}.json`;
return this.http.get<Product>(url).pipe(
map(product => {
return {
...
customFields: {
isbn: product.ISBN,
},
};
})
);
}
}
And finally, the last and most labor-intensive way. Change the product interface and everything related to it throughout the template.
I think this will surprise many, but, as practice shows, this issue also needs to be clarified.
Typically, an Angular application generates HTML pages based on dynamic data received from the server. While the Angular template comes without server-side code. However, to demonstrate the capabilities of the template, we still need something that will process requests and serve as a data provider for the template, and it is for these purposes that I created a fake server that imitates the operation of a real server. You should not use it (and everything related to it) in a real application, it is only needed to demonstrate the capabilities of the template.
All code associated with a fake server is located in the src/fake-server
directory. You can remove it.
It is assumed that if you bought this template, then you have sufficient knowledge to use it. But sometimes people buy it for the purpose of training or something else... I don’t know. This section exists for them and it describes how the data received from the server falls into the template.
So this is what happens when you open the http://localhost:4200/shop/products/ash-s-chainsaw-3.5kw
page:
First, Angular looks for a suitable route. In this case, it will be the route from the
src/app/modules/shop/shop-routing.module.ts
file:
...
{
path: 'products/:productSlug',
component: PageProductComponent,
data: {
layout: 'standard',
sidebarPosition: 'start'
},
resolve: {
product: ProductResolverService
},
}
...
You can learn more about the routes, their processing order, etc. from the official documentation.
As you can see this route uses a pre-fetching component data:
...
resolve: {
product: ProductResolverService
}
...
I see no reason to copy the official documentation (Milestone 5: Route guards -> Resolve: pre-fetching component data). I will only say that you need to pay attention to these files:
src/app/modules/shop/resolvers/product-resolver.service.ts
Resolve
interface;src/app/shared/api/shop.service.ts
After all data is received and navigation is completed, Angular activates the PageProductComponent
component.
Now we can access the product data from the product
property of the data
object:
export class PageProductComponent implements OnInit {
product: Product;
constructor(
private route: ActivatedRoute,
) { }
ngOnInit(): void {
this.route.data.subscribe(data => {
this.product = data.product;
});
}
}
src/app/modules/shop/pages/page-product/page-product.component.ts
Now we can access the product data from the template:
<app-product [product]="product"></app-product>
Pay attention to these files:
src/app/modules/shop/pages/page-product/page-product.component.html
src/app/shared/components/product/product.component.html
Version 1.18.0 – January 17, 2022
12.2.11
to 13.1.2
and other dependencies.Version 1.17.0 – October 28, 2021
12.0.0
to 12.2.11
and other dependencies.Version 1.16.2 – June 21, 2021
Version 1.16.1 – May 22, 2021
Version 1.16.0 – May 20, 2021
4.5.3
to 4.6.0
;11.0.1
to 12.0.0
and other dependencies.Version 1.15.2 – May 12, 2021
Version 1.15.1 – March 22, 2021
Version 1.15.0 – November 19, 2020
10.1.6
to 11.0.1
;6.1.0
to 6.2.0
;0.5.0
to 0.6.0
.Version 1.14.0 – October 18, 2020
10.0.0
to 10.1.6
;4.5.0
to 4.5.3
;5.6.1
to 6.1.0
;3.0.1
to 4.0.0
;12.1.0
to 13.1.0
;5.13.1
to 5.15.1
.Version 1.13.2 – August 9, 2020
Version 1.13.1 – August 9, 2020
Version 1.13.0 – June 28, 2020
9.1.1
to 10.0.0
;3.0.0
to 3.0.1
;12.0.1
to 12.1.0
;5.13.0
to 5.13.1
.Version 1.12.0 – June 1, 2020
Version 1.11.0 – May 13, 2020
4.4.1
to 4.5.0
.Version 1.10.0 – April 9, 2020
9.0.0
to 9.1.1
;2.0.3
to 3.0.0
;5.3.2
to 5.6.1
;11.3.3
to 12.0.1
;5.12.1
to 5.13.0
.Version 1.9.0 – March 5, 2020
Version 1.8.0 – February 8, 2020
8.2.14
to 9.0.0
;2.0.1
to 2.0.3
;4.3.1
to 4.4.1
;5.2.0
to 5.3.2
;11.2.1
to 11.3.3
;5.11.2
to 5.12.1
.Version 1.7.0 – December 19, 2019
Version 1.6.0 – November 14, 2019
8.1.0
to 8.2.13
;5.9.0
to 5.11.2
;5.0.0
to 5.2.0
;1.1.5
to 2.0.1
;10.0.4
to 11.2.1
;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