# 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 version
- 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
- Off canvas filters
- Photoswipe gallery
- Select2 integration
- 2 Variants of the home page
- 3 Variants of the product page
- 3 Variants of the blog page layout
- 3 Variants of the post page layout
- Off canvas and Drop down shopping cart
- Drop down account menu
- Search suggestions
- Sticky tabs on product page

# Getting Started

There are two ways to start using the Stroyka template:

- The first way is to use pre-compiled HTML files. The description of this method is below;
- The second way is to build a template from sources, it is suitable for experienced developers (See the section Sources).

## Pre-compiled HTML

After downloading and unpacking the Stroyka template, pre-compiled HTML files will be located in the `HTML` directory.

So, the `HTML` directory will look like after unpacking:

    HTML/
       black/
       blue/
       default/
       green/
       red/

This directory contains different versions of the template:

- default - standard version (yellow);
- black - with black theme color;
- blue - with blue theme color;
- green - with green theme color;
- red - with red theme color.

Choose the one you want to use (for example default):

    HTML/
       default/
          css/
          images/
          js/
          vendor/
          404.html
          about-us.html
          account-addresses.html
          blog-classic.html
          ...

Description of HTML Structure, CSS Files and Javascript files are in the relevant sections.

If you want to add images or make changes to CSS or Javascript files, you need to open the corresponding files.

Please note that any errors or broken layouts that result from you editing the CSS or JavaScript files are not covered by support. Edit these files at your own risk.
To continue customizing the template, go to the "Customization" section.

# HTML Structure

This template based on a responsive layout. All of the information within the main content area is nested within a body tag. The general template structure is the same throughout the template. Here is the general structure.

    <body>
        <!-- site -->
        <div class="site">
            <!-- mobile site__header -->
            <header class="site__header d-lg-none">
                ...
            </header>
            <!-- mobile site__header / end -->

            <!-- desktop site__header -->
            <header class="site__header d-lg-block d-none">
                ...
            </header>
            <!-- desktop site__header / end -->

            <!-- site__body -->
            <div class="site__body">
                ...
            </div>
            <!-- site__body / end -->

            <!-- site__footer -->
            <footer class="site__footer">
                ...
            </footer>
            <!-- site__footer / end -->
        </div>
        <!-- site / end -->

        <!-- quickview-modal -->
        <div id="quickview-modal">
            ...
        </div>
        <!-- quickview-modal / end -->

        <!-- mobilemenu -->
        <div class="mobilemenu">
            ...
        </div>
        <!-- mobilemenu / end -->

        <!-- photoswipe -->
        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
            ...
        </div>
        <!-- photoswipe / end -->
    </body>

# CSS Files

This template uses seven css files:

- css/style.css
  Contains main stylesheets.

  css/style.ltr.css - same as `css/style.css` but only contains styles for LTR direction.
  css/style.rtl.css - same as `css/style.css` but only contains styles for RTL direction.

- vendor/bootstrap/css/bootstrap.min.css
  Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.

- vendor/owl-carousel/assets/owl.carousel.min.css
  Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. Used for home page slider, products carousel, posts carousel, etc.

- vendor/photoswipe/photoswipe.css
  vendor/photoswipe/default-skin/default-skin.css
  JavaScript image gallery for mobile and desktop, modular, framework independent. Used on the product page in the product gallery.

- vendor/select2/css/select2.min.css
  Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. User for some select boxes.

- vendor/fontawesome/css/all.min.css
  This CSS file is required for Icon Font.

## style.css

At the very beginning of the `css/style.css` file you will find a table of contents that you can use to quickly navigate through the file.

Here is an example of the structure of the `style.css`:

    /* ----------------------------------------

    Table of Contents:
    - Common
      - animations
      - base
      - .document
      ...
    - Components
      ...
    - Filters
      ...
    - Header
      ...
    - Footer
      ...
    - Pages
      ...
    - Shop
      ...
    - Blog
      ...
    - Blocks
      ...
    - Widgets
      ...

    ---------------------------------------- */
    /* ----------------------------------------
    // Common
    // ---------------------------------------- */
    /*
    // animations
    */

        ...

    /*
    // base
    */

        ...

    /*
    // .document
    */

        ...

    /* ----------------------------------------
    // Components
    // ---------------------------------------- */

        ...

