![img]({"Content/img/")
105 | ', {'class': opts.cursor_class});
103 | this.cursor.css({
104 | 'height': this.cursor_height + 'px',
105 | 'width': this.cursor_width + 'px'
106 | });
107 |
108 | this.cursor.appendTo(this.parent_anchor);
109 | return this.update_cursor_position(x, y);
110 | }
111 | };
112 |
113 | var lens = {
114 | init: function(parent_anchor){
115 | this.parent_anchor = parent_anchor;
116 | this.parent_div = parent_anchor.parent(opts.parent_class);
117 | this.lens_image_url = parent_anchor.attr(opts.lens_image_attr);
118 | this.lens_container = $('
', {'class': opts.lens_class});
119 | this.lens_image = $('![]()
');
120 | big_image.init(parent_anchor.find(opts.big_image_class));
121 |
122 | if (this.lens_image_url === undefined) {
123 | debug('Cannot find lens image. URL: ' + this.lens_image_url);
124 | debug(that);
125 | debug(parent_anchor);
126 | debug(lens_image_url);
127 | }
128 | },
129 | update_lens_position: function (position) {
130 | this.lens_image.css({
131 | 'top': position.top,
132 | 'left': position.left
133 | });
134 | },
135 | calc_lens_position: function(cursor_position){
136 | return {
137 | left: (cursor_position.center_left * this.ratio.x - this.container.width) * -1,
138 | top: (cursor_position.center_top * this.ratio.y - this.container.height) * -1
139 | }
140 | },
141 | lens_event_bind: function () {
142 | var that = this;
143 | var mouse_callback = function (mouse) {
144 | var position = big_image.calc_view_position(mouse);
145 | cursor.update_cursor_position(position.org_x, position.org_y);
146 | that.update_lens_position(that.calc_lens_position(cursor.cursor_position, that.ratio, that.container));
147 | };
148 |
149 | this.parent_anchor.mousemove(mouse_callback);
150 | },
151 | lens_event_unbind: function(){
152 | if(this.parent_anchor !== undefined){
153 | this.parent_anchor.unbind('mousemove');
154 | }
155 | },
156 | destroy: function(){
157 | cursor.destroy();
158 |
159 | if(this.lens_container !== undefined && this.lens_container.length > 0){
160 | $('.' + opts.lens_class).remove();
161 | this.lens_event_unbind();
162 | }
163 | },
164 | load: function(e){
165 | var that = this;
166 |
167 | this.lens_container.appendTo(this.parent_div);
168 |
169 | var margin_top = (this.lens_container.height() / 2) - 25,
170 | loading_image = $('![]()
', {'src': opts.loading_image})
171 | .css("margin-top", margin_top);
172 | this.lens_container.html(loading_image);
173 |
174 | this.lens_image.load(function () {
175 | that.lens_container.html(that.lens_image);
176 |
177 | that.container = {
178 | width: that.lens_container.width() / 2,
179 | height: that.lens_container.height() / 2
180 | };
181 |
182 | that.img_size = {
183 | width: that.lens_image.width(),
184 | height: that.lens_image.height()
185 | };
186 |
187 | that.ratio = {
188 | y: that.lens_image.height() / big_image.height,
189 | x: that.lens_image.width() / big_image.width
190 | };
191 |
192 | var position = big_image.calc_view_position(e);
193 | cursor.init(that.parent_anchor, that.lens_container, that.ratio, position);
194 | that.update_lens_position(that.calc_lens_position(cursor.cursor_position));
195 |
196 | that.lens_event_bind();
197 | }).attr('src', this.lens_image_url).attr('width', '1024px').attr('height', '900px');
198 | }
199 | };
200 |
201 | var init = function (e) {
202 | var parent_anchor = $(this);
203 |
204 | lens.init(parent_anchor);
205 | lens.load(e);
206 | };
207 |
208 | var destroy = function () {
209 | lens.destroy();
210 | };
211 |
212 | $(this).parents(opts.parent_class).on(opts.open_lens_event, opts.anchor_parent_class, init);
213 | $(this).parents(opts.parent_class).on('mouseleave', opts.anchor_parent_class, destroy);
214 |
215 | };
216 |
217 | $.fn.simpleLens.ver = function () { return ver; };
218 |
219 | $.fn.simpleLens.defaults = {
220 | anchor_parent_class: '.simpleLens-lens-image',
221 | lens_image_attr: 'data-lens-image',
222 | big_image_class: '.simpleLens-big-image',
223 | parent_class: '.simpleLens-big-image-container',
224 | lens_class: 'simpleLens-lens-element',
225 | cursor_class: 'simpleLens-mouse-cursor',
226 | loading_image: '../img/view-slider/loading.gif',
227 | open_lens_event: 'mouseenter'
228 | };
229 |
230 | })( jQuery );
--------------------------------------------------------------------------------
/public/Content/js/jquery.smartmenus.bootstrap.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * SmartMenus jQuery Plugin Bootstrap Addon - v0.3.0 - January 27, 2016
3 | * http://www.smartmenus.org/
4 | *
5 | * Copyright Vasil Dinkov, Vadikom Web Ltd.
6 | * http://vadikom.com
7 | *
8 | * Licensed MIT
9 | */
10 |
11 | (function(factory) {
12 | if (typeof define === 'function' && define.amd) {
13 | // AMD
14 | define(['jquery', 'jquery.smartmenus'], factory);
15 | } else if (typeof module === 'object' && typeof module.exports === 'object') {
16 | // CommonJS
17 | module.exports = factory(require('jquery'));
18 | } else {
19 | // Global jQuery
20 | factory(jQuery);
21 | }
22 | } (function($) {
23 |
24 | $.extend($.SmartMenus.Bootstrap = {}, {
25 | keydownFix: false,
26 | init: function() {
27 | // init all navbars that don't have the "data-sm-skip" attribute set
28 | var $navbars = $('ul.navbar-nav:not([data-sm-skip])');
29 | $navbars.each(function() {
30 | var $this = $(this),
31 | obj = $this.data('smartmenus');
32 | // if this navbar is not initialized
33 | if (!obj) {
34 | $this.smartmenus({
35 |
36 | // these are some good default options that should work for all
37 | // you can, of course, tweak these as you like
38 | subMenusSubOffsetX: 2,
39 | subMenusSubOffsetY: -6,
40 | subIndicators: false,
41 | collapsibleShowFunction: null,
42 | collapsibleHideFunction: null,
43 | rightToLeftSubMenus: $this.hasClass('navbar-right'),
44 | bottomToTopSubMenus: $this.closest('.navbar').hasClass('navbar-fixed-bottom')
45 | })
46 | .bind({
47 | // set/unset proper Bootstrap classes for some menu elements
48 | 'show.smapi': function(e, menu) {
49 | var $menu = $(menu),
50 | $scrollArrows = $menu.dataSM('scroll-arrows');
51 | if ($scrollArrows) {
52 | // they inherit border-color from body, so we can use its background-color too
53 | $scrollArrows.css('background-color', $(document.body).css('background-color'));
54 | }
55 | $menu.parent().addClass('open');
56 | },
57 | 'hide.smapi': function(e, menu) {
58 | $(menu).parent().removeClass('open');
59 | }
60 | });
61 |
62 | function onInit() {
63 | // set Bootstrap's "active" class to SmartMenus "current" items (should someone decide to enable markCurrentItem: true)
64 | $this.find('a.current').parent().addClass('active');
65 | // remove any Bootstrap required attributes that might cause conflicting issues with the SmartMenus script
66 | $this.find('a.has-submenu').each(function() {
67 | var $this = $(this);
68 | if ($this.is('[data-toggle="dropdown"]')) {
69 | $this.dataSM('bs-data-toggle-dropdown', true).removeAttr('data-toggle');
70 | }
71 | if ($this.is('[role="button"]')) {
72 | $this.dataSM('bs-role-button', true).removeAttr('role');
73 | }
74 | });
75 | }
76 |
77 | onInit();
78 |
79 | function onBeforeDestroy() {
80 | $this.find('a.current').parent().removeClass('active');
81 | $this.find('a.has-submenu').each(function() {
82 | var $this = $(this);
83 | if ($this.dataSM('bs-data-toggle-dropdown')) {
84 | $this.attr('data-toggle', 'dropdown').removeDataSM('bs-data-toggle-dropdown');
85 | }
86 | if ($this.dataSM('bs-role-button')) {
87 | $this.attr('role', 'button').removeDataSM('bs-role-button');
88 | }
89 | });
90 | }
91 |
92 | obj = $this.data('smartmenus');
93 |
94 | // custom "isCollapsible" method for Bootstrap
95 | obj.isCollapsible = function() {
96 | return !/^(left|right)$/.test(this.$firstLink.parent().css('float'));
97 | };
98 |
99 | // custom "refresh" method for Bootstrap
100 | obj.refresh = function() {
101 | $.SmartMenus.prototype.refresh.call(this);
102 | onInit();
103 | // update collapsible detection
104 | detectCollapsible(true);
105 | }
106 |
107 | // custom "destroy" method for Bootstrap
108 | obj.destroy = function(refresh) {
109 | onBeforeDestroy();
110 | $.SmartMenus.prototype.destroy.call(this, refresh);
111 | }
112 |
113 | // keep Bootstrap's default behavior for parent items when the "data-sm-skip-collapsible-behavior" attribute is set to the ul.navbar-nav
114 | // i.e. use the whole item area just as a sub menu toggle and don't customize the carets
115 | if ($this.is('[data-sm-skip-collapsible-behavior]')) {
116 | $this.bind({
117 | // click the parent item to toggle the sub menus (and reset deeper levels and other branches on click)
118 | 'click.smapi': function(e, item) {
119 | if (obj.isCollapsible()) {
120 | var $item = $(item),
121 | $sub = $item.parent().dataSM('sub');
122 | if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
123 | obj.itemActivate($item);
124 | obj.menuHide($sub);
125 | return false;
126 | }
127 | }
128 | }
129 | });
130 | }
131 |
132 | // onresize detect when the navbar becomes collapsible and add it the "sm-collapsible" class
133 | var winW;
134 | function detectCollapsible(force) {
135 | var newW = obj.getViewportWidth();
136 | if (newW != winW || force) {
137 | var $carets = $this.find('.caret');
138 | if (obj.isCollapsible()) {
139 | $this.addClass('sm-collapsible');
140 | // set "navbar-toggle" class to carets (so they look like a button) if the "data-sm-skip-collapsible-behavior" attribute is not set to the ul.navbar-nav
141 | if (!$this.is('[data-sm-skip-collapsible-behavior]')) {
142 | $carets.addClass('navbar-toggle sub-arrow');
143 | }
144 | } else {
145 | $this.removeClass('sm-collapsible');
146 | if (!$this.is('[data-sm-skip-collapsible-behavior]')) {
147 | $carets.removeClass('navbar-toggle sub-arrow');
148 | }
149 | }
150 | winW = newW;
151 | }
152 | };
153 | detectCollapsible();
154 | $(window).bind('resize.smartmenus' + obj.rootId, detectCollapsible);
155 | }
156 | });
157 | // keydown fix for Bootstrap 3.3.5+ conflict
158 | if ($navbars.length && !$.SmartMenus.Bootstrap.keydownFix) {
159 | // unhook BS keydown handler for all dropdowns
160 | $(document).off('keydown.bs.dropdown.data-api', '.dropdown-menu');
161 | // restore BS keydown handler for dropdowns that are not inside SmartMenus navbars
162 | if ($.fn.dropdown && $.fn.dropdown.Constructor) {
163 | $(document).on('keydown.bs.dropdown.data-api', '.dropdown-menu:not([id^="sm-"])', $.fn.dropdown.Constructor.prototype.keydown);
164 | }
165 | $.SmartMenus.Bootstrap.keydownFix = true;
166 | }
167 | }
168 | });
169 |
170 | // init ondomready
171 | $($.SmartMenus.Bootstrap.init);
172 |
173 | return $;
174 | }));
--------------------------------------------------------------------------------
/public/Content/js/sequence-theme.modern-slide-in.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Theme Name: Modern Slide In
3 | * Version: 2.0.0
4 | * Theme URL: http://sequencejs.com/themes/modern-slide-in/
5 | *
6 | * A minimalist theme for showcasing products
7 | *
8 | * This theme is powered by Sequence.js - The
9 | * responsive CSS animation framework for creating unique sliders,
10 | * presentations, banners, and other step-based applications.
11 | *
12 | * Author: Ian Lunn
13 | * Author URL: http://ianlunn.co.uk/
14 | *
15 | * Theme License: http://sequencejs.com/licenses/#free-theme
16 | * Sequence.js Licenses: http://sequencejs.com/licenses/
17 | *
18 | * Copyright © 2015 Ian Lunn Design Limited unless otherwise stated.
19 | */
20 | jQuery(function($){
21 | // Get the Sequence element
22 | var sequenceElement = document.getElementById("sequence");
23 |
24 | // Place your Sequence options here to override defaults
25 | // See: http://sequencejs.com/documentation/#options
26 | var options = {
27 | animateCanvas: false,
28 | phaseThreshold: false,
29 | preloader: true,
30 | reverseWhenNavigatingBackwards: true
31 | }
32 |
33 | // Launch Sequence on the element, and with the options we specified above
34 | var mySequence = sequence(sequenceElement, options);
35 | });
36 |
--------------------------------------------------------------------------------
/public/Content/scss/base/_base.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 | html,body{
4 |
5 | }
6 |
7 | body{
8 | background-color: #ffffff;
9 | font-family: $base-font;
10 | color:$base-color;
11 | font-size:$base-font-size;
12 | overflow-x: hidden;
13 | }
14 | .no-padding{
15 | padding: 0;
16 | }
--------------------------------------------------------------------------------
/public/Content/scss/base/_mixins.scss:
--------------------------------------------------------------------------------
1 |
2 | // border radius
3 |
4 | @mixin border-radius($radius){
5 | -webkit-border-radius: $radius;
6 | -moz-border-radius: $radius;
7 | -ms--border-radius: $radius;
8 | border-radius: $radius;
9 | }
10 |
11 | // transition
12 |
13 | @mixin transition($args) {
14 | -webkit-transition: $args;
15 | -moz-transition: $args;
16 | -ms-transition: $args;
17 | -o-transition: $args;
18 | transition: $args;
19 | }
20 |
21 | // opacity
22 |
23 | @mixin opacity($opacity) {
24 | opacity: $opacity;
25 | $opacity-ie: $opacity * 100;
26 | filter: alpha(opacity=$opacity-ie); //IE8
27 | }
28 |
29 | // placeholder
30 |
31 | @mixin placeholder{
32 | &::-webkit-input-placeholder {@content}
33 | &:-moz-placeholder {@content}
34 | &::-moz-placeholder {@content}
35 | &:-ms-input-placeholder {@content}
36 | }
37 |
38 | //====usages=====
39 | // @include placeholder {
40 | // font-style:italic;
41 | // color: white;
42 | // font-weight:100;
43 | // }
44 |
45 | // =====transform==============
46 |
47 | // generic transform
48 | @mixin transform($transforms) {
49 | -moz-transform: $transforms;
50 | -o-transform: $transforms;
51 | -ms-transform: $transforms;
52 | -webkit-transform: $transforms;
53 | transform: $transforms;
54 | }
55 | // rotate
56 | @mixin rotate ($deg) {
57 | @include transform(rotate(#{$deg}deg));
58 | }
59 |
60 | // scale
61 | @mixin scale($scale) {
62 | @include transform(scale($scale));
63 | }
64 | // translate
65 | @mixin translate ($x, $y) {
66 | @include transform(translate($x, $y));
67 | }
68 | // skew
69 | @mixin skew ($x, $y) {
70 | @include transform(skew(#{$x}deg, #{$y}deg));
71 | }
72 | //transform origin
73 | @mixin transform-origin ($origin) {
74 | moz-transform-origin: $origin;
75 | -o-transform-origin: $origin;
76 | -ms-transform-origin: $origin;
77 | -webkit-transform-origin: $origin;
78 | transform-origin: $origin;
79 | }
80 |
81 | // usages
82 | // .test {
83 | // @include skew(25,10);
84 | // @include transform-origin(top left);
85 | // @include rotate(60);
86 | // @include scale(2);
87 | // @include translate(5,5);
88 | // }
89 |
90 | // box-shadow
91 |
92 | @mixin box-shadow($top, $left, $blur, $color, $inset:"") {
93 |
94 | -webkit-box-shadow:$top $left $blur $color #{$inset};
95 | -moz-box-shadow:$top $left $blur $color #{$inset};
96 | box-shadow:$top $left $blur $color #{$inset};
97 | }
98 | // usages
99 | // .test{
100 | // @include box-shadow(inset, 0px, 1px, 1px, rgba(0, 0, 0, 0.5));
101 | // }
102 |
103 |
--------------------------------------------------------------------------------
/public/Content/scss/base/_variables.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | $base-color:#333;
5 |
6 | $base-font-size:16px;
7 |
8 | $base-font: 'Lato', sans-serif;
9 |
10 | $heading-font: 'Raleway', sans-serif;
11 |
12 | $font-bold:700;
13 |
14 | $theme-color:#ff6666;
15 |
16 | $secondary-color:#F7931D;
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/public/Content/scss/layouts/_footer.scss:
--------------------------------------------------------------------------------
1 |
2 | // FOOTER
3 |
4 | #aa-footer{
5 | background-color: #222;
6 | display: inline;
7 | float: left;
8 | width: 100%;
9 | .aa-footer-top{
10 | display: inline;
11 | float: left;
12 | padding: 50px 0;
13 | width: 100%;
14 | min-height: 100px;
15 | .aa-footer-top-area{
16 | display: inline;
17 | float: left;
18 | width: 100%;
19 | .aa-footer-widget{
20 | display: block;
21 | h3{
22 | color: #fff;
23 | }
24 | .aa-footer-nav{
25 | li{
26 | a{
27 | color: #888;
28 | @include transition(all 0.5s);
29 | &:hover,
30 | &:focus{
31 | color: #fff;
32 | }
33 | }
34 | }
35 | }
36 | address{
37 | p{
38 | margin-bottom: 5px;
39 | color: #888;
40 | span{
41 | margin-right: 5px;
42 | }
43 | }
44 | }
45 | .aa-footer-social{
46 | a{
47 | border: 1px solid #888;
48 | color: #888;
49 | display: inline-block;
50 | font-size: 18px;
51 | margin-right: 8px;
52 | padding: 2px 0;
53 | text-align: center;
54 | width: 35px;
55 | @include transition(all 0.5s);
56 | &:hover{
57 | color: #fff;
58 | border-color: #fff;
59 | }
60 | }
61 | }
62 | }
63 | }
64 | }
65 | .aa-footer-bottom{
66 | border-top: 1px solid #333;
67 | display: inline;
68 | float: left;
69 | padding: 15px 0;
70 | width: 100%;
71 | .aa-footer-bottom-area{
72 | display: inline;
73 | float: left;
74 | width: 100%;
75 | &>p{
76 | color: #888;
77 | display: inline-block;
78 | float: left;
79 | font-size: 14px;
80 | font-weight: bold;
81 | letter-spacing: 1px;
82 | margin-bottom: 0;
83 | a{
84 | color: #888;
85 | @include transition(all 0.5s);
86 | &:hover,
87 | &:focus{
88 | color: $theme-color;
89 | }
90 | }
91 | }
92 | .aa-footer-payment{
93 | float: right;
94 | span{
95 | color: #888;
96 | margin-left: 8px;
97 | &:hover{
98 | color: #fff;
99 | }
100 | }
101 | }
102 | }
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/public/Content/scss/layouts/_header.scss:
--------------------------------------------------------------------------------
1 |
2 | // HEADER
3 |
4 | /*---- Cartbox transition ----*/
5 |
6 | @-webkit-keyframes cartbox-transition {
7 | 33.33% {top: -13px;}
8 | 66.66% {top: -17px;}
9 | 100% {top: -15px;}
10 | }
11 |
12 |
13 |
14 | @keyframes cartbox-transition {
15 | 33.33% {top: -13px;}
16 | 66.66% {top: -17px;}
17 | 100% {top: -15px;}
18 | }
19 |
20 | #aa-header {
21 | display: inline;
22 | float: left;
23 | width: 100%;
24 | .aa-header-top{
25 | border-bottom: 1px solid #E8E8E8;
26 | display: inline;
27 | float: left;
28 | width: 100%;
29 | .aa-header-top-area{
30 | display: inline;
31 | float: left;
32 | width: 100%;
33 | }
34 | .aa-header-top-left{
35 | float: left;
36 | .aa-language{
37 | border-right: 1px solid #ccc;
38 | float: left;
39 | .btn{
40 | font-size: 12px;
41 | img{
42 | display: inline;
43 | height: 10px;
44 | margin-right: 5px;
45 | margin-top: -2px;
46 | width: 12px;
47 | }
48 | }
49 | .dropdown-menu{
50 | border-radius: 0;
51 | min-width: 110px;
52 | a{
53 | font-size: 12px;
54 | img{
55 | height: 10px;
56 | margin-right: 5px;
57 | margin-top: -2px;
58 | width: 12px;
59 | }
60 | }
61 | &:after, &:before {
62 | bottom: 100%;
63 | left: 50%;
64 | border: solid transparent;
65 | content: " ";
66 | height: 0;
67 | width: 0;
68 | position: absolute;
69 | pointer-events: none;
70 | }
71 |
72 |
73 | &:after{
74 | border-color: rgba(255, 255, 255, 0);
75 | border-bottom-color: #fff;
76 | border-width: 6px;
77 | margin-left: 0px;
78 | }
79 | &:before{
80 | border-color: rgba(221, 221, 221, 0);
81 | border-bottom-color: #ddd;
82 | border-width: 8px;
83 | margin-left: -2px;
84 | }
85 | }
86 | }
87 | .aa-currency{
88 | border-right: 1px solid #ccc;
89 | float: left;
90 | .btn{
91 | font-size: 12px;
92 | i{
93 | display: inline;
94 | font-size: 12px;
95 | margin-right: 3px;
96 | }
97 | }
98 | .dropdown-menu{
99 | border-radius: 0;
100 | min-width: 110px;
101 | a{
102 | font-size: 12px;
103 | i{
104 | display: inline;
105 | font-size: 12px;
106 | margin-right: 3px;
107 | }
108 | }
109 | &:after, &:before {
110 | bottom: 100%;
111 | left: 43%;
112 | border: solid transparent;
113 | content: " ";
114 | height: 0;
115 | width: 0;
116 | position: absolute;
117 | pointer-events: none;
118 | }
119 |
120 |
121 | &:after{
122 | border-color: rgba(255, 255, 255, 0);
123 | border-bottom-color: #fff;
124 | border-width: 6px;
125 | margin-left: 0px;
126 | }
127 | &:before{
128 | border-color: rgba(221, 221, 221, 0);
129 | border-bottom-color: #ddd;
130 | border-width: 8px;
131 | margin-left: -2px;
132 | }
133 | }
134 | }
135 | .cellphone{
136 | border-right: 1px solid #ddd;
137 | float: left;
138 | p{
139 | font-size: 14px;
140 | margin-bottom: 0;
141 | padding: 5px 10px;
142 |
143 | span{
144 | margin-right: 5px;
145 | }
146 | }
147 | }
148 | }
149 | .aa-header-top-right{
150 | float: right;
151 | .aa-head-top-nav-right{
152 | display: inline-block;
153 | text-align: right;
154 | li{
155 | display: inline-block;
156 | text-align: right;
157 | a{
158 | display: inline-block;
159 | color: $base-color;
160 | border-right: 1px solid #ddd;
161 | font-size: 14px;
162 | padding: 5px 8px;
163 | }
164 | }
165 | }
166 | }
167 | }
168 | .aa-header-bottom{
169 | float: left;
170 | display: inline;
171 | width: 100%;
172 | padding: 20px 0;
173 | .aa-header-bottom-area{
174 | float: left;
175 | display: inline;
176 | width: 100%;
177 | .aa-logo{
178 | float: left;
179 | margin-top: 4px;
180 | a{
181 | font-family:$heading-font;
182 | font-size: 28px;
183 | &>span{
184 | color: $theme-color;
185 | display: inline-block;
186 | float: left;
187 | font-size: 50px;
188 | }
189 | p{
190 | display: inline-block;
191 | float: left;
192 | font-weight: bold;
193 | margin-bottom: 0;
194 | margin-left: 5px;
195 | margin-top: -5px;
196 | span{
197 | display: block;
198 | font-size: 12px;
199 | font-weight: normal;
200 | letter-spacing: 1.5px;
201 | text-transform: uppercase;
202 | }
203 | }
204 | strong{
205 | color: $theme-color;
206 | }
207 | }
208 | }
209 | .aa-search-box{
210 | float: right;
211 | margin-right: 5%;
212 | margin-top: 13px;
213 | position: relative;
214 | width: 500px;
215 | input[type="text"]{
216 | border: 1px solid #ddd;
217 | color: #555;
218 | font-size: 14px;
219 | font-family:$heading-font;
220 | height: 40px;
221 | padding: 10px 55px 10px 10px;
222 | width: 100%;
223 | }
224 | button{
225 | background-color: #ff6666;
226 | border: medium none;
227 | color: #fff;
228 | height: 100%;
229 | position: absolute;
230 | right: 0;
231 | top: 0;
232 | width: 50px;
233 | @include transition(all 0.5s);
234 | &:hover{
235 | opacity: 0.8;
236 | }
237 | }
238 | }
239 | }
240 | .aa-cartbox{
241 | float: right;
242 | text-align: center;
243 | position: relative;
244 | padding-bottom: 10px;
245 |
246 | .aa-cart-link{
247 | color: #ff6666;
248 | font-size: 22px;
249 | position: relative;
250 | width: 120px;
251 | height: auto;
252 | display: block;
253 | .fa-shopping-basket{
254 | z-index: 99;
255 | position: relative;
256 | }
257 | .aa-cart-title{
258 | color: #555;
259 | display: block;
260 | font-size: 14px;
261 | }
262 | .aa-cart-notify{
263 | background-color: #fff;
264 | border: 1px solid #ff6666;
265 | border-radius: 50%;
266 | color: #ff6666;
267 | font-size: 12px;
268 | font-weight: bold;
269 | padding: 2px 9px;
270 | position: absolute;
271 | right: 39%;
272 | top: -15px;
273 | z-index: 10;
274 | -webkit-animation-name: cartbox-transition;
275 | -webkit-animation-duration: 2s;
276 | -webkit-animation-timing-function: linear;
277 | -webkit-animation-iteration-count: infinite;
278 | animation-name: cartbox-transition;
279 | animation-duration: 2s;
280 | animation-timing-function: linear;
281 | animation-iteration-count: infinite;
282 | &:after, &:before {
283 | top: 100%;
284 | left: 50%;
285 | border: solid transparent;
286 | content: " ";
287 | height: 0;
288 | width: 0;
289 | position: absolute;
290 | pointer-events: none;
291 | }
292 |
293 |
294 | &:after{
295 | border-color: rgba(255, 102, 102, 0);
296 | border-top-color: #ff6666;
297 | border-width: 5px;
298 | margin-left: -5px;
299 | }
300 | &:before{
301 | border-color: rgba(0, 0, 0, 0);
302 | border-width: 6px;
303 | margin-left: -6px;
304 | }
305 | }
306 | }
307 | .aa-cartbox-summary{
308 | background-color: #fff;
309 | border: 1px solid #E9E9E9;
310 | display: none;
311 | padding: 20px;
312 | position: absolute;
313 | right: 0;
314 | top: 100%;
315 | width: 300px;
316 | z-index: 9999;
317 | &:after, &:before {
318 | bottom: 100%;
319 | left: 81%;
320 | border: solid transparent;
321 | content: " ";
322 | height: 0;
323 | width: 0;
324 | position: absolute;
325 | pointer-events: none;
326 | }
327 |
328 | &:after {
329 | border-color: rgba(255, 255, 255, 0);
330 | border-bottom-color: #fff;
331 | border-width: 10px;
332 | margin-left: -10px;
333 | }
334 | &:before {
335 | border-color: rgba(233, 233, 233, 0);
336 | border-bottom-color: #e9e9e9;
337 | border-width: 11px;
338 | margin-left: -11px;
339 | }
340 |
341 |
342 | ul{
343 | li{
344 | border-bottom: 1px solid #e2e2e2;
345 | display: block;
346 | float: left;
347 | margin-bottom: 15px;
348 | padding-bottom: 15px;
349 | width: 100%;
350 | position: relative;
351 | &:last-child{
352 | border: none;
353 | margin-bottom: 0px;
354 | }
355 | .aa-cartbox-img{
356 | display: block;
357 | float: left;
358 | height: 95px;
359 | width: 80px;
360 | img{
361 | width: 100%;
362 | height: 100%;
363 | }
364 | }
365 | .aa-cartbox-info{
366 | display: block;
367 | float: left;
368 | margin-left: 10px;
369 | width: 55%;
370 | h4{
371 | font-size: 14px;
372 | color: $base-color;
373 | margin-bottom: 20px;
374 | margin-top: 0;
375 | a{
376 | color: $base-color;
377 | letter-spacing: 0.5px;
378 | }
379 | }
380 | p{
381 | font-size: 16px;
382 | }
383 | }
384 | .aa-remove-product{
385 | border: 1px solid transparent;
386 | border-radius: 50%;
387 | color: #c0c0c0;
388 | font-size: 12px;
389 | height: 20px;
390 | line-height: 17px;
391 | position: absolute;
392 | right: 0;
393 | top: 30%;
394 | width: 20px;
395 | @include transition(all 0.5s);
396 | &:hover,
397 | &:focus{
398 | border-color: #ff6666;
399 | color: #333;
400 | }
401 | }
402 | .aa-cartbox-total-title{
403 | float: left;
404 | font-weight: bold;
405 | font-size: 16px;
406 | font-family: $base-font;
407 | letter-spacing: 0.5px;
408 |
409 | }
410 | .aa-cartbox-total-price{
411 | float: right;
412 | font-weight: bold;
413 | font-size: 16px;
414 | font-family: $base-font;
415 | letter-spacing: 0.5px;
416 | }
417 | }
418 | }
419 | }
420 | }
421 | }
422 |
423 |
424 |
425 | }
426 |
--------------------------------------------------------------------------------
/public/Content/scss/layouts/_nav.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | #menu{
5 | background-color: #ff6666;
6 | display: inline;
7 | float: left;
8 | width: 100%;
9 | .menu-area{
10 | float: left;
11 | display: inline;
12 | width: 100%;
13 | .navbar-default{
14 | background-color: transparent;
15 | border: medium none;
16 | border-radius: 0;
17 | margin-bottom: 0;
18 | min-height: auto;
19 | .navbar-nav {
20 | display: inline-block;
21 | float: left;
22 | margin: 0;
23 | text-align: center;
24 | width: 100%;
25 | li{
26 | a{
27 | color: #fff;
28 | font-size: 16px;
29 | padding: 10px 15px;
30 | @include transition(all 0.5s);
31 | // border: 1px solid transparent;
32 | &:hover{
33 | // color: $theme-color;
34 | // background-color: #FFF;
35 | // border: 1px solid $theme-color;
36 | }
37 | }
38 | }
39 | .open{
40 | a{
41 | background-color: #fff;
42 | color: $theme-color;
43 | }
44 | }
45 | .dropdown-menu{
46 | li{
47 | a{
48 | padding: 8px 15px;
49 | color: $theme-color;
50 | &:hover, &:focus{
51 | color: #fff;
52 | background-color: $theme-color;
53 | }
54 | }
55 | }
56 | .dropdown-header {
57 | color: #555;
58 | display: block;
59 | font-size: 16px;
60 | padding: 3px 20px;
61 | text-transform: uppercase;
62 |
63 | }
64 | }
65 | }
66 | }
67 | }
68 | }
--------------------------------------------------------------------------------
/public/Content/scss/modules/_buttons.scss:
--------------------------------------------------------------------------------
1 | .aa-primary-btn{
2 | font-size: 16px;
3 | padding: 10px 30px;
4 | border: 1px solid #e9e9e9;
5 | margin-top: 10px;
6 | display: inline-block;
7 | @include transition(0.5s);
8 |
9 | &:hover,
10 | &:focus{
11 | color: $theme-color;
12 | text-decoration: none;
13 | border-color: $theme-color;
14 | }
15 | span{
16 | margin-right: 5px;
17 | }
18 | }
19 | .aa-secondary-btn{
20 | background-color: #fff;
21 | color: $theme-color;
22 | font-size: 16px;
23 | padding: 10px 22px;
24 | // border: 1px solid #fff;
25 | margin-top: 10px;
26 | display: inline-block;
27 | @include border-radius(4px);
28 | @include transition(0.5s);
29 |
30 | &:hover, &:focus{
31 | background-color: $theme-color;
32 | text-decoration: none;
33 | color: #fff;
34 | // border-radius: 0px;
35 | }
36 | }
37 | .aa-browse-btn{
38 | background-color: $theme-color;
39 | display: inline-block;
40 | font-size: 16px;
41 | padding: 12px 18px;
42 | color: #fff;
43 | border: 1px solid $theme-color;
44 | @include transition(all 0.5s);
45 | span{
46 | margin-left: 5px;
47 | }
48 | &:hover,
49 | &:focus{
50 | background-color: #fff;
51 | color: $theme-color;
52 |
53 | }
54 | }
55 | .aa-add-to-cart-btn{
56 | border: 1px solid #ccc;
57 | color: #555;
58 | display: inline-block;
59 | font-size: 14px;
60 | font-weight: bold;
61 | letter-spacing: 0.5px;
62 | margin-top: 5px;
63 | padding: 10px 15px;
64 | text-transform: uppercase;
65 | transition: all 0.5s ease 0s;
66 | span{
67 | margin-right: 5px;
68 | }
69 | &:hover,
70 | &:focus{
71 | color: $theme-color;
72 | border-color:$theme-color;
73 | }
74 | }
75 | .aa-filter-btn{
76 | background-color: #ff6666;
77 | border: 1px solid #ff6666;
78 | color: #fff;
79 | font-size: 15px;
80 | height: 30px;
81 | width: 80px;
82 | }
83 | .aa-cart-view-btn{
84 | float: right;
85 | background-color: $theme-color;
86 | border: none;
87 | color: #fff;
88 | font-size: 16px;
89 | font-weight: 700;
90 | letter-spacing: 2px;
91 | padding: 15px 30px;
92 | text-align: center;
93 | text-decoration: none;
94 | text-transform: uppercase;
95 | @include transition(all 0.5s);
96 | &:hover{
97 | background-color: #000;
98 | color: #fff;
99 | }
100 | }
--------------------------------------------------------------------------------
/public/Content/scss/modules/_typography.scss:
--------------------------------------------------------------------------------
1 |
2 | // TYPOGRAPHY
3 |
4 | ul{
5 | padding: 0;
6 | margin: 0;
7 | list-style: none;
8 | }
9 | a{
10 | text-decoration: none;
11 | color:$base-color;
12 | }
13 | a:hover,
14 | a:focus{
15 | outline: none;
16 | text-decoration: none;
17 | }
18 | h1,h2,h3,h4,h5,h6{
19 | font-family:$heading-font;
20 | }
21 | h2 {
22 | color: $theme-color;
23 | font-size: 30px;
24 | font-weight:$font-bold;
25 | line-height: 40px;
26 | margin: 0;
27 | padding-bottom: 10px;
28 | }
29 | img{
30 | border:none;
31 | }
32 |
--------------------------------------------------------------------------------
/public/Content/scss/spinner.scss:
--------------------------------------------------------------------------------
1 | .spinner.lds-ring {
2 | position: fixed;
3 | top: 50%;
4 | left: 50%;
5 | margin-left: -32px;
6 | margin-top: -32px;
7 | width: 64px;
8 | height: 64px;
9 | z-index: 10;
10 | border-radius: 5px;
11 | background-color: #000;
12 |
13 | div {
14 | box-sizing: border-box;
15 | display: block;
16 | position: absolute;
17 | width: 51px;
18 | height: 51px;
19 | margin: 6px;
20 | border: 6px solid #fff;
21 | border-radius: 50%;
22 | animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
23 | border-color: #fff transparent transparent transparent;
24 | &:nth-child(1) {
25 | animation-delay: -0.45s;
26 | }
27 | &:nth-child(2) {
28 | animation-delay: -0.3s;
29 | }
30 | &:nth-child(3) {
31 | animation-delay: -0.15s;
32 | }
33 | }
34 |
35 | @keyframes lds-ring {
36 | 0% {
37 | transform: rotate(0deg);
38 | }
39 |
40 | 100% {
41 | transform: rotate(360deg);
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/public/Content/scss/style.scss:
--------------------------------------------------------------------------------
1 | /*
2 | Template Name: Daily Shop
3 | Author : MarkUps.io
4 | Author URI: http://www.markups.io/
5 | Version: 1.0
6 |
7 | */
8 |
9 |
10 | /* BASE - Base tyles, Variables, Mixins, etc. */
11 |
12 |
13 | @import 'base/_variables.scss';
14 | @import 'base/_mixins.scss';
15 | @import 'base/_base.scss';
16 |
17 | /* MODULES - Individual site components */
18 |
19 | @import 'modules/_typography.scss';
20 | @import 'modules/_buttons.scss';
21 |
22 |
23 |
24 | /* LAYOUTS - Page layout styles */
25 |
26 |
27 |
28 | /*==================
29 | HEADER SECTION
30 | ====================*/
31 |
32 | @import 'layouts/_header.scss';
33 |
34 | /*==================
35 | NAVBAR SECTION
36 | ====================*/
37 |
38 | @import 'layouts/_nav.scss';
39 |
40 | /* ALL SECTION */
41 |
42 | @import 'modules/_sections.scss';
43 |
44 | /*==================
45 | FOOTER SECTION
46 | ====================*/
47 |
48 | @import 'layouts/_footer.scss';
49 |
50 | /*==================
51 | RESPONSIVE DESIGN
52 | ====================*/
53 |
54 | @import 'modules/_responsive.scss';
55 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ankitkanojia/dailyshop_react_redux/763fbcc288fdb017bb6403e83249e1677d36b146/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
11 |
15 |
16 |
25 | Daily Shop
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
130 |
131 |
132 |
133 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 40vmin;
8 | pointer-events: none;
9 | }
10 |
11 | .App-header {
12 | background-color: #282c34;
13 | min-height: 100vh;
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | justify-content: center;
18 | font-size: calc(10px + 2vmin);
19 | color: white;
20 | }
21 |
22 | .App-link {
23 | color: #61dafb;
24 | }
25 |
26 | @keyframes App-logo-spin {
27 | from {
28 | transform: rotate(0deg);
29 | }
30 | to {
31 | transform: rotate(360deg);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './App.css';
3 | import Loader from './Containers/Loader';
4 | import Header from './Containers/Header';
5 | import Menu from './Containers/Menu';
6 | import Footer from './Containers/Footer';
7 | import Main from './Containers/Main';
8 |
9 | class App extends Component {
10 | render() {
11 | return (
12 |
13 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 | }
25 |
26 | export default App;
27 |
--------------------------------------------------------------------------------
/src/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(
15 |
16 | {title} {menuItem.submenu && }
17 |
18 |
20 | );
21 | } else {
22 | return {title} ;
23 | }
24 | };
25 |
26 | render() {
27 | let options = [];
28 | this.props.config.map((item, index) => {
29 | options.push(this.getMenuItem(item, index));
30 | });
31 |
32 | if (this.props.submenu && this.props.submenu === true)
33 | return
6 |
28 | )
29 | }
30 | }
31 |
32 | export default Brand;
--------------------------------------------------------------------------------
/src/Containers/Cart.js:
--------------------------------------------------------------------------------
1 |
2 | import React, { Component } from 'react';
3 | import PropTypes from 'prop-types';
4 |
5 | class Cart extends Component {
6 | static propTypes = {
7 | product: PropTypes.object.isRequired,
8 | removeFromCart: PropTypes.func.isRequired
9 | };
10 |
11 | render() {
12 | const {product} = this.props;
13 | return (
14 |
15 | )
21 | }
22 | }
23 |
24 | export default Cart;
25 |
--------------------------------------------------------------------------------
/src/Containers/Filter.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import SelectControl from './../Components/SelectControl';
5 | import { updateSort } from './../Redux/Actions/Filter';
6 |
7 | const sortBy = ["Default", "Name", "Price", "Date"];
8 | const pageSizes = [9 , 18, 36];
9 |
10 | class Filter extends Component {
11 |
12 | static propTypes = {
13 | updateSort: PropTypes.func.isRequired,
14 | sortOption: PropTypes.string.isRequired,
15 | handlePageSizeChange : PropTypes.func.isRequired,
16 | pageSize: PropTypes.number
17 | }
18 |
19 | state = {
20 | pageSize : 9
21 | }
22 |
23 | handlePageSizeChange(e) {
24 | this.setState({
25 | pageSize: e.target.value
26 | });
27 | this.props.handlePageSizeChange(e.target.value);
28 | }
29 |
30 |
31 | handleSort = e => {
32 | this.props.updateSort(e.target.value);
33 | }
34 |
35 | render() {
36 | return (
37 |
38 |
49 | )
50 | }
51 | }
52 |
53 | const mapStateToProps = state => ({
54 | sortOption: state.filter.sortOption
55 | });
56 |
57 | export default connect(
58 | mapStateToProps,
59 | { updateSort }
60 | )(Filter);
61 |
--------------------------------------------------------------------------------
/src/Containers/Footer.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Footer extends Component {
4 | render() {
5 | return (
6 |
7 | {window.location.pathname === "/" &&
8 |
9 | }
24 |
113 |
135 |
136 | )
137 | }
138 | }
139 |
140 | export default Footer;
--------------------------------------------------------------------------------
/src/Containers/Header.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Cart from './Cart';
3 | import { connect } from 'react-redux';
4 | import PropTypes from 'prop-types';
5 | import { removeFromCart } from './../Redux/Actions/CartProducts';
6 | import { Link } from 'react-router-dom';
7 |
8 | class Header extends Component {
9 |
10 | static propTypes = {
11 | cartProducts: PropTypes.array.isRequired,
12 | removeFromCart : PropTypes.func.isRequired
13 | };
14 |
15 | render() {
16 |
17 | const cartSection = this.props.cartProducts.map(p => {
18 | return (
19 |
25 |
26 |
98 |
99 | )
100 | }
101 | }
102 |
103 | const mapStateToProps = state => ({
104 | cartProducts: state.cart.cartProducts
105 | });
106 |
107 | export default connect(mapStateToProps, { removeFromCart })(Header);
--------------------------------------------------------------------------------
/src/Containers/HeaderSlider.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { fetchSliderDetails } from './../Redux/Actions/StaticItems';
3 | import { connect } from 'react-redux';
4 | import PropTypes from 'prop-types';
5 |
6 | class HeaderSlider extends Component {
7 |
8 | static propTypes = {
9 | fetchSliderDetails: PropTypes.func.isRequired,
10 | sliderdetails: PropTypes.array.isRequired
11 | }
12 |
13 | componentDidMount() {
14 | this.props.fetchSliderDetails();
15 | const script = document.createElement("script");
16 | script.type = 'text/javascript';
17 | script.async = true;
18 | script.src = "Content/js/sequence-theme.modern-slide-in.js";
19 | document.body.appendChild(script);
20 | }
21 |
22 | render() {
23 | return (
24 |
52 | )
53 | }
54 | }
55 |
56 | const mapStateToProps = state => ({
57 | sliderdetails: state.staticitems.sliderdetails,
58 | });
59 |
60 | export default connect(mapStateToProps, { fetchSliderDetails })(HeaderSlider);
--------------------------------------------------------------------------------
/src/Containers/Loader.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Loader extends Component {
4 | render() {
5 | return (
76 |
77 | 
78 |
90 |
91 |
183 |
184 | )
185 | }
186 | }
187 |
188 | const mapStateToProps = state => ({
189 | blogs: state.staticitems.blogs
190 | });
191 |
192 | export default connect(mapStateToProps, {fetchBlogs})(Blog);
--------------------------------------------------------------------------------
/src/Pages/BlogDetail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class BlogDetail extends Component {
4 |
5 | constructor(props) {
6 | super(props);
7 |
8 | this.state = {
9 | currentBlog : props.location.state.blog
10 | }
11 | }
12 |
13 | filterByCategory = (categoryName) => {
14 | console.log(categoryName.trim());
15 | }
16 |
17 | filterByTag = (tagName) => {
18 | console.log(tagName.trim());
19 | }
20 |
21 | openBlogDetail = (blog) => {
22 | console.log(blog);
23 | this.setState = {
24 | currentBlog : blog
25 | }
26 | }
27 |
28 | render() {
29 |
30 | const { tagsCollection, recentblogs, categories } = this.props.location.state
31 |
32 | return (
33 |
34 |
35 |
121 |
122 | )
123 | }
124 | }
125 |
126 | export default BlogDetail;
--------------------------------------------------------------------------------
/src/Pages/Checkout.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { removeFromCart, updateProductCount } from './../Redux/Actions/CartProducts';
5 | import InputControl from './../Components/InputControl';
6 |
7 | class Checkout extends Component {
8 | static propTypes = {
9 | cartProducts: PropTypes.array.isRequired,
10 | removeFromCart: PropTypes.func.isRequired,
11 | updateProductCount: PropTypes.func.isRequired
12 | };
13 |
14 | state = {
15 | cartTotal: 0
16 | };
17 |
18 | calculateTotal(){
19 | let newCartTotal = 0;
20 | this.props.cartProducts.map(p => {
21 | newCartTotal = newCartTotal + (p.discountedprice * p.count);
22 | })
23 | this.setState({
24 | cartTotal: newCartTotal
25 | });
26 | this.forceUpdate();
27 | }
28 |
29 | componentDidMount(){
30 | this.calculateTotal();
31 | }
32 |
33 | changeQTY = idx => evt => {
34 | var updatedArray = this.props.cartProducts.find(m => m.id === idx);
35 | updatedArray.count = evt.target.value;
36 | this.props.updateProductCount(updatedArray);
37 | this.calculateTotal();
38 | };
39 |
40 | removeFromCartCalculations(p) {
41 | let newCartTotal = this.state.cartTotal - (p.discountedprice * p.count);
42 | this.setState({
43 | cartTotal: newCartTotal
44 | });
45 | this.props.removeFromCart(p);
46 | }
47 |
48 | render() {
49 | const cartSection = this.props.cartProducts.map((p) => {
50 | p.producttotal = p.discountedprice * p.count;
51 | //this.state.cartTotal = this.state.cartTotal + p.producttotal;
52 | return (
53 | this.removeFromCartCalculations(p)} className="remove" href="javascript:void(0)">
54 | {p.title}
56 | {p.currency}{p.discountedprice}
57 |
58 |
65 | {p.currency}{p.producttotal}
66 | )
67 | })
68 |
69 | return (
70 |
71 | 
72 |
84 |
85 |
134 | )
135 | }
136 | }
137 |
138 |
139 | const mapStateToProps = state => ({
140 | cartProducts: state.cart.cartProducts,
141 | });
142 |
143 | export default connect(mapStateToProps, { removeFromCart, updateProductCount })(Checkout);
--------------------------------------------------------------------------------
/src/Pages/Contact.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Contact extends Component {
4 | render() {
5 | return (
6 |
7 |
8 |
9 |
20 |
21 |
22 |
23 |
86 |
87 | )
88 | }
89 | }
90 |
91 | export default Contact;
--------------------------------------------------------------------------------
/src/Pages/Page404.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | class Page404 extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
22 |
23 | )
24 | }
25 | }
26 |
27 | export default Page404;
--------------------------------------------------------------------------------
/src/Pages/Registration.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Register extends Component {
4 | render() {
5 | return (
6 |
7 |
8 |
9 |
20 |
21 |
22 |
23 |
60 |
61 | )
62 | }
63 | }
64 |
65 | export default Register;
--------------------------------------------------------------------------------
/src/Pages/Wishlist.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { addToCart, removeFromWishList } from './../Redux/Actions/CartProducts';
5 |
6 | class Wishlist extends Component {
7 |
8 | static propTypes = {
9 | cartProducts: PropTypes.array.isRequired,
10 | wishListProducts: PropTypes.array.isRequired,
11 | addToCart: PropTypes.func.isRequired,
12 | removeFromWishList: PropTypes.func.isRequired
13 | };
14 |
15 | handleAddToWishList(product) {
16 |
17 | this.props.removeFromWishList(product);
18 |
19 | let productAlreadyInCart = false;
20 | this.props.cartProducts.forEach(cp => {
21 | if (cp.id === product.id) {
22 | productAlreadyInCart = true;
23 | }
24 | });
25 |
26 | if (!productAlreadyInCart) {
27 | this.props.addToCart(product);
28 | }
29 | }
30 |
31 | render() {
32 | const wishListCart = this.props.wishListProducts.map(p => {
33 | return (
34 |
35 | this.props.removeFromWishList(p)} className="remove" href="javascript:void(0)">
36 | {p.title}
38 | {p.currency}{p.discountedprice}
39 | In Stock
40 | this.handleAddToWishList(p)} href="javascript:void(0)" className="aa-add-to-cart-btn">Add To Cart
41 |
42 | )
43 | });
44 |
45 | return (
46 |
47 |
48 |
60 |
61 |
96 | )
97 | }
98 | }
99 |
100 | const mapStateToProps = state => ({
101 | wishListProducts: state.cart.wishListProducts,
102 | cartProducts: state.cart.cartProducts,
103 | });
104 |
105 | export default connect(mapStateToProps, { addToCart, removeFromWishList })(Wishlist);
--------------------------------------------------------------------------------
/src/Redux/Actions/CartProducts.js:
--------------------------------------------------------------------------------
1 | import { ADD_PRODUCT , REMOVE_PRODUCT, ADD_WISHLIST, REMOVE_WISHLIST, UPDATE_PRODUCTCOUNT } from './../ActionTypes';
2 |
3 | export function addToCart(Product) {
4 | return dispatch => {
5 | return dispatch({
6 | type: ADD_PRODUCT,
7 | payload: Product
8 | });
9 | }
10 | };
11 |
12 | export function removeFromCart(Product) {
13 | return dispatch => {
14 | return dispatch({
15 | type: REMOVE_PRODUCT,
16 | payload: Product
17 | });
18 | }
19 | };
20 |
21 | export function addToWishList(Product) {
22 | return dispatch => {
23 | return dispatch({
24 | type: ADD_WISHLIST,
25 | payload: Product
26 | });
27 | }
28 | };
29 |
30 | export function removeFromWishList(Product) {
31 | return dispatch => {
32 | return dispatch({
33 | type: REMOVE_WISHLIST,
34 | payload: Product
35 | });
36 | }
37 | };
38 |
39 | export function updateProductCount(Product) {
40 | return dispatch => {
41 | return dispatch({
42 | type: UPDATE_PRODUCTCOUNT,
43 | payload: Product
44 | });
45 | }
46 | };
--------------------------------------------------------------------------------
/src/Redux/Actions/Filter.js:
--------------------------------------------------------------------------------
1 |
2 | import { UPDATE_SORT } from '../ActionTypes';
3 |
4 | export function updateSort(sortOption) {
5 | return dispatch => {
6 | return dispatch({
7 | type: UPDATE_SORT,
8 | payload: sortOption
9 | });
10 | }
11 | };
--------------------------------------------------------------------------------
/src/Redux/Actions/Product.js:
--------------------------------------------------------------------------------
1 |
2 | import { FETCH_PRODUCTS_CATEGORY } from '../ActionTypes';
3 | import { ProductCatalog } from './../../Constants/Common';
4 |
5 | const compare = {
6 | Price: (a, b) => {
7 | if (a.discountedprice < b.discountedprice) return -1;
8 | if (a.discountedprice > b.discountedprice) return 1;
9 | return 0;
10 | },
11 | Date: (a, b) => {
12 | if (a.createdDate > b.createdDate) return -1;
13 | if (a.createdDate < b.createdDate) return 1;
14 | return 0;
15 | },
16 | Name: (a, b) => {
17 | if (a.title.toLowerCase() > b.title.toLowerCase()) return -1;
18 | if (a.title.toLowerCase() < b.title.toLowerCase()) return 1;
19 | return 0;
20 | }
21 | };
22 |
23 | export const reducerProducts = (categoryid , sortBy , lowerPrice, upperPrice) => {
24 | let productList = ProductCatalog.filter(m => m.categoryid === categoryid);
25 |
26 | if (!!sortBy) {
27 | productList = productList.sort(compare[sortBy]);
28 | }
29 |
30 | if (!!lowerPrice && !!upperPrice) {
31 | productList = productList.filter(m => m.discountedprice >= lowerPrice && m.discountedprice <= upperPrice);
32 | }
33 |
34 | return dispatch => {
35 | return dispatch({
36 | type: FETCH_PRODUCTS_CATEGORY,
37 | payload: productList
38 | });
39 | }
40 | };
--------------------------------------------------------------------------------
/src/Redux/Actions/StaticItems.js:
--------------------------------------------------------------------------------
1 | import { FETCH_MENU, FETCH_PRODUCTS, FETCH_STATICBLOGS, FETCH_STATICTESTIMONIALS, FETCH_STATICSLIDER } from './../ActionTypes';
2 | import { BlogDetails, Testimonials, SliderDetails, Menus, ProductCatalog } from './../../Constants/Common';
3 |
4 | export const fetchMenu = () => dispatch => {
5 | return dispatch({
6 | type: FETCH_MENU,
7 | payload: Menus
8 | });
9 | };
10 |
11 | export const fetchProducts = () => dispatch => {
12 | return dispatch({
13 | type: FETCH_PRODUCTS,
14 | payload: ProductCatalog
15 | });
16 | };
17 |
18 | export const fetchBlogs = () => dispatch => {
19 | return dispatch({
20 | type: FETCH_STATICBLOGS,
21 | payload: BlogDetails
22 | });
23 | };
24 |
25 | export const fetchTestimonials = () => dispatch => {
26 | return dispatch({
27 | type: FETCH_STATICTESTIMONIALS,
28 | payload: Testimonials
29 | });
30 | };
31 |
32 | export const fetchSliderDetails = () => dispatch => {
33 | return dispatch({
34 | type: FETCH_STATICSLIDER,
35 | payload: SliderDetails
36 | });
37 | };
38 |
--------------------------------------------------------------------------------
/src/Redux/Reducers/CartProducts.js:
--------------------------------------------------------------------------------
1 | import { ADD_PRODUCT, REMOVE_PRODUCT, ADD_WISHLIST, REMOVE_WISHLIST, UPDATE_PRODUCTCOUNT } from '../ActionTypes';
2 |
3 | const initialState = {
4 | cartProducts: [],
5 | wishListProducts: []
6 | }
7 |
8 | const reducerCart = (state = initialState, action) => {
9 | switch (action.type) {
10 | case ADD_PRODUCT:
11 | return {
12 | ...state,
13 | cartProducts: state.cartProducts.concat(action.payload)// [...state.cartProducts, action.payload]
14 | };
15 | case REMOVE_PRODUCT:
16 | return {
17 | ...state,
18 | cartProducts: state.cartProducts.filter(item => item !== action.payload)
19 | };
20 | case UPDATE_PRODUCTCOUNT:
21 | return {
22 | ...state,
23 | cartProducts: state.cartProducts.map(
24 | (content, i) => content.id === action.payload.id ? {...content, count: action.payload.count}
25 | : content)
26 | };
27 | case ADD_WISHLIST:
28 | return {
29 | ...state,
30 | wishListProducts: state.wishListProducts.concat(action.payload)// [...state.cartProducts, action.payload]
31 | };
32 | case REMOVE_WISHLIST:
33 | return {
34 | ...state,
35 | wishListProducts: state.wishListProducts.filter(item => item !== action.payload)
36 | };
37 | default:
38 | return state;
39 | }
40 | }
41 |
42 | export default reducerCart;
43 |
--------------------------------------------------------------------------------
/src/Redux/Reducers/Filter.js:
--------------------------------------------------------------------------------
1 |
2 | import { UPDATE_SORT } from './../ActionTypes';
3 |
4 | const initialState = {
5 | sortOption: "Default"
6 | }
7 |
8 | const reducerSort = (state = initialState, action) => {
9 | switch (action.type) {
10 | case UPDATE_SORT:
11 | return {
12 | ...state,
13 | sortOption: action.payload
14 | };
15 | default:
16 | return state;
17 | }
18 | }
19 |
20 | export default reducerSort;
--------------------------------------------------------------------------------
/src/Redux/Reducers/Product.js:
--------------------------------------------------------------------------------
1 |
2 | import { FETCH_PRODUCTS_CATEGORY } from './../ActionTypes';
3 |
4 | const initialState = {
5 | products: [],
6 | }
7 |
8 | const reducerProducts = (state = initialState, action) => {
9 | switch (action.type) {
10 | case FETCH_PRODUCTS_CATEGORY:
11 | return {
12 | ...state,
13 | products: action.payload
14 | };
15 | default:
16 | return state;
17 | }
18 | }
19 |
20 | export default reducerProducts;
--------------------------------------------------------------------------------
/src/Redux/Reducers/StaticItems.js:
--------------------------------------------------------------------------------
1 | import { FETCH_STATICBLOGS, FETCH_STATICTESTIMONIALS, FETCH_STATICSLIDER, FETCH_PRODUCTS, FETCH_MENU , UPDATE_PRODUCTWISHLISTFLAG } from '../ActionTypes';
2 |
3 | const initialState = {
4 | blogs: [],
5 | testimonials: [],
6 | sliderdetails: [],
7 | products: [],
8 | menu: []
9 | }
10 |
11 | const reducerStaticItems = (state = initialState, action) => {
12 | switch (action.type) {
13 | case FETCH_MENU:
14 | return {
15 | ...state,
16 | menu: action.payload
17 | };
18 | case FETCH_PRODUCTS:
19 | return {
20 | ...state,
21 | products: action.payload
22 | };
23 | case UPDATE_PRODUCTWISHLISTFLAG:
24 | return {
25 | ...state,
26 | products: state.products.map(
27 | (content, i) => content.id === action.payload.id ? {...content, isWishList : action.payload.isWishList}
28 | : content)
29 | };
30 | case FETCH_STATICBLOGS:
31 | return {
32 | ...state,
33 | blogs: action.payload
34 | };
35 | case FETCH_STATICTESTIMONIALS:
36 | return {
37 | ...state,
38 | testimonials: action.payload
39 | };
40 | case FETCH_STATICSLIDER:
41 | return {
42 | ...state,
43 | sliderdetails: action.payload
44 | };
45 | default:
46 | return state;
47 | }
48 | }
49 |
50 | export default reducerStaticItems;
--------------------------------------------------------------------------------
/src/containers/main.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Switch, Route } from 'react-router-dom';
3 | import Home from '../Pages/Home';
4 | import Wishlist from '../Pages/Wishlist';
5 | import Checkout from '../Pages/Checkout';
6 | import ProductDetails from '../Pages/ProductDetails';
7 | import Products from '../Pages/Products';
8 | import Blog from '../Pages/Blog';
9 | import BlogDetail from '../Pages/BlogDetail';
10 | import Registration from '../Pages/Registration';
11 | import Page404 from '../Pages/Page404';
12 | import Contact from '../Pages/Contact';
13 |
14 | const Main = () => (
15 |
16 |
17 |
27 | )
28 |
29 | export default Main;
30 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | }
10 |
11 | code {
12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
13 | monospace;
14 | }
15 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import { Provider } from 'react-redux';
6 | import {createStore , applyMiddleware} from 'redux';
7 | import thunk from "redux-thunk";
8 | import * as serviceWorker from './serviceWorker';
9 | import { BrowserRouter } from 'react-router-dom';
10 | import RootReducer from './../src/Redux/RootReducer';
11 |
12 | const store = createStore(
13 | RootReducer,
14 | applyMiddleware(thunk)
15 | );
16 |
17 | ReactDOM.render(
18 |
19 |
20 |
22 | , document.getElementById('root'));
23 |
24 | // If you want your app to work offline and load faster, you can change
25 | // unregister() to register() below. Note this comes with some pitfalls.
26 | // Learn more about service workers: http://bit.ly/CRA-PWA
27 | serviceWorker.unregister();
28 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/redux/ActionTypes.js:
--------------------------------------------------------------------------------
1 | export const FETCH_MENU = 'FETCH_MENU';
2 | export const FETCH_PRODUCTS = 'FETCH_PRODUCTS';
3 | export const FETCH_STATICBLOGS = 'FETCH_STATICBLOGS';
4 | export const FETCH_STATICTESTIMONIALS = 'FETCH_STATICTESTIMONIALS';
5 | export const FETCH_STATICSLIDER = 'FETCH_STATICSLIDER';
6 | export const ADD_PRODUCT = 'ADD_PRODUCT';
7 | export const REMOVE_PRODUCT = 'REMOVE_PRODUCT';
8 | export const ADD_WISHLIST = 'ADD_WISHLIST';
9 | export const REMOVE_WISHLIST = 'REMOVE_WISHLIST';
10 | export const UPDATE_PRODUCTCOUNT = 'UPDATE_PRODUCTCOUNT';
11 | export const UPDATE_PRODUCTWISHLISTFLAG = 'UPDATE_PRODUCTWISHLISTFLAG';
12 | export const FETCH_PRODUCTS_CATEGORY = 'FETCH_PRODUCTS_Category';
13 | export const UPDATE_SORT = 'UPDATE_SORT';
--------------------------------------------------------------------------------
/src/redux/RootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import reducerStaticItems from './Reducers/StaticItems';
3 | import reducerCart from './Reducers/CartProducts';
4 | import reducerProducts from './Reducers/Product';
5 | import reducerSort from './Reducers/Filter';
6 |
7 | export default combineReducers({
8 | staticitems: reducerStaticItems,
9 | cart: reducerCart,
10 | productscontainer : reducerProducts,
11 | filter : reducerSort
12 | });
13 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
6 |
7 |
23 | );
24 |
25 | CheckboxControl.propTypes = {
26 | title: PropTypes.string.isRequired,
27 | type: PropTypes.oneOf(['checkbox', 'radio']).isRequired,
28 | setName: PropTypes.string.isRequired,
29 | options: PropTypes.array.isRequired,
30 | selectedOptions: PropTypes.array,
31 | controlFunc: PropTypes.func.isRequired
32 | };
33 |
34 | export default CheckboxControl;
--------------------------------------------------------------------------------
/src/Components/InnerSpinner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default () => (
4 |
8 | {props.options.map(opt => {
9 | return (
10 |
19 | );
20 | })}
21 |
22 |
5 |
6 |
7 |
8 |
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/src/Components/InputControl.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const InputControl = (props) => (
5 |
6 | );
7 |
8 | InputControl.propTypes = {
9 | inputType: PropTypes.oneOf(['text', 'number']).isRequired,
10 | value: PropTypes.string.isRequired,
11 | minvalue: PropTypes.number.isRequired,
12 | className: PropTypes.string.isRequired,
13 | controlFunc: PropTypes.func.isRequired,
14 | }
15 |
16 | export default InputControl;
--------------------------------------------------------------------------------
/src/Components/MenuLinks.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | class MenuLinks extends React.Component {
5 | getMenuItemTitle = (menuItem) => {
6 | return menuItem.title;
7 | };
8 |
9 | getMenuItem = (menuItem, index) => {
10 | let title = this.getMenuItemTitle(menuItem);
11 |
12 | if (menuItem.submenu && menuItem.submenu.length > 0) {
13 | return (
14 | - {options}
- {options}
5 |
);
82 |
83 | ModalPopup.propTypes = {
84 | productDetails: PropTypes.object,
85 | closeModal: PropTypes.func.isRequired,
86 | addToCart: PropTypes.func.isRequired,
87 | handleChange: PropTypes.func.isRequired
88 | }
89 |
90 | export default ModalPopup;
--------------------------------------------------------------------------------
/src/Components/SelectControl.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const SelectControl = (props) => (
5 |
14 | );
15 |
16 | SelectControl.propTypes = {
17 | options: PropTypes.array.isRequired,
18 | selectedOption: PropTypes.string,
19 | controlFunc: PropTypes.func.isRequired
20 | }
21 |
22 | export default SelectControl;
--------------------------------------------------------------------------------
/src/Components/TextAreaControl.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const TextAreaControl = (props) => (
5 |
6 |
81 |
7 |
8 |
80 |
9 |
79 |
10 |
39 |
40 |
41 |
78 |
42 |
77 | {props.productDetails.title}
43 |
44 | {props.productDetails.currency}{props.productDetails.discountedprice}
45 |
47 | Avilability: {props.productDetails.status}
46 |{props.productDetails.description}
48 |Size
49 |
50 | {props.productDetails.sizes ? (
51 | props.productDetails.sizes.map(p => {
52 | return {p}
53 | })
54 | ) : ()
55 | }
56 |
57 |
58 |
68 |
72 | 69 | Category: {props.productDetails.category} 70 |
71 |
73 | Add To Cart
74 | View Details
75 |
76 |
6 |
7 |
20 | );
21 |
22 | TextAreaControl.propTypes = {
23 | title: PropTypes.string.isRequired,
24 | name: PropTypes.string.isRequired,
25 | placeholder: PropTypes.string,
26 | rows: PropTypes.number.isRequired,
27 | content: PropTypes.string
28 | }
29 |
30 | export default TextAreaControl;
--------------------------------------------------------------------------------
/src/Containers/Brand.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Brand extends Component {
4 | render() {
5 | return (
8 |
19 |
9 |
10 |
11 |
17 |
18 |
7 |
27 |
8 |
26 |
9 |
25 |
10 |
24 | -
11 |
12 | 
13 | 
14 | 
15 | 
16 | 
17 | -
18 |
-
19 |
-
20 |
-
21 |
-
22 |
15 |
16 |
19 | this.props.removeFromCart(product)} className="aa-remove-product" href="javascript:void(0)">
20 | {product.title}
17 |{product.count} x {product.discountedprice}{product.price}
18 |
39 |
48 |
40 |
41 |
43 |
44 |
45 |
47 |
10 |
23 |
11 |
22 |
12 |
21 |
13 |
20 | Subscribe our newsletter
14 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, velit!
15 | 19 |
27 |
56 |
57 |
28 |
55 |
29 |
54 |
30 |
53 |
31 |
52 |
32 |
43 |
51 |
33 |
39 |
34 |
35 |
36 |
37 |
38 |
40 |
42 | 00-62-658-658
41 |
58 |
97 |
59 |
96 |
60 |
95 |
61 |
94 |
62 |
93 |
63 |
64 |
65 |
68 | dailyShop Your Shopping Partner
66 | 67 |
69 |
70 |
71 | SHOPPING CART
72 | {cartSection.length}
73 |
74 |
86 |
75 |
85 | -
76 | {cartSection}
77 | {!cartSection.length && (
78 |
- No product(s) in cart 79 | )} 80 |
87 |
91 |
92 |
25 |
51 |
26 |
50 |
27 |
45 |
49 | -
28 | {
29 | this.props.sliderdetails.map(p => {
30 | return (
-
31 | 32 |34 | 40 |
33 |
)
41 | })
42 | }
43 |
6 |
);
10 | };
11 | }
12 |
13 | export default Loader;
--------------------------------------------------------------------------------
/src/Containers/Menu.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { fetchMenu } from './../Redux/Actions/StaticItems';
3 | import { connect } from 'react-redux';
4 | import PropTypes from 'prop-types';
5 | import MenuLinks from './../Components/MenuLinks';
6 |
7 | class Menu extends Component {
8 |
9 | static propTypes = {
10 | fetchMenu: PropTypes.func.isRequired,
11 | menuItems: PropTypes.array.isRequired
12 | }
13 |
14 | componentDidMount() {
15 | this.props.fetchMenu();
16 | }
17 |
18 | render() {
19 | return (
20 |
39 | )
40 | }
41 | }
42 |
43 |
44 | const mapStateToProps = state => ({
45 | menuItems: state.staticitems.menu
46 | });
47 |
48 | export default connect(mapStateToProps, { fetchMenu })(Menu);
--------------------------------------------------------------------------------
/src/Pages/Blog.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { connect } from 'react-redux';
4 | import PropTypes from 'prop-types';
5 | import { fetchBlogs } from './../Redux/Actions/StaticItems';
6 |
7 | class Blog extends Component {
8 | static propTypes = {
9 | fetchBlogs: PropTypes.func.isRequired,
10 | blogs: PropTypes.array.isRequired
11 | }
12 |
13 | state = {
14 | blogs : this.props.blogs,
15 | allblogs : this.props.blogs,
16 | categories : [],
17 | tagsCollection : [],
18 | recentblogs : []
19 | }
20 |
21 | componentDidMount(){
22 | this.props.fetchBlogs();
23 |
24 | let tagsCollection = [] ;
25 |
26 | this.state.blogs.filter(obj => {
27 | const splitString = obj.tags.split(",");
28 | splitString.filter(innerObj => {
29 | if (!tagsCollection.includes(innerObj.trim())) {
30 | tagsCollection.push(innerObj.trim());
31 | }
32 | });
33 | });
34 |
35 | const recentblogs = this.state.blogs.sort((a,b) => {
36 | return new Date(a.createDate).getTime() -
37 | new Date(b.createDate).getTime()
38 | }).reverse().slice(0, 3);
39 |
40 | this.setState({
41 | categories : this.state.blogs.map(obj => obj.category),
42 | tagsCollection : tagsCollection,
43 | recentblogs : recentblogs
44 | });
45 | }
46 |
47 | filterByCategory = (categoryName) => {
48 | if (categoryName === "All") {
49 | this.setState({
50 | blogs: this.state.allblogs
51 | });
52 | } else {
53 | const filteredBlogs = this.state.allblogs.filter(m => m.category.indexOf(categoryName) !== -1);
54 | this.setState({
55 | blogs: filteredBlogs
56 | });
57 | }
58 | }
59 |
60 | filterByTag = (tagName) => {
61 | console.log(tagName.trim());
62 | if (tagName === "All") {
63 | this.setState({
64 | blogs: this.state.allblogs
65 | });
66 | } else {
67 | const filteredBlogs = this.state.allblogs.filter(m => m.tags.includes(tagName));
68 | this.setState({
69 | blogs: filteredBlogs
70 | });
71 | }
72 | }
73 | render() {
74 | return (
75 |
7 | Loading
8 |
9 |
78 |
79 |
89 |
80 |
88 |
81 |
87 | Blog Archive
82 |-
83 |
- Home 84 |
- Blog Archive 85 |
92 |
182 |
93 |
181 |
94 |
180 |
95 |
179 |
96 |
178 |
97 |
141 |
98 |
119 | {/*
99 | {this.state.blogs.map(p => {
100 | return (
101 |
118 |
102 |
103 |
104 |
105 |
106 | {new Date(p.createDate).toLocaleString("en-US", { year: 'numeric', month: 'short', day: 'numeric' })}
107 |
108 |
109 |
114 |
115 |
)
116 | })}
117 |
105 |
120 |
139 |
*/}
140 |
142 |
176 |
177 |
36 |
120 |
37 |
119 |
38 |
118 |
39 |
117 |
40 |
116 |
41 | {/* */}
42 |
78 |
79 | {/* */}
80 |
43 |
44 |
54 | ![fashion img]({"content/img/fashion/1.jpg"})
55 |
56 |
76 |
77 | {this.state.currentBlog.title}
45 |
46 |
53 |
47 | Posted By {this.state.currentBlog.postedBy}
48 |
49 |
50 | {new Date(this.state.currentBlog.createDate).toLocaleString("en-US", { year: 'numeric', month: 'short', day: 'numeric' })}
51 |
52 |
55 | {this.state.currentBlog.decription}
57 |
58 |
75 |
59 |
74 |
60 |
65 |
73 |
61 | Tags:
62 | {this.state.currentBlog.tags}
63 |
64 |
81 |
114 |
115 |
72 |
73 |
83 |
74 |
82 |
75 |
81 | Cart Page
76 |-
77 |
- Home 78 |
- Cart 79 |
86 |
133 |
87 |
132 |
88 |
131 |
89 |
130 |
90 |
114 | {cartSection.length > 0 && (
115 |
129 |
116 |
118 |
119 |
125 | Proced to Checkout
126 |
127 | )}
128 | Cart Totals
117 || Total | 121 |${this.state.cartTotal} | 122 |
|---|
9 |
20 |
24 |
85 |
25 |
84 |
26 |
83 |
27 |
82 |
28 |
31 | We are wating to assist you..
29 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, quos.
30 |
32 |
81 |
33 |
80 |
34 |
68 |
35 |
66 |
67 |
69 |
79 |
70 |
71 |
78 | DailyShop
72 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum modi dolor facilis! Nihil error, eius.
73 |Huntsville, AL 35813, USA
74 |+ 021.343.7575
75 |Email: support@dailyshop.com
76 | 77 |
10 |
21 |
11 |
20 |
12 |
19 |
13 |
18 | 404
14 | Sorry! Page Not Found 15 |Sorry this content has been moved Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, amet perferendis, nemo facere excepturi quis.
16 | Go to Homepage 17 |
9 |
20 |
24 |
59 |
25 |
58 |
26 |
57 |
27 |
56 |
28 |
55 |
29 |
42 |
30 |
41 | Login
31 | 40 |
43 |
54 |
44 |
53 | Register
45 | 52 |
48 |
49 |
59 |
50 |
58 |
51 |
57 | Wishlist Page
52 |-
53 |
- Home 54 |
- Wishlist 55 |
62 |
95 |
63 |
94 |
64 |
93 |
65 |
92 |
66 |
90 |
91 |