├── .DS_Store ├── .babelrc ├── .gitignore ├── README.md ├── build ├── 0e580e67be8a3b6ebbf9d86c8aaa8d2a.png ├── 1224df28b563a24db6e0b28b8474b92f.jpg ├── 18ba1edb08c3fd06bbd9a632b6b4c1e8.png ├── 21399b158594809d52143db5aa9f2103.png ├── 2394325cd5b49f4408ba405ab141a65f.png ├── 27a823b4db6a3887939b8ca13e93a9ce.png ├── 3833b10aaf4f759077a298d0d7403638.png ├── 44fbafab856b1bbbcb2ea2ddacf0b6fc.png ├── 5879a2b101181aca65325f5a324645a4.png ├── 5e09e50a4635837c69fae9bb25272837.png ├── 607c9a20272b0641c13677031aeaa299.png ├── 704b2a661651d68357b8a23790f641d8.jpg ├── 7e368262bc5c8aeeab43b5a42b62fa2e.png ├── 85b152bdef81faf0a8924402c3d45906.png ├── 966e694f319a1af094226cfcea1ca494.png ├── 9b265eaca9077a672715b752b12d263e.jpg ├── 9cddd9b8b29ba081118d3dd8bbe1b1a5.png ├── bundle.js ├── c1673d749fb2d8923ba9314ac7e064aa.jpg ├── c71949613dbd1370d3b7f3060d4f4321.png ├── c99361c907164e19d43871c266f845ba.png ├── de3202549938e0da08bbfa5ed4bfe826.png ├── e4be91febd0cf414572e63d3e547d23a.png ├── f45313d2be8227dee9125c4c0c416d05.png ├── fa8e8b9f850f8e5325935dab7464d076.png ├── ff53116ba31947a1dc48fb5a88c9d4b5.png └── index.html ├── client ├── .DS_Store ├── App.js ├── App.scss ├── App.test.js ├── __mocks__ │ └── styleMock.js ├── __tests__ │ └── Placeholder-test.js ├── actions │ ├── ActionType.js │ └── index.js ├── api │ └── itemApi.js ├── components │ ├── Alert.component.js │ ├── Cart.component.js │ ├── Footer.component.js │ ├── Header.component.js │ ├── Home.component.js │ ├── Navbar.js │ ├── Placeholder.js │ ├── Product.js │ ├── Productdetails.component.js │ ├── Products.component.js │ └── Sidebar.component.js ├── css │ ├── responsive.scss │ └── style.scss ├── images │ ├── add_1.png │ ├── advertise.png │ ├── ae.png │ ├── arrival_icon.png │ ├── arrow_left.png │ ├── arrow_right.png │ ├── best_sellers.png │ ├── black_bg.jpg │ ├── blue_bg.png │ ├── chat_icon.png │ ├── combo_icon.png │ ├── creat_account_button.png │ ├── delta.png │ ├── desktop.ini │ ├── down_arrow.png │ ├── email_submit_button.png │ ├── facebook.png │ ├── full_star.png │ ├── grey_bg.png │ ├── grey_plus.jpg │ ├── half_star.png │ ├── header_bg.png │ ├── header_shadow.png │ ├── home_banner_bg.jpg │ ├── icon_1.png │ ├── icon_2.png │ ├── icon_3.png │ ├── inner_banner_bg.jpg │ ├── inner_header_bg.png │ ├── light_grey_bg.png │ ├── linkedin.png │ ├── location_icon.png │ ├── location_icon_red.png │ ├── login_icon.png │ ├── logo.png │ ├── man_icon.png │ ├── man_location_icon.png │ ├── map.jpg │ ├── mc.png │ ├── mestro.png │ ├── minus.png │ ├── nav_button.png │ ├── new_product_1.jpg │ ├── null_star.png │ ├── patch.png │ ├── payment_option.png │ ├── paypal.png │ ├── percentage_icon.png │ ├── pink_bg.png │ ├── plus.png │ ├── protx.png │ ├── react-redux-cart-1.png │ ├── react-redux-cart-2.png │ ├── react-redux-cart-3.png │ ├── react-redux-cart-4.png │ ├── react-redux-cart-5.png │ ├── red_bg.png │ ├── right_arrow.png │ ├── sage-pay.png │ ├── sample_add.png │ ├── sample_add_2.png │ ├── sample_image.jpg │ ├── search_button.png │ ├── search_icon.png │ ├── shadow_bottom.png │ ├── shop_icon.png │ ├── shopping_icon.png │ ├── small_product.png │ ├── step_1_icon.png │ ├── step_2_icon.png │ ├── step_3_icon.png │ ├── step_4_icon.png │ ├── step_bg.png │ ├── temp_sellers.png │ ├── transparent_bg.png │ ├── twitter.png │ ├── urkirana_white_logo.png │ ├── user_icon.png │ ├── visa-2.png │ ├── visa.png │ ├── whats_new.png │ ├── white_bg.png │ ├── yellow_rubbin.png │ └── youtube.png ├── index.html ├── index.js ├── index.scss ├── reducers │ ├── cartReducer.js │ ├── defaultState.js │ ├── detailReducer.js │ ├── homeReducer.js │ ├── index.js │ └── itemReducer.js ├── registerServiceWorker.js └── store │ └── configureStore.js ├── package.json ├── server ├── database.js ├── index.js ├── model │ └── products.js └── routes.js └── webpack.config.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2", "react"], 3 | "env": { 4 | "development": { 5 | "plugins": ["react-hot-loader/babel"] 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | client/dist/bundle.js 3 | jest_0 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Ecommerce add to cart with redux and express api 2 | 3 | Ecommerce add to cart functionality reactjs with router. 4 | 5 | #### Concepts used in this POC 6 | - Debouncing to optimized rest api calls 7 | - Infinite scrolling with the help of debounce. [Underscore Debounce](http://underscorejs.org/#debounce) 8 | - Lazy loading of images while scrolling. [React-lazyload](https://github.com/jasonslyvia/react-lazyload) 9 | 10 | #### Software Stack 11 | 12 | - [ReactJs](https://reactjs.org/) 13 | - [Underscore](http://underscorejs.org/#debounce) 14 | - [React lazyload](https://github.com/jasonslyvia/react-lazyload) 15 | - [Axios for HTTP calls](https://www.npmjs.com/package/axios) 16 | - [Webpack](https://www.npmjs.com/package/webpack) 17 | #### Screen-shots 18 | 19 | 20 | ![React Redux Cart Screenshot](https://github.com/navjotdhanawat/react-redux-express-cart/blob/master/client/images/react-redux-cart-1.png?raw=true "React Redux Cart Screenshot") 21 | 22 | ![React Redux Cart Screenshot](https://github.com/navjotdhanawat/react-redux-express-cart/blob/master/client/images/react-redux-cart-2.png?raw=true "React Redux Cart Screenshot") 23 | 24 | ![React Redux Cart Screenshot](https://github.com/navjotdhanawat/react-redux-express-cart/blob/master/client/images/react-redux-cart-3.png?raw=true "React Redux Cart Screenshot") 25 | 26 | ![React Redux Cart Screenshot](https://github.com/navjotdhanawat/react-redux-express-cart/blob/master/client/images/react-redux-cart-4.png?raw=true "React Redux Cart Screenshot") 27 | 28 | ![React Redux Cart Screenshot](https://github.com/navjotdhanawat/react-redux-express-cart/blob/master/client/images/react-redux-cart-5.png?raw=true "React Redux Cart Screenshot") 29 | 30 | #### Installation 31 | 32 | ``` 33 | $ npm install 34 | $ npm start 35 | ``` 36 | 37 | #### Development with Live reloading 38 | 39 | ``` 40 | $npm run dev 41 | ``` 42 | 43 | #### Todos 44 | 45 | - Write Unit Test cases. 46 | 47 | #### Demo and Tutorial: 48 | 49 | [THENEXTFACT Tutorial: How to create shopping cart in react redux](http://www.thenextfact.com/?p=588&preview=true) -------------------------------------------------------------------------------- /build/0e580e67be8a3b6ebbf9d86c8aaa8d2a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/0e580e67be8a3b6ebbf9d86c8aaa8d2a.png -------------------------------------------------------------------------------- /build/1224df28b563a24db6e0b28b8474b92f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/1224df28b563a24db6e0b28b8474b92f.jpg -------------------------------------------------------------------------------- /build/18ba1edb08c3fd06bbd9a632b6b4c1e8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/18ba1edb08c3fd06bbd9a632b6b4c1e8.png -------------------------------------------------------------------------------- /build/21399b158594809d52143db5aa9f2103.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/21399b158594809d52143db5aa9f2103.png -------------------------------------------------------------------------------- /build/2394325cd5b49f4408ba405ab141a65f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/2394325cd5b49f4408ba405ab141a65f.png -------------------------------------------------------------------------------- /build/27a823b4db6a3887939b8ca13e93a9ce.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/27a823b4db6a3887939b8ca13e93a9ce.png -------------------------------------------------------------------------------- /build/3833b10aaf4f759077a298d0d7403638.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/3833b10aaf4f759077a298d0d7403638.png -------------------------------------------------------------------------------- /build/44fbafab856b1bbbcb2ea2ddacf0b6fc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/44fbafab856b1bbbcb2ea2ddacf0b6fc.png -------------------------------------------------------------------------------- /build/5879a2b101181aca65325f5a324645a4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/5879a2b101181aca65325f5a324645a4.png -------------------------------------------------------------------------------- /build/5e09e50a4635837c69fae9bb25272837.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/5e09e50a4635837c69fae9bb25272837.png -------------------------------------------------------------------------------- /build/607c9a20272b0641c13677031aeaa299.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/607c9a20272b0641c13677031aeaa299.png -------------------------------------------------------------------------------- /build/704b2a661651d68357b8a23790f641d8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/704b2a661651d68357b8a23790f641d8.jpg -------------------------------------------------------------------------------- /build/7e368262bc5c8aeeab43b5a42b62fa2e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/7e368262bc5c8aeeab43b5a42b62fa2e.png -------------------------------------------------------------------------------- /build/85b152bdef81faf0a8924402c3d45906.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/85b152bdef81faf0a8924402c3d45906.png -------------------------------------------------------------------------------- /build/966e694f319a1af094226cfcea1ca494.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/966e694f319a1af094226cfcea1ca494.png -------------------------------------------------------------------------------- /build/9b265eaca9077a672715b752b12d263e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/9b265eaca9077a672715b752b12d263e.jpg -------------------------------------------------------------------------------- /build/9cddd9b8b29ba081118d3dd8bbe1b1a5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/9cddd9b8b29ba081118d3dd8bbe1b1a5.png -------------------------------------------------------------------------------- /build/c1673d749fb2d8923ba9314ac7e064aa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/c1673d749fb2d8923ba9314ac7e064aa.jpg -------------------------------------------------------------------------------- /build/c71949613dbd1370d3b7f3060d4f4321.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/c71949613dbd1370d3b7f3060d4f4321.png -------------------------------------------------------------------------------- /build/c99361c907164e19d43871c266f845ba.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/c99361c907164e19d43871c266f845ba.png -------------------------------------------------------------------------------- /build/de3202549938e0da08bbfa5ed4bfe826.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/de3202549938e0da08bbfa5ed4bfe826.png -------------------------------------------------------------------------------- /build/e4be91febd0cf414572e63d3e547d23a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/e4be91febd0cf414572e63d3e547d23a.png -------------------------------------------------------------------------------- /build/f45313d2be8227dee9125c4c0c416d05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/f45313d2be8227dee9125c4c0c416d05.png -------------------------------------------------------------------------------- /build/fa8e8b9f850f8e5325935dab7464d076.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/fa8e8b9f850f8e5325935dab7464d076.png -------------------------------------------------------------------------------- /build/ff53116ba31947a1dc48fb5a88c9d4b5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/build/ff53116ba31947a1dc48fb5a88c9d4b5.png -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | urKirana
-------------------------------------------------------------------------------- /client/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/.DS_Store -------------------------------------------------------------------------------- /client/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types' 3 | import './App.scss'; 4 | import './css/style.scss'; 5 | import './css/responsive.scss'; 6 | import _ from 'underscore'; 7 | import axios from 'axios'; 8 | import { LazyLoad, forceCheck } from 'react-lazyload'; 9 | import PlaceholderComponent from './components/Placeholder'; 10 | import HeaderComponent from './components/Header.component'; 11 | import FooterComponent from './components/Footer.component'; 12 | import NavbarComponent from './components/Navbar'; 13 | import SidebarComponent from './components/Sidebar.component'; 14 | import AlertComponent from './components/Alert.component'; 15 | import ProductComponent from './components/Product'; 16 | import ProductsComponent from './components/Products.component'; 17 | import ProductDetailComponent from './components/Productdetails.component'; 18 | import HomeComponent from './components/Home.component'; 19 | import CartComponent from './components/Cart.component'; 20 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 21 | import { connect } from 'react-redux'; 22 | import { loadMoreItems, searchItems } from './actions'; 23 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 24 | import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 25 | import getMuiTheme from 'material-ui/styles/getMuiTheme'; 26 | import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'; 27 | import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; 28 | import { GridList, GridTile } from 'material-ui/GridList'; 29 | import Toggle from 'material-ui/Toggle'; 30 | 31 | 32 | class App extends React.Component { 33 | constructor(props) { 34 | super(props); 35 | this.state = { 36 | theme: darkBaseTheme 37 | } 38 | this.toggle = 1; 39 | this.toggleTheme = this.toggleTheme.bind(this); 40 | } 41 | 42 | toggleTheme() { 43 | if (this.toggle) { 44 | this.toggle = 0; 45 | this.setState({ 46 | theme: lightBaseTheme 47 | }); 48 | } else { 49 | this.toggle = 1; 50 | this.setState({ 51 | theme: darkBaseTheme 52 | }); 53 | } 54 | } 55 | 56 | render() { 57 | 58 | return ( 59 | 60 | 61 |
62 | 63 | 64 |
65 | 66 |
67 |
68 | 69 | 70 | 71 | 72 |
73 | 74 |
75 | 76 | 77 | ); 78 | } 79 | } 80 | 81 | export default App; -------------------------------------------------------------------------------- /client/App.scss: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | 6 | .search-input { 7 | margin: 15px; 8 | float: right; 9 | } 10 | 11 | .navbar-header { 12 | width: 100%; 13 | } 14 | 15 | .thumbnail img { 16 | height: 110px !important; 17 | } 18 | 19 | .App-logo { 20 | animation: App-logo-spin infinite 20s linear; 21 | height: 80px; 22 | } 23 | 24 | .App-header { 25 | background-color: #222; 26 | height: 150px; 27 | padding: 20px; 28 | color: white; 29 | } 30 | 31 | .App-title { 32 | font-size: 1.5em; 33 | } 34 | 35 | .App-intro { 36 | font-size: large; 37 | } 38 | 39 | @keyframes App-logo-spin { 40 | from { transform: rotate(0deg); } 41 | to { transform: rotate(360deg); } 42 | } 43 | 44 | .spinner { 45 | margin: 0 auto; 46 | width: 50px; 47 | height: 40px; 48 | text-align: center; 49 | font-size: 10px; 50 | } 51 | .spinner > div { 52 | background-color: #999; 53 | height: 100%; 54 | width: 6px; 55 | display: inline-block; 56 | -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; 57 | animation: sk-stretchdelay 1.2s infinite ease-in-out; 58 | } 59 | .spinner .rect2 { 60 | -webkit-animation-delay: -1.1s; 61 | animation-delay: -1.1s; 62 | } 63 | .spinner .rect3 { 64 | -webkit-animation-delay: -1.0s; 65 | animation-delay: -1.0s; 66 | } 67 | .spinner .rect4 { 68 | -webkit-animation-delay: -0.9s; 69 | animation-delay: -0.9s; 70 | } 71 | .spinner .rect5 { 72 | -webkit-animation-delay: -0.8s; 73 | animation-delay: -0.8s; 74 | } 75 | @-webkit-keyframes sk-stretchdelay { 76 | 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 77 | 20% { -webkit-transform: scaleY(1.0) } 78 | } 79 | @keyframes sk-stretchdelay { 80 | 0%, 40%, 100% { 81 | transform: scaleY(0.4); 82 | -webkit-transform: scaleY(0.4); 83 | } 20% { 84 | transform: scaleY(1.0); 85 | -webkit-transform: scaleY(1.0); 86 | } 87 | } 88 | 89 | .placeholder { 90 | background: #f8f8f8; 91 | height: 200px; 92 | margin: 10px 0; 93 | padding-top: 80px; 94 | } 95 | 96 | .no-padding { 97 | padding: 0px !important; 98 | } 99 | 100 | .searchProduct { 101 | margin-top: 1px; 102 | height: 43px; 103 | } 104 | 105 | .search-section { 106 | margin-bottom: 20px; 107 | } 108 | 109 | .alert-section { 110 | text-align: center; 111 | .alert { 112 | display: inline-block; 113 | } 114 | } 115 | 116 | 117 | 118 | 119 | 120 | 121 | /*****************globals // Product Details Page*************/ 122 | 123 | 124 | img { 125 | max-width: 100%; } 126 | 127 | .preview { 128 | display: -webkit-box; 129 | display: -webkit-flex; 130 | display: -ms-flexbox; 131 | display: flex; 132 | -webkit-box-orient: vertical; 133 | -webkit-box-direction: normal; 134 | -webkit-flex-direction: column; 135 | -ms-flex-direction: column; 136 | flex-direction: column; } 137 | @media screen and (max-width: 996px) { 138 | .preview { 139 | margin-bottom: 20px; } } 140 | 141 | .preview-pic { 142 | -webkit-box-flex: 1; 143 | -webkit-flex-grow: 1; 144 | -ms-flex-positive: 1; 145 | flex-grow: 1; 146 | } 147 | 148 | .preview-thumbnail.nav-tabs { 149 | border: none; 150 | margin-top: 15px; } 151 | .preview-thumbnail.nav-tabs li { 152 | width: 18%; 153 | margin-right: 2.5%; } 154 | .preview-thumbnail.nav-tabs li img { 155 | max-width: 100%; 156 | display: block; } 157 | .preview-thumbnail.nav-tabs li a { 158 | padding: 0; 159 | margin: 0; } 160 | .preview-thumbnail.nav-tabs li:last-of-type { 161 | margin-right: 0; } 162 | 163 | .tab-content { 164 | overflow: hidden; 165 | text-align: center; 166 | } 167 | .tab-content img { 168 | width: 200px; 169 | -webkit-animation-name: opacity; 170 | animation-name: opacity; 171 | -webkit-animation-duration: .3s; 172 | animation-duration: .3s; } 173 | 174 | .card { 175 | margin-top: 50px; 176 | padding: 3em; 177 | line-height: 1.5em; } 178 | 179 | @media screen and (min-width: 997px) { 180 | .wrapper { 181 | display: -webkit-box; 182 | display: -webkit-flex; 183 | display: -ms-flexbox; 184 | display: flex; } } 185 | 186 | .details { 187 | display: -webkit-box; 188 | display: -webkit-flex; 189 | display: -ms-flexbox; 190 | display: flex; 191 | -webkit-box-orient: vertical; 192 | -webkit-box-direction: normal; 193 | -webkit-flex-direction: column; 194 | -ms-flex-direction: column; 195 | flex-direction: column; } 196 | 197 | .colors { 198 | -webkit-box-flex: 1; 199 | -webkit-flex-grow: 1; 200 | -ms-flex-positive: 1; 201 | flex-grow: 1; } 202 | 203 | .product-title, .price, .sizes, .colors { 204 | text-transform: UPPERCASE; 205 | font-weight: bold; } 206 | 207 | .checked, .price span { 208 | color: #ff9f1a; } 209 | 210 | .product-title, .rating, .product-description, .price, .vote, .sizes { 211 | margin-bottom: 15px; } 212 | 213 | .product-title { 214 | margin-top: 0; } 215 | 216 | .size { 217 | margin-right: 10px; } 218 | .size:first-of-type { 219 | margin-left: 40px; } 220 | 221 | .color { 222 | display: inline-block; 223 | vertical-align: middle; 224 | margin-right: 10px; 225 | height: 2em; 226 | width: 2em; 227 | border-radius: 2px; } 228 | .color:first-of-type { 229 | margin-left: 20px; } 230 | 231 | .add-to-cart-details, .like { 232 | background: #ff9f1a; 233 | padding: 1.2em 1.5em; 234 | border: none; 235 | text-transform: UPPERCASE; 236 | font-weight: bold; 237 | color: #fff; 238 | -webkit-transition: background .3s ease; 239 | transition: background .3s ease; } 240 | .add-to-cart-details:hover, .like:hover { 241 | background: #b36800; 242 | color: #fff; } 243 | 244 | .not-available { 245 | text-align: center; 246 | line-height: 2em; } 247 | .not-available:before { 248 | font-family: fontawesome; 249 | content: "\f00d"; 250 | color: #fff; } 251 | 252 | .orange { 253 | background: #ff9f1a; } 254 | 255 | .green { 256 | background: #85ad00; } 257 | 258 | .blue { 259 | background: #0076ad; } 260 | 261 | .tooltip-inner { 262 | padding: 1.3em; } 263 | 264 | @-webkit-keyframes opacity { 265 | 0% { 266 | opacity: 0; 267 | -webkit-transform: scale(3); 268 | transform: scale(3); } 269 | 100% { 270 | opacity: 1; 271 | -webkit-transform: scale(1); 272 | transform: scale(1); } } 273 | 274 | @keyframes opacity { 275 | 0% { 276 | opacity: 0; 277 | -webkit-transform: scale(3); 278 | transform: scale(3); } 279 | 100% { 280 | opacity: 1; 281 | -webkit-transform: scale(1); 282 | transform: scale(1); } } 283 | 284 | /*# sourceMappingURL=style.css.map */ 285 | 286 | .blacklink.active { 287 | color: #03A9F4; 288 | } 289 | 290 | .cart-view { 291 | position: fixed; 292 | height: 100px; 293 | width: 200px; 294 | right: 5px; 295 | z-index: 9; 296 | } 297 | 298 | .cart-view button { 299 | height: 100px !important; 300 | width: 200px !important; 301 | } -------------------------------------------------------------------------------- /client/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /client/__mocks__/styleMock.js: -------------------------------------------------------------------------------- 1 | module.exports = {}; -------------------------------------------------------------------------------- /client/__tests__/Placeholder-test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | jest.unmock('../components/Placeholder'); 4 | 5 | import React from 'react'; 6 | import ReactDOM from 'react-dom'; 7 | import PlaceholderComponent from '../components/Placeholder'; 8 | import LazyLoad from 'react-lazyload'; 9 | 10 | describe('Placeholder', () => { 11 | 12 | it('renders without crashing', () => { 13 | const url = "https://m.media-amazon.com/images/I/817VFPdaUnL._AC_SX255_.jpg"; 14 | const div = document.createElement('div'); 15 | ReactDOM.render(} > 16 | 17 | , div); 18 | }); 19 | }); -------------------------------------------------------------------------------- /client/actions/ActionType.js: -------------------------------------------------------------------------------- 1 | // Action constants 2 | export const LOAD_ITEMS_SUCCESS = 'LOAD_ITEMS_SUCCESS'; 3 | export const LOAD_NEXT_ITEMS = 'LOAD_NEXT_ITEMS'; 4 | export const LOAD_SEARCHED_ITEMS = 'LOAD_SEARCHED_ITEMS'; 5 | export const REQUEST_ITEMS = 'REQUEST_ITEMS'; 6 | export const ADD_TO_CART = 'ADD_TO_CART'; 7 | export const REMOVE_FROM_CART = 'REMOVE_FROM_CART'; 8 | export const LOAD_HOME_PRODUCTS = 'LOAD_HOME_PRODUCTS'; 9 | export const LOAD_PRODUCT_DETAILS = 'LOAD_PRODUCT_DETAILS'; -------------------------------------------------------------------------------- /client/actions/index.js: -------------------------------------------------------------------------------- 1 | import * as actionType from './ActionType'; 2 | import _ from 'underscore'; 3 | 4 | import itemApi from '../api/itemApi'; 5 | /** 6 | * loadHomeItems: 7 | * To load home product according to catogory 8 | */ 9 | export function loadHomeItems() { 10 | return function (dispatch) { 11 | dispatch(requestItems()); 12 | return itemApi.getHomeItems().then(items => { 13 | var state = items.docs; 14 | dispatch(loadHomeItemsSuccess(state)); 15 | }).catch(error => { 16 | throw (error); 17 | }); 18 | }; 19 | } 20 | 21 | /** 22 | * @param {} items 23 | */ 24 | export function loadHomeItemsSuccess(items) { 25 | return { type: actionType.LOAD_HOME_PRODUCTS, items }; 26 | } 27 | 28 | /** 29 | * To fetch items from api 30 | */ 31 | export function loadItems() { 32 | return function (dispatch) { 33 | dispatch(requestItems()); 34 | return itemApi.getItems().then(items => { 35 | var state = items; 36 | dispatch(loadItemsSuccess(state)); 37 | }).catch(error => { 38 | throw (error); 39 | }); 40 | }; 41 | } 42 | 43 | /** 44 | * @param {} items 45 | */ 46 | export function loadItemsSuccess(items) { 47 | return { type: actionType.LOAD_ITEMS_SUCCESS, items }; 48 | } 49 | 50 | /** 51 | * @param {} page 52 | * Load more items for pagination i.e infinite scroll 53 | */ 54 | export function loadMoreItems(page) { 55 | return function (dispatch) { 56 | dispatch(requestItems()); 57 | return itemApi.getItemsByPage(page).then(items => { 58 | var state = items 59 | dispatch(loadNextItems(state)); 60 | }).catch(error => { 61 | throw (error); 62 | }); 63 | }; 64 | } 65 | 66 | /** 67 | * @param {} items 68 | * 69 | */ 70 | export function loadNextItems(items) { 71 | return { type: actionType.LOAD_NEXT_ITEMS, items }; 72 | } 73 | 74 | /** 75 | * @param {} keyword 76 | * Search product api call 77 | */ 78 | export function searchItems(keyword) { 79 | return function (dispatch) { 80 | return itemApi.searchItems(keyword).then(items => { 81 | var state = items 82 | dispatch(loadSearchedItems(state)); 83 | }).catch(error => { 84 | throw (error); 85 | }); 86 | }; 87 | } 88 | 89 | /** 90 | * @param {} items 91 | */ 92 | export function loadSearchedItems(items) { 93 | return { type: actionType.LOAD_SEARCHED_ITEMS, items }; 94 | } 95 | 96 | /** 97 | * To show api progress 98 | */ 99 | export function requestItems() { 100 | return { type: actionType.REQUEST_ITEMS, items: {} }; 101 | } 102 | 103 | /** 104 | * @param {} item 105 | * To add item into cart 106 | */ 107 | export function addToCart(item) { 108 | return { type: actionType.ADD_TO_CART, item }; 109 | } 110 | 111 | /** 112 | * @param {} id 113 | * To remove item from cart 114 | */ 115 | export function removeFromCart(id) { 116 | return { type: actionType.REMOVE_FROM_CART, id }; 117 | } 118 | 119 | /** 120 | * @param {} state 121 | * @param {} props 122 | * To check whether item is in cart or not 123 | */ 124 | export function isInCart(state, props) { 125 | var cartItems = JSON.parse(localStorage.getItem('cart')); 126 | return _.some(cartItems, function (item) { 127 | return item.id == props._id; 128 | }); 129 | } 130 | 131 | /** 132 | * @param {} state 133 | * @param {} props 134 | * It store information of cart items with quantity and total price 135 | */ 136 | export function getCart(state, props) { 137 | var cartItems = JSON.parse(localStorage.getItem('cart')); 138 | var total = 0.00; 139 | _.each(cartItems, function (item) { 140 | total += item.price; 141 | }); 142 | return { 143 | total: total.toFixed(2), 144 | items: cartItems ? cartItems.length : 0 145 | }; 146 | } 147 | 148 | /** 149 | * @param {} id 150 | * @param {} props 151 | * To get particular product information from api 152 | */ 153 | export function getProductDetails(id, props) { 154 | return function (dispatch) { 155 | dispatch(requestItems()); 156 | return itemApi.getItemById(id).then(item => { 157 | dispatch(loadProductDetails(item)); 158 | }).catch(error => { 159 | throw (error); 160 | }); 161 | }; 162 | } 163 | 164 | /** 165 | * @param {} item 166 | * To get particular product information from api 167 | */ 168 | export function loadProductDetails(item) { 169 | return { type: actionType.LOAD_PRODUCT_DETAILS, item }; 170 | } -------------------------------------------------------------------------------- /client/api/itemApi.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | const server_url = 'http://localhost:4000';//"http://urkirana.progfeel.co.in"; 3 | 4 | class ItemApi { 5 | static getItems() { 6 | return fetch(server_url + '/getProducts/1').then(response => { 7 | return response.json(); 8 | }).catch(error => { 9 | return error; 10 | }); 11 | } 12 | 13 | static getItemById(id) { 14 | return fetch(server_url + '/getProduct/' + id).then(response => { 15 | return response.json(); 16 | }).catch(error => { 17 | return error; 18 | }); 19 | } 20 | 21 | static getHomeItems() { 22 | return fetch(server_url + '/getHomeProducts').then(response => { 23 | return response.json(); 24 | }).catch(error => { 25 | return error; 26 | }); 27 | } 28 | 29 | static getItemsByPage(page) { 30 | return fetch(server_url + '/getProducts/' + page).then(response => { 31 | return response.json(); 32 | }).catch(error => { 33 | return error; 34 | }); 35 | } 36 | 37 | static searchItems(keyword) { 38 | return fetch(server_url + '/searchProducts/' + keyword).then(response => { 39 | return response.json(); 40 | }).catch(error => { 41 | return error; 42 | }); 43 | } 44 | } 45 | export default ItemApi; -------------------------------------------------------------------------------- /client/components/Alert.component.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | // Common alert component to notify. 4 | function AlertComponent(props) { 5 | return ( 6 |
7 |
8 | {props.message} 9 |
10 |
11 | ); 12 | } 13 | 14 | export default AlertComponent; -------------------------------------------------------------------------------- /client/components/Cart.component.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { NavLink } from 'react-router-dom'; 3 | import { getCart } from '../actions'; 4 | import { connect } from 'react-redux'; 5 | import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card'; 6 | import FloatingActionButton from 'material-ui/FloatingActionButton'; 7 | 8 | const style = { 9 | marginRight: 20, 10 | }; 11 | 12 | // Cart component show added items with count of items 13 | class CartComponent extends React.Component { 14 | constructor(props) { 15 | super(props); 16 | } 17 | 18 | render() { 19 | return ( 20 | 21 |
22 |
23 |