# Javascript

This template uses eleven javascript files:

- js/main.js
  This file contains all code related to theme, except for the code related to the header.

- js/header.js
  Contains code related to site header and mobile header.

- js/number.js
  Defines behaviour of the ".input-number" component.

- vendor/jquery/jquery.min.js
  jQuery is a Javascript library that greatly reduces the amount of code that you must write.

- vendor/bootstrap/js/bootstrap.bundle.min.js
  Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.

- vendor/nouislider/nouislider.min.js
  Lightweight JavaScript range slider with full touch support.

- vendor/owl-carousel/owl.carousel.min.js
  Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

- vendor/svg4everybody/svg4everybody.min.js
  SVG for Everybody adds SVG External Content support to all browsers.

- vendor/photoswipe/photoswipe.min.js
  vendor/photoswipe/photoswipe-ui-default.min.js
  JavaScript image gallery for mobile and desktop, modular, framework independent. Used on the product page in the product gallery.

- vendor/select2/js/select2.min.js
  Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. User for some select boxes.

# 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 (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.

# Sources

Attention! This section is for advanced users.

Template source codes are in the `Sources` directory. After downloading and unpacking the template, the `Sources` directory will look like this:

    Sources/
       gulp/
          tasks.js
       src/
          ...
       gulpfile.js
       package.json
       package-lock.json

## Preparation

1. Make sure your system has installed Node.js.
2. Open a terminal window and go to the `Source` directory.
3. Run the `npm install` command. This command will load all necessary dependencies specified in the `package.json` file.

To build the project run the command:

    ./node_modules/.bin/gulp build

Or (if gulp is installed globally):

    gulp build

After executing the command, the compiled template will be located in the `dist` directory.

For a complete list of available commands, see the Gulp Tasks section below.

## Gulp Tasks

Gulp tasks are in the `gulp/tasks.js` and `gulpfile.js` files. Unfortunately, such a bit unusual structure is necessary for us to automatically build the package for themeforest.

Gulp tasks description:

- twig - Compiles twig templates into html pages.
- scss - Compiles scss to `css/style.css` file.
- vendor - Copies the contents of the `src/vendor` directory to the `dist/vendor` directory.
- images - Copies the contents of the `src/images` directory to the `dist/images` directory.
- svg - Creates SVG sprite (`sprite.svg`) from svg files and save it to the `dist/images` directory.
- js - Copies the contents of the `src/js` directory to the `dist/js` directory.
- fonts - Copies the contents of the `src/fonts` directory to the `dist/fonts` directory.
- clean - Removes the `dist` directory.
- build - Builds a template (default task).
- watch - Runs the template build process with change tracking.
- serve - Starts a local HTTP server and runs the template build process with change tracking.

## Twig templates

We used twig.js as a template engine (this is a port of the popular PHP library for javascript). Documentation on its syntax can be found on the official site.

### Data for templates

Each file from the `Sources/src/data` directory is projected into the global namespace. The variable name is the file name without the extension. For example, we have the file `Sources/src/data/theme.json` with the following contents:

    {
        "name": "Stroyka"
    }

Now, to display the name of the theme in the template, we can use the following construction `{{ theme.name }}`.

Pay attention to the fact that all files must be in json format, and their names must match the regular expression `/^[_A-Za-z0-9]+\.json$/`.

### Template directories

The directory with the templates (`Sources/src/twig`) is divided into the following subdirectories:

- blocks - Independent parts that can be used on different pages.
- footer - Template files associated with the site footer.
- header - Template files associated with the site header.
- layouts - In this directory is the base layout used by all pages.
- pages - These are the main template files that are directly compiles into html page files.
- partials - Other parts not included in any other directory.
- widgets - Component parts of blocks (usually they are used in the sidebar).

