sidebar.component.html
3.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
<!-- ENCABEZADO -->
<p class="h4 border-bottom border-white text-white mt-4 pb-2">
Mi compra
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</p>
<div class="overflow-auto overflow-scroll mb-2 w-100">
<!-- PRODUCTOS CARRITO -->
<div
class="slide-in-bl my-2 bg-white border-0 rounded-sm"
*ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
<!-- <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> -->
<div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
<div class="col-12 p-0 pt-2 text-left my-auto">
<p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
<p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>
</div>
<div class="col-12 pr-1 text-right h6 my-auto ">
<p class="m-0">{{producto.PreVen | currency}}</p>
</div>
</div>
<!-- BOTONES -->
<div class="row m-0 d-flex justify-content-between">
<!-- SUMAR - RESTAR CANTIDAD -->
<div class="col-auto px-1 my-2">
<div class="btn-group-sm btn-group float-left my-auto" role="group">
<button
type="button"
class="btn btn-light btn-sm my-auto border shadow"
(click)="aumentarContador(i)">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<div class="bg-white border border-white px-3 my-auto text-dark h5 shadow">
<small>{{producto.cantidad}}</small>
</div>
<button
type="button"
class="btn btn-light btn-sm my-auto border shadow"
(click)="decrementarContador(i)">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
</div>
<!-- PERSONALIZAR -->
<div class="col-auto px-1 my-2">
<button
*ngIf="esPersonalizable(producto)"
type="button"
class="btn btn-light btn-sm my-auto float-left border shadow"
(click)="personalizarPromo">
<i class="fa fa-hand-o-up" aria-hidden="true"></i>
</button>
</div>
<!-- BORRAR -->
<div class="col-auto px-1 my-2">
<button
type="button"
class="btn btn-secondary btn-sm my-auto shadow"
(click)="deleteProducto(i)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<!-- TOTAL -->
<div class="card rounded-top-sm mt-auto blue-gradient border-0">
<div class="card-body row">
<div class="col-12">
<p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</p>
<p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</p>
<p class="h3 text-secondary">Total</p>
<p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
</div>
<div class="col-12">
<button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1" routerLink="/confirmacion-carrito">
<span class="font-weight-bold pr-1">Finalizar y Pagar</span>
<i class="fa fa-check text-success" aria-hidden="true"></i>
</button>
<button
type="button"
class="btn btn-block btn-light shadow btn-sm shadow"
[routerLink]="['/cancelar-compra']">
<span class="pr-1">Cancelar</span>
<i class="fa fa-times text-danger" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>