Commit 0f314b0cc7a02031bb876224851dc852f3e509ac

Authored by Marcelo Puebla
Exists in develop

Merge branch 'master' into 'develop'

Master(benjamin)

See merge request !34
src/app/modules/carrito/carrito.component.html
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="h-75"> 5 <div class="h-75">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 px-0 py-2 align-self-center"> 8 <div class="col-12 px-0 py-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p> 10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <!-- CARRITO --> 15 <!-- CARRITO -->
16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible"> 16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible">
17 <!-- MENSAJE DE ADVERTENCIA --> 17 <!-- MENSAJE DE ADVERTENCIA -->
18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length"> 18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
19 <p class="h5 text-center">No hay artículos en el carrito</p> 19 <p class="h5 text-center">No hay artículos en el carrito</p>
20 </div> 20 </div>
21 <!-- ARTICULOS --> 21 <!-- ARTICULOS -->
22 <div 22 <div
23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" 23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
24 *ngFor="let articulo of articuloService.carrito; let i = index;" 24 *ngFor="let articulo of articuloService.carrito; let i = index;"
25 @EnterLeave> 25 @EnterLeave>
26 <!-- ARTICULO --> 26 <!-- ARTICULO -->
27 <div class="h-100 px-2 py-4 border border-primary rounded-sm"> 27 <div class="h-100 px-2 py-4 border border-primary rounded-sm">
28 <div class="row mx-0 h-100"> 28 <div class="row mx-0 h-100">
29 <!-- NOMBRE E IMAGEN --> 29 <!-- NOMBRE E IMAGEN -->
30 <div class="col-3 h-100 border-right border-primary align-self-center"> 30 <div class="col-3 h-100 border-right border-primary align-self-center">
31 <img 31 <img
32 draggable="false" 32 draggable="false"
33 ondragstart="return false;" 33 ondragstart="return false;"
34 (contextmenu)="false" 34 (contextmenu)="false"
35 class="d-block mx-auto h-55 rounded-sm shadow-sm" 35 class="d-block mx-auto h-55 rounded-sm shadow-sm"
36 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 36 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
37 onerror="this.src='assets/img/image-not-found.jpg'"> 37 onerror="this.src='assets/img/image-not-found.jpg'">
38 <div class="row mx-0 h-45"> 38 <div class="row mx-0 h-45">
39 <p class="col text-primary text-truncate align-self-end"> 39 <p class="col text-primary text-truncate align-self-end">
40 <small>{{articulo.DetArt}}</small> 40 <small>{{articulo.DetArt}}</small>
41 </p> 41 </p>
42 </div> 42 </div>
43 </div> 43 </div>
44 <!-- CANTIDAD --> 44 <!-- CANTIDAD -->
45 <div class="col-3 border-right border-primary"> 45 <div class="col-3 border-right border-primary">
46 <p><small>CANT</small></p> 46 <p><small>CANT</small></p>
47 <div class="row mt-2 mx-0"> 47 <div class="row mt-2 mx-0">
48 <div class="col-12 h-auto"> 48 <div class="col-12 h-auto">
49 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 49 <div class="row mx-0 justify-content-between bg-primary badge-pill">
50 <!-- BOTON MENOS --> 50 <!-- BOTON MENOS -->
51 <div class="col-auto px-0"> 51 <div class="col-auto px-0">
52 <img 52 <img
53 draggable="false" 53 draggable="false"
54 ondragstart="return false;" 54 ondragstart="return false;"
55 (contextmenu)="false" 55 (contextmenu)="false"
56 class="d-block ml-auto py-2 icon-20 btn-effect" 56 class="d-block ml-auto py-2 icon-20 btn-effect"
57 src="assets/img/menos-blanco.svg" 57 src="assets/img/menos-blanco.svg"
58 (click)="substractCant(articulo)"> 58 (click)="substractCant(articulo)">
59 </div> 59 </div>
60 <!-- CANTIDAD --> 60 <!-- CANTIDAD -->
61 <div class="col px-0 align-self-center text-white"> 61 <div class="col px-0 align-self-center text-white">
62 <p><small>{{articulo.cantidad}}</small></p> 62 <p><small>{{articulo.cantidad}}</small></p>
63 </div> 63 </div>
64 <!-- BOTON MAS --> 64 <!-- BOTON MAS -->
65 <div class="col-auto px-0"> 65 <div class="col-auto px-0">
66 <img 66 <img
67 draggable="false" 67 draggable="false"
68 ondragstart="return false;" 68 ondragstart="return false;"
69 (contextmenu)="false" 69 (contextmenu)="false"
70 class="d-block ml-auto py-2 icon-20 btn-effect" 70 class="d-block ml-auto py-2 icon-20 btn-effect"
71 src="assets/img/mas-blanco.svg" 71 src="assets/img/mas-blanco.svg"
72 (click)="addCant(articulo)"> 72 (click)="addCant(articulo)">
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78 <!-- OPCIONALES --> 78 <!-- OPCIONALES -->
79 <!-- <div class="col-3 border-right border-primary"> 79 <!-- <div class="col-3 border-right border-primary">
80 <p><small>OPCIONALES</small></p> 80 <p><small>OPCIONALES</small></p>
81 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div> 81 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
82 <div class="row mx-0 mt-2 justify-content-center"> 82 <div class="row mx-0 mt-2 justify-content-center">
83 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white"> 83 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
84 <span> 84 <span>
85 <small class="pr-2">CAMBIAR</small> 85 <small class="pr-2">CAMBIAR</small>
86 <img 86 <img
87 draggable="false" 87 draggable="false"
88 ondragstart="return false;" 88 ondragstart="return false;"
89 (contextmenu)="false" 89 (contextmenu)="false"
90 class="icon-20" 90 class="icon-20"
91 src="assets/img/ir.svg"> 91 src="assets/img/ir.svg">
92 </span> 92 </span>
93 </div> 93 </div>
94 </div> --> 94 </div> -->
95 <!-- PRECIO --> 95 <!-- PRECIO -->
96 <div class="col-3 border-right border-primary"> 96 <div class="col-3 border-right border-primary">
97 <p><small>PRECIO</small></p> 97 <p><small>PRECIO</small></p>
98 <div class="py-1 mt-2 badge-pill bg-dark text-white"> 98 <div class="py-1 mt-2 badge-pill bg-dark text-white">
99 <p><small>{{articulo.PreVen | currency}}</small></p> 99 <p><small>{{articulo.PreVen | currency}}</small></p>
100 </div> 100 </div>
101 </div> 101 </div>
102 <!-- ELIMINAR --> 102 <!-- ELIMINAR -->
103 <div class="col-3 align-self-center"> 103 <div class="col-3 align-self-center">
104 <div class="row mx-0 justify-content-center"> 104 <div class="row mx-0 justify-content-center">
105 <div 105 <div
106 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white" 106 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
107 (click)="deleteArticulo(i)"> 107 (click)="deleteArticulo(i)">
108 <span> 108 <span>
109 <small class="pr-2">ELIMINAR</small> 109 <small class="pr-2">ELIMINAR</small>
110 <img 110 <img
111 draggable="false" 111 draggable="false"
112 ondragstart="return false;" 112 ondragstart="return false;"
113 (contextmenu)="false" 113 (contextmenu)="false"
114 class="icon-20 rotate-45" 114 class="icon-20 rotate-45"
115 src="assets/img/mas-blanco.svg"> 115 src="assets/img/mas-blanco.svg">
116 </span> 116 </span>
117 </div> 117 </div>
118 </div> 118 </div>
119 </div> 119 </div>
120 </div> 120 </div>
121 </div> 121 </div>
122 </div> 122 </div>
123 </div> 123 </div>
124 <!-- TOTAL --> 124 <!-- TOTAL -->
125 <div class="row mx-3 mt-2 h-auto justify-content-end"> 125 <div class="row mx-3 mt-2 h-auto justify-content-end">
126 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div> 126 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>
127 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total"> 127 <div class="col-2 p-0 bg-primary d-none d-sm-block bg-total">
128 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 128 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
129 </div> 129 </div>
130 </div> 130 </div>
131 <!-- CONTINUAR --> 131 <!-- CONTINUAR -->
132 <div 132 <div
133 *ngIf="articuloService.carrito.length" 133 *ngIf="articuloService.carrito.length"
134 class="row mx-3 mt-4 h-auto justify-content-end"> 134 class="row mx-3 mt-4 h-auto justify-content-end">
135 <div 135 <div
136 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 136 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
137 [routerLink]="['/forma-pago']"> 137 [routerLink]="['/forma-pago']">
138 <span> 138 <span>
139 <small class="pr-2">CONTINUAR</small> 139 <small class="pr-2">CONTINUAR</small>
140 <img 140 <img
141 draggable="false" 141 draggable="false"
142 ondragstart="return false;" 142 ondragstart="return false;"
143 (contextmenu)="false" 143 (contextmenu)="false"
144 class="icon-20" 144 class="icon-20"
145 src="assets/img/ir.svg"> 145 src="assets/img/ir.svg">
146 </span> 146 </span>
147 </div> 147 </div>
148 </div> 148 </div>
149 <!-- SEGUIR COMPRANDO --> 149 <!-- SEGUIR COMPRANDO -->
150 <!-- <div class="row mx-3 mt-2 h-auto justify-content-end"> 150 <!-- <div class="row mx-3 mt-2 h-auto justify-content-end">
151 <div 151 <div
152 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 152 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
153 (click)="goBack()"> 153 (click)="goBack()">
154 <span> 154 <span>
155 <small class="pr-2">SEGUIR COMPRANDO</small> 155 <small class="pr-2">SEGUIR COMPRANDO</small>
156 <img 156 <img
157 draggable="false" 157 draggable="false"
158 ondragstart="return false;" 158 ondragstart="return false;"
159 (contextmenu)="false" 159 (contextmenu)="false"
160 class="icon-20" 160 class="icon-20"
161 src="assets/img/ir.svg"> 161 src="assets/img/ir.svg">
162 </span> 162 </span>
163 </div> 163 </div>
164 </div> --> 164 </div> -->
165 </div> 165 </div>
166 166
167 </div> 167 </div>
168 168