24 | {this.props.getCart.items ? 'Rs ' + this.props.getCart.total : '0 in cart'} 25 |

26 |
{this.props.getCart.items ? this.props.getCart.items + ' item selected' : ''}
27 |
28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 | 36 | ); 37 | } 38 | } 39 | 40 | const mapStateToProps = (state, props) => { 41 | return { 42 | getCart: getCart(state.cart, props) // It it give you all information regarding items in cart 43 | } 44 | } 45 | 46 | 47 | export default connect(mapStateToProps)(CartComponent); 48 | -------------------------------------------------------------------------------- /client/components/Footer.component.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | /** 4 | * @param {} props 5 | * Footer component 6 | */ 7 | function FooterComponent(props) { 8 | return ( 9 | 175 | ); 176 | } 177 | 178 | export default FooterComponent; -------------------------------------------------------------------------------- /client/components/Header.component.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { NavLink } from 'react-router-dom'; 3 | import CartComponent from './Cart.component'; 4 | import { Nav, NavItem, Navbar, NavDropdown } from 'react-bootstrap'; 5 | import IconMenu from 'material-ui/IconMenu'; 6 | import IconButton from 'material-ui/IconButton'; 7 | import FontIcon from 'material-ui/FontIcon'; 8 | import NavigationExpandMoreIcon from 'material-ui/svg-icons/navigation/expand-more'; 9 | import MenuItem from 'material-ui/MenuItem'; 10 | import DropDownMenu from 'material-ui/DropDownMenu'; 11 | import RaisedButton from 'material-ui/RaisedButton'; 12 | import { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle } from 'material-ui/Toolbar'; 13 | import Toggle from 'material-ui/Toggle'; 14 | 15 | 16 | const styles = { 17 | 18 | toggle: { 19 | marginBottom: 16, 20 | } 21 | }; 22 | 23 | 24 | // Header component 25 | class HeaderComponent extends React.Component { 26 | constructor(props) { 27 | super(props); 28 | this.state = { 29 | value: 3, 30 | }; 31 | } 32 | 33 | handleChange = (event, index, value) => this.setState({ value }); 34 | 35 | render() { 36 | 37 | return ( 38 | 39 | 40 | 41 | 42 | 43 | ); 44 | } 45 | 46 | } 47 | 48 | export default HeaderComponent; -------------------------------------------------------------------------------- /client/components/Home.component.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import LazyLoad from 'react-lazyload'; 3 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 4 | import _ from 'underscore'; 5 | import { loadMoreItems, searchItems } from '../actions'; 6 | import ProductComponent from './Product'; 7 | import PropTypes from 'prop-types'; 8 | import { connect } from 'react-redux'; 9 | var Spinner = require('react-spinkit'); 10 | import AlertComponent from './Alert.component'; 11 | 12 | // Home component to show items according to category 13 | class HomeComponent extends React.Component { 14 | constructor(props) { 15 | super(props); 16 | // this.getProducts = this.getProducts.bind(this); 17 | } 18 | 19 | componentDidMount() { 20 | // window.addEventListener("scroll", _.debounce((e) => this.getProducts(e), 100)); 21 | } 22 | 23 | // getProducts() { 24 | // var self = this; 25 | // const windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight; 26 | // const body = document.body; 27 | // const html = document.documentElement; 28 | // const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); 29 | // const windowBottom = windowHeight + window.pageYOffset; 30 | // console.log((windowBottom / docHeight) * 100); 31 | 32 | 33 | // if ((windowBottom / docHeight) * 100 >= 80 && !this.props.items.isSearch && !this.props.items.loading) { 34 | // this.props.dispatch(loadMoreItems(this.props.items.page)) 35 | // } else { 36 | // console.log('Not Bottom'); 37 | // } 38 | // } 39 | 40 | // handleChange(event) { 41 | // console.log(event.target.value); 42 | // this.searchDebounce(event.target.value); 43 | // } 44 | 45 | 46 | render() { 47 | const homeItems = [ 48 | { 49 | title: 'Latest Arrival', 50 | }, 51 | { 52 | title: 'Sale Products', 53 | }, 54 | { 55 | title: 'Most Trending', 56 | }, 57 | ]; 58 | 59 | // const alert = this.props.items.message ? : null; 60 | // const loading = this.props.items.loading ?
61 | // 62 | //
: null; 63 | 64 | const homeProducts = homeItems.map((item, i) => ( 65 | 66 |
67 |
68 |

{item.title}

69 |
70 | 74 |
75 | {this.props.home.docs.map((item, i) => ( 76 | 77 | ))} 78 |
79 | 80 |
81 | 82 | )) 83 | 84 | return ( 85 | // { 86 |
87 | {homeProducts} 88 |
89 | 90 | // } 91 | ) 92 | } 93 | } 94 | 95 | HomeComponent.propTypes = { 96 | home: PropTypes.object.isRequired 97 | }; 98 | 99 | function mapStateToProps(state, ownProps) { 100 | 101 | return { 102 | home: state.home 103 | }; 104 | } 105 | 106 | export default connect(mapStateToProps)(HomeComponent); -------------------------------------------------------------------------------- /client/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | // Navigation components 4 | function NavbarComponent(props) { 5 | return ( 6 | 16 | ); 17 | } 18 | 19 | export default NavbarComponent; -------------------------------------------------------------------------------- /client/components/Placeholder.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // Place holder component to show loading icon while image lazy loads. 4 | export default function Placeholder() { 5 | return ( 6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | ); 16 | } -------------------------------------------------------------------------------- /client/components/Product.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import LazyLoad from 'react-lazyload'; 3 | import PlaceholderComponent from './Placeholder'; 4 | import PropTypes from 'prop-types'; 5 | import { connect } from 'react-redux'; 6 | import { NavLink } from 'react-router-dom'; 7 | import { addToCart, removeFromCart, isInCart } from '../actions'; // This actions are used to manages activities on cart 8 | import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card'; 9 | import RaisedButton from 'material-ui/RaisedButton'; 10 | import { GridList, GridTile } from 'material-ui/GridList'; 11 | 12 | // Product component 13 | class ProductComponent extends React.Component { 14 | constructor(props) { 15 | super(props); 16 | this.handleClick = this.handleClick.bind(this); 17 | } 18 | 19 | // Toggle addtocart/removefromcart button based on isInCart status 20 | handleClick(e) { 21 | 22 | if (this.props.isInCart) { 23 | this.props.removeFromCart(this.props._id); 24 | } else { 25 | const item = { 26 | id: this.props._id, 27 | name: this.props.name, 28 | image: this.props.image, 29 | price: this.props.price 30 | }; 31 | this.props.addToCart(item); 32 | } 33 | } 34 | 35 | 36 | /** 37 | * @param {} amount 38 | * 39 | */ 40 | getDiscount(amount) { 41 | if (Math.floor(Math.random() * 3)) { 42 | return amount + Math.floor(Math.random() * 100) + 1; 43 | } else { 44 | return; 45 | } 46 | } 47 | 48 | render() { 49 | const mrp = MRP Rs{this.props.mrp ? this.props.mrp : ''} {this.props.price}; 50 | return ( 51 | 52 | 53 | } > 54 | } > 55 | 56 | 57 | 58 | 59 | 60 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 61 | Donec mattis pretium massa. 62 | 63 | 64 | 65 | 66 | 67 | ) 68 | } 69 | } 70 | 71 | // Mapping isInCart state to props to access easily in component 72 | const mapStateToProps = (state, props) => { 73 | return { 74 | isInCart: isInCart(state, props) 75 | } 76 | } 77 | 78 | // Mapping dispatch functions to props to access easily 79 | const mapDispatchToProps = (dispatch) => ({ 80 | addToCart: (item) => dispatch(addToCart(item)), 81 | removeFromCart: (id) => dispatch(removeFromCart(id)) 82 | }) 83 | 84 | 85 | export default connect(mapStateToProps, mapDispatchToProps)(ProductComponent); 86 | -------------------------------------------------------------------------------- /client/components/Productdetails.component.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import LazyLoad from 'react-lazyload'; 3 | import PlaceholderComponent from './Placeholder'; 4 | import PropTypes from 'prop-types'; 5 | import { connect } from 'react-redux'; 6 | import { getProductDetails, addToCart, removeFromCart, isInCart } from '../actions'; // This actions are used to manages activities on cart 7 | import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card'; 8 | import RaisedButton from 'material-ui/RaisedButton'; 9 | 10 | class ProductDetailComponent extends React.Component { 11 | constructor(props) { 12 | super(props); 13 | this.handleClick = this.handleClick.bind(this); 14 | } 15 | 16 | componentDidMount(prevProps) { 17 | window.scrollTo(0, 0); 18 | const id = this.props.match.params.id; 19 | this.props.getProductDetails(id); 20 | } 21 | 22 | // Toggle addtocart/removefromcart button based on isInCart status 23 | handleClick(e) { 24 | if (this.props.isInCart) { 25 | this.props.removeFromCart(this.props.detail._id); 26 | } else { 27 | const item = { 28 | id: this.props.detail._id, 29 | name: this.props.detail.name, 30 | image: this.props.detail.image, 31 | price: this.props.detail.price 32 | }; 33 | this.props.addToCart(item); 34 | } 35 | } 36 | 37 | render() { 38 | console.log(this.props.detail); 39 | const name = this.props.detail.name; 40 | const image = this.props.detail.image; 41 | const price = this.props.detail.price; 42 | 43 | return ( 44 |
45 | 46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
    55 |
    • 56 |
    • 57 |
    • 58 |
    • 59 |
    • 60 |
61 |
62 |
63 |

{name}

64 |
65 | 41 reviews 66 |
67 |

Product description will come here.

68 |

Price: Rs. {price}

69 |

91% of buyers enjoyed this product! (87 votes)

70 |
sizes: 71 | 1 KG 72 |
73 |
74 |
75 | 76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 | 84 |
85 | ) 86 | } 87 | } 88 | 89 | // Mapping isInCart state to props to access easily in component 90 | const mapStateToProps = (state, props) => { 91 | return { 92 | isInCart: isInCart(state, state.detail), 93 | detail: state.detail 94 | } 95 | } 96 | 97 | // Mapping dispatch functions to props to access easily 98 | const mapDispatchToProps = (dispatch) => ({ 99 | addToCart: (item) => dispatch(addToCart(item)), 100 | removeFromCart: (id) => dispatch(removeFromCart(id)), 101 | getProductDetails: (id) => dispatch(getProductDetails(id)) 102 | }) 103 | 104 | 105 | export default connect(mapStateToProps, mapDispatchToProps)(ProductDetailComponent); 106 | -------------------------------------------------------------------------------- /client/components/Products.component.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import LazyLoad from 'react-lazyload'; 3 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 4 | import _ from 'underscore'; 5 | import { loadMoreItems, searchItems, loadItems } from '../actions'; 6 | import ProductComponent from './Product'; 7 | import PropTypes from 'prop-types'; 8 | import { connect } from 'react-redux'; 9 | var Spinner = require('react-spinkit'); 10 | import AlertComponent from './Alert.component'; 11 | import { TextField, Paper } from 'material-ui'; 12 | import { Grid, Row, Col } from 'react-flexbox-grid'; 13 | import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card'; 14 | 15 | class ProductsComponent extends React.Component { 16 | constructor(props) { 17 | super(props); 18 | this.getProducts = this.getProducts.bind(this); 19 | this.handleChange = this.handleChange.bind(this); 20 | 21 | // Underscore debounce to manage search product functionality 22 | this.searchDebounce = _.debounce(function (keyword) { 23 | if (keyword) { 24 | this.props.dispatch(searchItems(keyword)); 25 | } else { 26 | this.props.dispatch(loadItems()); 27 | } 28 | }, 500); 29 | } 30 | 31 | // Init point to load data and attach events 32 | componentDidMount() { 33 | this.props.dispatch(loadItems()); 34 | window.addEventListener("scroll", _.debounce((e) => this.getProducts(e), 100)); 35 | } 36 | 37 | // Fetching products on scrolling using pagination(infinite scroll) 38 | getProducts() { 39 | var self = this; 40 | const windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight; 41 | const body = document.body; 42 | const html = document.documentElement; 43 | const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); 44 | const windowBottom = windowHeight + window.pageYOffset; 45 | console.log((windowBottom / docHeight) * 100); 46 | 47 | 48 | if ((windowBottom / docHeight) * 100 >= 80 && !this.props.items.isSearch && !this.props.items.loading && this.props.items.isMoreItems) { 49 | this.props.dispatch(loadMoreItems(this.props.items.page)) 50 | } else { 51 | console.log('Not Bottom'); 52 | } 53 | } 54 | 55 | // Underscore debounce to manage search product functionality 56 | handleChange(event) { 57 | this.searchDebounce(event.target.value); 58 | } 59 | 60 | render() { 61 | 62 | const items = this.props.items.docs.map((item, i) => ( 63 | 64 | 65 | 66 | )); 67 | 68 | const alert = this.props.items.message ? : null; 69 | const loading = this.props.items.loading ?
70 | 71 |
: null; 72 | 73 | return ( 74 |
75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |
85 | {items} 86 |
87 | 88 | 89 | 90 | 91 |
92 | ) 93 | } 94 | } 95 | 96 | // Mapping state and dispatch functions to props 97 | ProductsComponent.propTypes = { 98 | items: PropTypes.object.isRequired 99 | }; 100 | 101 | function mapStateToProps(state, ownProps) { 102 | return { 103 | items: state.items 104 | }; 105 | } 106 | 107 | export default connect(mapStateToProps)(ProductsComponent); -------------------------------------------------------------------------------- /client/components/Sidebar.component.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { NavLink } from 'react-router-dom'; 3 | import { List, ListItem } from 'material-ui/List'; 4 | import ContentInbox from 'material-ui/svg-icons/content/inbox'; 5 | import ActionGrade from 'material-ui/svg-icons/action/grade'; 6 | import ContentSend from 'material-ui/svg-icons/content/send'; 7 | import ContentDrafts from 'material-ui/svg-icons/content/drafts'; 8 | import Divider from 'material-ui/Divider'; 9 | import ActionInfo from 'material-ui/svg-icons/action/info'; 10 | import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card'; 11 | 12 | /** 13 | * @param {} props 14 | * Sidebar component to show categories 15 | */ 16 | function SidebarComponent(props) { 17 | return ( 18 |
19 | 20 | 21 | } /> 22 | } /> 23 | } /> 24 | } /> 25 | } /> 26 | 27 | 28 | } /> 29 | } /> 30 | } /> 31 | 32 | 33 |
34 | ); 35 | } 36 | 37 | export default SidebarComponent; -------------------------------------------------------------------------------- /client/css/responsive.scss: -------------------------------------------------------------------------------- 1 | 2 | @media (max-width: 767px){ 3 | 4 | .top-bar { 5 | padding: 20px 15px; 6 | } 7 | 8 | .headerbg { 9 | background-image: none; 10 | display: block; 11 | padding-top: 20px; 12 | } 13 | .header-content { 14 | display: inherit; 15 | } 16 | .logo-center img { 17 | margin:0 auto; 18 | } 19 | .top-search-product { 20 | width: 84% !important; 21 | } 22 | .container-fluid { 23 | padding:0px 6px; 24 | } 25 | .top-left-detail ul li { 26 | float: left; 27 | } 28 | .contact-images { 29 | float: left; 30 | margin-right: 12px; 31 | width: 18%; 32 | } 33 | .head-price { 34 | width: 82%; 35 | float: left; 36 | margin-bottom: 8px; 37 | } 38 | .pro-buynow .blackroundbutton { 39 | margin-bottom: 8px; 40 | } 41 | .pro-buynow .dangerbutton { 42 | margin-bottom: 8px; 43 | } 44 | .pro-buynow a { 45 | font-size: 16px; 46 | } 47 | .add-to-cart { 48 | width: 18%; 49 | float: right; 50 | } 51 | .main-wrap { 52 | float: left; 53 | margin-top: 10px; 54 | width: 100%; 55 | } 56 | .top-left-detail { 57 | padding:0px; 58 | margin-bottom: 4px; 59 | width: 99%; 60 | } 61 | .top-left-detail ul li { 62 | margin-left: 10px; 63 | margin-right: 10px; 64 | } 65 | .top-left-detail ul li h5 { 66 | font-size:12px; 67 | } 68 | .top-right-detail ul li h5 { 69 | font-size:12px; 70 | } 71 | 72 | .top-right-detail { 73 | padding:0px; 74 | margin-bottom: 4px; 75 | } 76 | .right-sidebar { 77 | margin-top:10px; 78 | } 79 | .mobile-view { 80 | padding:0px; 81 | } 82 | .mobile-view .col-sm-5 { 83 | padding:0px; 84 | } 85 | .header-content { 86 | padding:0px; 87 | } 88 | .user-account { 89 | margin-left: 3px; 90 | padding-left: 6px; 91 | } 92 | .user-account h5 { 93 | font-size:12px; 94 | } 95 | .view-basket { 96 | width: 32%; 97 | } 98 | .account-details input{ 99 | margin-bottom:8px; 100 | } 101 | .mobile-view .account-details { 102 | width: 90%; 103 | margin: 10px auto; 104 | } 105 | .textinputdrop { 106 | width: 98%; 107 | } 108 | .stepbg { 109 | background-image: none; 110 | height: auto; 111 | margin: 0px 0px; 112 | } 113 | .secont-step { 114 | width: 100%; 115 | margin-left: 0%; 116 | padding: 16px 0px; 117 | } 118 | .third-step { 119 | width: 100%; 120 | margin: 0 auto; 121 | padding: 16px 0px; 122 | } 123 | .whiteroundbox { 124 | padding-left: 0px; 125 | padding-right: 0px; 126 | margin-bottom: 15px; 127 | } 128 | .footer-wrap { 129 | margin-bottom: 15px; 130 | } 131 | .fourth-step { 132 | width: 100%; 133 | margin: 0 auto 0 0; 134 | margin-left: 0%; 135 | padding: 16px 0px; 136 | } 137 | .top-right-detail ul li { 138 | margin-left: 5px; 139 | margin-right: 10px; 140 | } 141 | .home-right-sidebar { 142 | padding:0px; 143 | } 144 | .navbar-nav li { 145 | width:100%; 146 | float:left; 147 | } 148 | .menu-category { 149 | display:none; 150 | } 151 | 152 | .mobile-footer { 153 | padding:0px; 154 | } 155 | .social-links a { 156 | display: inline-block; 157 | text-align: center; 158 | margin-bottom: 10px; 159 | margin-right: 10px; 160 | } 161 | .quick-links { 162 | width: 100%; 163 | float: left; 164 | margin-bottom: 15px; 165 | } 166 | .create-account img { 167 | margin:0 auto 15px; 168 | } 169 | 170 | .logo-center { 171 | text-align:center; 172 | } 173 | .group-on img { 174 | margin-bottom:20px; 175 | } 176 | .mobile-add-wrap img.mobile-adds { 177 | width:100%; 178 | } 179 | .product-wraper-details { 180 | width: auto; 181 | } 182 | .product-wraper-details .pro-buynow { 183 | width: 60%; 184 | float: left; 185 | } 186 | .news-wraper .read-more-button .blackroundbutton { 187 | float: left; 188 | text-align: center; 189 | width: 33%; 190 | } 191 | } 192 | 193 | @media (min-width: 768px) and (max-width:1024px){ 194 | h5{ 195 | font-size:12px; 196 | } 197 | .container-fluid{ 198 | padding:0px 15px; 199 | } 200 | .navbar-nav li h4 { 201 | font-size:12px; 202 | } 203 | .navbar-nav li a { 204 | padding: 20px 15px 10px 0px; 205 | } 206 | .yellowribbon h2 { 207 | font-size: 24px; 208 | } 209 | .advertize-ipad { 210 | margin-top:30px; 211 | } 212 | aside { 213 | margin-left:0px; 214 | } 215 | .header-content { 216 | padding:0px; 217 | } 218 | .user-account h5 { 219 | font-size:12px; 220 | } 221 | .add-to-cart-box img { 222 | width:26px; 223 | height:26px; 224 | } 225 | .tablet-div { 226 | padding:0px 5px; 227 | } 228 | h5.basket-arrow { 229 | font-size:10px; 230 | margin-top:0px; 231 | } 232 | .mobile-view { 233 | padding-right:5px; 234 | } 235 | .view-basket-text { 236 | font-size: 8px; 237 | } 238 | .product-wraper-details .pro-buynow { 239 | width: 48%; 240 | float: left; 241 | } 242 | .remove-btn { 243 | width: 54%; 244 | float: right; 245 | text-align: center; 246 | } 247 | .add-to-cart-box { 248 | margin-right: 5px; 249 | } 250 | .top-right-detail ul li:before { 251 | float: left; 252 | } 253 | .top-right-detail ul li { 254 | margin-right: 0px; 255 | } 256 | .search-button { 257 | max-width: 17.8%; 258 | } 259 | .top-search-product { 260 | height: 41px !important; 261 | width: 84% !important; 262 | } 263 | .account-details input.top-search-product { 264 | font-size:12px; 265 | } 266 | .news-letter .redroundbutton { 267 | width: 80%; 268 | } 269 | .news-letter .redroundbutton h4{ 270 | font-size:12px; 271 | } 272 | .top-left-detail h5, .top-right-detail h5 { 273 | font-size:12px; 274 | } 275 | .home-right-sidebar { 276 | padding-right:0px; 277 | } 278 | .special-bundle-pricing h3 { 279 | font-size: 12px; 280 | } 281 | .news-letter h3 { 282 | font-size: 14px; 283 | } 284 | .special-offers .odd { 285 | padding-right:7px; 286 | } 287 | .special-offers .even { 288 | padding-left:7px; 289 | } 290 | .redroundbutton { 291 | width:100%; 292 | } 293 | .left-wrap .pull-left { 294 | width: 24%; 295 | } 296 | .left-wrap .pull-left img{ 297 | max-width: 70%; 298 | } 299 | .left-wrap .pull-right { 300 | width: 76%; 301 | } 302 | .blackroundbutton { 303 | width:100%; 304 | } 305 | .whiteroundbox { 306 | margin-bottom: 20px !important; 307 | } 308 | .step-img { 309 | width: 15%; 310 | } 311 | .first-step h4 { 312 | font-size: 12px; 313 | float: right; 314 | width: 80%; 315 | } 316 | .secont-step h4 { 317 | font-size: 12px; 318 | float: right; 319 | width: 80%; 320 | } 321 | .third-step h4 { 322 | font-size: 12px; 323 | float: right; 324 | width: 80%; 325 | } 326 | .fourth-step h4 { 327 | font-size: 12px; 328 | float: right; 329 | width: 80%; 330 | } 331 | .third-step { 332 | width: 79%; 333 | margin: 0 auto; 334 | padding: 16px 0px; 335 | } 336 | .fourth-step { 337 | width: 80%; 338 | margin: 0 auto 0 0; 339 | margin-left: 18%; 340 | padding: 16px 0px; 341 | } 342 | .learn-more { 343 | width: 80%; 344 | } 345 | .footer-wrap h3 { 346 | font-size: 14px; 347 | } 348 | .textinputemaiil { 349 | font-size: 14px; 350 | width: 76%; 351 | } 352 | 353 | .redroundbutton h5{ 354 | font-size:10px; 355 | } 356 | .blackroundbutton h5{ 357 | font-size:10px; 358 | } 359 | .product-price h4{ 360 | font-size:12px; 361 | } 362 | .product-price h5{ 363 | font-size:10px; 364 | } 365 | 366 | .top-left-detail ul li { 367 | margin-right: 6px; 368 | } 369 | .news-letter .textinput { 370 | font-size:12px; 371 | } 372 | .special-bundle-pricing p{ 373 | font-size:12px; 374 | } 375 | .product-no h4 { 376 | font-size: 14px; 377 | } 378 | .instant-message form .form-group { 379 | margin-bottom:4px; 380 | } 381 | .product-description .blackroundbutton-pro { 382 | background-color: #000000; 383 | border-radius: 5px; 384 | float: left; 385 | padding: 8px; 386 | text-align: center; 387 | width: 28%; 388 | } 389 | .product-description .redroundbutton-pro { 390 | background-color: #c00000; 391 | border-radius: 5px; 392 | float: left; 393 | margin-right: 3%; 394 | padding: 8px; 395 | text-align: center; 396 | width: 28%; 397 | } 398 | .product-description { 399 | padding-top: 10px; 400 | } 401 | .read-more-button .blackroundbutton { 402 | width: 20%; 403 | } 404 | ul.dropdown ul { 405 | width: 230px; 406 | } 407 | ul.dropdown ul li{ 408 | margin: auto auto auto 10px; 409 | } 410 | video { 411 | width:100%; 412 | height:auto; 413 | } 414 | .blankdiv { 415 | height: 25px; 416 | } 417 | .blog-inner { 418 | padding: 10px 20px; 419 | width: 100%; 420 | } 421 | .product-rpm { 422 | float: left; 423 | width: 50%; 424 | } 425 | .product-from { 426 | float: left; 427 | width: 50%; 428 | } 429 | .product-rpm h4 { 430 | font-size:14px; 431 | } 432 | .product-from h4 { 433 | font-size:14px; 434 | } 435 | .tablet-remove-padding{ 436 | padding-left:0px; 437 | padding-right:0px; 438 | } 439 | .single-page-product-details .greybox { 440 | width: 100%; 441 | } 442 | .per-item { 443 | width: 40%; 444 | } 445 | .hrblack-pro { 446 | width: 30%; 447 | } 448 | .product-avi-stock { 449 | width: 82%; 450 | } 451 | .buy-offers h3 { 452 | font-size: 18px; 453 | } 454 | h3 { 455 | font-size: 18px; 456 | } 457 | .product-weitege { 458 | width: 30%; 459 | } 460 | .instant-message .redroundbutton { 461 | width: 45%; 462 | } 463 | .top-right-detail ul li { 464 | display: inline-flex; 465 | } 466 | .navbar-collapse { 467 | padding:0px; 468 | } 469 | .tablet-padding { 470 | padding-left: 10px; 471 | padding-right: 10px; 472 | } 473 | .category-product-page { 474 | padding: 10px; 475 | } 476 | aside ul li { 477 | display: table; 478 | } 479 | .product-price .orangetext { 480 | margin-top: 1px; 481 | } 482 | .product-name-cart { 483 | margin-top: 0px; 484 | } 485 | .quantity-desk { 486 | margin-top: 0px; 487 | } 488 | .price-desk { 489 | margin-top: 0px; 490 | } 491 | .total-desk { 492 | margin-top: 0px; 493 | } 494 | .continue-but { 495 | width: 26%; 496 | } 497 | .cartpage { 498 | padding: 15px; 499 | } 500 | .cartpage .text-center h4 { 501 | font-size:14px; 502 | } 503 | .cartpage .cart-product-details h4 { 504 | font-size:14px; 505 | } 506 | .order-subtotal h4 { 507 | font-size:14px; 508 | } 509 | .cartpage-title h4 { 510 | font-size:14px; 511 | } 512 | .users-info { 513 | padding: 10px 20px; 514 | } 515 | .order-details-form input[type="checkbox"] { 516 | margin: -1px 5px 0 12px; 517 | vertical-align: middle; 518 | } 519 | .myorder-tab .col-sm-2 { 520 | padding: 0 5px; 521 | } 522 | .myorder-tab h4{ 523 | font-size:11px; 524 | } 525 | .users-info.myorder-details { 526 | padding: 10px 8px; 527 | } 528 | 529 | } 530 | @media (min-width: 992px) and (max-width:1024px){ 531 | .top-search-product { 532 | height: 41px; 533 | } 534 | } 535 | @media (min-width: 1025px) and (max-width:1300px){ 536 | .inner-main-wrap { 537 | width: 73%; 538 | } 539 | } 540 | @media (min-width: 1025px) and (max-width:1440px){ 541 | .myorder-tab h4 { 542 | font-size: 14px; 543 | } 544 | .myorder-tab .col-sm-2 { 545 | padding: 0 10px; 546 | } 547 | } 548 | @media (max-width: 1280px){ 549 | .top-search-product { 550 | width: 93%; 551 | } 552 | .user-account h5 { 553 | font-size: 13px; 554 | } 555 | } 556 | 557 | .product-wraper { 558 | margin-bottom: 20px; 559 | } 560 | .thumbnail { 561 | border: none; 562 | } 563 | 564 | section { 565 | margin-top: 5px; 566 | } 567 | 568 | .home-section .latest-products { 569 | // margin-top: 50px; 570 | } 571 | 572 | .spinner-section { 573 | text-align: center; 574 | margin-top: 20px; 575 | margin-bottom: 20px; 576 | } 577 | 578 | .yellowribbon { 579 | margin-top: 10px; 580 | } 581 | .pro-buynow { 582 | cursor: pointer; 583 | } 584 | 585 | header a { 586 | color: #ffffff; 587 | } 588 | 589 | header a.active { 590 | color: #337ab7; 591 | } 592 | 593 | .search-bar { 594 | margin-bottom: 50px; 595 | } 596 | 597 | .cart-section { 598 | padding-bottom: 30px; 599 | } 600 | 601 | .action { 602 | .product-buynow { 603 | margin: 0; 604 | margin-top: 10px; 605 | } 606 | .pro-buynow { 607 | float: left; 608 | } 609 | } 610 | 611 | .product-wraper { 612 | h3 { 613 | font-size: 18px; 614 | } 615 | .product-desc h5 { 616 | overflow: hidden; 617 | text-overflow: ellipsis; 618 | display: -webkit-box; 619 | line-height: 16px; /* fallback */ 620 | max-height: 32px; /* fallback */ 621 | -webkit-line-clamp: 2; /* number of lines to show */ 622 | -webkit-box-orient: vertical; 623 | } 624 | } 625 | 626 | .navbar-inverse { 627 | background-color : rgba(18, 18, 18, 0.48); 628 | } 629 | 630 | .product-price span { 631 | text-decoration: line-through; 632 | } 633 | 634 | .sidebar-section a:focus,.sidebar-section a:hover { 635 | text-decoration: none; 636 | } 637 | 638 | div.account-details > .top-search-product{ 639 | border:1px solid #cecece; 640 | border-radius:0; 641 | } 642 | 643 | .cart-section { 644 | width: 200px; 645 | padding: 10px; 646 | } 647 | 648 | .product-component { 649 | margin-bottom: 10px; 650 | img { 651 | height: 216px; 652 | width: 100%; 653 | } 654 | } 655 | 656 | .mrp { 657 | text-decoration: line-through; 658 | } 659 | 660 | span { 661 | white-space: nowrap; 662 | overflow: hidden; 663 | text-overflow: ellipsis; 664 | text-overflow: ellipsis; 665 | } 666 | .cart-btn { 667 | text-align: right; 668 | } 669 | .product-section, .sidebar-section { 670 | padding-top: 50px; 671 | } 672 | .switch-theme { 673 | padding: 20px; 674 | } -------------------------------------------------------------------------------- /client/css/style.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-size: 100%; 5 | color:#000000; 6 | font-family: 'Roboto Slab', serif; 7 | } 8 | 9 | h1 { 10 | font-size:100px; 11 | text-decoration:none; 12 | padding-top:0px; 13 | padding-bottom:0px; 14 | padding-left:0px; 15 | padding-right:0px; 16 | margin-bottom:0px; 17 | margin-top:0px; 18 | margin-left:0px; 19 | margin-right:0px; 20 | font-weight:normal; 21 | } 22 | 23 | h2 { 24 | font-size:34px; 25 | font-weight:700; 26 | text-decoration:none; 27 | padding-top:0px; 28 | padding-bottom:0px; 29 | padding-left:0px; 30 | padding-right:0px; 31 | margin-bottom:0px; 32 | margin-top:0px; 33 | margin-left:0px; 34 | margin-right:0px; 35 | font-weight:normal; 36 | } 37 | 38 | h3 { 39 | font-size:21px; 40 | text-decoration:none; 41 | padding-top:0px; 42 | padding-bottom:0px; 43 | padding-left:0px; 44 | padding-right:0px; 45 | margin-bottom:0px; 46 | margin-top:0px; 47 | margin-left:0px; 48 | margin-right:0px; 49 | font-weight:normal; 50 | } 51 | 52 | h4 { 53 | font-size:16px; 54 | text-decoration:none; 55 | padding-top:0px; 56 | padding-bottom:0px; 57 | padding-left:0px; 58 | padding-right:0px; 59 | margin-bottom:0px; 60 | margin-top:0px; 61 | margin-left:0px; 62 | margin-right:0px; 63 | font-weight:normal; 64 | } 65 | 66 | h5 { 67 | font-size:14px; 68 | text-decoration:none; 69 | padding-top:0px; 70 | padding-bottom:0px; 71 | padding-left:0px; 72 | padding-right:0px; 73 | margin-bottom:0px; 74 | margin-top:0px; 75 | margin-left:0px; 76 | margin-right:0px; 77 | font-weight:normal; 78 | } 79 | 80 | h6 { 81 | font-size:11px; 82 | text-decoration:none; 83 | padding-top:0px; 84 | padding-bottom:0px; 85 | padding-left:0px; 86 | padding-right:0px; 87 | margin-bottom:0px; 88 | margin-top:0px; 89 | margin-left:0px; 90 | margin-right:0px; 91 | font-weight:normal; 92 | } 93 | 94 | .textinputemaiil 95 | { 96 | border-style: solid; 97 | border-width: 1px; 98 | border-color: #e0e0e0; 99 | font-size: 18px; 100 | padding-left: 5px; 101 | padding-top: 5px; 102 | padding-bottom: 12px; 103 | padding-right: 5px; 104 | width: 86%; 105 | background-color: #e9e9e9; 106 | color: #848484; 107 | -webkit-border-radius: 2px 0px 0px 2px; 108 | border-radius: 2px 0px 0px 2px; 109 | font-family: 'Roboto Slab', serif; 110 | vertical-align: middle; 111 | } 112 | 113 | 114 | .textinput 115 | { 116 | border-style: solid; 117 | border-width: 1px; 118 | border-color:#000000; 119 | font-size:18px; 120 | padding-left:5px; 121 | padding-top:3px; 122 | padding-bottom:3px; 123 | padding-right:5px; 124 | width:100%; 125 | background-color:#ffffff; 126 | color:#848484; 127 | height:30px; 128 | -webkit-border-radius: 2px 2px 2px 2px; 129 | border-radius: 2px 2px 2px 2px; 130 | } 131 | 132 | 133 | .textinputdrop 134 | { 135 | border-style: solid; 136 | border-width: 1px; 137 | border-color:#e0e0e0; 138 | font-size:18px; 139 | padding-left:5px; 140 | padding-top:5px; 141 | padding-bottom:0px; 142 | padding-right:5px; 143 | width:90%; 144 | background-color:#e9e9e9; 145 | color:#848484; 146 | height:43px; 147 | -webkit-border-radius: 2px 2px 2px 2px; 148 | border-radius: 2px 2px 2px 2px; 149 | font-family: 'Roboto Slab', serif; 150 | } 151 | 152 | 153 | .redtext { 154 | color:#c00000; 155 | text-decoration:none; 156 | } 157 | 158 | .redlink { 159 | color:#c00000; 160 | text-decoration:none; 161 | } 162 | 163 | .redlink:link 164 | { 165 | color:#c00000; 166 | text-decoration:none; 167 | } 168 | 169 | .redlink:visited 170 | { 171 | color:#c00000; 172 | text-decoration:none; 173 | } 174 | 175 | .redlink:hover 176 | { 177 | color:#000000; 178 | text-decoration:none; 179 | } 180 | 181 | .impactfont { 182 | font-family: 'Oswald', sans-serif; 183 | font-weight:700; 184 | } 185 | 186 | .italicfont { 187 | font-family:Georgia, "Times New Roman", Times, serif; 188 | font-style:italic; 189 | } 190 | 191 | 192 | .blacktext { 193 | color:#000000; 194 | text-decoration:none; 195 | } 196 | 197 | .blacklink { 198 | color:#000000; 199 | text-decoration:none; 200 | } 201 | 202 | .blacklink:link 203 | { 204 | color:#000000; 205 | text-decoration:none; 206 | } 207 | 208 | .blacklink:visited 209 | { 210 | color:#000000; 211 | text-decoration:none; 212 | } 213 | 214 | .blacklink:hover 215 | { 216 | color:#83c7ee; 217 | text-decoration:none; 218 | } 219 | 220 | .lightbluetext { 221 | color:#83c7ee; 222 | text-decoration:none; 223 | } 224 | 225 | .lightbluelink { 226 | 227 | color:#83c7ee; 228 | text-decoration:none; 229 | } 230 | 231 | .lightbluelink:link 232 | { 233 | color:#83c7ee; 234 | text-decoration:none; 235 | } 236 | 237 | .lightbluelink:visited 238 | { 239 | color:#83c7ee; 240 | text-decoration:none; 241 | } 242 | 243 | .lightbluelink:hover 244 | { 245 | color:#c00000; 246 | text-decoration:none; 247 | } 248 | 249 | .whitetext { 250 | color:#ffffff; 251 | text-decoration:none; 252 | } 253 | 254 | .whitelink { 255 | color:#ffffff; 256 | text-decoration:none; 257 | } 258 | 259 | .whitelink:link 260 | { 261 | color:#ffffff; 262 | text-decoration:none; 263 | } 264 | 265 | .whitelink:visited 266 | { 267 | color:#ffffff; 268 | text-decoration:none; 269 | } 270 | 271 | .whitelink:hover 272 | { 273 | color:#e3d663; 274 | text-decoration:none; 275 | } 276 | 277 | .bluetext { 278 | color:#04aadd; 279 | text-decoration:none; 280 | } 281 | 282 | .bluelink { 283 | color:#04aadd; 284 | text-decoration:none; 285 | } 286 | 287 | .bluelink:link 288 | { 289 | color:#04aadd; 290 | text-decoration:none; 291 | } 292 | 293 | .bluelink:visited 294 | { 295 | color:#04aadd; 296 | text-decoration:none; 297 | } 298 | 299 | .bluelink:hover 300 | { 301 | color:#929496; 302 | text-decoration:none; 303 | } 304 | 305 | .greytext { 306 | color:#929496; 307 | text-decoration:none; 308 | } 309 | 310 | .greylink { 311 | color:#929496; 312 | text-decoration:none; 313 | } 314 | 315 | .greylink:link 316 | { 317 | color:#929496; 318 | text-decoration:none; 319 | } 320 | 321 | .greylink:visited 322 | { 323 | color:#929496; 324 | text-decoration:none; 325 | } 326 | 327 | .greylink:hover 328 | { 329 | color:#000000; 330 | text-decoration:none; 331 | } 332 | 333 | .darkgreytext { 334 | color:#686868; 335 | text-decoration:none; 336 | } 337 | 338 | .darkgreylink { 339 | color:#686868; 340 | text-decoration:none; 341 | } 342 | 343 | .darkgreylink:link 344 | { 345 | color:#686868; 346 | text-decoration:none; 347 | } 348 | 349 | .darkgreylink:visited 350 | { 351 | color:#686868; 352 | text-decoration:none; 353 | } 354 | 355 | .darkgreylink:hover 356 | { 357 | color:#e20a16; 358 | text-decoration:none; 359 | } 360 | 361 | .bigfont { 362 | font-size:36px; 363 | font-family:helvetica; 364 | margin-top:-15px; 365 | margin-bottom:-15px; 366 | } 367 | .scriptfont { 368 | font-family: 'Tangerine', cursive; 369 | } 370 | 371 | .orangetext { 372 | color:#ff8c00; 373 | text-decoration:none; 374 | } 375 | .orangelink { 376 | color:#ff8c00; 377 | text-decoration:none; 378 | } 379 | 380 | .orangelink:link 381 | { 382 | color:#ff8c00; 383 | text-decoration:none; 384 | } 385 | 386 | .orangelink:visited 387 | { 388 | color:#ff8c00; 389 | text-decoration:none; 390 | } 391 | 392 | .orangelink:hover 393 | { 394 | color:#000000; 395 | text-decoration:none; 396 | } 397 | 398 | .yellowtext { 399 | color:#ffde00; 400 | text-decoration:none; 401 | } 402 | .yellowlink { 403 | color:#ffde00; 404 | text-decoration:none; 405 | } 406 | 407 | .yellowlink:link 408 | { 409 | color:#ffde00; 410 | text-decoration:none; 411 | } 412 | 413 | .yellowlink:visited 414 | { 415 | color:#ffde00; 416 | text-decoration:none; 417 | } 418 | 419 | .yellowlink:hover 420 | { 421 | color:#000000; 422 | text-decoration:none; 423 | } 424 | 425 | .bluetext { 426 | color:#006cb1; 427 | text-decoration:none; 428 | } 429 | .bluelink { 430 | color:#006cb1; 431 | text-decoration:none; 432 | } 433 | 434 | .bluelink:link 435 | { 436 | color:#006cb1; 437 | text-decoration:none; 438 | } 439 | 440 | .bluelink:visited 441 | { 442 | color:#006cb1; 443 | text-decoration:none; 444 | } 445 | 446 | .bluelink:hover 447 | { 448 | color:#000000; 449 | text-decoration:none; 450 | } 451 | 452 | .greentext { 453 | color:#17a298; 454 | text-decoration:none; 455 | } 456 | 457 | .greenlink { 458 | color:#17a298; 459 | text-decoration:none; 460 | } 461 | 462 | .greenlink:link 463 | { 464 | color:#17a298; 465 | text-decoration:none; 466 | } 467 | 468 | .greenlink:visited 469 | { 470 | color:#17a298; 471 | text-decoration:none; 472 | } 473 | 474 | .greenlink:hover 475 | { 476 | color:#000000; 477 | text-decoration:none; 478 | } 479 | 480 | 481 | .cellingpaddingtop { 482 | padding-top:1px; 483 | } 484 | 485 | .darkgreybg { 486 | background-color:#33363d; 487 | } 488 | 489 | .darkergreybg { 490 | background-color:#202020; 491 | } 492 | 493 | .whitebg { 494 | background-color:#ffffff; 495 | } 496 | 497 | .lightgreybg { 498 | background-color:#efefef; 499 | width:100%; 500 | float:left; 501 | padding: 20px 0px; 502 | } 503 | 504 | .yellowbg { 505 | background-color:#fffb00; 506 | } 507 | 508 | .darkyellowbg { 509 | background-color:#fffb00; 510 | } 511 | 512 | .lightbluebg { 513 | background-color:#dee8f6; 514 | } 515 | 516 | .redbg { 517 | background-color:#cd2228; 518 | } 519 | 520 | .orangebg { 521 | background-color:#ff7f36; 522 | } 523 | 524 | .greybg { 525 | background-image:url(../images/grey_bg.png); 526 | } 527 | 528 | .hrgrey { 529 | background-image:url(../images/grey_bg.png); 530 | background-repeat:repeat-x; 531 | background-position:center; 532 | } 533 | 534 | .greenbg { 535 | background-color:#17a298; 536 | width:100%; 537 | float:left; 538 | padding: 30px 0px; 539 | } 540 | 541 | .hrblack { 542 | background-image:url(../images/black_bg.jpg); 543 | height:1px; 544 | background-repeat:repeat-x; 545 | } 546 | 547 | .hrwhite { 548 | background-image:url(../images/white_bg.png); 549 | height:1px; 550 | background-repeat:repeat-x; 551 | } 552 | 553 | .blackbg { 554 | background-color:#000; 555 | } 556 | .topheaderbg { 557 | // background-image:url(../images/top_header_bg.png); 558 | height:50px; 559 | background-position:center top; 560 | } 561 | 562 | .headerbg { 563 | background-image:url(../images/header_bg.png); 564 | background-position:center top; 565 | background-repeat:no-repeat; 566 | background-size: 100% 100%; 567 | display: inline-block; 568 | padding-top: 20px; 569 | } 570 | 571 | .innerheaderbg { 572 | // background-image:url(images/inner_header_bg.png); 573 | height:126px; 574 | background-position:center top; 575 | background-repeat:no-repeat; 576 | } 577 | .homebannerbg { 578 | background-image:url(../images/home_banner_bg.jpg); 579 | background-position:center top; 580 | background-repeat:no-repeat; 581 | background-size: 100% 100%; 582 | } 583 | .innerbannerbg { 584 | background-image:url(../images/inner_banner_bg.jpg); 585 | background-position:center top; 586 | background-repeat:no-repeat; 587 | } 588 | 589 | .redroundbutton { 590 | -webkit-border-radius: 2px 2px 2px 2px; 591 | border-radius: 2px 2px 2px 2px; 592 | padding: 5px; 593 | background-color:#c00000; 594 | } 595 | 596 | .blackroundbutton { 597 | -webkit-border-radius: 2px 2px 2px 2px; 598 | border-radius: 2px 2px 2px 2px; 599 | background-color:#000000; 600 | text-align: center; 601 | } 602 | 603 | .dangerbutton { 604 | -webkit-border-radius: 2px 2px 2px 2px; 605 | border-radius: 2px 2px 2px 2px; 606 | background-color:#f44336; 607 | text-align: center; 608 | } 609 | .greyroundbox { 610 | -webkit-border-radius: 5px 5px 5px 5px; 611 | border-radius: 5px 5px 5px 5px; 612 | background-color:#eaeaea; 613 | padding:10px; 614 | border-style: solid; 615 | border-width: 1px; 616 | border-color:#929496; 617 | } 618 | 619 | .yellowribbon { 620 | background-image:url(../images/yellow_rubbin.png); 621 | background-position:right; 622 | background-repeat:no-repeat; 623 | } 624 | .whiteroundbox { 625 | padding-left: 10px; 626 | padding-right: 10px; 627 | } 628 | .stepbg { 629 | background-image:url(../images/step_bg.png); 630 | background-position:center top; 631 | background-repeat:no-repeat; 632 | height:86px; 633 | width: 100%; 634 | float: left; 635 | margin: 30px 0px; 636 | background-size: 100% 100%; 637 | } 638 | .first-step { 639 | padding:16px 0px; 640 | width: 80%; 641 | } 642 | .secont-step { 643 | width: 80%; 644 | margin-left: 10%; 645 | padding: 16px 0px; 646 | } 647 | .third-step { 648 | width: 70%; 649 | margin: 0 auto; 650 | padding: 16px 0px; 651 | } 652 | .fourth-step { 653 | width: 74%; 654 | margin: 0 auto 0 0; 655 | margin-left: 20%; 656 | padding: 16px 0px; 657 | } 658 | .step-img { 659 | margin-right:5px; 660 | } 661 | .step-heading { 662 | padding-bottom:5px; 663 | } 664 | .map { 665 | background-image:url(../images/map.jpg); 666 | background-position:center top; 667 | background-repeat:no-repeat; 668 | height:880px; 669 | } 670 | 671 | .transparentbg { 672 | background-image:url(../images/transparent_bg.png); 673 | } 674 | 675 | .pinkbg { 676 | background-image:url(../images/pink_bg.png); 677 | } 678 | 679 | #talkbubble { 680 | width: 230px; 681 | height: 115px; 682 | background: #1aa69d; 683 | position: relative; 684 | -moz-border-radius: 10px 10px 10px 0px; 685 | -webkit-border-radius: 10px 10px 10px 0px; 686 | border-radius: 10px 10px 10px 0px; 687 | } 688 | #talkbubble:before { 689 | content:""; 690 | position: absolute; 691 | right: 100%; 692 | top: 90px; 693 | width: 0; 694 | height: 0; 695 | border-top: 25px solid transparent; 696 | border-right: 26px solid #1aa69d; 697 | border-bottom: 0px solid transparent; 698 | } 699 | 700 | .textline { 701 | text-decoration: line-through; 702 | } 703 | 704 | 705 | /************* Shivshankar added new css ************/ 706 | 707 | /************* Header css ****************/ 708 | .logo-center { 709 | margin-bottom: 10px; 710 | } 711 | header { 712 | box-shadow: 1px 3px 5px rgba(213, 213, 213, 1); 713 | } 714 | .container-fluid { 715 | padding-left: 30px; 716 | padding-right: 30px; 717 | } 718 | .top-left-detail ul { 719 | padding:0px; 720 | list-style-type: none; 721 | } 722 | .top-left-detail ul li{ 723 | float:left; 724 | margin-right: 10px; 725 | } 726 | .top-left-detail ul li:first-child{ 727 | float:left; 728 | } 729 | 730 | .top-right-detail ul { 731 | padding: 0px; 732 | list-style-type: none; 733 | margin: 0px; 734 | } 735 | .top-right-detail ul li{ 736 | float: left; 737 | margin-right: 10px; 738 | display: inline-flex; 739 | } 740 | .top-bar { 741 | padding:20px 0px; 742 | } 743 | .top-left-detail, .top-right-detail { 744 | float:left; 745 | } 746 | .top-search-product { 747 | width: 94%; 748 | float: left; 749 | padding: 8px 6px; 750 | border-width:2px; 751 | position: relative; 752 | } 753 | 754 | .top-right-detail ul li:before{ 755 | content: '\2022 '; 756 | color: #000; 757 | padding-right: 4px; 758 | width: 10px; 759 | height: 10px; 760 | vertical-align: middle; 761 | margin-top: -2px; 762 | } 763 | .header-content { 764 | padding:0px; 765 | display: flex; 766 | align-items: center; 767 | } 768 | .location-ind { 769 | margin-top: 15px; 770 | a { 771 | padding-left: 20px !important; 772 | } 773 | } 774 | .view-basket { 775 | width: 16%; 776 | float: right; 777 | margin-top: 2px; 778 | } 779 | 780 | .slider-images img { 781 | position:relative; 782 | bottom:-15px; 783 | } 784 | 785 | /************** nav bar ************/ 786 | 787 | .navbar-default { 788 | background-color: transparent; 789 | border-color: transparent; 790 | } 791 | .navbar { 792 | min-height: 0px; 793 | margin-bottom: 0px; 794 | border: 0px solid transparent; 795 | } 796 | .navbar-nav li a { 797 | padding: 20px 30px 10px 0px; 798 | float: left; 799 | text-transform: uppercase; 800 | } 801 | 802 | /************ footer css ***************/ 803 | footer { 804 | margin-top:15px; 805 | } 806 | .quick-links ul{ 807 | padding:0px; 808 | list-style-type:none; 809 | } 810 | .quick-links ul li{ 811 | width: 100%; 812 | float: left; 813 | margin: 5px 0px; 814 | } 815 | .footer-title { 816 | margin:10px 0px 12px; 817 | } 818 | .footer-heading h4 { 819 | border-bottom: 1px solid #fff; 820 | padding-bottom: 5px; 821 | margin-bottom: 10px; 822 | } 823 | .social-links a { 824 | display: block; 825 | text-align: center; 826 | margin-bottom: 10px; 827 | } 828 | 829 | section.home-section1 { 830 | margin-top:40px; 831 | width: 100%; 832 | float: left; 833 | } 834 | section.home-section { 835 | margin-top:20px; 836 | width: 100%; 837 | float: left; 838 | } 839 | .product-image img 840 | { 841 | // width:100%; 842 | margin-bottom:5px; 843 | } 844 | .product-desc { 845 | width: 90%; 846 | margin: 0 10px; 847 | display: table; 848 | height: 45px; 849 | text-align: center; 850 | } 851 | .product-wraper { 852 | border: 1px solid #eee; 853 | } 854 | 855 | .left-wrap { 856 | width: 100%; 857 | float: left; 858 | border-bottom: 1px solid #ccc; 859 | padding-bottom: 15px; 860 | margin-bottom: 15px; 861 | padding-top: 10px; 862 | } 863 | .widget-title 864 | { 865 | line-height: 18px; 866 | margin-bottom: 10px; 867 | } 868 | .left-wrap .pull-left { 869 | width:16%; 870 | } 871 | .left-wrap .pull-right { 872 | width:82%; 873 | } 874 | .learn-more { 875 | width: 50%; 876 | float: left; 877 | margin-top: 10px; 878 | text-align: center; 879 | } 880 | .learn-more .blackroundbutton { 881 | padding: 8px; 882 | } 883 | .google-ads img { 884 | margin-top: 30px; 885 | margin-bottom: 20px; 886 | } 887 | .head-price { 888 | width:70%; 889 | float:left; 890 | } 891 | .add-to-cart { 892 | width:30%; 893 | float:right; 894 | } 895 | 896 | ul { 897 | padding:0px; 898 | list-style-type:none; 899 | } 900 | .main-categories li:before { 901 | content: '\f067'; 902 | font-family: FontAwesome; 903 | font-weight: normal; 904 | float: left; 905 | margin-right: 10px; 906 | } 907 | 908 | /*********** Home page product ************/ 909 | .main-wrap { 910 | float: right; 911 | width: 74%; 912 | } 913 | 914 | .product-content { 915 | width: 100%; 916 | float: left; 917 | border: 1px solid #ededed; 918 | margin-bottom: 24px; 919 | box-shadow: 6px 7px 5px -5px rgba(213, 213, 213, 1); 920 | } 921 | .product-image { 922 | width:100%; 923 | float:left; 924 | } 925 | .product-details { 926 | width:96%; 927 | margin:auto; 928 | } 929 | .product-no { 930 | width:50%; 931 | float:left; 932 | } 933 | .product-price { 934 | width: 90%; 935 | margin: 5px auto; 936 | display: table; 937 | border-top: 1px solid #ccc; 938 | border-bottom: 1px solid #ccc; 939 | padding: 5px 0px; 940 | } 941 | .product-price h5 { 942 | float: right; 943 | } 944 | .product-price h3 { 945 | width:85%; 946 | float:left; 947 | } 948 | .product-buynow { 949 | width: 90%; 950 | margin: 0 auto; 951 | display: table; 952 | margin-bottom: 5px; 953 | } 954 | .pro-buynow { 955 | float: right; 956 | } 957 | .pro-buynow .blackroundbutton { 958 | text-align: center; 959 | } 960 | .product-buynow .inc-desc{ 961 | width: 40%; 962 | float:left; 963 | } 964 | .product-name { 965 | text-align: center; 966 | clear: both; 967 | } 968 | .product-buttons { 969 | width: 94%; 970 | margin: 10px auto 10px; 971 | display: table; 972 | } 973 | .product-price .orangetext { 974 | display: inline-block; 975 | margin-top: 3px; 976 | } 977 | .home-top-content .offer-title { 978 | border-bottom: 2px solid #000; 979 | margin-bottom: 10px; 980 | padding: 10px 0 5px; 981 | text-align: left; 982 | } 983 | 984 | /**************** Right side bar *************/ 985 | .right-sidebar { 986 | background-color:#fff; 987 | } 988 | .aside-right { 989 | width:100%; 990 | margin-bottom:10px; 991 | float:left; 992 | } 993 | .news-letter h3, .special-bundle-pricing h3 { 994 | text-align: center; 995 | padding: 5px 0px 10px; 996 | border-bottom: 3px solid #000; 997 | } 998 | .news-letter h5 { 999 | text-align: center; 1000 | line-height: 18px; 1001 | margin: 10px 0px; 1002 | } 1003 | .special-bundle-pricing h3 { 1004 | margin-bottom:5px; 1005 | } 1006 | .special-bundle-pricing p { 1007 | text-align: center; 1008 | margin-top: 15px; 1009 | margin-bottom: 15px; 1010 | } 1011 | .news-letter { 1012 | width: 100%; 1013 | float: left; 1014 | text-align:center; 1015 | } 1016 | .news-letter .redroundbutton { 1017 | width: 64%; 1018 | float:none; 1019 | } 1020 | .redroundbutton:hover{ 1021 | color:yellow; 1022 | background-color: #c00000; 1023 | } 1024 | .clear { 1025 | clear:both; 1026 | } 1027 | .footer-wrap h3 { 1028 | border-bottom: 5px solid #000; 1029 | padding: 5px 0px; 1030 | margin-bottom: 10px; 1031 | } 1032 | 1033 | /*************** Product Page css *********/ 1034 | 1035 | .inner-main-wrap { 1036 | background-color: #fff; 1037 | box-shadow: 6px 7px 5px -5px rgba(213, 213, 213, 1); 1038 | float: right; 1039 | margin-right: 8px; 1040 | width: 100%; 1041 | } 1042 | .page-details { 1043 | padding:0px 8px; 1044 | } 1045 | .page-heading { 1046 | border-bottom: 1px solid; 1047 | padding: 16px 0; 1048 | margin-bottom: 10px; 1049 | } 1050 | .product-description{ 1051 | padding-top: 30px; 1052 | } 1053 | .product-price-desc { 1054 | width:100%; 1055 | float:left; 1056 | } 1057 | .product-description h4 { 1058 | width:100%; 1059 | float:left; 1060 | margin-bottom:8px; 1061 | } 1062 | .product-price-desc .old-price { 1063 | float: left; 1064 | margin-right: 20px; 1065 | padding: 4px 0; 1066 | } 1067 | .product-price-desc .special-price { 1068 | float: left; 1069 | margin-right: 20px; 1070 | padding: 4px 0; 1071 | color:#c00000; 1072 | } 1073 | .row-margin { 1074 | float: left; 1075 | margin-left: -10px; 1076 | margin-right: -10px; 1077 | } 1078 | .product-description .redroundbutton-pro { 1079 | background-color: #c00000; 1080 | border-radius: 5px; 1081 | margin-right: 3%; 1082 | padding: 12px; 1083 | text-align: center; 1084 | width: 20%; 1085 | float: left; 1086 | } 1087 | .product-description .blackroundbutton-pro { 1088 | background-color: #000000; 1089 | border-radius: 5px; 1090 | float: left; 1091 | text-align: center; 1092 | width: 20%; 1093 | } 1094 | .row-margin:last-child > .hrgrey { 1095 | display:none; 1096 | } 1097 | /************* Blog page ************/ 1098 | .blog-inner { 1099 | width:100%; 1100 | padding:10px 35px; 1101 | } 1102 | .blog-title { 1103 | float: left; 1104 | margin-bottom: 10px; 1105 | width: 100%; 1106 | } 1107 | .blog-author { 1108 | float: left; 1109 | margin-bottom: 10px; 1110 | width: 100%; 1111 | } 1112 | .blog-description h5 { 1113 | line-height: 1.6; 1114 | margin-bottom:15px; 1115 | } 1116 | .blog-inner h5{ 1117 | line-height: 1.6; 1118 | margin-bottom:15px; 1119 | } 1120 | .read-more-button { 1121 | width:100%; 1122 | float:left; 1123 | } 1124 | .read-more-button .blackroundbutton{ 1125 | float: left; 1126 | text-align: center; 1127 | width: 10%; 1128 | } 1129 | .hrgrey-blog { 1130 | padding:15px 0px; 1131 | } 1132 | .spacing-content { 1133 | margin-top:30px; 1134 | } 1135 | .form-group { 1136 | width:100%; 1137 | float:left; 1138 | } 1139 | .checkbox { 1140 | float: left; 1141 | margin: 0 30px 0 0 !important; 1142 | } 1143 | .control-label h5 { 1144 | margin-bottom:0px; 1145 | } 1146 | 1147 | /************ Product details page ************/ 1148 | 1149 | .latest-products h3.text-center { 1150 | border-bottom: 3px solid #000; 1151 | padding-bottom: 5px; 1152 | margin-bottom: 5px; 1153 | } 1154 | .small-product-content { 1155 | width: 100%; 1156 | float: left; 1157 | margin-bottom: 5px; 1158 | } 1159 | .small-product-price { 1160 | width: 100%; 1161 | float: left; 1162 | border-top: 1px solid #ccc; 1163 | border-bottom: 1px solid #ccc; 1164 | padding: 10px 0px; 1165 | margin: 10px 0px; 1166 | } 1167 | .small-product-price h3 { 1168 | width: 80%; 1169 | float: left; 1170 | } 1171 | .product-aside h3.product-aside-title { 1172 | border-bottom: 3px solid #000; 1173 | padding-bottom: 6px; 1174 | margin-bottom: 5px; 1175 | } 1176 | .small-product-remove { 1177 | width:100%; 1178 | float:left; 1179 | } 1180 | .inc-desc { 1181 | width: 40%; 1182 | float: left; 1183 | } 1184 | .remove-btn { 1185 | width: 40%; 1186 | float: right; 1187 | text-align: center; 1188 | } 1189 | .remove-btn a { 1190 | font-size:14px; 1191 | } 1192 | .products-details-wrap h3 { 1193 | border-bottom: 3px solid #000; 1194 | padding-bottom: 6px; 1195 | margin-bottom: 20px; 1196 | } 1197 | .product-title-details h3 { 1198 | text-transform:uppercase; 1199 | border-bottom: 0px solid #000; 1200 | margin-bottom: 0px; 1201 | } 1202 | .product-wraper-details .product-desc { 1203 | width:100%; 1204 | } 1205 | .product-wraper-details .product-price { 1206 | width:100%; 1207 | } 1208 | .product-wraper-details .product-price h3 { 1209 | border-bottom: 0px solid #000; 1210 | margin-bottom: 0px; 1211 | width:30%; 1212 | float:left; 1213 | } 1214 | .product-wraper-details .product-buynow { 1215 | width:100%; 1216 | } 1217 | .product-wraper-details .product-buynow .inc-desc { 1218 | width: 30%; 1219 | float: left; 1220 | } 1221 | .product-wraper-details .pro-buynow { 1222 | width: 25%; 1223 | float: left; 1224 | } 1225 | .product-wraper-details .pro-buynow a{ 1226 | font-size:18px; 1227 | text-transform:uppercase; 1228 | } 1229 | .product-wraper-details { 1230 | margin-left: -25px; 1231 | margin-right: -15px; 1232 | border-bottom: 1px solid #ddd; 1233 | width: 100%; 1234 | float: left; 1235 | padding-bottom: 15px; 1236 | margin-bottom: 20px; 1237 | } 1238 | .inner-pages .headerbg { 1239 | margin-bottom: 30px; 1240 | } 1241 | 1242 | /********* Category **********/ 1243 | 1244 | .main-categories li { 1245 | padding: 10px 0px; 1246 | border-bottom: 1px solid #ccc; 1247 | } 1248 | .cat-title h3 { 1249 | border-bottom: 3px solid #ccc; 1250 | padding-bottom: 5px; 1251 | margin-bottom: 5px; 1252 | } 1253 | /***************** cart page ********/ 1254 | .cartpage { 1255 | padding: 15px 30px; 1256 | } 1257 | .cartpage h3{ 1258 | border-bottom: 1px solid #000; 1259 | float: left; 1260 | margin-bottom: 5px; 1261 | padding-bottom: 5px; 1262 | width: 100%; 1263 | } 1264 | .cartpage-title { 1265 | width:100%; 1266 | float:left; 1267 | margin:10px 0px; 1268 | } 1269 | .product-name-cart { 1270 | margin-top:30px; 1271 | } 1272 | .cart-product-details { 1273 | border-bottom: 1px solid #000; 1274 | margin: 10px 0; 1275 | padding-bottom: 5px; 1276 | } 1277 | .quantity { 1278 | border-bottom: 1px solid #000; 1279 | margin: 10px 0; 1280 | padding-bottom: 5px; 1281 | } 1282 | .price { 1283 | border-bottom: 1px solid #000; 1284 | margin: 10px 0; 1285 | padding-bottom: 5px; 1286 | } 1287 | .total { 1288 | border-bottom: 1px solid #000; 1289 | margin: 10px 0; 1290 | padding-bottom: 5px; 1291 | } 1292 | .quantity-desk { 1293 | margin-top:30px; 1294 | } 1295 | .price-desk { 1296 | margin-top:30px; 1297 | } 1298 | .total-desk { 1299 | margin-top:30px; 1300 | } 1301 | .desk-remove-padding { 1302 | padding-left:0px; 1303 | padding-right:0px; 1304 | } 1305 | .continue-shopping { 1306 | width:72%; 1307 | } 1308 | .continue-but { 1309 | border: 0 none; 1310 | margin-top: 5px; 1311 | width: 16%; 1312 | } 1313 | .continue-shopping a { 1314 | color:#c00000; 1315 | } 1316 | .cart-total { 1317 | float: left; 1318 | padding: 10px 0; 1319 | width: 100%; 1320 | } 1321 | .mailchimp { 1322 | margin-top:10px; 1323 | } 1324 | 1325 | /****************** News page ****************/ 1326 | .news-section { 1327 | width: 100%; 1328 | float: left; 1329 | margin-top: 30px; 1330 | } 1331 | .news-title h3 { 1332 | border-bottom: 3px solid #000; 1333 | padding-bottom: 5px; 1334 | margin-bottom: 20px; 1335 | } 1336 | -------------------------------------------------------------------------------- /client/images/add_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/add_1.png -------------------------------------------------------------------------------- /client/images/advertise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/advertise.png -------------------------------------------------------------------------------- /client/images/ae.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/ae.png -------------------------------------------------------------------------------- /client/images/arrival_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/arrival_icon.png -------------------------------------------------------------------------------- /client/images/arrow_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/arrow_left.png -------------------------------------------------------------------------------- /client/images/arrow_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/arrow_right.png -------------------------------------------------------------------------------- /client/images/best_sellers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/best_sellers.png -------------------------------------------------------------------------------- /client/images/black_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/black_bg.jpg -------------------------------------------------------------------------------- /client/images/blue_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/blue_bg.png -------------------------------------------------------------------------------- /client/images/chat_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/chat_icon.png -------------------------------------------------------------------------------- /client/images/combo_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/combo_icon.png -------------------------------------------------------------------------------- /client/images/creat_account_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/creat_account_button.png -------------------------------------------------------------------------------- /client/images/delta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/delta.png -------------------------------------------------------------------------------- /client/images/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | InfoTip=This folder is shared online. 3 | IconFile=C:\Program Files (x86)\Google\Drive\googledrivesync.exe 4 | IconIndex=16 5 | -------------------------------------------------------------------------------- /client/images/down_arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/down_arrow.png -------------------------------------------------------------------------------- /client/images/email_submit_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/email_submit_button.png -------------------------------------------------------------------------------- /client/images/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/facebook.png -------------------------------------------------------------------------------- /client/images/full_star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/full_star.png -------------------------------------------------------------------------------- /client/images/grey_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/grey_bg.png -------------------------------------------------------------------------------- /client/images/grey_plus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/grey_plus.jpg -------------------------------------------------------------------------------- /client/images/half_star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/half_star.png -------------------------------------------------------------------------------- /client/images/header_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/header_bg.png -------------------------------------------------------------------------------- /client/images/header_shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/header_shadow.png -------------------------------------------------------------------------------- /client/images/home_banner_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/home_banner_bg.jpg -------------------------------------------------------------------------------- /client/images/icon_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/icon_1.png -------------------------------------------------------------------------------- /client/images/icon_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/icon_2.png -------------------------------------------------------------------------------- /client/images/icon_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/icon_3.png -------------------------------------------------------------------------------- /client/images/inner_banner_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/inner_banner_bg.jpg -------------------------------------------------------------------------------- /client/images/inner_header_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/inner_header_bg.png -------------------------------------------------------------------------------- /client/images/light_grey_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/light_grey_bg.png -------------------------------------------------------------------------------- /client/images/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/linkedin.png -------------------------------------------------------------------------------- /client/images/location_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/location_icon.png -------------------------------------------------------------------------------- /client/images/location_icon_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/location_icon_red.png -------------------------------------------------------------------------------- /client/images/login_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/login_icon.png -------------------------------------------------------------------------------- /client/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/logo.png -------------------------------------------------------------------------------- /client/images/man_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/man_icon.png -------------------------------------------------------------------------------- /client/images/man_location_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/man_location_icon.png -------------------------------------------------------------------------------- /client/images/map.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/map.jpg -------------------------------------------------------------------------------- /client/images/mc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/mc.png -------------------------------------------------------------------------------- /client/images/mestro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/mestro.png -------------------------------------------------------------------------------- /client/images/minus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/minus.png -------------------------------------------------------------------------------- /client/images/nav_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/nav_button.png -------------------------------------------------------------------------------- /client/images/new_product_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/new_product_1.jpg -------------------------------------------------------------------------------- /client/images/null_star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/null_star.png -------------------------------------------------------------------------------- /client/images/patch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/patch.png -------------------------------------------------------------------------------- /client/images/payment_option.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/payment_option.png -------------------------------------------------------------------------------- /client/images/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/paypal.png -------------------------------------------------------------------------------- /client/images/percentage_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/percentage_icon.png -------------------------------------------------------------------------------- /client/images/pink_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/pink_bg.png -------------------------------------------------------------------------------- /client/images/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/plus.png -------------------------------------------------------------------------------- /client/images/protx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/protx.png -------------------------------------------------------------------------------- /client/images/react-redux-cart-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/react-redux-cart-1.png -------------------------------------------------------------------------------- /client/images/react-redux-cart-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/react-redux-cart-2.png -------------------------------------------------------------------------------- /client/images/react-redux-cart-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/react-redux-cart-3.png -------------------------------------------------------------------------------- /client/images/react-redux-cart-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/react-redux-cart-4.png -------------------------------------------------------------------------------- /client/images/react-redux-cart-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/react-redux-cart-5.png -------------------------------------------------------------------------------- /client/images/red_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/red_bg.png -------------------------------------------------------------------------------- /client/images/right_arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/right_arrow.png -------------------------------------------------------------------------------- /client/images/sage-pay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/sage-pay.png -------------------------------------------------------------------------------- /client/images/sample_add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/sample_add.png -------------------------------------------------------------------------------- /client/images/sample_add_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/sample_add_2.png -------------------------------------------------------------------------------- /client/images/sample_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/sample_image.jpg -------------------------------------------------------------------------------- /client/images/search_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/search_button.png -------------------------------------------------------------------------------- /client/images/search_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/search_icon.png -------------------------------------------------------------------------------- /client/images/shadow_bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/shadow_bottom.png -------------------------------------------------------------------------------- /client/images/shop_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/shop_icon.png -------------------------------------------------------------------------------- /client/images/shopping_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/shopping_icon.png -------------------------------------------------------------------------------- /client/images/small_product.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/small_product.png -------------------------------------------------------------------------------- /client/images/step_1_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/step_1_icon.png -------------------------------------------------------------------------------- /client/images/step_2_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/step_2_icon.png -------------------------------------------------------------------------------- /client/images/step_3_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/step_3_icon.png -------------------------------------------------------------------------------- /client/images/step_4_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/step_4_icon.png -------------------------------------------------------------------------------- /client/images/step_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/step_bg.png -------------------------------------------------------------------------------- /client/images/temp_sellers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/temp_sellers.png -------------------------------------------------------------------------------- /client/images/transparent_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/transparent_bg.png -------------------------------------------------------------------------------- /client/images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/twitter.png -------------------------------------------------------------------------------- /client/images/urkirana_white_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/urkirana_white_logo.png -------------------------------------------------------------------------------- /client/images/user_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/user_icon.png -------------------------------------------------------------------------------- /client/images/visa-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/visa-2.png -------------------------------------------------------------------------------- /client/images/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/visa.png -------------------------------------------------------------------------------- /client/images/whats_new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/whats_new.png -------------------------------------------------------------------------------- /client/images/white_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/white_bg.png -------------------------------------------------------------------------------- /client/images/yellow_rubbin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/yellow_rubbin.png -------------------------------------------------------------------------------- /client/images/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/images/youtube.png -------------------------------------------------------------------------------- /client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | urKirana 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /client/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.scss'; 4 | import App from './App'; 5 | import { createStore } from 'redux'; 6 | import { Provider } from 'react-redux'; 7 | import registerServiceWorker from './registerServiceWorker'; 8 | import configureStore from './store/configureStore'; 9 | const store = configureStore(); 10 | import { loadHomeItems } from './actions'; 11 | import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom' 12 | store.dispatch(loadHomeItems()); 13 | 14 | // Root component 15 | ReactDOM.render( 16 | 17 | 18 | , 19 | document.getElementById('root')); 20 | registerServiceWorker(); 21 | -------------------------------------------------------------------------------- /client/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navjotdhanawat/react-redux-express-cart/399cf2795b75826ef99d8b034708e7973d5eac6b/client/index.scss -------------------------------------------------------------------------------- /client/reducers/cartReducer.js: -------------------------------------------------------------------------------- 1 | import * as types from '../actions/ActionType'; 2 | import defaultState from './defaultState'; 3 | import _ from 'underscore'; 4 | 5 | /** 6 | * @param {} state=defaultState.cart 7 | * @param {} action 8 | */ 9 | export default function cartReducer(state = defaultState.cart, action) { 10 | switch (action.type) { 11 | case types.ADD_TO_CART: 12 | var cartState = JSON.parse(localStorage.getItem('cart')); 13 | cartState = cartState ? cartState : []; 14 | localStorage.setItem('cart', JSON.stringify([...cartState, action.item])); 15 | return { 16 | items: JSON.parse(localStorage.getItem('cart')) 17 | }; 18 | case types.REMOVE_FROM_CART: 19 | var cartData = JSON.parse(localStorage.getItem('cart')); 20 | state = _.filter(cartData, function (item) { 21 | return item.id !== action.id 22 | }); 23 | localStorage.setItem('cart', JSON.stringify(state)); 24 | return { 25 | items : state 26 | }; 27 | default: 28 | return state; 29 | } 30 | } -------------------------------------------------------------------------------- /client/reducers/defaultState.js: -------------------------------------------------------------------------------- 1 | // Default state values 2 | export default { 3 | items: { 4 | docs: [], 5 | isSearch: false, 6 | page: 1, 7 | pages: 1 8 | }, 9 | cart: { 10 | items: [] 11 | }, 12 | home: { 13 | docs: [] 14 | }, 15 | details: {} 16 | } -------------------------------------------------------------------------------- /client/reducers/detailReducer.js: -------------------------------------------------------------------------------- 1 | import * as types from '../actions/ActionType'; 2 | import defaultState from './defaultState'; 3 | /** 4 | * @param {} state=defaultState.details 5 | * @param {} action 6 | */ 7 | export default function detailReducer(state = defaultState.details, action) { 8 | switch (action.type) { 9 | case types.LOAD_PRODUCT_DETAILS: 10 | return action.item; 11 | default: 12 | return state; 13 | } 14 | } -------------------------------------------------------------------------------- /client/reducers/homeReducer.js: -------------------------------------------------------------------------------- 1 | import * as types from '../actions/ActionType'; 2 | import defaultState from './defaultState'; 3 | /** 4 | * @param {} state=defaultState.items 5 | * @param {} action 6 | */ 7 | export default function homeReducer(state = defaultState.items, action) { 8 | switch (action.type) { 9 | case types.LOAD_HOME_PRODUCTS: 10 | return { 11 | docs: action.items 12 | } 13 | default: 14 | return state; 15 | } 16 | } -------------------------------------------------------------------------------- /client/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import items from './itemReducer'; 3 | import cart from './cartReducer'; 4 | import home from './homeReducer'; 5 | import detail from './detailReducer'; 6 | 7 | // Combining all reducers 8 | const urKiranaApp = combineReducers({ 9 | items, 10 | cart, 11 | home, 12 | detail 13 | }) 14 | 15 | export default urKiranaApp 16 | -------------------------------------------------------------------------------- /client/reducers/itemReducer.js: -------------------------------------------------------------------------------- 1 | import * as types from '../actions/ActionType'; 2 | import defaultState from './defaultState'; 3 | 4 | /** 5 | * @param {} state=defaultState.items 6 | * @param {} action 7 | */ 8 | export default function itemReducer(state = defaultState.items, action) { 9 | switch (action.type) { 10 | case types.LOAD_ITEMS_SUCCESS: 11 | return { 12 | docs: action.items.docs, 13 | page: parseInt(action.items.page) + 1, 14 | pages: action.items.pages, 15 | isSearch: false, 16 | message: '', 17 | loading: false, 18 | isMoreItems: action.items.docs.length ? true : false 19 | }; 20 | case types.LOAD_NEXT_ITEMS: 21 | console.log(parseInt(action.items.page) + '===' + action.items.pages); 22 | return { 23 | docs: [...state.docs, ...action.items.docs], 24 | page: parseInt(action.items.page) + 1, 25 | pages: action.items.pages, 26 | isSearch: false, 27 | message: action.items.docs.length ? '' : 'No more items', 28 | loading: false, 29 | isMoreItems: action.items.docs.length ? true : false 30 | }; 31 | case types.LOAD_SEARCHED_ITEMS: 32 | return { 33 | docs: action.items.docs, 34 | page: parseInt(action.items.page), 35 | pages: action.items.pages, 36 | isSearch: true, 37 | message: action.items.docs.length ? '' : 'No item found', 38 | loading: false, 39 | isMoreItems: action.items.docs.length ? true : false 40 | }; 41 | case types.REQUEST_ITEMS: 42 | return { 43 | docs: state.docs, 44 | page: parseInt(state.page), 45 | pages: state.pages, 46 | isSearch: state.isSearch, 47 | message: '', 48 | loading: true, 49 | isMoreItems: true 50 | }; 51 | default: 52 | return state; 53 | } 54 | } -------------------------------------------------------------------------------- /client/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (!isLocalhost) { 36 | // Is not local host. Just register service worker 37 | registerValidSW(swUrl); 38 | } else { 39 | // This is running on localhost. Lets check if a service worker still exists or not. 40 | checkValidServiceWorker(swUrl); 41 | } 42 | }); 43 | } 44 | } 45 | 46 | function registerValidSW(swUrl) { 47 | navigator.serviceWorker 48 | .register(swUrl) 49 | .then(registration => { 50 | registration.onupdatefound = () => { 51 | const installingWorker = registration.installing; 52 | installingWorker.onstatechange = () => { 53 | if (installingWorker.state === 'installed') { 54 | if (navigator.serviceWorker.controller) { 55 | // At this point, the old content will have been purged and 56 | // the fresh content will have been added to the cache. 57 | // It's the perfect time to display a "New content is 58 | // available; please refresh." message in your web app. 59 | console.log('New content is available; please refresh.'); 60 | } else { 61 | // At this point, everything has been precached. 62 | // It's the perfect time to display a 63 | // "Content is cached for offline use." message. 64 | console.log('Content is cached for offline use.'); 65 | } 66 | } 67 | }; 68 | }; 69 | }) 70 | .catch(error => { 71 | console.error('Error during service worker registration:', error); 72 | }); 73 | } 74 | 75 | function checkValidServiceWorker(swUrl) { 76 | // Check if the service worker can be found. If it can't reload the page. 77 | fetch(swUrl) 78 | .then(response => { 79 | // Ensure service worker exists, and that we really are getting a JS file. 80 | if ( 81 | response.status === 404 || 82 | response.headers.get('content-type').indexOf('javascript') === -1 83 | ) { 84 | // No service worker found. Probably a different app. Reload the page. 85 | navigator.serviceWorker.ready.then(registration => { 86 | registration.unregister().then(() => { 87 | window.location.reload(); 88 | }); 89 | }); 90 | } else { 91 | // Service worker found. Proceed as normal. 92 | registerValidSW(swUrl); 93 | } 94 | }) 95 | .catch(() => { 96 | console.log( 97 | 'No internet connection found. App is running in offline mode.' 98 | ); 99 | }); 100 | } 101 | 102 | export function unregister() { 103 | if ('serviceWorker' in navigator) { 104 | navigator.serviceWorker.ready.then(registration => { 105 | registration.unregister(); 106 | }); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /client/store/configureStore.js: -------------------------------------------------------------------------------- 1 | import {createStore, applyMiddleware} from 'redux'; 2 | import reducer from '../reducers'; 3 | import thunk from 'redux-thunk'; 4 | /** 5 | * configureStore to config reducer,middleware 6 | */ 7 | export default function configureStore() { 8 | return createStore( 9 | reducer, 10 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), 11 | applyMiddleware(thunk) 12 | ); 13 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-redux-express-cart", 3 | "version": "0.0.1", 4 | "private": true, 5 | "dependencies": { 6 | "app-root-path": "^2.0.1", 7 | "axios": "^0.16.2", 8 | "babel-cli": "^6.26.0", 9 | "babel-preset-env": "^1.6.0", 10 | "babel-preset-es2015": "^6.24.1", 11 | "babel-preset-react": "^6.24.1", 12 | "babel-preset-stage-0": "^6.24.1", 13 | "babel-runtime": "^6.26.0", 14 | "cors": "^2.8.4", 15 | "css-loader": "^0.28.7", 16 | "express": "^4.16.1", 17 | "html-webpack-plugin": "^2.30.1", 18 | "material-ui": "^0.20.0", 19 | "mongoose": "^4.12.0", 20 | "mongoose-paginate": "^5.0.3", 21 | "node-sass": "^4.5.3", 22 | "npm-run-all": "^4.1.1", 23 | "path": "^0.12.7", 24 | "prop-types": "^15.6.0", 25 | "raw-loader": "^0.5.1", 26 | "react": "^16.0.0", 27 | "react-addons-css-transition-group": "^15.6.2", 28 | "react-bootstrap": "^0.31.5", 29 | "react-dom": "^16.0.0", 30 | "react-flexbox-grid": "^2.0.0", 31 | "react-hot-loader": "next", 32 | "react-lazyload": "^2.2.7", 33 | "react-loader-advanced": "^1.7.0", 34 | "react-redux": "^5.0.6", 35 | "react-router-dom": "^4.2.2", 36 | "react-scripts": "1.0.14", 37 | "react-spinkit": "^3.0.0", 38 | "react-sticky": "^6.0.1", 39 | "react-tap-event-plugin": "^3.0.2", 40 | "redux": "^3.7.2", 41 | "redux-thunk": "^2.2.0", 42 | "sass-loader": "^6.0.6", 43 | "start-server-webpack-plugin": "^2.2.0", 44 | "style-loader": "^0.19.0", 45 | "throttle-debounce": "^1.0.1", 46 | "underscore": "^1.8.3", 47 | "volleyball": "^1.4.1", 48 | "webpack-dev-middleware": "^1.12.0", 49 | "webpack-hot-middleware": "^2.19.1", 50 | "webpack-livereload-plugin": "^1.0.0", 51 | "webpack-node-externals": "^1.6.0", 52 | "webpack": "^3.8.1", 53 | "babel-loader": "^7.1.2", 54 | "babel-core": "^6.26.0", 55 | "babel-jest": "^21.2.0", 56 | "babel-plugin-transform-runtime": "^6.23.0", 57 | "babel-preset-stage-1": "^6.24.1", 58 | "babel-preset-stage-2": "^6.18.0", 59 | "enzyme": "^3.1.0", 60 | "enzyme-to-json": "^3.1.2", 61 | "file-loader": "^1.1.5", 62 | "jest": "^21.2.1", 63 | "jest-cli": "^21.2.1", 64 | "react-addons-test-utils": "^15.6.2", 65 | "uglify-js-brunch": "^2.10.0", 66 | "url-loader": "^0.6.2", 67 | "webpack-dev-server": "^2.9.1" 68 | }, 69 | "scripts": { 70 | "test": "jest --verbose", 71 | "dev": "node server/index.js --development", 72 | "start": "webpack && node server/index.js --production", 73 | "prod": "webpack && node server/index.js --production", 74 | "build": "webpack -p", 75 | "eject": "react-scripts eject" 76 | }, 77 | "devDependencies": { 78 | "babel-core": "^6.26.0", 79 | "babel-jest": "^21.2.0", 80 | "babel-loader": "^7.1.2", 81 | "babel-plugin-transform-runtime": "^6.23.0", 82 | "babel-preset-es2015": "^6.24.1", 83 | "babel-preset-react": "^6.24.1", 84 | "babel-preset-stage-0": "^6.24.1", 85 | "babel-preset-stage-1": "^6.24.1", 86 | "babel-preset-stage-2": "^6.18.0", 87 | "enzyme": "^3.1.0", 88 | "enzyme-to-json": "^3.1.2", 89 | "file-loader": "^1.1.5", 90 | "jest": "^21.2.1", 91 | "jest-cli": "^21.2.1", 92 | "react-addons-test-utils": "^15.6.2", 93 | "react-hot-loader": "^3.0.0-beta.6", 94 | "uglify-js-brunch": "^2.10.0", 95 | "url-loader": "^0.6.2", 96 | "webpack": "^3.8.1", 97 | "webpack-dev-server": "^2.9.1" 98 | }, 99 | "jest": { 100 | "scriptPreprocessor": "/node_modules/babel-jest", 101 | "unmockedModulePathPatterns": [ 102 | "/node_modules/react", 103 | "/node_modules/react-dom", 104 | "/node_modules/react-addons-test-utils", 105 | "/node_modules/fbjs" 106 | ], 107 | "moduleNameMapper": { 108 | "\\.(css|scss)$": "/client/__mocks__/styleMock.js" 109 | } 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /server/database.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | url : 'mongodb://admin:admin@ds161164.mlab.com:61164/react' 3 | } -------------------------------------------------------------------------------- /server/index.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const path = require('path'); 3 | const port = process.env.PORT || 4000; 4 | const app = express(); 5 | const volleyball = require('volleyball'); 6 | const bodyParser = require('body-parser'); 7 | var mongoose = require('mongoose'); 8 | var cors = require('cors'); 9 | // var mv = require('module-visualizer'); 10 | // mv.embed({}); 11 | 12 | var database = require('./database'); 13 | mongoose.connect(database.url); 14 | 15 | const isDevelopment = process.argv.indexOf('--development') !== -1; 16 | 17 | if (isDevelopment) { 18 | 19 | const webpack = require('webpack'); 20 | const webpackConfig = require('../webpack.config'); 21 | 22 | const compiler = webpack(webpackConfig); 23 | app.use(cors({ origin: '*' })); 24 | app.use(require('webpack-dev-middleware')(compiler, { 25 | 26 | hot: true, 27 | stats: { 28 | colors: true 29 | } 30 | })); 31 | 32 | app.use(require('webpack-hot-middleware')(compiler)); 33 | 34 | } else { 35 | app.use(cors({ origin: '*' })); 36 | app.use(express.static(path.resolve(__dirname, '../build'))); 37 | app.use(express.static(path.resolve(__dirname, '../client'))); 38 | app.use(express.static(path.resolve(__dirname, '../node_modules'))); 39 | } 40 | 41 | require('./routes.js')(app); 42 | 43 | app.get('*', function (request, response) { 44 | response.sendFile(path.resolve(__dirname, '../build/index.html')) 45 | }); 46 | var appRoot = require('app-root-path'); 47 | app.listen(port); 48 | console.log(appRoot + " ========:::::::::::::::"); 49 | console.log(`server started on port: ${port}`); 50 | -------------------------------------------------------------------------------- /server/model/products.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | var mongoosePaginate = require('mongoose-paginate'); 3 | 4 | var schema = new mongoose.Schema({ 5 | name: { 6 | type: String, 7 | default: '' 8 | }, 9 | image: { 10 | type: String, 11 | default: '' 12 | }, 13 | price: { 14 | type: Number, 15 | default: '' 16 | }, 17 | mrp: { 18 | type: Number, 19 | default: '' 20 | } 21 | }); 22 | 23 | schema.plugin(mongoosePaginate); 24 | 25 | module.exports = mongoose.model('Products', schema); -------------------------------------------------------------------------------- /server/routes.js: -------------------------------------------------------------------------------- 1 | var Products = require('./model/products'); 2 | var imgArray = ["https://www.bigbasket.com/media/uploads/p/s/10000428_7-bb-popular-toorarhar-dal.jpg", "https://www.bigbasket.com/media/uploads/p/s/40042841_2-bb-royal-toor-dalarhar-dal-desi.jpg", "https://www.bigbasket.com/media/uploads/p/s/10000446_8-bb-royal-raw-peanuts-mungaphalishengdana.jpg", "https://www.bigbasket.com/media/uploads/p/s/40053931_2-bb-royal-moong-dal.jpg", "https://www.bigbasket.com/media/uploads/p/s/10000565_7-bb-royal-rajma-whitechitra.jpg", "https://www.bigbasket.com/media/uploads/p/s/10000563_7-bb-royal-rajma-kashmiri.jpg", "https://www.bigbasket.com/media/uploads/p/s/40026594_2-bb-royal-green-moong-splitchilka.jpg", "https://www.bigbasket.com/media/uploads/p/s/30005420_2-bb-popular-moong-dal.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30010371_2-bb-royal-moth-wholematki.jpg", "https://www.bigbasket.com/media/uploads/p/mm/70001286_2-bb-royal-white-peasmatar.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30000101_4-bb-royal-green-moong-wholesabut.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30010385_2-bb-popular-peanutsmungaphali-raw.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30002287_2-tata-sampann-moong-dal.jpg", "https://www.bigbasket.com/media/uploads/p/mm/10000477_7-bb-royal-urad-black-wholesabut.jpg", "https://www.bigbasket.com/media/uploads/p/mm/20000432_2-bb-popular-channa-dal.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40003550_3-bb-popular-soya-chunks.jpg", "https://www.bigbasket.com/media/uploads/p/mm/70001288_2-bb-royal-rajma-red.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30000120_5-bb-royal-raw-peanutsmungaphalishengdana.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30000103_3-bb-royal-channa-brown-big.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40040909_2-bb-popular-toor-dal-economy.jpg", "https://www.bigbasket.com/media/uploads/p/mm/20005213_2-tata-sampann-moong-whole.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30002286_2-tata-sampann-masoor-dal.jpg", "https://www.bigbasket.com/media/uploads/p/mm/60000720_2-bb-royal-channa-dal-unpolished.jpg", "https://www.bigbasket.com/media/uploads/p/mm/258588_2-nutrela-soya-mini-chunk.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30010466_2-bb-royal-mix-dal.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30010367_1-bb-popular-moong-green-splitchilka.jpg", "https://www.bigbasket.com/media/uploads/p/mm/10000474_7-bb-royal-urad-black-splitchilka.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30010377_2-bb-popular-urad-dal-split.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40058665_1-bb-popular-masoor-dal.jpg", "https://www.bigbasket.com/media/uploads/p/mm/20000430_5-bb-royal-urad-wholegota.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30002288_2-tata-sampann-chana-dal-unpolished.jpg", "https://www.bigbasket.com/media/uploads/p/mm/10000561_7-bb-royal-peasmatar-green.jpg", "https://www.bigbasket.com/media/uploads/p/mm/10000470_7-bb-royal-lobia-white.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30000207_3-bb-royal-jowar.jpg", "https://www.bigbasket.com/media/uploads/p/mm/20005211_2-tata-sampann-moong-chilka.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40003518_2-nutrela-soya-chunks.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30000201_2-bb-royal-bajra.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30010370_1-bb-popular-moth-wholematki.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30010383_2-bb-popular-peanutsmungaphalishengdana-raw.jpg", "https://www.bigbasket.com/media/uploads/p/mm/10000487_7-bb-royal-soya-bean.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40017980_2-tata-sampann-urad-dal-whole-unpolished.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30008840_1-satyam-dalia.jpg", "https://www.bigbasket.com/media/uploads/p/mm/257383_3-nutrela-soya-granules.jpg", "https://www.bigbasket.com/media/uploads/p/mm/60000018_2-bb-royal-channa-green.jpg", "https://www.bigbasket.com/media/uploads/p/mm/10000800_6-bb-royal-fried-grambengal-gram.jpg", "https://www.bigbasket.com/media/uploads/p/mm/20005212_2-tata-i-shakti-chana-dal-unpolished.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40017981_4-tata-sampann-urad.jpg", "https://www.bigbasket.com/media/uploads/p/mm/10000438_10-bb-royal-red-lobia.jpg", "https://www.bigbasket.com/media/uploads/p/mm/10000562_7-bb-royal-horse-gramkulthi.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40003551_2-bb-popular-ragiraglu.jpg", "https://www.bigbasket.com/media/uploads/p/mm/60000722_2-bb-royal-urad-wholegota-unpolished.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30010382_1-bb-popular-jowar.jpg", "https://www.bigbasket.com/media/uploads/p/mm/60000724_2-bb-royal-unpolish-urad-dalsplit.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30008843_1-satyam-khobra.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40061861_1-bb-royal-watana-black.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40061795_1-bb-royal-chavli-black-eye.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40053928_2-bb-popular-urad-black-spilt.jpg", "https://www.bigbasket.com/media/uploads/p/mm/257382_2-nutrela-soya-chunks.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30008839_1-satyam-barley.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40056517_2-bb-royal-khichdi-mix.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30008838_2-satyam-alshi.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40056521_2-bb-royal-tadka-dal.jpg", "https://www.bigbasket.com/media/uploads/p/mm/261821_3-nutrela-soya-granules-high-protein.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40081216_1-fortune-soya-bari-mini.jpg", "https://www.bigbasket.com/media/uploads/p/mm/20000538_3-bb-popular-urad-gota.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40019481_2-fortune-soya-chunks.jpg", "https://www.bigbasket.com/media/uploads/p/mm/30008810_1-satyam-math.jpg", "https://www.bigbasket.com/media/uploads/p/mm/20000501_1-bb-royal-ragluragi.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40096734_1-delight-foods-rajma-bhaderwahi-made-in-kashmir.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40081217_1-fortune-soya-bari-chura.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40109157_2-india-gate-quinoa.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40099846_1-bb-popular-masoor-dal-horeca.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40099836_1-bb-economy-toor-dal-horeca.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40099848_1-bb-popular-channa-brown-horeca.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40110643_1-bb-economy-chavli-whole.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40099845_1-bb-popular-green-moong-whole-horeca.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40099847_1-bb-popular-green-peas-horeca.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40099849_1-bb-economy-kabuli-channa-horeca.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40099851_1-bb-popular-white-peas-horeca.jpg", "https://www.bigbasket.com/media/uploads/p/mm/1202029_2-bb-combo-bb-popular-toorarhar-dal-1kg-bb-royal-basmati-rice-premium-1kg.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40056516_3-bb-royal-dal-makhani-mix.jpg", "https://www.bigbasket.com/media/uploads/p/mm/40108014_1-bb-economy-soya-bean-chunks-horeca.jpg"]; 3 | var productArray = ["Toor/Arhar Dal", "Toor Dal/Arhar Dal (Desi)", "Raw Peanuts/Mungaphali/Raw Shengdane", "Moong Dal", "Kabuli Channa/Kabuli Harbhara/Chana", "Masoor Dal", "Urad Dal - Split", "Green Moong Whole/Sabut/Hive Moong Purna/Sabut", "Channa Dal/Harbhara", "Toor Dal", "Channa Brown (Small)/Harbhara Tapkiri (Lahan)", "Moong Dal Unpolished", "Kabuli Channa/Kabuli Harbhara/Chana", "Masoor Black Whole/Sabut", "Toor Dal Unpolished", "Chawli/Lobia White/Chawli Pandhri", "Rajma White/Chitra/Rajma Pandhra", "Rajma - Kashmiri", "Green Moong Split/Chilka/Hirve Moong Chilka", "Moong Dal", "Moth Whole/Matki", "White Peas/Matar/Pandhre Watane", "Green Moong Whole/Sabut", "BB PopularRaw Peanuts/Mungaphali/BB Kacche Shengdane", "Moong Dal", "Urad Black Whole/Sabut/Udid Kale Purna", "Channa Dal/Harbhara", "Soya Chunks/Soyabean Wade", "Rajma Red/Rajma Lal", "Channa Brown (Big)/Harbhara Tapkiri (Mothe)", "Toor Dal - Economy", "Moong Whole", "Masoor Dal", "Channa Dal Unpolished", "Soya - Mini Chunk", "Mix Dal/Mishra Dal", "Green Moong Split/Chilka/Hirve Moong Chilka", "Urad Black Split/Chilka/Udid Kale Chilka", "Urad Dal - Split", "Masoor Dal", "Urad Whole/Urad purna/Gota", "Chana Dal - Unpolished", "Green Peas/Matar/Hirve Watane/Matar", "Lobia White/Chavali Pandhri", "Jowar/Jawari", "Moong Chilka", "Soya - Chunks", "Bajra", "Moth - Whole/Matki", "Raw Peanuts/Mungaphali/Kacche Shengdane", "Soya Bean", "Urad Dal Whole Unpolished", "Dalia", "Soya - Granules", "Channa Green", "Fried Gram/Bengal Gram/Talalele Chane Gram", "Chana Dal - Unpolished", "Urad", "Red Lobia", "Horse Gram/Kulthi", "Ragi/Raglu", "Urad Whole/Gota Unpolished", "Jowar/Jawari", "Unpolish - Urad Dal/Split", "Khobra", "Watana Black", "Chavli - Black Eye", "Urad - Black Spilt", "Soya - Chunks", "Barley", "Khichdi Mix", "Alshi", "Tadka Dal", "Soya Granules - High Protein", "Soya Bari - Mini", "Urad Gota", "Soya chunks", "Math", "Raglu/Ragi", "Rajma - Bhaderwahi Made in Kashmir", "Soya Bari - Chura", "Quinoa", "Masoor Dal Horeca", "Toor Dal Horeca", "Channa Brown Horeca", "Chavli Whole", "Green Moong Whole Horeca", "Green Peas Horeca", "Kabuli Channa Horeca", "White Peas Horeca", "Dal Makhani Mix", "Soya Bean Chunks Horeca"]; 4 | var prices = [100.00, 200.00, 300.00, 240.00, 325.00]; 5 | module.exports = function (app) { 6 | 7 | //Scraping images from bigbasket 8 | app.get('/getProducts/:page', function (req, res) { 9 | var page = req.params.page; 10 | // setTimeout(function() { 11 | Products.paginate({}, { page: page, limit: 16 }, function (err, data) { 12 | if (err) { 13 | res.send(err); 14 | } 15 | res.json(data); 16 | }); 17 | // }, 3000); 18 | }); 19 | 20 | app.get('/getProduct/:id', function (req, res) { 21 | var id = req.params.id; 22 | Products.findOne({ _id: id }, function (err, data) { 23 | if (err) { 24 | res.send(err); 25 | } 26 | res.json(data); 27 | }); 28 | }); 29 | 30 | app.get('/getHomeProducts', function (req, res) { 31 | // var page = req.params.page; 32 | // setTimeout(function() { 33 | Products.paginate({}, { page: 1, limit: 8 }, function (err, data) { 34 | if (err) { 35 | res.send(err); 36 | } 37 | res.json(data); 38 | }); 39 | // }, 3000); 40 | }); 41 | 42 | app.get('/searchProducts/:keyword', function (req, res) { 43 | console.log(req.params.keyword); 44 | var keyword = req.params.keyword; 45 | var page = req.params.page; 46 | var query = { name: { '$regex': keyword, '$options': 'i' } }; 47 | Products.paginate(query, { sort: { _id: -1 }, page: 1, limit: 100 }, function (err, data) { 48 | if (err) { 49 | res.send(err); 50 | } 51 | res.json(data); 52 | }); 53 | }); 54 | 55 | app.get('/createProducts', function (req, res) { 56 | var products = []; 57 | for (var index = 0; index < 100; index++) { 58 | var image = imgArray[Math.floor(Math.random() * imgArray.length)]; 59 | var name = productArray[Math.floor(Math.random() * productArray.length)]; 60 | var price = prices[Math.floor(Math.random() * prices.length)]; 61 | var mrp = 0; 62 | if (Math.floor(Math.random() * 3)) { 63 | mrp = price + Math.floor(Math.random() * 100) + 1; 64 | } 65 | products.push({ 66 | image: image, 67 | name: name, 68 | price: price, 69 | mrp: mrp 70 | }); 71 | } 72 | 73 | 74 | Products.insertMany(products, function (err, data) { 75 | if (err) { 76 | res.send(err); 77 | } 78 | res.json(data); 79 | }); 80 | }); 81 | }; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | 5 | var isDevelopment = process.argv.indexOf('--development') !== -1; 6 | 7 | var entryPath = path.join(__dirname, 'client/index.js'); 8 | console.log(entryPath); 9 | console.log('entryPath=-----------------------------------' + isDevelopment); 10 | var entry = isDevelopment ? [ 11 | 'webpack-hot-middleware/client?reload=true', 12 | 'react-hot-loader/patch', 13 | entryPath 14 | ] : entryPath; 15 | 16 | var plugins = [ 17 | 18 | new webpack.DefinePlugin({ 19 | 20 | 'process.env.NODE_ENV': JSON.stringify(isDevelopment ? 'development' : 'production'), 21 | __DEV__: isDevelopment 22 | }), 23 | new HtmlWebpackPlugin({ 24 | template: 'client/index.html', 25 | minify: { 26 | removeComments: !isDevelopment, 27 | collapseWhitespace: !isDevelopment 28 | }, 29 | inject: true 30 | }) 31 | ]; 32 | 33 | 34 | !isDevelopment && plugins.push(new webpack.optimize.UglifyJsPlugin()); 35 | isDevelopment && plugins.push(new webpack.HotModuleReplacementPlugin()) && plugins.push(new webpack.LoaderOptionsPlugin({ debug: true })); 36 | module.exports = { 37 | 38 | cache: isDevelopment, 39 | entry: entry, 40 | module: { 41 | rules: [{ 42 | test: /\.jsx?$/, 43 | exclude: /(node_modules|bower_components)/, 44 | loader: 'babel-loader', 45 | options: { 46 | presets: ["es2015", "stage-2", "react"] 47 | } 48 | }, 49 | { 50 | test: /\.(scss|css)$/, 51 | use: [ 52 | 'style-loader', 53 | 'css-loader', 54 | 'sass-loader' 55 | ] 56 | }, 57 | { 58 | test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/, 59 | use: [ 60 | { 61 | loader: 'file-loader', 62 | options: {} 63 | } 64 | ] 65 | }] 66 | }, 67 | output: { 68 | 69 | path: path.join(__dirname, 'build'), 70 | publicPath: '/', 71 | filename: 'bundle.js' 72 | }, 73 | plugins: plugins 74 | }; --------------------------------------------------------------------------------