## 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
       _variables.scss
       style.ltr.scss
       style.rtl.scss
       style.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/red';
    //@import 'themes/blue';
    //@import 'themes/black';
    //@import 'themes/green';

After that, you need to rebuild the template using the `gulp build` command.

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

### What if you want to use only one direction?

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

# Customization

## Table of content

- How to change the logo?
- How to change the font?
- How to remove/change copyright notice?
- How to add social link?
- How to always show the "Add to cart" button in the product card?
- How to change product image aspect ratio?
- How to change direction (LTR <-> RTL)?
- How to change the sticky header mode?
- How to disable sticky header?
- How to disable sticky tabs on product page?

## How to change the logo?

If you are working with HTML files:

- Desktop header - In HTML files, find comments `<!-- logo -->` and `<!-- logo / end -->` and replace code between them with your logo image.
- Mobile header - In HTML files, find comments `<!-- mobile-logo -->` and `<!-- mobile-logo / end -->` and replace code between them with your logo image.

If you are working with source code:

- Desktop header (classic layout)
  1. Open the `src/twig/header/header.twig` file.
  2. Find comments `<!-- logo -->` and `<!-- logo / end -->` and replace code between them with your logo image.
- Desktop header (compact layout)
  1. Open the `src/twig/header/nav-panel.twig` file.
  2. Find comments `<!-- logo -->` and `<!-- logo / end -->` and replace code between them with your logo image.
- Mobile header
  1. Open the `src/twig/header/mobile-header.twig` file.
  2. Find comments `<!-- mobile-logo -->` and `<!-- mobile-logo / end -->` and replace code between them with your logo image.

## How to change the font?

If you are working with HTML files:

1. In HTML files find and replace with the desired font:

       <!-- fonts -->
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i">

2. Open the `css/style.css` file.
3. Insert at the end:

       body {
           font-family: "YOUR_FONT_NAME";
       }

If you are working with source code:

1. Open the `src/twig/layouts/default.twig` file.
2. Find and replace with the desired font:

       <!-- fonts -->
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i">

3. Open the `src/scss/_custom-variables.scss` file.
4. And define a special variable, as in the example below:

       $body-font-family: 'YOUR_FONT_NAME';

## How to remove/change copyright notice?

If you are working with HTML files:

In HTML files, find comments `<!-- copyright -->` and `<!-- copyright / end -->`, then replace code between them with your copyright.

If you are working with source code:

1. Open the `src/twig/footer/footer.twig` file.
2. Find comments `<!-- copyright -->` and `<!-- copyright / end -->`, then replace code between them with your copyright.

## How to add social link?

Social links appear in the About Us widget on the blog and in the site footer. To add your own link, follow the instructions:

1. First you need to choose an icon for your link, go to https://fontawesome.com/ and use site search. When you find the icon you need, copy its classes (for example: fab fa-github) and return to this instruction.

If you are working with HTML files:

2. In HTML files, find comments `<!-- social-links -->` and `<!-- social-links / end -->`, between these comments add an additional element to the `.social-links__list`, for example:

       <ul class="social-links__list">
           ...
           <li class="social-links__item">
               <!-- Next .social-links__link--type--github class will be used to set the icon color. -->
               <a class="social-links__link social-links__link--type--github" href="https://github.com/4Bos" target="_blank">
                   <!-- Put the early copied CSS classes (fab fa-github) in the "class" attribute of this tag. -->
                   <i class="fab fa-github"></i>
               </a>
           </li>
       </ul>

3. Open the `css/style.css` and append to the end:

       .social-links__link--type--github {
           background-color: #24292e;
           color: #fff;
       }

If you are working with source code:

4. Open the `src/data/social_links.json` and add a new element to the root array:

       [
           // ...
           // type - will be used to generate link class,
           //        for example: social-links__link--type--github.
           // icon - the early copied CSS classes (fab fa-github).
           // url  - social link url.
           {"type": "github", "icon": "fab fa-github", "url": "https://github.com/4Bos"}
       ]

