Evara
React Redux NextJS Multipurpose Ecommerce Template
DOCUMENTATION
- Doc version: 3.0
- Created: 10 Nov 2021
- Last update: 15 Jun 2022
OVERVIEW
Evara is a mulipurpose E-commerce template based on React Redux, NextJS, Bootstrap 5.x.
Evara includes a lot of pre-designed layouts for home page, product page to give you best selections in customization. This template is built based on the Fashion shop website, but it is also suitable for other eCommerce websites such as hand-made, organic, healthy shop, flower shop … or anything you want.
You can avoid expensive web development and minimize your design costs using Evara eCommerce ReactJS template.
We used styled-components and carefully created custom components so that we don’t have to sacrifice performance. The styled component also provides an easy way to change the appearance of the entire website.
We have a dedicated support center for all of your support needs. It includes our Documentation and Ticket system for any questions you have.
Main Features
- React, NextJs, Redux
- React Toastify
- Mega Menu Built-In
- Redux Shopping Cart
- Redux Add To Cart On Single Product/Quickview
- Free Premium Quality Support
- Logo Slider Integration
- Wishlist, Compare Support
- Sticky Header
- Product Details Layouts/Styles
- Google Fonts
- 100% Responsive
- Nice and Clean Design
- Clean and commented code
- Valid Redux / Jsx Component / CSS3
- Cart Option
- Checkout Option
- Easy to customize
- Flexible and multi-purpose
- Google fonts
- SEO Optimized
- Built On Bootstrap 5.x
- Valid Redux / CSS3
- HTML & CSS & JS files are included
- Detailed documentation
- Lifetime Free Update
- And much more…
What do you get?
Template source code [html, css, js]
Documentation
Note
All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.
Change log
VERSION 3.0
- Fix vulnerabilities issues.
- Use rc-slider instead of react-input-range.
VERSION 2.0
- [add] React Toastify
- [add] Page Pre-loading
- [add] Products Price Range Fillter
- [fix] Responsive CSS
VERSION 1.0
- First release.
GET STARTED
Folder Structure
Structure
_app.js Structure
import "react-input-range/lib/css/index.css";
import "react-perfect-scrollbar/dist/css/styles.css";
import { Provider } from "react-redux";
import "react-responsive-modal/styles.css";
import { ToastProvider } from "react-toast-notifications";
import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";
import store from "../redux/store";
import StorageWrapper from "../components/ecommerce/storage-wrapper";
import "../public/assets/css/main.css";
import React, { useEffect, useState } from "react";
// Swiper Slider
import "swiper/css";
import "swiper/css/navigation";
import Preloader from "./../components/elements/Preloader";
function MyApp({ Component, pageProps }) {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
if (typeof window !== "undefined") {
window.WOW = require("wowjs");
}
new WOW.WOW().init();
}, []);
return (
<>
{loading ? (
)}
);
}
export default MyApp;
Dependencies
package.json
{
"axios": "^0.22.0",
"bootstrap": "^5.1.1",
"isomorphic-unfetch": "^3.1.0",
"next": "11.1.2",
"node-sass": "^6.0.1",
"react": "17.0.2",
"react-bootstrap": "^1.6.4",
"react-dom": "17.0.2",
"react-img-zoom": "^0.1.0",
"react-input-range": "^1.3.0",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.5",
"react-responsive-modal": "^6.1.0",
"react-slick": "^0.28.1",
"react-toast-notifications": "^2.5.1",
"reactstrap": "^8.10.0",
"redux": "^4.1.1",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"select2": "^4.1.0-rc.0",
"slick-carousel": "^1.8.1",
"swiper": "^7.0.8",
"wowjs": "^1.1.3"
}
Create a Page
Create page pages\blank.js
function Blank() {
export function MyPage() {
return(
Hello!
)
}
export default Blank;
Routing
The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application
A React component called Link is provided to do this client-side route transition.
import Link from 'next/link'
function Home() {
return(
)
}
export default Home;
In the example above we have multiple links, each one maps a path (href) to a known page:
- / → pages/index.js
- /about → pages/about.js
- /blog/hello-world → pages/blog/[slug].js
Any in the viewport (initially or through scroll) will be prefetched by default (including the corresponding data) for pages using Static Generation. The corresponding data for server-rendered routes is not prefetched.
Deployment
If you haven’t already done so, push your Next.js app to a Git provider of your choice: GitHub, GitLab, or BitBucket. Your repository can be private or public.
Then, follow these steps:
- Sign up to Vercel (no credit card is required).
- After signing up, you’ll arrive on the “Import Project” page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: GitHub / GitLab / BitBucket).
- Once that’s set up, click “Import Project From …” and import your Next.js app. It auto-detects that your app is using Next.js and sets up the build configuration for you. No need to change anything — everything should work just fine!
- After importing, it’ll deploy your Next.js app and provide you with a deployment URL
- To get more help on the deployment checkout
UPDATE
Important Note:
- Backup your website and theme folders completely to make sure you have a restore point in case of any complications.
Update using FTP
- Download the latest version of the theme to your device.
- Connect to your hosting via FTP software
- Upload the theme folder you unzipped to your site folder
- You should be asked to confirm overwriting of this folder and its contents. Confirm the overwrite.
SOURCES & CREDITS
THANK YOU
Thank you so much for using this template.
- AliThemes Team -