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
  • PhotoSwipe gallery on the product page
  • Off canvas filters
  • Search suggestions
  • Server Side Rendering (SSR)

Getting Started

Preparation

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

Build Project

To start a local HTTP server and runs the build process with change tracking run the command:

npm run dev

To build for production, run the command:

npm run build

After executing the command, the compiled project will be located in the .next directory.

You can find more information about the available commands in the official NextJs documentation.

Project Structure

Project source codes are in the Sources directory. After downloading and unpacking the package, the Sources directory will look like this:

Sources/
    public/
        images/
        favicon.ico
    src/
        api/
        components/
        data/
        fake-server/
        i18n/
        interfaces/
        pages/
        scss/
        services/
        store/
        svg/
        photoswipe.ts
    .babelrc
    .editorconfig
    .eslintrc.js
    .gitignore
    custom.d.ts
    next-env.d.ts
    package.json
    README.md
    tsconfig.json
    yarn.lock

Here is a description of the most important files and directories of the project:

  • Sources/src/api/ - Contains functions that fetch data from the server. You need to replace calls to the fake server with real AJAX requests.
  • Sources/src/components/ - Contains components used in the template. More details below.
  • Sources/src/data/ - Contains stubs data for the template, products, categories, etc.
  • Sources/src/fake-server/ - Contains fake server code. Used for demonstration purposes only. After you replace calls to the fake server with real AJAX requests, you can delete this directory.
  • Sources/src/i18n/ - Files related to localization.
  • Sources/src/interfaces/ - Contains the typescript interfaces used in the template.
  • Sources/src/pages/ - Contains the components of Next.js pages.
  • Sources/src/scss/ - Contains project styles. More details are described in the SCSS Files section.
  • Sources/src/services/ - Contains some useful functions and classes that are used in the template.
  • Sources/src/store/ - Files related to React Redux: actions, reducers, .etc. More details below.
  • Sources/src/svg/ - Contains separate SVG files.

Components directory

Sources/src/components is a main directory with the following structure:

components/
    account/
    blocks/
    blog/
    filters/
    footer/
    header/
    home/
    mobile/
    shared/
    shop/
    site/
    widgets/
    Layout.tsx

Directory Description

  • src/components/account
    Contains customer pages and components.

  • src/components/blocks
    Contains components used as a construction bricks for pages (mainly used on the home page).

  • src/components/blog
    Blog related components, pages, etc.

  • src/components/footer
    Contains the components used in the footer of the site.

  • src/components/header
    Contains the components used in the header of the site.

  • src/components/home
    Contains two homepage options.

  • src/components/mobile
    Contains the components used in the mobile header and mobile menu.

  • src/components/shared
    Contains components used across all template.

  • src/components/shop
    Contains shop pages (category, product, cart, checkout, etc.) and components.

  • src/components/site
    Contains rest site pages (About Us, Contact Us, etc.).

  • src/components/widgets
    Contains components used in the shop or/and blog sidebar.

Store directory

Sources/src/store contains files related to React Redux: actions, reducers, .etc.

All actions, reducers are logically separated by "feature", you can see the structure of this directory below:

store/
    cart/
        cartActions.ts
        cartActionTypes.ts
        cartHooks.ts
        cartReducer.ts
        cartTypes.ts
    compare/
        ...
    currency/
        ...
    locale/
        ...
    mobile-menu/
        ...
    quickview/
        ...
    root/
        ...
    shop/
        ...
    wishlist/
        ...
    client.ts
    hooks.ts
    store.ts
    types.ts
    version.ts

Customization

How to change the logo?

  • Desktop logo for classic header:

    1. Open the Sources/src/components/header/Header.tsx file.

    2. Find <AppLink href="/"><LogoSvg /></AppLink> and replace <LogoSvg/> with your logo image.

  • Desktop logo for compact header:

    1. Open the Sources/src/components/header/NavPanel.tsx file.

    2. Find <AppLink href="/"><LogoSmallSvg /></AppLink> and replace <LogoSmallSvg/> with your logo image.

  • Mobile logo:

    1. Open the Sources/src/components/mobile/MobileHeader.tsx file.

    2. Find <AppLink href={url.home()} className="mobile-header__logo"><LogoSmallSvg /></AppLink> and replace <LogoSmallSvg/> with your logo image.

