Skip to content

Commit b875dee

Browse files
mattbrailsfordmattbrailsford
committed
- localization
- responsive styles - variables
1 parent 73e7918 commit b875dee

File tree

3 files changed

+153
-27
lines changed

3 files changed

+153
-27
lines changed

‎src/Umbraco.Commerce.Cart/Client/src/apis/ucc.api.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@ export class UccApi {
7171
shipping: 'Shipping',
7272
shipping_message: 'Calculated at Checkout',
7373
total: 'Total',
74+
remove: 'Remove',
75+
cart_empty: 'Your cart is empty',
7476
},
7577
...cfg.locales
7678
}

‎src/Umbraco.Commerce.Cart/Client/src/components/ucc-cart-modal.element.ts

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,29 @@ export class UccCartModalElement extends UccModalElement
2929
if (config) {
3030
this.setTitle(config.locales![config.lang].cart_title);
3131
this.setCloseButtonLabel(config.locales![config.lang].close_cart);
32+
3233
this._host.querySelector<HTMLElement>('.ucc-cart-total--taxes .ucc-cart-total-label')!.textContent = config.locales![config.lang].taxes;
3334
this._host.querySelector<HTMLElement>('.ucc-cart-total--shipping .ucc-cart-total-label')!.textContent = config.locales![config.lang].shipping;
3435
this._host.querySelector<HTMLElement>('.ucc-cart-total--shipping .ucc-cart-total-value')!.textContent = config.locales![config.lang].shipping_message;
3536
this._host.querySelector<HTMLElement>('.ucc-cart-total--total .ucc-cart-total-label')!.textContent = config.locales![config.lang].total;
3637
this._host.querySelector<HTMLElement>('.ucc-cart-checkout')!.textContent = config.locales![config.lang].checkout;
3738
this._host.querySelector<HTMLElement>('.ucc-cart-checkout')!.setAttribute('href', config.checkoutUrl!);
39+
40+
const cartItemRemoveBtns = this._host.querySelectorAll('.ucc-cart-item__remove');
41+
cartItemRemoveBtns.forEach((btn) => {
42+
btn.setAttribute('title', config.locales![config.lang].remove);
43+
});
44+
45+
const cartEmptyMsg = this._host.querySelector<HTMLElement>('.ucc-cart-empty__message');
46+
if (cartEmptyMsg) {
47+
cartEmptyMsg.textContent = config.locales![config.lang].cart_empty;
48+
}
3849
}
3950
});
4051
this._context.cart.subscribe((cart: Cart) => {
52+
53+
const config = this._context.config.get()!;
54+
4155
if (cart && cart.items.length > 0) {
4256
this._host.querySelector('.ucc-cart-items')!.innerHTML = cart.items.map((item) => `
4357
<div class="ucc-cart-item" data-id="${ item.id }">
@@ -61,7 +75,7 @@ export class UccCartModalElement extends UccModalElement
6175
` : ''}
6276
</div>
6377
<div class="ucc-split__right">
64-
<button class="ucc-cart-item__delete"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg></button>
78+
<button class="ucc-cart-item__remove" title="${config?.locales![config.lang].remove ?? 'Remove'}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg></button>
6579
</div>
6680
</div>
6781
<div class="ucc-cart-item__foot ucc-split ucc-split--center">
@@ -80,7 +94,14 @@ export class UccCartModalElement extends UccModalElement
8094
this._host.querySelector<HTMLElement>('.ucc-cart-total--total .ucc-cart-total-value')!.textContent = cart.subtotal.withTax;
8195
this._host.querySelector<HTMLElement>('.ucc-cart-checkout')!.classList.remove('ucc-cart-checkout--disabled');
8296
} else {
83-
this._host.querySelector<HTMLElement>('.ucc-cart-items')!.textContent = 'Cart is empty';
97+
this._host.querySelector<HTMLElement>('.ucc-cart-items')!.innerHTML = `
98+
<div class="ucc-cart-empty">
99+
<div>
100+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-cart"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>
101+
<div class="ucc-cart-empty__message">${config?.locales![config.lang].cart_empty ?? 'Your cart is empty'}</div>
102+
</div>
103+
</div>
104+
`;
84105
this._host.querySelector<HTMLElement>('.ucc-cart-totals')!.style.display = 'none';
85106
this._host.querySelector<HTMLElement>('.ucc-cart-checkout')!.classList.add('ucc-cart-checkout--disabled');
86107
}
@@ -115,16 +136,16 @@ export class UccCartModalElement extends UccModalElement
115136
<span class="ucc-cart-total-value ucc-split__right"></span>
116137
</div>
117138
</div>
118-
<a class="ucc-cart-checkout" href="#">Checkout</a>
139+
<a class="ucc-cart-checkout" href="#"></a>
119140
`)
120141

121142
// Listen for cart item events
122-
const deleteItem = async (item:CartItem) => {
143+
const removeItem = async (item:CartItem) => {
123144
await this._cartRepository.removeItem(this.storeIdOrAlias, item.id).then(() => {
124145
this._host.dispatchEvent(new UccEvent(UccEvent.CART_CHANGED));
125146
});
126147
}
127-
this._addCartItemEventListener('click', '.ucc-cart-item__delete', deleteItem);
148+
this._addCartItemEventListener('click', '.ucc-cart-item__remove', removeItem);
128149

129150
const updateQuantity = debounce(async (item:CartItem, el: Element) => {
130151
const quantity = parseFloat(el.querySelector<HTMLInputElement>('.ucc-cart-item__quantity')!.value);

‎src/Umbraco.Commerce.Cart/Client/src/styles/styles.css

Lines changed: 125 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,40 @@
1+
:root {
2+
3+
/* Colors */
4+
--ucc-primary-color: #155dfc;
5+
--ucc-primary-color-light: #51a2ff;
6+
--ucc-primary-color-dark: #193cb8;
7+
--ucc-danger-color: #9f0712;
8+
--ucc-danger-background-color: #ffc9c9;
9+
10+
/* Font */
11+
--ucc-font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
12+
13+
/* Text */
14+
--ucc-text-color: #364153;
15+
--ucc-text-color-light: #99a1af;
16+
--ucc-text-color-lighter: #c1c7d0;
17+
--ucc-text-color-dark: #101828;
18+
19+
--ucc-text-lg: 20px;
20+
--ucc-text-md: 16px;
21+
--ucc-text-sm: 14px;
22+
23+
/* Borders */
24+
--ucc-border-color: #ddd;
25+
--ucc-border-radius: 5px;
26+
27+
/* Components */
28+
--ucc-button-background-color: var(--ucc-primary-color);
29+
--ucc-button-text-color: #fff;
30+
--ucc-button-background-color-hover: var(--ucc-primary-color-dark);
31+
--ucc-button-text-color-hover: #fff;
32+
--ucc-button-background-color-disabled: #d1d5dc;
33+
--ucc-button-text-color-disabled: #fff;
34+
35+
--ucc-cart-width: 550px;
36+
}
37+
138
.ucc-modal-container {
239
position: relative;
340
}
@@ -20,7 +57,7 @@
2057
position: fixed;
2158
top: 0;
2259
right: 0;
23-
width: 500px;
60+
width: 100%;
2461
height: 100%;
2562
flex-direction: column;
2663
background-color: white;
@@ -31,22 +68,37 @@
3168
transform: translateX(0);
3269
}
3370

71+
@media (min-width: 768px) {
72+
.ucc-modal {
73+
width: var(--ucc-cart-width);
74+
border-left: solid 1px var(--ucc-border-color);
75+
}
76+
}
77+
3478
.ucc-modal-header {
3579
display: flex;
3680
justify-content: space-between;
3781
align-items: center;
3882
padding: 20px;
39-
border-bottom: 1px solid #ddd;
83+
border-bottom: 1px solid var(--ucc-border-color);
4084
}
4185

4286
.ucc-modal-title {
43-
font-size: 20px;
87+
font-family: var(--ucc-font-family), sans-serif;
88+
font-size: var(--ucc-text-lg);
4489
font-weight: 600;
90+
color: var(--ucc-text-color-dark);
4591
margin: 0;
4692
}
4793

4894
.ucc-modal-close {
4995
cursor: pointer;
96+
color: var(--ucc-text-color-dark);
97+
transition: color 0.2s;
98+
}
99+
100+
.ucc-modal-close:hover {
101+
color: var(--ucc-text-color-light);
50102
}
51103

52104
.ucc-modal-body {
@@ -58,56 +110,68 @@
58110
display: flex;
59111
flex-direction: column;
60112
padding: 20px;
61-
border-top: 1px solid #ddd;
113+
border-top: 1px solid var(--ucc-border-color);
62114
}
63115

64116
.ucc-cart-item {
117+
font-family: var(--ucc-font-family), sans-serif;
65118
display: flex;
66119
padding: 20px;
67-
border-bottom: 1px solid #eee;
120+
border-bottom: 1px solid var(--ucc-border-color);
68121
}
69122

70123
.ucc-cart-item__image {
71124
margin-right: 20px;
72125
}
73126

74127
.ucc-cart-item__image img {
75-
width: 75px;
76-
height: 75px;
128+
width: 50px;
129+
height: 50px;
77130
max-width: none;
78131
max-height: none;
79132
object-fit: cover;
80-
border: solid 1px #ddd;
81-
border-radius: 5px;
133+
border: solid 1px var(--ucc-border-color);
134+
border-radius: var(--ucc-border-radius);
135+
}
136+
137+
@media (min-width: 768px) {
138+
.ucc-cart-item__image img {
139+
width: 75px;
140+
height: 75px;
141+
}
82142
}
83143

84144
.ucc-cart-item__body {
85145
flex: 1;
86146
}
87147

88148
.ucc-cart-item__title {
149+
font-family: var(--ucc-font-family), sans-serif;
89150
font-weight: 600;
90-
font-size: 16px;
151+
font-size: var(--ucc-text-md);
152+
color: var(--ucc-text-color);
91153
line-height: 1.2;
92154
margin-bottom: 5px;
93155
}
94156

95-
.ucc-cart-item__delete {
157+
.ucc-cart-item__remove {
96158
display: flex;
97159
align-items: center;
98160
justify-content: center;
99161
cursor: pointer;
100-
background-color: #eee;
162+
color: var(--ucc-text-color-light);
163+
background-color: transparent;
101164
width: 30px;
102165
height: 30px;
103166
min-width: 30px;
104167
min-height: 30px;
105168
border-radius: 50%;
106-
transition: background-color 0.2s;
169+
transition: background-color 0.2s, color 0.2s;
107170
}
108171

109-
.ucc-cart-item__delete:hover {
110-
background-color: #ffc9c9;
172+
.ucc-cart-item__remove:hover {
173+
color: var(--ucc-danger-color);
174+
background-color: var(--ucc-danger-background-color);
111175
}
112176

113177
.ucc-cart-item__foot {
@@ -118,13 +182,13 @@
118182
width: 75px;
119183
padding: 5px;
120184
text-align: left;
121-
border: 1px solid #ddd;
122-
border-radius: 3px;
185+
border: 1px solid var(--ucc-border-color);
186+
border-radius: var(--ucc-border-radius);
123187
}
124188

125189
.ucc-cart-item__attribute {
126-
font-size: 14px;
127-
color: #666;
190+
font-size: var(--ucc-text-sm);
191+
color: var(--ucc-text-color-light);
128192
}
129193

130194
.ucc-cart-item__attribute-key:after {
@@ -136,8 +200,9 @@
136200
}
137201

138202
.ucc-cart-item__price {
203+
color: var(--ucc-text-color-dark);
139204
font-weight: bold;
140-
font-size: 20px;
205+
font-size: var(--ucc-text-lg);
141206
}
142207

143208
.ucc-cart-totals {
@@ -147,6 +212,8 @@
147212
}
148213

149214
.ucc-cart-total {
215+
font-size: var(--ucc-text-md);
216+
color: var(--ucc-text-color);
150217
margin-bottom: 5px;
151218
}
152219

@@ -157,11 +224,47 @@
157224
.ucc-cart-checkout {
158225
cursor: pointer;
159226
display: block;
227+
font-family: var(--ucc-font-family), sans-serif;
160228
font-weight: 600;
161-
background-color: #4fd1c5;
229+
font-size: var(--ucc-text-md);
230+
background-color: var(--ucc-button-background-color);
231+
color: var(--ucc-button-text-color);
162232
padding: 10px 20px;
163233
text-align: center;
164-
border-radius: 3px;
234+
border-radius: var(--ucc-border-radius);
235+
transition: background-color 0.2s, color 0.2s;
236+
}
237+
238+
.ucc-cart-checkout:hover {
239+
background-color: var(--ucc-button-background-color-hover);
240+
color: var(--ucc-button-text-color-hover);
241+
}
242+
243+
.ucc-cart-checkout--disabled,
244+
.ucc-cart-checkout--disabled:hover {
245+
cursor: not-allowed;
246+
background-color: var(--ucc-button-background-color-disabled);
247+
color: var(--ucc-button-text-color-disabled);
248+
}
249+
250+
.ucc-cart-empty {
251+
font-family: var(--ucc-font-family), sans-serif;
252+
font-size: var(--ucc-text-lg);
253+
font-weight: 600;
254+
color: var(--ucc-text-color-lighter);
255+
text-align: center;
256+
display: flex;
257+
align-items: center;
258+
justify-content: center;
259+
width: 100%;
260+
height: 100%;
261+
}
262+
263+
.ucc-cart-empty svg {
264+
display: inline-block;
265+
width: 40px;
266+
height: 40px;
267+
margin-bottom: 10px;
165268
}
166269

167270
.ucc-split {

0 commit comments

Comments
 (0)