Skip to content

Commit 372785e

Browse files
mattbrailsfordmattbrailsford
committed
added support for displaying properties with translatable labels
1 parent b875dee commit 372785e

File tree

4 files changed

+85
-55
lines changed

4 files changed

+85
-55
lines changed

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

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,20 @@ import {processCartCountLabels} from "../processors/ucc-cart-count-labels.proces
99

1010
export class UccApi {
1111

12+
public readonly defaultLocales : Record<string, Record<string, string>> = {
13+
en: {
14+
cart_title: 'Cart Summary',
15+
close_cart: 'Close Cart',
16+
checkout: 'Checkout',
17+
taxes: 'Taxes',
18+
shipping: 'Shipping',
19+
shipping_message: 'Calculated at Checkout',
20+
total: 'Total',
21+
remove: 'Remove',
22+
cart_empty: 'Your cart is empty',
23+
},
24+
}
25+
1226
private readonly _host;
1327
private _context = UCC_CART_CONTEXT;
1428
private _cartRepository = new UccCartRepository();
@@ -54,29 +68,20 @@ export class UccApi {
5468

5569
if (config)
5670
{
71+
const { locales, ...rest } = config;
72+
5773
// Merge config with default values
58-
const cfg = {
74+
const cfg : CartConfig = {
5975
lang: 'en',
60-
...config
76+
...rest
6177
}
6278

63-
// Ensure there is a default locale
64-
if (!cfg.locales?.en) {
65-
cfg.locales = {
66-
en: {
67-
cart_title: 'Cart Summary',
68-
close_cart: 'Close Cart',
69-
checkout: 'Checkout',
70-
taxes: 'Taxes',
71-
shipping: 'Shipping',
72-
shipping_message: 'Calculated at Checkout',
73-
total: 'Total',
74-
remove: 'Remove',
75-
cart_empty: 'Your cart is empty',
76-
},
77-
...cfg.locales
78-
}
79+
cfg.locales = {
80+
...this.defaultLocales,
81+
...locales
7982
}
83+
84+
console.log(cfg)
8085

8186
// Set the config in context
8287
this._context.config.set(cfg);
@@ -113,6 +118,14 @@ export class UccApi {
113118
});
114119
}
115120

121+
public showProperty = (property:string) => {
122+
const currentConfig = this._context.config.get()!;
123+
this._context.config.set({
124+
properties: [...currentConfig.properties!, property],
125+
...currentConfig
126+
});
127+
}
128+
116129
public openCart = () => {
117130
this._cartModal.open();
118131
}

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

Lines changed: 45 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -53,42 +53,55 @@ export class UccCartModalElement extends UccModalElement
5353
const config = this._context.config.get()!;
5454

5555
if (cart && cart.items.length > 0) {
56-
this._host.querySelector('.ucc-cart-items')!.innerHTML = cart.items.map((item) => `
57-
<div class="ucc-cart-item" data-id="${ item.id }">
58-
${item.imageUrl ? `
59-
<figure class="ucc-cart-item__image">
60-
<img src="${item.imageUrl}" alt="${item.name}">
61-
</figure>` : ''}
62-
<div class="ucc-cart-item__body">
63-
<div class="ucc-cart-item__content ucc-split">
64-
<div class="ucc-split__left">
65-
<h3 class="ucc-cart-item__title">${item.name}</h3>
66-
${item.attributes ? `
67-
<div class="ucc-cart-item__attributes">
68-
${Object.keys(item.attributes).map((key) => `
69-
<div class="ucc-cart-item__attribute">
70-
<span class="ucc-cart-item__attribute-key">${key}</span>
71-
<span class="ucc-cart-item__attribute-value">${item.attributes![key]}</span>
72-
</div>
73-
`).join('')}
74-
</div>
75-
` : ''}
56+
this._host.querySelector('.ucc-cart-items')!.innerHTML = cart.items.map((item) => {
57+
const propsToDisplay = Object.keys(item.properties ?? {}).filter((x) => (config.properties ?? []).map(y => y.toLowerCase()).includes(x.toLowerCase()));
58+
return `
59+
<div class="ucc-cart-item" data-id="${ item.id }">
60+
${item.imageUrl ? `
61+
<figure class="ucc-cart-item__image">
62+
<img src="${item.imageUrl}" alt="${item.name}">
63+
</figure>` : ''}
64+
<div class="ucc-cart-item__body">
65+
<div class="ucc-cart-item__content ucc-split">
66+
<div class="ucc-split__left">
67+
<h3 class="ucc-cart-item__title">${item.name}</h3>
68+
${item.attributes ? `
69+
<div class="ucc-cart-item__attributes">
70+
${Object.keys(item.attributes).map((key) => `
71+
<div class="ucc-cart-item__attribute">
72+
<span class="ucc-cart-item__attribute-key">${key}</span>
73+
<span class="ucc-cart-item__attribute-value">${item.attributes![key]}</span>
74+
</div>
75+
`).join('')}
76+
</div>
77+
` : ''}
78+
${propsToDisplay.length > 0 ? `
79+
<div class="ucc-cart-item__properties">
80+
${propsToDisplay.map((key) => `
81+
<div class="ucc-cart-item__property">
82+
<span class="ucc-cart-item__property-key">${config?.locales![config.lang][`property_${key.toLowerCase()}`] ?? key}</span>
83+
<span class="ucc-cart-item__property-value">${item.properties![key]}</span>
84+
</div>
85+
`).join('')}
86+
</div>
87+
` : ''}
88+
</div>
89+
<div class="ucc-split__right">
90+
<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>
91+
</div>
7692
</div>
77-
<div class="ucc-split__right">
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>
79-
</div>
80-
</div>
81-
<div class="ucc-cart-item__foot ucc-split ucc-split--center">
82-
<div class="ucc-split__left">
83-
<input type="number" value="${item.quantity}" min="1" class="ucc-cart-item__quantity">
84-
</div>
85-
<div class="ucc-split__right">
86-
<span class="ucc-cart-item__price">${item.total.withTax}</span>
93+
<div class="ucc-cart-item__foot ucc-split ucc-split--center">
94+
<div class="ucc-split__left">
95+
<input type="number" value="${item.quantity}" min="1" class="ucc-cart-item__quantity">
96+
</div>
97+
<div class="ucc-split__right">
98+
<span class="ucc-cart-item__price">${item.total.withTax}</span>
99+
</div>
87100
</div>
88101
</div>
89102
</div>
90-
</div>
91-
`).join('');
103+
`
104+
}).join('');
92105
this._host.querySelector<HTMLElement>('.ucc-cart-totals')!.style.display = '';
93106
this._host.querySelector<HTMLElement>('.ucc-cart-total--taxes .ucc-cart-total-value')!.textContent = cart.subtotal.tax;
94107
this._host.querySelector<HTMLElement>('.ucc-cart-total--total .ucc-cart-total-value')!.textContent = cart.subtotal.withTax;

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -186,17 +186,20 @@
186186
border-radius: var(--ucc-border-radius);
187187
}
188188

189-
.ucc-cart-item__attribute {
189+
.ucc-cart-item__attribute,
190+
.ucc-cart-item__property {
190191
font-size: var(--ucc-text-sm);
191192
color: var(--ucc-text-color-light);
192193
}
193194

194-
.ucc-cart-item__attribute-key:after {
195-
content: ':';
195+
.ucc-cart-item__attribute-key,
196+
.ucc-cart-item__property-key {
197+
font-weight: 600;
196198
}
197199

198-
.ucc-cart-item__attribute-value {
199-
font-weight: 600;
200+
.ucc-cart-item__attribute-key:after,
201+
.ucc-cart-item__property-key:after {
202+
content: ':';
200203
}
201204

202205
.ucc-cart-item__price {

‎src/Umbraco.Commerce.Cart/Client/src/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export type CartConfig = {
2020
store?: string
2121
checkoutUrl?: string
2222
lang: string
23+
properties?: string[]
2324
locales?: Record<string, Record<string, string>>
2425
}
2526

0 commit comments

Comments
 (0)