If you want to use a logo image in SVG format, go to the SVG section to learn how to use SVG files as a regular React component.

How to change font?

  1. Open the Sources/src/pages/_document.tsx 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" />
  1. Open the Sources/src/scss/_custom-variables.scss file.

  2. And define a special variable, as in the example below:

$body-font-family: 'YOUR_FONT_NAME';

How to change theme color scheme?

The process of changing the theme color scheme is described in the SCSS Files section

How to customize the menus?

  • Top bar menu

    Top bar menu located in the Sources/src/components/header/Topbar.tsx file. Use existing menu as an example to create the menu you want.

  • Departments, Main, Mobile menus

    These menus are generated automatically based on a structured JS array located in:

    • Sources/src/data/headerDepartments.ts for departments menu.
    • Sources/src/data/headerNavigation.ts for main menu.
    • Sources/src/data/mobileMenu.ts for mobile menu.

    Use existing menu as an example to create the menu you want.

  1. Open the Sources/src/components/footer/Footer.tsx.

  2. Find and replace with desired copyright, as in the example below:

<div className="site-footer__copyright">YOUR_COPYRIGHT_NOTICE_HERE</div>

Third-Party Packages

This template uses several third-party packages:

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
   _svg.scss
   _variables.scss
   index.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.

LTR/RTL

How to change 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

Then open Sources/src/pages/_document.tsx and specify value of the dir attribute (ltr or rtl) for <html> tag:

...
<Html lang="en" dir="ltr">
...

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

SVG

How to add SVG icon?

  1. Put your file with SVG icon to the Sources/src/svg directory.

  2. Now you can use your svg icon as a regular React component. Just import it:

import YourSvgComponentName from './svg/YOUR_SVG_FILE_NAME.svg';

function ReactComponent() {
    return (
        <div>
            <YourSvgComponentName />
        </div>
    );
}

Fonts

We used two fonts in this template:

Changelog

Version 1.9.0 – September 1, 2021

  • Added: Discount prices in search suggestions;
  • Updated: Next.js from 10.0.8 to 11.1.2;
  • Updated: Sass from 1.32.8 to 1.38.2;
  • Updated: Other dependencies.

Version 1.8.0 – March 13, 2021

  • Fixed: Search suggestions don't close when clicked;
  • Fixed: The search button in the header not working on mobile;
  • Fixed: Prop className did not match in StroykaSlick component;
  • Fixed: Warning message when swiping carousel;
  • Fixed: Resetting the state of pagination, sorting and limit when returning to the previous page in the browser history;
  • Updated: Next.js from 10.0.2 to 10.0.8;
  • Updated: Bootstrap from 4.5.3 to 4.6.0;
  • Updated: Other dependencies.

Version 1.7.0 – November 19, 2020

  • Fixed: Incorrect definition of the current slide in react-slick when changing the number of slides after initialization;
  • Fixed: Bug of displaying slides of a react-slick if the infinite property is true and the slides are not enough to fill the entire frame;
  • Updated: Next.js from 9.4.4 to 10.0.2;
  • Updated: React from 16.13.1 to 17.0.1.
  • Updated: Other dependencies.

Version 1.6.0 – July 8, 2020

  • Added: Next.js version (with server side rendering);
  • Fixed: Bug of displaying slides of a react-slick if the infinite property is true and the slides are not enough to fill the entire frame;
  • Fixed: Cannot read property 'version' of null;
  • Updated:
    • fontawesome from 5.13.0 to 5.13.1;
    • query-string from 6.12.1 to 6.13.1;
    • react-intl from 4.5.7 to 5.0.2;
    • react-toastify from 6.0.5 to 6.0.8;
    • reactstrap from 8.4.1 to 8.5.1.

