Marcelo Puebla / autoservicio-axion

1

1

2

2

3

<app-header-publicidad></app-header-publicidad>

3

<app-header-publicidad></app-header-publicidad>

4

5

5

6

6

7

7

8

8

9

9

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

15

15

16

<div

16

<div

17

class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible"

17

class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible"

18

(scroll)="scrollEvent($event)">

18

(scroll)="scrollEvent($event)">

19

19

20

20

21

<p class="h5 text-center">No hay artículos en el carrito</p>

21

<p class="h5 text-center">No hay artículos en el carrito</p>

22

</div>

22

</div>

23

23

24

<div

24

<div

25

class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"

25

class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"

26

*ngFor="let articulo of articuloService.carrito; let i = index;"

26

*ngFor="let articulo of articuloService.carrito; let i = index;"

27

@EnterLeave>

27

@EnterLeave>

28

28

29

29

30

30

31

31

32

32

33

<img

33

<img

34

draggable="false"

34

draggable="false"

35

ondragstart="return false;"

35

ondragstart="return false;"

36

(contextmenu)="false"

36

(contextmenu)="false"

37

class="d-block mx-auto h-55 rounded-sm shadow-sm"

37

class="d-block mx-auto h-55 rounded-sm shadow-sm"

38

src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"

38

src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"

39

onerror="this.src='assets/img/image-not-found.jpg'">

39

onerror="this.src='assets/img/image-not-found.jpg'">

40

40

41

41

42

<small>{{articulo.DetArt}}</small>

42

<small>{{articulo.DetArt}}</small>

43

</p>

43

</p>

44

</div>

44

</div>

45

</div>

45

</div>

46

46

47

47

48

48

49

49

50

50

51

51

52

52

53

53

54

<img

54

<img

55

draggable="false"

55

draggable="false"

56

ondragstart="return false;"

56

ondragstart="return false;"

57

(contextmenu)="false"

57

(contextmenu)="false"

58

class="d-block ml-auto py-2 icon-20 btn-effect"

58

class="d-block ml-auto py-2 icon-20 btn-effect"

59

src="assets/img/menos-blanco.svg"

59

src="assets/img/menos-blanco.svg"

60

(click)="substractCant(articulo)">

60

(click)="substractCant(articulo)">

61

</div>

61

</div>

62

62

63

63

64

<p><small>{{articulo.cantidad}}</small></p>

64

<p><small>{{articulo.cantidad}}</small></p>

65

</div>

65

</div>

66

66

67

67

68

<img

68

<img

69

draggable="false"

69

draggable="false"

70

ondragstart="return false;"

70

ondragstart="return false;"

71

(contextmenu)="false"

71

(contextmenu)="false"

72

class="d-block ml-auto py-2 icon-20 btn-effect"

72

class="d-block ml-auto py-2 icon-20 btn-effect"

73

src="assets/img/mas-blanco.svg"

73

src="assets/img/mas-blanco.svg"

74

(click)="addCant(articulo)">

74

(click)="addCant(articulo)">

75

</div>

75

</div>

76

</div>

76

</div>

77

</div>

77

</div>

78

</div>

78

</div>

79

</div>

79

</div>

80

80

81

<!-- <div class="col-3 border-right border-primary">

81

<!-- <div class="col-3 border-right border-primary">

82

<p><small>OPCIONALES</small></p>

82

<p><small>OPCIONALES</small></p>

83

<div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>

83

<div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>

84

84

85

85

86

<span>

86

<span>

87

<small class="pr-2">CAMBIAR</small>

87

<small class="pr-2">CAMBIAR</small>

88

<img

88

<img

89

draggable="false"

89

draggable="false"

90

ondragstart="return false;"

90

ondragstart="return false;"

91

(contextmenu)="false"

91

(contextmenu)="false"

92

class="icon-20"

92

class="icon-20"

93

src="assets/img/ir.svg">

93

src="assets/img/ir.svg">

94

</span>

94

</span>

95

</div>

95

</div>

96

</div> -->

96

</div> -->

97

97

98

98

99

<p><small>PRECIO</small></p>

99

<p><small>PRECIO</small></p>

100

100

101

<p><small>{{articulo.PreVen | currency}}</small></p>

101

<p><small>{{articulo.PreVen | currency}}</small></p>

102

</div>

102

</div>

103

</div>

103

</div>

104

104

105

105

106

106

107

<div

107

<div

108

class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"

108

class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"

109

(click)="deleteArticulo(i)">

109

(click)="deleteArticulo(i)">

110

<span>

110

<span>

111

<small class="pr-2">ELIMINAR</small>

111

<small class="pr-2">ELIMINAR</small>

112

<img

112

<img

113

draggable="false"

113

draggable="false"

114

ondragstart="return false;"

114

ondragstart="return false;"

115

(contextmenu)="false"

115

(contextmenu)="false"

116

class="icon-20 rotate-45"

116

class="icon-20 rotate-45"

117

src="assets/img/mas-blanco.svg">

117

src="assets/img/mas-blanco.svg">

118

</span>

118

</span>

119

</div>

119

</div>

120

</div>

120

</div>

121

</div>

121

</div>

122

</div>

122

</div>

123

</div>

123

</div>

124

</div>

124

</div>

125

</div>

125

</div>

126

126

127

127

128

<div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>

128

<div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>

129

129

130

<p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>

130

<p class="text-center text-white py-1">{{articuloService.subTotal | currency}}</p>

131

</div>

131

</div>

132

</div>

132

</div>

133

133

134

<div

134

<div

135

*ngIf="articuloService.carrito.length"

135

*ngIf="articuloService.carrito.length"

136

class="row mx-3 mt-4 h-auto justify-content-end">

136

class="row mx-3 mt-4 h-auto justify-content-end">

137

<div

137

<div

138

class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"

138

class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"

139

[routerLink]="['/forma-pago']">

139

[routerLink]="['/forma-pago']">

140

<span>

140

<span>

141

<small class="pr-2">CONTINUAR</small>

141

<small class="pr-2">CONTINUAR</small>

142

<img

142

<img

143

draggable="false"

143

draggable="false"

144

ondragstart="return false;"

144

ondragstart="return false;"

145

(contextmenu)="false"

145

(contextmenu)="false"

146

class="icon-20"

146

class="icon-20"

147

src="assets/img/ir.svg">

147

src="assets/img/ir.svg">

148

</span>

148

</span>

149

</div>

149

</div>

150

</div>

150

</div>

151

151

152

<!-- <div class="row mx-3 mt-2 h-auto justify-content-end">

152

<!-- <div class="row mx-3 mt-2 h-auto justify-content-end">

153

<div

153

<div

154

class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"

154

class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"

155

(click)="goBack()">

155

(click)="goBack()">

156

<span>

156

<span>

157

<small class="pr-2">SEGUIR COMPRANDO</small>

157

<small class="pr-2">SEGUIR COMPRANDO</small>

158

<img

158

<img

159

draggable="false"

159

draggable="false"

160

ondragstart="return false;"

160

ondragstart="return false;"

161

(contextmenu)="false"

161

(contextmenu)="false"

162

class="icon-20"

162

class="icon-20"

163

src="assets/img/ir.svg">

163

src="assets/img/ir.svg">

164

</span>

164

</span>

165

</div>

165

</div>

166

</div> -->

166

</div> -->

167

</div>

167

</div>

168

169

</div>

169

</div>

170

GITLAB

Marcelo Puebla / autoservicio-axion

Arreglado correctamente el total en el carrito

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

1	.bg-total {
2	width: 75px;
3	border-radius: 1.5rem;
4	}
5