carrito.component.html
5.81 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<div class="h-92 bg-white fade-in-left">
<!-- PUBLICIDADES -->
<app-header-publicidad></app-header-publicidad>
<div class="h-85">
<!-- CABECERA -->
<div class="row mx-3 h-auto border border-primary rounded-sm">
<div class="col-12 px-0 py-2 align-self-center">
<div class="px-3">
<p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
</div>
</div>
</div>
<!-- CARRITO -->
<div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible">
<!-- MENSAJE DE ADVERTENCIA -->
<div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
<p class="h5 text-center">No hay artículos en el carrito</p>
</div>
<!-- ARTICULOS -->
<div
class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
*ngFor="let articulo of articuloService.carrito; let i = index;"
@EnterLeave>
<!-- ARTICULO -->
<div class="h-100 px-2 py-4 border border-primary rounded-sm">
<div class="row mx-0 h-100">
<!-- NOMBRE E IMAGEN -->
<div class="col-3 h-100 border-right border-primary align-self-center">
<img
draggable="false"
ondragstart="return false;"
(contextmenu)="false"
class="d-block mx-auto h-55 rounded-sm shadow-sm"
src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}">
<div class="row mx-0 h-45">
<p class="col text-primary text-truncate align-self-end">
<small>{{articulo.DetArt}}</small>
</p>
</div>
</div>
<!-- CANTIDAD -->
<div class="col-3 border-right border-primary">
<p><small>CANT</small></p>
<div class="row mt-2 mx-0">
<div class="col-12 h-auto">
<div class="row mx-0 justify-content-between bg-primary badge-pill">
<!-- BOTON MENOS -->
<div class="col-auto px-0">
<img
draggable="false"
ondragstart="return false;"
(contextmenu)="false"
class="d-block ml-auto py-2 icon-20 btn-effect"
src="assets/img/menos-blanco.svg"
(click)="substractCant(articulo)">
</div>
<!-- CANTIDAD -->
<div class="col px-0 align-self-center text-white">
<p><small>{{articulo.cantidad}}</small></p>
</div>
<!-- BOTON MAS -->
<div class="col-auto px-0">
<img
draggable="false"
ondragstart="return false;"
(contextmenu)="false"
class="d-block ml-auto py-2 icon-20 btn-effect"
src="assets/img/mas-blanco.svg"
(click)="addCant(articulo)">
</div>
</div>
</div>
</div>
</div>
<!-- OPCIONALES -->
<div class="col-3 border-right border-primary">
<p><small>OPCIONALES</small></p>
<div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
<div class="row mx-0 mt-2 justify-content-center">
<div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
<span>
<small class="pr-2">CAMBIAR</small>
<img
draggable="false"
ondragstart="return false;"
(contextmenu)="false"
class="icon-20"
src="assets/img/ir.svg">
</span>
</div>
</div>
</div>
<!-- ELIMINAR -->
<div class="col-3 align-self-center">
<div class="row mx-0 justify-content-center">
<div
class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
(click)="deleteArticulo(i)">
<span>
<small class="pr-2">ELIMINAR</small>
<img
draggable="false"
ondragstart="return false;"
(contextmenu)="false"
class="icon-20 rotate-45"
src="assets/img/mas-blanco.svg">
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CONTINUAR -->
<div
*ngIf="articuloService.carrito.length"
class="row mx-3 mt-4 h-auto justify-content-end">
<div
class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
[routerLink]="['/forma-pago']">
<span>
<small class="pr-2">CONTINUAR</small>
<img
draggable="false"
ondragstart="return false;"
(contextmenu)="false"
class="icon-20"
src="assets/img/ir.svg">
</span>
</div>
</div>
<!-- SEGUIR COMPRANDO -->
<div class="row mx-3 mt-2 h-auto justify-content-end">
<div
class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
(click)="goBack()">
<span>
<small class="pr-2">SEGUIR COMPRANDO</small>
<img
draggable="false"
ondragstart="return false;"
(contextmenu)="false"
class="icon-20"
src="assets/img/ir.svg">
</span>
</div>
</div>
</div>
</div>