5. Open the `src/scss/_custom-variables.scss` and define colors for our social link:

       $social-links: (
           // The map key (github) must be the same as the type in the
           // social_links.json file.
           github: (bg-color: #24292e, font-color: #fff),
       );

This is the end. Of course, don't forget to follow me on github.

## How to always show the "Add to cart" button in the product card?

Just remove the class `product-card--hidden-actions` from all `.product-card`'s.

    <!-- Replace -->
    <div class="product-card product-card--hidden-actions">
        ...
    </div>

    <!-- With -->
    <div class="product-card">
        ...
    </div>

## How to change product image aspect ratio?

If you are working with HTML files:

1. Open the `css/style.css` file.
2. Insert at the end:

       .product-image__body {
           padding-bottom: calc(100% * (3 / 4));
       }

   where 4 is the relative width of the image and 3 is the relative height of the image.

If you are working with source code:

1. Open the `src/scss/_custom-variables.scss` file.
2. And define a special variables, as in the example below:

       $product-image-width:  4; // Relative image width.
       $product-image-height: 3; // Relative image height.

## How to change direction (LTR <-> RTL)?

If you are working with HTML files:

1. Open `HTML/{THEME_NAME}/{*}.html` (for example `HTML/default/index.html`);
2. And specify value of the `dir` attribute (ltr or rtl) for `<html>` tag, for example:

       <!DOCTYPE html>
       <html lang="en" dir="rtl">
       ...

By default, `style.css` is used in template files, it contains styles for both directions. If you want to use one direction, you can replace it with a more efficient version `style.{direction}.css`.

3. Find: `<link rel="stylesheet" href="css/style.css">`.
   And replace to: `<link rel="stylesheet" href="css/style.rtl.css">`

If you are working with source code:

Described in the "Sources" section.

## How to change the sticky header mode?

If you are working with HTML files:

1. Open `HTML/{THEME_NAME}/{*}.html` (for example `HTML/default/index.html`);

If you are working with source code:

1. Open `src/twig/header/nav-panel.twig` and/or `src/twig/header/mobile-header.twig`.

2. Find:

       <!-- for desktop: -->
       <div class="nav-panel nav-panel--sticky" data-sticky-mode="pullToShow">

       <!-- for mobile: -->
       <div class="mobile-header mobile-header--sticky" data-sticky-mode="pullToShow">

3. Specify the value of `data-sticky-mode` attribute (possible values: `pullToShow`, `alwaysOnTop`);

## How to disable sticky header?

If you are working with HTML files:

1. Open `HTML/{THEME_NAME}/{*}.html` (for example `HTML/default/index.html`);

If you are working with source code:

1. Open `src/twig/header/nav-panel.twig` and/or `src/twig/header/mobile-header.twig`.

2. Find:

       <!-- for desktop: -->
       <div class="nav-panel nav-panel--sticky" data-sticky-mode="pullToShow">

       <!-- for mobile: -->
       <div class="mobile-header mobile-header--sticky" data-sticky-mode="pullToShow">

3. Remove `nav-panel--sticky` and/or `mobile-header--sticky` class;

## How to disable sticky tabs on product page?

If you are working with HTML files:

1. Open `HTML/{THEME_NAME}/product{*}.html` (for example `HTML/default/product.html`);

If you are working with source code:

1. Open `src/twig/partials/product-tabs.twig`;
2. Then find and remove `product-tabs--sticky` class.

# Changelog

Version 1.14.0 – August 15, 2021

- Other: node-sass replaced with sass;
- Updated jquery form `3.5.1` to `3.6.0`;
- Updated dependencies.

Version 1.13.0 – May 14, 2020

- Added: Category selector to the search;
- Added: Add to cart button to the search suggestions;
- Fixed: Color swatches are not wrapped to a new line;
- Updated:
  - bootstrap form `4.4.1` to `4.5.0`;
  - @fortawesome/fontawesome-free form `5.11.2` to `5.13.0`;
  - jquery form `3.4.1` to `3.5.1`;
  - nouislider form `14.1.0` to `14.5.0`;
  - select2 form `4.0.12` to `4.0.13`.

Version 1.12.0 – March 23, 2020

- Added: Sticky tabs on product page (can be disabled);
- Added: Ability to display two columns of post cards in .block-posts (Latest News) on mobile devices;
- Added: Ability to display four columns of post cards in .block-posts (Latest News) on desktop devices;
- Added: Ability to display two columns of product cards in .block-products and .block-products-carousels on mobile devices.

Version 1.11.0 – March 7, 2020

- Added: The ability to always show the "Add to cart" button, and not only when hovering;
- Added: The ability to change the aspect ratio of the product images;
- Added: Added customization section to the documentation;
- Changed: Social links component refactored;
- Fixed: All issues related to a non-square images.

Version 1.10.0 – March 4, 2020

- Added: Order success page.

Version 1.9.0 – February 27, 2020

- Added: Order details page;
- Added: Edit address page.

Version 1.8.0 – February 15, 2020

- Updated: Now two products are displayed per row in the products list on mobile devices;
- Fixed: Incorrect display of block-products-carousel in IE;
- Fixed: Submenu width bug in IE.

Version 1.7.1 – January 25, 2020

- Fixed: Pagination z-index;
- Fixed: Same height of product cards in the block products carousel.

Version 1.7.0 – December 6, 2019

- Added: Off canvas shopping cart;
- Added: Drop down account menu;
- Added: Search suggestions;
- Updated: Alternative category filter now supports more nesting levels;
- Updated: Mobile menu moved to the end of page;
- Updated: bootstrap form `4.2.1` to `4.4.1`;
- Updated: @fortawesome/fontawesome-free form `5.6.1` to `5.11.2`;
- Updated: jquery form `3.3.1` to `3.4.1`;
- Updated: nouislider form `12.1.0` to `14.1.0`;
- Updated: select2 form `4.0.10` to `4.0.12`;
- Fixed: Text alignment issue in a slideshow block on mobile devices;
- Fixed: Reverse image order in PhotoSwipe gallery for RTL direction;
- Fixed: Minor CSS issues;
- Other: Now instead of black images of stubs, more friendly gray images with an image resolution printed on them are used.

Version 1.6.0 – November 1, 2019

- Added: Alternative category filter;
- Fixed: On the checkout page, prices break to a new line if they contain a space;
- Updated: Scripts moved to the end of page.

Version 1.5.0 – October 7, 2019

- Added: PhotoSwipe gallery on the product page;
- Added: Select2 integration;
- Added: Block Finder (vehicle picker) for auto parts stores;
- Added: To Top button.

Version 1.4.0 – August 16, 2019

- Added: Sticky header that can work in two modes: pullToShow, alwaysOnTop.

Version 1.3.1 – August 2, 2019

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

Version 1.3.0 – July 6, 2019

- Added: Off canvas filters on the shop page.

Version 1.2.0 – April 27, 2019

- Added: Five account pages (Dashboard, Edit Profile, Order History, Addresses, Change Password);
- Added: Empty cart page;
- Updated: RTL support;
- Fixed: Some css issues.

Version 1.1.0 – March 15, 2019

- Added: RTL version.

Version 1.0.0 – February 17, 2019

- Initial Release

# Known Issues

SVG icons are not displayed when opening HTML files in a browser

When loading pages via `file://` URI, due to the security policy, browsers block the loading of external SVG icons because they have a unique origin. To fix this, you need to open HTML files using the HTTP/HTTPS protocol. To do this, launch a local HTTP server or upload files to a remote server.

# Credits

- jQuery (https://jquery.com)
- Bootstrap (http://getbootstrap.com)
- SVG for Everybody (https://github.com/jonathantneal/svg4everybody)
- noUiSlider (https://github.com/leongersen/noUiSlider/)
- Owl Carousel 2 (https://github.com/OwlCarousel2/OwlCarousel2)
- Font Awesome (https://fontawesome.com/)
- PhotoSwipe (https://photoswipe.com/)
- Select2 (https://select2.org/)