6 |
7 | 
8 |
9 |
10 |
11 |
16 |
2 |
7 |
--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { OffcanvasService } from './core/shared/offcanvas.service';
3 |
4 | @Component({
5 | selector: 'app-root',
6 | templateUrl: './app.component.html',
7 | styleUrls: ['./app.component.scss']
8 | })
9 | export class AppComponent {
10 | public products: any;
11 |
12 | constructor(public offcanvasService: OffcanvasService) {}
13 | }
14 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | // Modules
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4 | import { NgModule } from '@angular/core';
5 | import { HttpClientModule } from '@angular/common/http';
6 | import { ToastrModule } from 'ngx-toastr';
7 | import { ProductsModule } from './products/products.module';
8 | import { SharedModule } from './shared/shared.module';
9 | import { CoreModule } from './core/core.module';
10 | import { CheckoutModule } from './checkout/checkout.module';
11 | import { AccountModule } from './account/account.module';
12 | import { AdminModule } from './admin/admin.module';
13 | import { AngularFireModule } from '@angular/fire/compat/';
14 | import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
15 | import { AngularFireStorageModule } from '@angular/fire/compat/storage';
16 | import { AngularFireAuthModule } from '@angular/fire/compat/auth';
17 | import { environment } from '../environments/environment';
18 |
19 | // Components
20 | import { AppComponent } from './app.component';
21 | import { CartComponent } from './cart/cart.component';
22 | import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
23 |
24 | @NgModule({
25 | declarations: [
26 | AppComponent,
27 | CartComponent,
28 | PageNotFoundComponent
29 | ],
30 | imports: [
31 | BrowserModule,
32 | BrowserAnimationsModule,
33 | AngularFireModule.initializeApp(environment.firebase),
34 | AngularFireDatabaseModule,
35 | AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
36 | AngularFireStorageModule, // imports firebase/storage only needed for storage features
37 | HttpClientModule,
38 | SharedModule,
39 | ToastrModule.forRoot(),
40 | CoreModule,
41 | ProductsModule,
42 | CheckoutModule,
43 | AccountModule,
44 | AdminModule
45 | ],
46 | bootstrap: [AppComponent]
47 | })
48 | export class AppModule {}
49 |
--------------------------------------------------------------------------------
/src/app/cart/cart.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnDestroy } from '@angular/core';
2 |
3 | import { Subscription } from 'rxjs';
4 |
5 | import { CartService } from './shared/cart.service';
6 | import { CartItem } from '../models/cart-item.model';
7 |
8 | @Component({
9 | selector: 'app-cart',
10 | templateUrl: './cart.component.html',
11 | styleUrls: ['./cart.component.scss']
12 | })
13 | export class CartComponent implements OnInit, OnDestroy {
14 | private cartSubscription: Subscription;
15 | public items: CartItem[];
16 | public total: number;
17 |
18 | constructor(private cartService: CartService) {}
19 |
20 | ngOnInit() {
21 | this.items = this.cartService.getItems();
22 | this.total = this.cartService.getTotal();
23 | this.cartSubscription = this.cartService.itemsChanged.subscribe(
24 | (items: CartItem[]) => {
25 | this.items = items;
26 | this.total = this.cartService.getTotal();
27 | }
28 | );
29 | }
30 |
31 | public onClearCart(event) {
32 | event.preventDefault();
33 | event.stopPropagation();
34 | this.cartService.clearCart();
35 | }
36 |
37 | public onRemoveItem(event, item: CartItem) {
38 | event.preventDefault();
39 | event.stopPropagation();
40 | this.cartService.removeItem(item);
41 | }
42 |
43 | public increaseAmount(item: CartItem) {
44 | this.cartService.updateItemAmount(item, item.amount + 1);
45 | }
46 |
47 | public decreaseAmount(item: CartItem) {
48 | const newAmount = item.amount === 1 ? 1 : item.amount - 1;
49 | this.cartService.updateItemAmount(item, newAmount);
50 | }
51 |
52 | public checkAmount(item: CartItem) {
53 | this.cartService.updateItemAmount(
54 | item,
55 | item.amount < 1 || !item.amount || isNaN(item.amount) ? 1 : item.amount
56 | );
57 | }
58 |
59 | ngOnDestroy() {
60 | this.cartSubscription.unsubscribe();
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/app/cart/shared/cart.service.ts:
--------------------------------------------------------------------------------
1 | import { EventEmitter, Injectable } from '@angular/core';
2 | import { Product } from '../../models/product.model';
3 | import { CartItem } from '../../models/cart-item.model';
4 | import { MessageService } from '../../messages/message.service';
5 |
6 | @Injectable()
7 | export class CartService {
8 | // Init and generate some fixtures
9 | private cartItems: CartItem[];
10 | public itemsChanged: EventEmitter
4 |
22 |
--------------------------------------------------------------------------------
/src/app/checkout/checkout.component.scss:
--------------------------------------------------------------------------------
1 | @import '~scss/helpers/variables';
2 | @import '~scss/helpers/mixins';
3 |
4 | .checkout-steps {
5 | margin-bottom: floor($grid-vertical-step * 1.7); // ~40px
6 | @include clearfix;
7 |
8 | > a,
9 | > button {
10 | display: block;
11 | position: relative;
12 | padding-right: 18px;
13 | width: 25%;
14 | height: 55px;
15 | float: left;
16 | transition: color .3s;
17 | border: none;
18 |
19 | border: {
20 | top: 1px solid $border-color;
21 | bottom: 1px solid $border-color;
22 | }
23 |
24 | background-color: $body-bg;
25 | color: $nav-link-color;
26 |
27 | font: {
28 | size: $nav-link-font-size;
29 | weight: $nav-link-font-weight;
30 | }
31 |
32 | line-height: 53px;
33 |
34 | text: {
35 | decoration: none;
36 | align: center;
37 | }
38 |
39 | > .angle {
40 | display: block;
41 | position: absolute;
42 | top: 0;
43 | right: 0px;
44 | width: 27px;
45 | height: 53px;
46 | background-color: $body-bg;
47 |
48 | &::before,
49 | &::after {
50 | position: absolute;
51 | top: 0;
52 | left: 0;
53 | width: 0;
54 | height: 0;
55 | border: solid transparent;
56 | content: '';
57 | pointer-events: none;
58 | }
59 |
60 | &::after {
61 | border-width: 26px;
62 | border-color: transparent;
63 | border-left-color: $body-bg;
64 | }
65 |
66 | &::before {
67 | margin-top: -1px;
68 | border-width: 27px;
69 | border-color: transparent;
70 | border-left-color: darken($border-color, 3%);
71 | }
72 | }
73 |
74 | &.active {
75 | background-color: $nav-link-active-color;
76 | color: $white-color;
77 | cursor: default;
78 | pointer-events: none;
79 |
80 | > .angle::after { border-left-color: $nav-link-active-color; }
81 | }
82 |
83 | &.active-sibling {
84 | > .angle { background-color: $nav-link-active-color; }
85 | }
86 |
87 | &:first-child {
88 | border-left: 1px solid $border-color;
89 | border-top-left-radius: $border-radius-lg;
90 | border-bottom-left-radius: $border-radius-lg;
91 | }
92 |
93 | &:last-child {
94 | border-right: 1px solid $border-color;
95 | border-top-right-radius: $border-radius-lg;
96 | border-bottom-right-radius: $border-radius-lg;
97 | }
98 | }
99 |
100 | @media (max-width: $screen-sm) {
101 |
102 | > a {
103 | width: 100%;
104 | margin-bottom: 10px;
105 | float: none;
106 | border: 1px solid $border-color;
107 | border-radius: $border-radius-lg;
108 | > .angle { display: none; }
109 | }
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/src/app/checkout/checkout.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy, OnInit } from '@angular/core';
2 |
3 | import { Subscription } from 'rxjs';
4 |
5 | import { CheckoutService } from './shared/checkout.service';
6 |
7 | @Component({
8 | selector: 'app-checkout',
9 | templateUrl: './checkout.component.html',
10 | styleUrls: ['./checkout.component.scss']
11 | })
12 | export class CheckoutComponent implements OnInit, OnDestroy {
13 | checkoutSubscription: Subscription;
14 | steps: string[];
15 | activeStep: number;
16 |
17 | constructor(private checkoutService: CheckoutService) {}
18 |
19 | ngOnInit() {
20 | this.steps = ['1. Address', '2. Shipping', '3. Payment', '4. Review'];
21 | this.activeStep = this.checkoutService.activeStep;
22 | this.checkoutSubscription = this.checkoutService.stepChanged.subscribe((step: number) => {
23 | this.activeStep = step;
24 | });
25 | }
26 |
27 | ngOnDestroy() {
28 | this.checkoutSubscription.unsubscribe();
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/checkout/checkout.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { AddressComponent } from './address/address.component';
3 | import { FooterComponent } from './footer/footer.component';
4 | import { PaymentComponent } from './payment/payment.component';
5 | import { ReviewComponent } from './review/review.component';
6 | import { ShippingComponent } from './shipping/shipping.component';
7 | import { SidebarComponent } from './sidebar/sidebar.component';
8 | import { CheckoutComponent } from './checkout.component';
9 | import { SharedModule } from '../shared/shared.module';
10 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
11 | import { CompleteComponent } from './complete/complete.component';
12 |
13 | @NgModule({
14 | declarations: [
15 | CheckoutComponent,
16 | AddressComponent,
17 | FooterComponent,
18 | PaymentComponent,
19 | ReviewComponent,
20 | ShippingComponent,
21 | SidebarComponent,
22 | CompleteComponent
23 | ],
24 | imports: [
25 | SharedModule,
26 | FormsModule,
27 | ReactiveFormsModule
28 | ],
29 | exports: [
30 | SharedModule,
31 | CheckoutComponent,
32 | AddressComponent,
33 | FooterComponent,
34 | PaymentComponent,
35 | ReviewComponent,
36 | ShippingComponent,
37 | SidebarComponent,
38 | FormsModule,
39 | ReactiveFormsModule
40 | ]
41 | })
42 | export class CheckoutModule {}
43 |
--------------------------------------------------------------------------------
/src/app/checkout/complete/complete.component.html:
--------------------------------------------------------------------------------
1 |
5 |
21 |
6 |
7 |
17 |
8 |
9 |
10 |
11 |
18 |
20 |
5 |
17 |
--------------------------------------------------------------------------------
/src/app/checkout/complete/complete.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monobasic/Angular-Reactive-Demo-Shop/d25467526b2b627132a750775e7e28145a406aad/src/app/checkout/complete/complete.component.scss
--------------------------------------------------------------------------------
/src/app/checkout/complete/complete.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-complete',
5 | templateUrl: './complete.component.html',
6 | styleUrls: ['./complete.component.scss']
7 | })
8 | export class CompleteComponent {}
9 |
--------------------------------------------------------------------------------
/src/app/checkout/footer/footer.component.html:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/src/app/checkout/footer/footer.component.scss:
--------------------------------------------------------------------------------
1 | @import '~scss/helpers/variables';
2 | @import '~scss/helpers/mixins';
3 |
4 | .checkout-footer {
5 | display: table;
6 | width: 100%;
7 | margin-top: floor($grid-vertical-step * 1.2);
8 | padding: {
9 | top: 5px;
10 | bottom: 5px;
11 | }
12 | border: 1px solid $border-color;
13 | border-radius: $border-radius-lg;
14 | table-layout: fixed;
15 |
16 | > .column {
17 | display: table-cell;
18 | padding: 10px 15px;
19 | vertical-align: middle;
20 | &:last-child { text-align: right; }
21 | &:first-child { text-align: left; }
22 | }
23 |
24 | .btn { margin: 0; }
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/checkout/footer/footer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Input, Output } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-checkout-footer',
5 | templateUrl: './footer.component.html',
6 | styleUrls: ['./footer.component.scss']
7 | })
8 | export class FooterComponent {
9 | @Input() buttons: string[];
10 | @Input() continueEnabled: boolean;
11 | @Output() back: EventEmitter
6 |
16 |
7 |
15 | Thank you for your order!
8 |Your order has been placed and will be processed as soon as possible.
9 |You will be receiving an email shortly with confirmation of your order. 10 |
11 |
12 | Go Back Shopping
13 |
14 | 2 | Choose Payment Method
3 |4 | 29 | 30 |
Review Your Order
2 |3 |
4 |
5 |
6 |
35 |
36 |
42 | | Product Name | 8 |Subtotal | 9 |10 | |
|---|---|---|
|
15 |
16 |
17 |
27 |
20 |
26 | 21 | {{item.product.name}} 22 | x {{item.amount}} 23 | 24 |25 | |
28 | {{ (item.product.price * item.amount) | currency }} | 29 |30 | Edit 31 | | 32 |
43 |
62 |
63 |
44 |
54 | Shipping to:
45 |-
46 |
- 47 | Client:{{customer.firstname}} {{customer.lastname}} 48 |
- 49 | Address:{{customer.address1}} {{customer.address2}} 50 |
- 51 | Phone:{{customer.phone}} 52 |
55 |
61 | Payment method:
56 |-
57 |
- 58 | {{ paymentMethod }} 59 |
Choose Shipping Method
2 |3 | 32 | 33 |
3 |
4 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/app/core/content/content.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monobasic/Angular-Reactive-Demo-Shop/d25467526b2b627132a750775e7e28145a406aad/src/app/core/content/content.component.scss
--------------------------------------------------------------------------------
/src/app/core/content/content.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { OffcanvasService } from '../shared/offcanvas.service';
4 |
5 | @Component({
6 | selector: 'app-content',
7 | templateUrl: './content.component.html',
8 | styleUrls: ['./content.component.scss']
9 | })
10 | export class ContentComponent {
11 | constructor(private offcanvasService: OffcanvasService) {}
12 |
13 | onMenuClose(e: Event) {
14 | this.offcanvasService.closeOffcanvasNavigation();
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/core/content/footer/footer.component.scss:
--------------------------------------------------------------------------------
1 | @import '~scss/helpers/variables';
2 | @import '~scss/helpers/mixins';
3 |
4 | .site-footer {
5 | padding-top: floor($grid-vertical-step * 3); //~72px;
6 | background-color: $gray-darker;
7 | @media (max-width: $screen-md) {
8 | padding-top: floor($grid-vertical-step * 2); //~48px;
9 | }
10 | }
11 | .footer-copyright {
12 | margin: 0;
13 | padding: {
14 | top: 10px;
15 | bottom: $grid-vertical-step; // ~24px
16 | }
17 | color: rgba($white-color, .5);
18 | font: {
19 | size: $font-size-sm;
20 | weight: normal;
21 | }
22 | > a {
23 | transition: color .25s;
24 | color: rgba($white-color, .5);
25 | text-decoration: none;
26 | &:hover { color: $link-hover-color; }
27 | }
28 | }
29 |
30 | // Light Footer
31 | .footer-light {
32 | background-color: $gray-lighter;
33 | .footer-copyright {
34 | color: $gray;
35 | > a {
36 | color: $gray;
37 | &:hover { color: $link-hover-color; }
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/core/content/footer/footer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-footer',
5 | templateUrl: './footer.component.html',
6 | styleUrls: ['./footer.component.scss']
7 | })
8 | export class FooterComponent {}
9 |
--------------------------------------------------------------------------------
/src/app/core/core.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule, Optional, SkipSelf } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { SharedModule } from '../shared/shared.module';
4 | import { NgxSiemaModule } from 'ngx-siema';
5 |
6 | import { ContentComponent } from './content/content.component';
7 | import { HeaderComponent } from './header/header.component';
8 | import { NavigationOffCanvasComponent } from './navigation-off-canvas/navigation-off-canvas.component';
9 | import { TopBarComponent } from './top-bar/top-bar.component';
10 | import { FooterComponent } from './content/footer/footer.component';
11 | import { NavigationMainComponent } from './header/navigation-main/navigation-main.component';
12 | import { ToolbarCartComponent } from './header/toolbar/cart/cart.component';
13 | import { HomeComponent } from './home/home.component';
14 | import { MainSliderComponent } from './home/main-slider/main-slider.component';
15 | import { ProductWidgetComponent } from './home/product-widget/product-widget.component';
16 | import { PromoComponent } from './home/promo/promo.component';
17 | import { SearchComponent } from './header/search/search.component';
18 |
19 | import { ProductService } from '../products/shared/product.service';
20 | import { MessageService } from '../messages/message.service';
21 | import { CartService } from '../cart/shared/cart.service';
22 | import { PagerService } from '../pager/pager.service';
23 | import { OrderService } from '../account/orders/shared/order.service';
24 | import { CheckoutService } from '../checkout/shared/checkout.service';
25 | import { AuthService } from '../account/shared/auth.service';
26 | import { OffcanvasService } from './shared/offcanvas.service';
27 | import { PromoService } from './shared/promo.service';
28 | import { UiService } from '../products/shared/ui.service';
29 | import { ProductsCacheService } from '../products/shared/products-cache.service';
30 |
31 | import { throwIfAlreadyLoaded } from './module-import-guard';
32 |
33 |
34 | @NgModule({
35 | declarations: [
36 | ContentComponent,
37 | HeaderComponent,
38 | NavigationOffCanvasComponent,
39 | TopBarComponent,
40 | FooterComponent,
41 | NavigationMainComponent,
42 | ToolbarCartComponent,
43 | HomeComponent,
44 | MainSliderComponent,
45 | ProductWidgetComponent,
46 | PromoComponent,
47 | SearchComponent
48 | ],
49 | imports: [
50 | CommonModule,
51 | SharedModule,
52 | NgxSiemaModule.forRoot()
53 | ],
54 | exports: [
55 | CommonModule,
56 | SharedModule,
57 | NavigationOffCanvasComponent,
58 | TopBarComponent,
59 | HeaderComponent,
60 | ContentComponent
61 | ],
62 | providers: [
63 | ProductService,
64 | ProductsCacheService,
65 | MessageService,
66 | CartService,
67 | PagerService,
68 | OrderService,
69 | CheckoutService,
70 | AuthService,
71 | OffcanvasService,
72 | PromoService,
73 | UiService
74 | ]
75 | })
76 | export class CoreModule {
77 | constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
78 | throwIfAlreadyLoaded(parentModule, 'CoreModule');
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/app/core/header/header.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
2 |
3 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/app/core/header/search/search.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monobasic/Angular-Reactive-Demo-Shop/d25467526b2b627132a750775e7e28145a406aad/src/app/core/header/search/search.component.scss
--------------------------------------------------------------------------------
/src/app/core/header/search/search.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | OnInit,
4 | Input,
5 | OnChanges,
6 | EventEmitter,
7 | Output
8 | } from '@angular/core';
9 |
10 | import { Subject } from 'rxjs';
11 | import { debounceTime , distinctUntilChanged , filter , switchMap } from 'rxjs/operators';
12 |
13 | import { ProductService } from '../../../products/shared/product.service';
14 |
15 | @Component({
16 | selector: 'app-search',
17 | templateUrl: './search.component.html',
18 | styleUrls: ['./search.component.scss']
19 | })
20 | export class SearchComponent implements OnInit {
21 | products: any[];
22 | term$ = new Subject
4 |
5 |
6 |
7 |
8 |
9 |
15 | -
10 |
- 11 | {{product.name}} 12 | 13 |
2 |
3 |
4 | {{items.length}}
5 | {{ total | currency }}
6 |
44 |
--------------------------------------------------------------------------------
/src/app/core/header/toolbar/cart/cart.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monobasic/Angular-Reactive-Demo-Shop/d25467526b2b627132a750775e7e28145a406aad/src/app/core/header/toolbar/cart/cart.component.scss
--------------------------------------------------------------------------------
/src/app/core/header/toolbar/cart/cart.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy, OnInit } from '@angular/core';
2 |
3 | import { Subscription } from 'rxjs';
4 |
5 | import { CartService } from '../../../../cart/shared/cart.service';
6 |
7 | import { CartItem } from '../../../../models/cart-item.model';
8 |
9 | @Component({
10 | selector: 'app-toolbar-cart',
11 | templateUrl: './cart.component.html',
12 | styleUrls: ['./cart.component.scss']
13 | })
14 | export class ToolbarCartComponent implements OnInit, OnDestroy {
15 | public items: CartItem[];
16 | public total: number;
17 | private cartSubscription: Subscription;
18 |
19 | constructor(private cartService: CartService) {}
20 |
21 | ngOnInit() {
22 | this.items = this.cartService.getItems();
23 | this.total = this.cartService.getTotal();
24 | this.cartSubscription = this.cartService.itemsChanged.subscribe(
25 | (items: CartItem[]) => {
26 | this.items = items;
27 | this.total = this.cartService.getTotal();
28 | }
29 | );
30 | }
31 |
32 | public onRemoveItem(event, item: CartItem) {
33 | event.stopPropagation();
34 | this.cartService.removeItem(item);
35 | }
36 |
37 | ngOnDestroy() {
38 | this.cartSubscription.unsubscribe();
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/core/home/home.component.html:
--------------------------------------------------------------------------------
1 |
7 |
22 |
25 |
26 |
34 |
42 |
43 |
8 |
20 |
21 | 23 | There are no items in your cart.. 24 |
6 |
16 |
7 |
9 |
10 |
12 |
13 |
15 |
23 |
44 |
24 | 
25 |
28 |
25 | Free Worldwide Shipping
26 |Free shipping for all orders over $100
27 |
29 | 
30 |
33 |
30 | Money Back Guarantee
31 |We return money within 30 days
32 |
34 | 
35 |
38 |
35 | 24/7 Customer Support
36 |Friendly 24/7 customer support
37 |
39 | 
40 |
43 |
40 | Secure Online Payment
41 |We posess SSL / Secure Certificate
42 |
7 |
24 |
8 |
23 |
9 |
17 |
10 |
15 | Shop now
16 | {{ item.name }}
11 | starting at
12 |
14 |
18 |
22 |
19 | 
20 |
21 |
3 |
16 |
4 |
15 |
5 |
6 |
14 |
7 |
11 | {{ promo.buttonText }} 12 |
13 | {{ promo.preHeading }}
8 |{{ promo.heading }}
9 |{{ promo.afterHeading }}
10 |11 | {{ promo.buttonText }} 12 |
3 |
23 |
--------------------------------------------------------------------------------
/src/app/core/page-title/page-title.component.scss:
--------------------------------------------------------------------------------
1 | @import '~scss/helpers/variables';
2 | @import '~scss/helpers/mixins';
3 |
4 | // Page Title
5 | .page-title {
6 | width: 100%;
7 | margin-bottom: ceil($grid-vertical-step * 2.5); //~60px
8 | padding: floor($grid-vertical-step * 1.5) 0; //~36px 0
9 | border-bottom: 1px solid $border-color;
10 | background-color: $gray-lighter;
11 | > .container,
12 | > .container-fluid { display: table; }
13 | .column {
14 | display: table-cell;
15 | vertical-align: middle;
16 | &:first-child { padding-right: 20px; }
17 | }
18 | h1, h2, h3 {
19 | margin: 0;
20 | font: {
21 | size: $font-size-h3;
22 | weight: normal;
23 | }
24 | line-height: $line-height-h3;
25 | }
26 | @media (max-width: $screen-sm) { margin-bottom: ceil($grid-vertical-step * 2.2); }
27 | }
28 |
29 | // Breadcrumbs
30 | .breadcrumbs {
31 | display: block;
32 | margin: 0;
33 | padding: 0;
34 | list-style: none;
35 | text-align: right;
36 | > li {
37 | display: inline-block;
38 | margin-left: 5px;
39 | padding: 5px 0;
40 | color: $gray;
41 | font-size: $font-size-sm;
42 | cursor: default;
43 | vertical-align: middle;
44 | &.separator {
45 | width: 3px;
46 | height: 3px;
47 | margin-top: 2px;
48 | padding: 0;
49 | border-radius: 50%;
50 | background-color: $gray;;
51 | }
52 | > a {
53 | transition: color .25s;
54 | color: $nav-link-color;
55 | text-decoration: none;
56 | &:hover { color: $nav-link-hover-color; }
57 | }
58 | }
59 | }
60 |
61 | // Media query (max-width: 768px)
62 | @media (max-width: $screen-md) {
63 | .page-title {
64 | > .container,
65 | > .container-fluid { display: block; }
66 | .column {
67 | display: block;
68 | width: 100%;
69 | text-align: center;
70 | &:first-child { padding-right: 0; }
71 | }
72 | }
73 | .breadcrumbs {
74 | padding-top: 10px;
75 | text-align: center;
76 | > li {
77 | margin: {
78 | left: 3px;
79 | margin-right: 3px;
80 | }
81 | }
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/src/app/core/page-title/page-title.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-page-title',
5 | templateUrl: './page-title.component.html',
6 | styleUrls: ['./page-title.component.scss']
7 | })
8 | export class PageTitleComponent {
9 | @Input() public title: string;
10 | @Input() public children: {title: string, link: string}[];
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/core/shared/offcanvas.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { BehaviorSubject } from 'rxjs';
3 |
4 | @Injectable()
5 | export class OffcanvasService {
6 | public offcanvasNavigationOpen: BehaviorSubject
4 |
22 |
5 |
7 | {{ title }}
6 |
8 |
20 |
21 |
2 | 
3 |
10 |
--------------------------------------------------------------------------------
/src/app/page-not-found/page-not-found.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monobasic/Angular-Reactive-Demo-Shop/d25467526b2b627132a750775e7e28145a406aad/src/app/page-not-found/page-not-found.component.scss
--------------------------------------------------------------------------------
/src/app/page-not-found/page-not-found.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-page-not-found',
5 | templateUrl: './page-not-found.component.html',
6 | styleUrls: ['./page-not-found.component.scss']
7 | })
8 | export class PageNotFoundComponent {}
9 |
--------------------------------------------------------------------------------
/src/app/pager/pager.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from "@angular/core";
2 | @Injectable()
3 | export class PagerService {
4 | public getPager(
5 | totalItems: number,
6 | currentPage: number = 1,
7 | pageSize: number = 10
8 | ) {
9 | const totalPages = Math.ceil(totalItems / pageSize);
10 | let startPage: number, endPage: number;
11 |
12 | if (totalPages <= 10) {
13 | // less than 10 total pages so show all
14 | startPage = 1;
15 | endPage = totalPages;
16 | } else {
17 | // more than 10 total pages so calculate start and end pages
18 | if (currentPage <= 6) {
19 | startPage = 1;
20 | endPage = 10;
21 | } else if (currentPage + 4 >= totalPages) {
22 | startPage = totalPages - 9;
23 | endPage = totalPages;
24 | } else {
25 | startPage = currentPage - 5;
26 | endPage = currentPage + 4;
27 | }
28 | }
29 |
30 | // calculate start and end item indexes
31 | const startIndex = (currentPage - 1) * pageSize;
32 | const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
33 |
34 | // create an array of pages to ng-repeat in the pager control
35 | const pages = Array.from(Array(totalPages), (_, i) => 1 + i);
36 |
37 | // return object with all pager properties required by the view
38 | return {
39 | totalItems: totalItems,
40 | currentPage: currentPage,
41 | pageSize: pageSize,
42 | totalPages: totalPages,
43 | startPage: startPage,
44 | endPage: endPage,
45 | startIndex: startIndex,
46 | endIndex: endIndex,
47 | pages: pages
48 | };
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/app/products/product-detail/product-detail.component.scss:
--------------------------------------------------------------------------------
1 | @import '~scss/helpers/variables';
2 | @import '~scss/helpers/mixins';
3 |
4 | // Buttons
5 | .sp-buttons {
6 | .btn {
7 | margin: 0;
8 | margin-left: 8px;
9 |
10 | &.btn-wishlist {
11 | width: $btn-sm-height;
12 | padding: 0;
13 | padding-left: 1px;
14 | border-radius: 50%;
15 |
16 | > i {
17 | font-size: 1.2em;
18 | }
19 |
20 | &.active {
21 | color: $brand-danger;
22 | }
23 | }
24 | }
25 | }
26 |
27 | // Product Gallery
28 | .product-gallery {
29 | position: relative;
30 |
31 | padding: {
32 | top: 15px;
33 | right: 15px;
34 | bottom: 15px;
35 | left: 15px;
36 | }
37 |
38 | border: 1px solid $border-color;
39 | border-radius: $border-radius-lg;
40 |
41 | .product-badge {
42 | top: 25px;
43 | left: 15px;
44 | }
45 | .product-thumbnails {
46 | display: block;
47 | margin: 0;
48 | margin-top: $grid-vertical-step; //~24px
49 | padding: 0;
50 | list-style: none;
51 | text-align: center;
52 |
53 | > li {
54 | display: inline-block;
55 | margin: 0 3px 10px;
56 |
57 | > a {
58 | display: block;
59 | width: 94px;
60 | transition: border-color .25s;
61 | border: 1px solid $border-color;
62 | border-radius: $border-radius-base;
63 | overflow: hidden;
64 | }
65 |
66 | &.active > a {
67 | border-color: $brand-primary;
68 | cursor: default;
69 | }
70 | }
71 | }
72 |
73 | .product-thumbnail-image {
74 | &.loading {
75 | min-height: 80px;
76 | background: url('../../../img/loading.gif') center center no-repeat;
77 | }
78 | }
79 | }
80 |
81 | .product-gallery-image {
82 |
83 | img {
84 | min-width: 100%;
85 | }
86 |
87 | &.loading {
88 | min-height: 200px;
89 | background: url('../../../img/loading.gif') center center no-repeat;
90 | }
91 | }
92 |
93 | .product-detail {
94 |
95 | &.loading {
96 | min-height: 200px;
97 | background: url('../../../img/loading.gif') center center no-repeat;
98 | }
99 | }
100 |
101 | // IE10+ specific styles
102 | @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
103 | .product-gallery .gallery-item { display: none !important; }
104 | }
105 | // Microsoft Edge specific styles
106 | @supports (-ms-ime-align: auto) {
107 | .product-gallery .gallery-item { display: none !important; }
108 | }
109 |
--------------------------------------------------------------------------------
/src/app/products/products-list-item/products-list-item.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
9 | Page Not Found
5 |It seems we can’t find page you are looking for.
6 | Go back to Homepage
7 |
Or try using search at the top right corner of the page.
2 |
3 | 
11 |
12 |
29 |
30 |
--------------------------------------------------------------------------------
/src/app/products/products-list-item/products-list-item.component.scss:
--------------------------------------------------------------------------------
1 | @import '~scss/helpers/variables';
2 | @import '~scss/helpers/mixins';
3 |
4 | .product-card {
5 | display: block;
6 | position: relative;
7 | width: 100%;
8 | padding: 18px;
9 | border: 1px solid $border-color;
10 | border-radius: $border-radius-lg;
11 | background-color: $white-color;
12 | margin-bottom: 20px;
13 |
14 | .product-badge {
15 | display: inline-block;
16 | position: absolute;
17 | top: 15px;
18 | left: 20px;
19 | z-index: 1;
20 | }
21 |
22 | .product-thumb {
23 | display: block;
24 | width: 100%;
25 | margin-top: 10px;
26 | margin-bottom: 10px;
27 |
28 | > img {
29 | display: block;
30 | width: 100%;
31 | }
32 |
33 | &.loading {
34 | min-height: 150px;
35 | background: url(../../../img/loading.gif) center center no-repeat;
36 | }
37 | }
38 |
39 | .product-title {
40 | margin-bottom: 10px;
41 |
42 | font: {
43 | size: $product-title-font-size;
44 | weight: normal;
45 | }
46 | text-align: center;
47 |
48 | > a {
49 | transition: color .3s;
50 | color: $product-title-color;
51 | text-decoration: none;
52 |
53 | &:hover {
54 | color: $product-title-hover-color;
55 | }
56 | }
57 | }
58 |
59 | .product-price {
60 | margin-bottom: 10px;
61 | color: $product-price-color;
62 |
63 | font: {
64 | size: $product-price-font-size;
65 | weight: 500;
66 | }
67 | text-align: center;
68 |
69 | > del {
70 | margin-right: 5px;
71 | color: $gray;
72 | }
73 | }
74 |
75 | .product-buttons {
76 | padding: 12px 0 8px;
77 | text-align: center;
78 |
79 | > .btn {
80 | margin: 0 4px;
81 |
82 | &.btn-wishlist {
83 | width: $btn-sm-height;
84 | padding: 0;
85 | padding-left: 1px;
86 | border-radius: 50%;
87 |
88 | > i {
89 | font-size: 1.2em;
90 | }
91 |
92 | &.active { color: $brand-danger; }
93 | }
94 | }
95 | }
96 |
97 | &.product-list {
98 | margin-bottom: 30px;
99 | }
100 |
101 | @media (min-width: $screen-sm) {
102 |
103 | &.product-list {
104 | display: table;
105 | width: 100%;
106 | padding: 0;
107 |
108 | .product-thumb,
109 | .product-info {
110 | display: table-cell;
111 | vertical-align: middle;
112 | }
113 | .product-thumb {
114 | position: relative;
115 | width: 270px;
116 | padding: 20px 18px;
117 | border-right: 1px solid $border-color;
118 | }
119 |
120 | .product-info {
121 | padding: 20px 22px;
122 |
123 | .product-title,
124 | .product-price,
125 | .product-buttons {
126 | text-align: left;
127 | }
128 |
129 | .product-buttons {
130 |
131 | padding: {
132 | top: 20px;
133 | bottom: 0;
134 | }
135 | border-top: 1px solid $border-color;
136 |
137 | > .btn {
138 | margin: 0;
139 | margin-right: 8px;
140 | }
141 | }
142 | }
143 |
144 | .product-title {
145 | font-size: $font-size-lead;
146 | }
147 | }
148 | }
149 | }
150 |
151 |
152 | :host ::ng-deep .rating-stars {
153 | position: absolute;
154 | top: 15px;
155 | right: 18px;
156 | }
157 |
--------------------------------------------------------------------------------
/src/app/products/products-list-item/products-list-item.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnDestroy, OnInit } from '@angular/core';
2 |
3 | import { Subscription } from 'rxjs';
4 |
5 | import { AuthService } from '../../account/shared/auth.service';
6 | import { CartService } from '../../cart/shared/cart.service';
7 |
8 | import { CartItem } from '../../models/cart-item.model';
9 | import { Product } from '../../models/product.model';
10 | import { User } from '../../models/user.model';
11 |
12 | @Component({
13 | selector: 'app-products-list-item',
14 | templateUrl: './products-list-item.component.html',
15 | styleUrls: ['./products-list-item.component.scss']
16 | })
17 | export class ProductsListItemComponent implements OnInit, OnDestroy {
18 | private userSubscription: Subscription;
19 | @Input() public product: Product;
20 | @Input() public displayMode: string;
21 | public user: User;
22 | public imageLoading: boolean;
23 |
24 | constructor(
25 | private cartService: CartService,
26 | private authService: AuthService
27 | ) {}
28 |
29 | ngOnInit() {
30 | this.imageLoading = true;
31 | this.userSubscription = this.authService.user.subscribe((user) => {
32 | this.user = user;
33 | });
34 | }
35 |
36 | public onAddToCart() {
37 | this.cartService.addItem(new CartItem(this.product, 1));
38 | }
39 |
40 | public onImageLoad() {
41 | this.imageLoading = false;
42 | }
43 |
44 | ngOnDestroy() {
45 | this.userSubscription.unsubscribe();
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/app/products/products-list/products-list.component.scss:
--------------------------------------------------------------------------------
1 | @import '~scss/helpers/variables';
2 | @import '~scss/helpers/mixins';
3 |
4 | .products-list {
5 |
6 | &.loading {
7 | min-height: 200px;
8 | background: url('../../../img/loading.gif') center center no-repeat;
9 | }
10 | }
11 |
12 | .shop-toolbar {
13 | display: table;
14 | width: 100%;
15 | > .column {
16 | display: table-cell;
17 | vertical-align: middle;
18 | &:last-child { text-align: right; }
19 | }
20 | @media (max-width: $screen-sm) {
21 | > .column {
22 | display: block;
23 | width: 100%;
24 | text-align: center;
25 | &:last-child {
26 | padding-top: $grid-vertical-step;
27 | text-align: center;
28 | }
29 | }
30 | }
31 | }
32 | .shop-sorting {
33 | label,
34 | .form-control,
35 | span {
36 | display: inline-block;
37 | vertical-align: middle;
38 | }
39 | span { padding: 8px 0; }
40 | label {
41 | margin: 0;
42 | padding: 8px 5px 8px 0;
43 | color: $gray;
44 | font: {
45 | size: $font-size-sm;
46 | weight: normal;
47 | }
48 | }
49 | .form-control {
50 | width: 100%;
51 | max-width: 186px;
52 | margin-right: 10px;
53 | }
54 | @media (max-width: $screen-sm) {
55 | label, .form-control {
56 | display: block;
57 | width: 100%;
58 | max-width: 100%;
59 | margin: 0;
60 | padding: {
61 | top: 0;
62 | right: 0;
63 | }
64 | }
65 | }
66 | }
67 | .shop-view {
68 | display: inline-block;
69 | @include clearfix;
70 | > a {
71 | display: block;
72 | width: $shop-view-size;
73 | height: $shop-view-size;
74 | margin-left: 10px;
75 | padding: 13px;
76 | float: left;
77 | transition: background-color .35s;
78 | border: 1px solid $border-color;
79 | border-radius: 50%;
80 | background-color: $shop-view-bg-color;
81 | span {
82 | display: block;
83 | position: relative;
84 | width: 3px;
85 | height: 3px;
86 | margin-bottom: 3px;
87 | background-color: $shop-view-color;
88 | &::before,
89 | &::after {
90 | display: block;
91 | position: absolute;
92 | background-color: $shop-view-color;
93 | }
94 | &:last-child { margin-bottom: 0; }
95 | }
96 | &:hover { background-color: $shop-view-hover-bg-color; }
97 | &.active {
98 | border-color: $shop-view-active-bg-color;
99 | background-color: $shop-view-active-bg-color;
100 | cursor: default;
101 | pointer-events: none;
102 | span,
103 | span::before,
104 | span::after { background-color: $white-color; }
105 | }
106 | &.grid-view span {
107 | &::before,
108 | &::after {
109 | top: 0;
110 | width: 3px;
111 | height: 3px;
112 | content: '';
113 | }
114 | &::before { left: 6px; }
115 | &::after { left: 12px; }
116 | }
117 | &.list-view span {
118 | &::before {
119 | top: 1px;
120 | left: 6px;
121 | width: 9px;
122 | height: 1px;
123 | content: '';
124 | }
125 | }
126 | }
127 | }
128 |
--------------------------------------------------------------------------------
/src/app/products/products-list/products-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy, OnInit } from '@angular/core';
2 |
3 | import { Subject } from 'rxjs';
4 | import { takeUntil } from 'rxjs/operators';
5 |
6 | import { AuthService } from '../../account/shared/auth.service';
7 | import { PagerService } from '../../pager/pager.service';
8 | import { ProductsCacheService } from '../shared/products-cache.service';
9 | import { ProductService } from '../shared/product.service';
10 | import { UiService } from '../shared/ui.service';
11 | import { SortPipe } from '../shared/sort.pipe';
12 |
13 | import { Product } from '../../models/product.model';
14 | import { User } from '../../models/user.model';
15 |
16 | @Component({
17 | selector: 'app-products',
18 | templateUrl: './products-list.component.html',
19 | styleUrls: ['./products-list.component.scss']
20 | })
21 | export class ProductsListComponent implements OnInit, OnDestroy {
22 | unsubscribe$ = new Subject();
23 | products: Product[];
24 | productsPaged: Product[];
25 | pager: any = {};
26 | user: User;
27 | productsLoading: boolean;
28 | currentPagingPage: number;
29 |
30 | constructor(
31 | private productService: ProductService,
32 | private productsCacheService: ProductsCacheService,
33 | private pagerService: PagerService,
34 | private sortPipe: SortPipe,
35 | private authService: AuthService,
36 | public uiService: UiService
37 | ) {}
38 |
39 | ngOnInit() {
40 | this.authService.user
41 | .pipe(takeUntil(this.unsubscribe$))
42 | .subscribe((user) => {
43 | this.user = user;
44 | });
45 | this.uiService.currentPagingPage$
46 | .pipe(takeUntil(this.unsubscribe$))
47 | .subscribe((page) => {
48 | this.currentPagingPage = page;
49 | });
50 | this.getProducts();
51 | }
52 |
53 | getProducts() {
54 | this.productsLoading = true;
55 | this.productService
56 | .getProducts()
57 | .pipe(takeUntil(this.unsubscribe$))
58 | .subscribe((products) => {
59 | this.products = {{ product.reduction }}% Off
4 |
5 |
8 |
9 |
10 |