Luis Suarez / 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

16

17

17

18

18

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

21

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

26

27

27

28

28

29

29

30

30

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

38

39

39

40

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

40

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

41

</p>

41

</p>

42

</div>

42

</div>

43

</div>

43

</div>

44

44

45

45

46

46

47

47

48

48

49

49

50

50

51

51

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

60

61

61

62

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

62

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

63

</div>

63

</div>

64

64

65

65

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

78

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

82

83

83

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

95

96

96

97

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

97

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

98

98

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

102

103

103

104

104

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

124

125

125

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

127

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

131

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

149

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

167

</div>

167

</div>

168

GITLAB

Luis Suarez / autoservicio-axion

aumento tamaño del total en 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 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