sidebar.component.html
4.04 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
98
99
100
101
102
103
104
105
106
107
108
109
<div class="disable-user-select d-flex align-items-center flex-column h-100 text-center">
<!-- ENCABEZADO -->
<p class="h4 border-bottom border-white text-white pb-2">
Mi compra
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</p>
<div class="overflow-scroll px-1 mb-1 w-100">
<!-- PRODUCTOS CARRITO -->
<div class="row m-0"
*ngFor="let producto of productosCarrito; let i = index"
[@EnterLeave]="flyIn">
<div class="col p-0 my-1 bg-white border-0 rounded-sm">
<div class="row m-0">
<div class="col-6 pl-1 pr-0 my-auto">
<img
class="w-100 float-left rounded-sm shadow"
src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}">
</div>
<div class="col-6 px-1">
<!-- BOTONES -->
<div class="row m-0 d-flex justify-content-between">
<!-- SUMAR - RESTAR CANTIDAD -->
<div class="col p-1">
<div class="btn-group-sm btn-group float-left" role="group">
<button
type="button"
class="btn btn-light btn-sm border shadow"
(click)="aumentarCantidad(producto)">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<div class="bg-white border border-white my-auto px-2 text-dark h5 shadow">
<small>{{producto.cantidad}}</small>
</div>
<button
type="button"
class="btn btn-light btn-sm border shadow"
(click)="restarCantidad(producto)">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
</div>
<!-- PERSONALIZAR -->
<div class="col p-1">
<button
*ngIf="producto.tieneSinonimos"
type="button"
class="btn btn-light btn-sm float-left border shadow"
(click)="personalizarPromo(producto, i)">
<i class="fa fa-refresh text-purple" aria-hidden="true"></i>
</button>
</div>
<!-- BORRAR -->
<div class="col p-1">
<button
type="button"
class="btn btn-secondary btn-sm float-right shadow"
(click)="deleteProducto(producto, i)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<div class="row m-0 shadow rounded-sm">
<div class="col px-2">
<p class="m-0 text-left h6"><small>{{producto.DetArt}}</small></p>
<p class="m-0 text-right font-weight-bold h6">{{producto.PreVen | currency}}</p>
</div>
</div>
</div>
</div>
</div>
<!-- TOTAL -->
<div class="card rounded-top-sm mx-2 mt-auto blue-gradient border-0">
<div class="card-body p-2 pt-3 row m-0">
<div class="col-12 p-0">
<p
class="h4 border-bottom border-secondary text-secondary pb-2">
({{getCantidadProductos()}}) artículos
</p>
<p class="h4 text-secondary">Total</p>
<p class="h2 font-weight-bold">{{getTotal() | currency}}</p>
</div>
<div class="col-12 p-0">
<button
*ngIf="getCantidadProductos() > 0"
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">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>