carrito.component.html
5.18 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
<div class="h-92 bg-white fade-in-left">
<!-- PUBLICIDADES -->
<app-header-publicidad></app-header-publicidad>
<div class="h-75 carrito-content">
<!-- 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 h-lg-60 align-content-start scroll-y-visible"
(scroll)="scrollEvent($event)">
<!-- 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-50 h-md-25 h-xl-40 text-center text-truncate carrito-articulo"
*ngFor="let articulo of articuloService.carrito; let i = index;"
@EnterLeave>
<!-- ARTICULO -->
<div class="h-100 border border-primary rounded-sm">
<div class="row align-items-center mx-0 h-100">
<!-- NOMBRE E IMAGEN -->
<div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
<img
draggable="false"
ondragstart="return false;"
(contextmenu)="false"
class="d-none d-md-block mx-auto h-55 rounded-sm shadow-sm"
src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
onerror="this.src='assets/img/image-not-found.jpg'">
<div class="row mx-0 h-100 h-md-45">
<p class="col text-primary text-truncate align-self-center">
<small>{{articulo.DetArt | uppercase }}</small>
</p>
</div>
</div>
<!-- CANTIDAD -->
<div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
<p class="h-40"><small>CANT</small></p>
<div class="row mx-0 justify-content-between bg-primary badge-pill">
<!-- BOTON MENOS -->
<div class="col-auto px-0 my-auto">
<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 py-2 my-auto text-white">
<p><small>{{articulo.cantidad}}</small></p>
</div>
<!-- BOTON MAS -->
<div class="col-auto px-0 my-auto">
<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>
<!-- PRECIO -->
<div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
<p class="h-40"><small>PRECIO</small></p>
<div class="py-2 badge-pill bg-dark text-white">
<p><small>{{articulo.PreVen | currency}}</small></p>
</div>
</div>
<!-- ELIMINAR -->
<div class="col-6 col-md-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>
<!-- TOTAL -->
<div class="row mx-3 mt-2 h-auto justify-content-end">
<div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>
<div class="col-auto px-3 bg-primary badge-pill">
<p class="text-center text-white py-1">{{articuloService.subTotal | currency}}</p>
</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>
</div>
</div>