Stroyka

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!

Features

  • 100% Responsive Layout
  • LTR/RTL supported
  • HTML5 and CSS3
  • Bootstrap 4
  • SASS
  • CSS3 Animation
  • SVG Icons
  • Font Awesome Icons
  • BEM syntax
  • Roboto Google Font
  • Compatible with all major browsers
  • Grid / List products view
  • Quickview
  • 2 Variants of the home page
  • 3 Variants of the product page
  • 3 Variants of the blog page layout
  • 2 Variants of the post page layout

Getting Started

Preparation

  1. Make sure your system has installed Node.js.
  2. Open a terminal window and go to the Sources directory.
  3. Run the npm install command. This command will load all necessary dependencies specified in the package.json file.
  4. Then run the npm install -g @angular/cli command to install Angular CLI (if not yet installed).

Build Project

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.

Project Structure

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

App directory

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

/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 routes

Third-Party Modules

This template uses four third-party modules:

The following libraries and frameworks are also used:

SCSS Files

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.

Predefined color schemes

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.

LTR/RTL

The template supports two ways to use directions.

  1. 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">
    ...
  2. 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.

How does LTR/RTL support work?

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;
    }

Currency

How to change currency?

  1. Open the 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'
};
  1. Replace 'USD' with the currency code you need.

How to change currency format?

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 €
  1. Open the src/app/app.module.ts file;
  2. Uncomment some parts of the code, as in the example below:
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 { }

SVG

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.

Fonts

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.

Update

To simplify the process of updating the template, I recommend using the tools for visual comparison and merging, such as:

From 1.3.0 to 1.4.0

  1. To update Angular from 7 to 8 version, follow the official instructions on update.angular.io;
  2. If your using SSR. After upgrading to Angular 8, server-side rendering may not work in the case of lazily loading modules. To solve this issue, add "module": "commonjs" to the src/tsconfig.server.json, as shown in the example below:
{
  ...
  "compilerOptions": {
    ...
    "module": "commonjs"
  },
  ...
}
  1. Use the tools above to accurately merge the new version with your code.

From 1.2.0 to 1.3.0

  1. (optional) Switch from the currency pipe to the currencyFormat pipe.
  2. Use the tools above to accurately merge the new version with your code.

Changelog

Version 1.5.1 – August 2, 2019

  • Fixed: "Price" and "Quantity" in the drop-down cart are displayed incorrectly in the RTL version.

Version 1.5.0 – July 7, 2019

  • Added: Off canvas filters on the shop page;
  • Updated: Angular from 8.0 to 8.1;
  • Updated: Angular Universal from 7.1 to 8.1;
  • Updated: ng5-slider form 1.2.1 to 1.2.4;
  • Updated: ngx-bootstrap form 4.3.0 to 5.0.0;
  • Updated: ngx-owl-carousel-o form 1.1.5 to 1.1.6.
  • Fixed: minor CSS issues.

Version 1.4.0 – June 14, 2019

  • Updated: Angular form 7 to 8;
  • Updated: @fortawesome/fontawesome-free form 5.8.1 to 5.9.0;
  • Updated: ng5-slider form 1.1.13 to 1.2.1;
  • Updated: ngx-toastr form 10.0.2 to 10.0.4;
  • Updated: ngx-bootstrap form 4.0.1 to 4.3.0;
  • Updated: ngx-owl-carousel-o form 1.1.0 to 1.1.5.

Version 1.3.0 – May 22, 2019

  • Added pipe currencyFormat, which now used instead of built-in pipe currency. This makes it easy to change the currency for the entire template;
  • Added sections "Currency" and "Update" in the documentation.

Version 1.2.0 – April 24, 2019

  • Added support for RTL.

Version 1.1.0 – April 04, 2019

  • Added: Server Side Rendering (SSR) for SEO;
  • Added: Five account pages (Dashboard, Edit Profile, Order History, Addresses, Change Password);
  • Added: PhotoSwipe gallery on the product page;
  • Updated: ngx-owl-carousel-o from 1.0.11 to 1.1.0;
  • Updated: ngx-bootstrap from 3.2.0 to 4.0.1;
  • Changed: Font Awesome is now used as a npm dependency;
  • Fixed: Unexpected execution of mouse click handlers while dragging the owl-carousel (now mouse click will be prevented);
  • Other minor changes.

Version 1.0.0 – March 25, 2019

  • Initial Release.

Credits