Version 1.5.0 – May 22, 2020

  • Added: Working filters;
  • Added: Category selector to the search;
  • Added: To Top button;
  • Added: The ability to change the aspect ratio of the product images;
  • Added: Zoom button to the product gallery;
  • Changed: Social links moved to a separate component;
  • Fixed: Pagination z-index;
  • Fixed: Value could not be typed manually to the InputNumber component;
  • Fixed: Color swatches are not wrapped to a new line;
  • Updated:
    • bootstrap from 4.4.1 to 4.5.0;
    • react from 16.12.0 to 16.13.1;
    • react-helmet-async from 1.0.4 to 1.0.6;
    • react-intl from 3.11.0 to 4.5.7;
    • react-redux from 7.1.3 to 7.2.0;
    • react-router-dom from 5.1.2 to 5.2.0;
    • react-slick from 0.25.2 to 0.26.1;
    • react-toastify from 5.5.0 to 6.0.5;
    • react-scripts from 3.3.0 to 3.4.1;
    • fontawesome from 5.12.0 to 5.13.0;
    • reactstrap from 8.2.0 to 8.4.1.

Version 1.4.0 – March 5, 2020

  • Added: Account menu;
  • Added: Order success page;
  • Added: Order details page;
  • Added: Edit address page;
  • Changed: Close the mobile menu when click on the link;
  • Fixed: Same height of product cards in the block products carousel;
  • Fixed: react-slick bug when dynamically loading slides.

Version 1.3.0 – January 13, 2020

  • Added: Search suggestions;
  • Changed: react-helmet replaced by react-helmet-async;
  • Fixed: Minor issues related to the menu;
  • Updated:
    • fontawesome from 5.11.2 to 5.12.0;
    • bootstrap from 4.3.1 to 4.4.1;
    • node-sass from 4.12.0 to 4.13.0;
    • react, react-dom from 16.10.2 to 16.12.0;
    • react-intl from 3.3.2 to 3.11.0;
    • react-redux from 7.1.1 to 7.1.3;
    • react-scripts from 3.2.0 to 3.3.0;
    • react-toastify from 5.4.0 to 5.5.0;
    • reactstrap from 8.0.1 to 8.2.0;
    • redux from 4.0.4 to 4.0.5;
    • eslint-plugin-import from 2.18.2 to 2.20.0;
    • eslint-plugin-react from 7.16.0 to 7.17.0.

Version 1.2.2 – December 1, 2019

  • Fixed: Off canvas filters not showing.

Version 1.2.1 – November 24, 2019

  • Fixed: Mobile menu not showing.

Version 1.2.0 – October 11, 2019

  • Added: RTL support;
  • Added: Scrolling page up and restoring scroll position after navigation;
  • Updated:
    • fontawesome from 5.10.1 to 5.11.2;
    • eslint-plugin-react from 7.14.3 to 7.16.0;
    • react, react-dom from 16.9.0 to 16.10.2;
    • react-intl from 3.1.9 to 3.3.2;
    • react-redux from 7.1.0 to 7.1.1;
    • react-router-dom from 5.0.1 to 5.1.2;
    • react-scripts from 3.1.1 to 3.2.0;
    • react-toastify from 5.3.2 to 5.4.0.

Version 1.1.0 – August 20, 2019

  • Added: Off canvas filters on the shop page;
  • Added: PhotoSwipe gallery on the product page;
  • Fixed: Unexpected execution of mouse click handlers while dragging the react-slick (now mouse click will be prevented);
  • Updated:
    • fontawesome from 5.8.2 to 5.10.1;
    • react, react-dom from 16.8.6 to 16.9.0;
    • react-intl from 2.9.0 to 3.1.9;
    • react-redux from 7.0.3 to 7.1.0;
    • react-router-dom from 5.0.0 to 5.0.1;
    • react-scripts from 3.0.1 to 3.1.1;
    • react-slick from 0.24.0 to 0.25.2;
    • react-toastify from 5.2.1 to 5.3.2;
    • reactstrap from 8.0.0 to 8.0.1;
    • redux from 4.0.1 to 4.0.4;
    • eslint-config-airbnb from 17.1.0 to 18.0.1;
    • eslint-plugin-import from 2.17.3 to 2.18.2;
    • eslint-plugin-jsx-a11y from 6.2.1 to 6.2.3;
    • eslint-plugin-react from 7.13.0 to 7.14.3.

Version 1.0.0 – June 4, 2019

  • Initial Release.

Credits