Skip to content

Commit 73e7918

Browse files
mattbrailsfordmattbrailsford
committed
Got cart dialog working and updating
1 parent 1807b31 commit 73e7918

29 files changed

+685
-154
lines changed

‎NuGet.config

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<configuration>
3+
<packageSources>
4+
<clear />
5+
<add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
6+
<add key="Umbraco Prereleases" value="https://www.myget.org/F/umbracoprereleases/api/v3/index.json" />
7+
<add key="Umbraco Nightly" value="https://www.myget.org/F/umbraconightly/api/v3/index.json" />
8+
</packageSources>
9+
<packageSourceMapping>
10+
<packageSource key="nuget.org">
11+
<package pattern="Umbraco" />
12+
<package pattern="Umbraco.*" />
13+
<package pattern="*" />
14+
</packageSource>
15+
<packageSource key="Umbraco Nightly">
16+
<package pattern="Umbraco.Commerce" />
17+
<package pattern="Umbraco.Commerce.*" />
18+
<package pattern="Umbraco.Licenses" />
19+
</packageSource>
20+
<packageSource key="Umbraco Prereleases">
21+
<package pattern="Umbraco.Commerce" />
22+
<package pattern="Umbraco.Commerce.*" />
23+
<package pattern="Umbraco.Licenses" />
24+
</packageSource>
25+
</packageSourceMapping>
26+
</configuration>

‎src/Umbraco.Commerce.Cart/Client/src/apis/ucc-add-to-cart-button.api.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { isEmpty } from "../utils.ts";
22
import { MasterProductData } from "../types.ts";
3-
import { UcCartRepository } from "../repositories/cart.respository.ts";
3+
import { UccCartRepository } from "../repositories/cart.respository.ts";
44
import { UCC_CART_CONTEXT } from "../contexts/ucc.context.ts";
5+
import { UccEvent } from "../events/ucc.event.ts";
56

67
export class UccAddToCartButtonApi {
78

@@ -27,7 +28,7 @@ export class UccAddToCartButtonApi {
2728

2829
private readonly _host: HTMLElement;
2930
private _productData:MasterProductData | null = null;
30-
private _cartRepository = new UcCartRepository();
31+
private _cartRepository = new UccCartRepository();
3132
private _context = UCC_CART_CONTEXT;
3233

3334
constructor(host: HTMLElement) {
@@ -42,7 +43,8 @@ export class UccAddToCartButtonApi {
4243
e.preventDefault();
4344
if (this._productData) {
4445
await this._cartRepository.addToCart(this._context.config.get()!.store!, this._productData).then(() => {
45-
this._host.dispatchEvent(new CustomEvent('uc-cart-item-added', { bubbles: true, composed: true }));
46+
this._host.dispatchEvent(new UccEvent(UccEvent.CART_CHANGED));
47+
this._host.dispatchEvent(new UccEvent(UccEvent.CART_OPEN));
4648
})
4749
}
4850
});
@@ -52,8 +54,8 @@ export class UccAddToCartButtonApi {
5254
{
5355
const observer = new MutationObserver((mutations) => {
5456
mutations.forEach((mutation) => {
55-
if (mutation.type === 'attributes' && mutation.attributeName?.startsWith('data-uc-')) {
56-
this._productData = this._processDataAttributes(UccAddToCartButtonApi._attrMap, 'data-uc-');
57+
if (mutation.type === 'attributes' && mutation.attributeName?.startsWith('data-ucc-')) {
58+
this._productData = this._processDataAttributes(UccAddToCartButtonApi._attrMap, 'data-ucc-');
5759
}
5860
});
5961
});

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { UccEvent } from "../events/ucc.event.ts";
2+
3+
export class UccCartButtonApi {
4+
5+
private readonly _host: HTMLElement;
6+
7+
constructor(host: HTMLElement) {
8+
this._host = host;
9+
this._bindEvents();
10+
}
11+
12+
private _bindEvents = () =>
13+
{
14+
this._host.addEventListener('click', async (e) => {
15+
e.preventDefault();
16+
this._host.dispatchEvent(new UccEvent(UccEvent.CART_OPEN));
17+
});
18+
}
19+
20+
}

‎src/Umbraco.Commerce.Cart/Client/src/apis/ucc-cart-count-label.api.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { UCC_CART_CONTEXT } from "../contexts/ucc.context.ts";
2+
import { Cart } from "../types.ts";
3+
4+
export class UccCartCountLabelApi {
5+
6+
private readonly _host: HTMLElement;
7+
private readonly _context = UCC_CART_CONTEXT;
8+
9+
constructor(host: HTMLElement) {
10+
this._host = host;
11+
this._observeCart();
12+
}
13+
14+
private _observeCart = () =>
15+
{
16+
this._context.cart.subscribe((cart:Cart) => {
17+
if (cart) {
18+
this._host.textContent = cart.items.reduce((acc, item) => acc + item.quantity, 0).toString();
19+
}
20+
});
21+
}
22+
23+
}

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

Lines changed: 48 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import { processAddToCartButtons } from "../processors/ucc-add-to-cart-button.processor.ts";
2-
import { CartConfig } from "../types.ts";
2+
import { Cart, CartConfig } from "../types.ts";
33
import { UCC_CART_CONTEXT } from "../contexts/ucc.context.ts";
44
import { UccCartModalElement } from "../components/ucc-cart-modal.element.ts";
5-
import { UccCartUpdateEvent } from "../events/ucc-cart-update.event.ts";
5+
import { UccEvent } from "../events/ucc.event.ts";
6+
import { UccCartRepository } from "../repositories/cart.respository.ts";
7+
import {processCartButtons} from "../processors/ucc-cart-button.processor.ts";
8+
import {processCartCountLabels} from "../processors/ucc-cart-count-labels.processor.ts";
69

710
export class UccApi {
811

912
private readonly _host;
1013
private _context = UCC_CART_CONTEXT;
11-
private _initialized = false;
14+
private _cartRepository = new UccCartRepository();
1215
private _cartModal: UccCartModalElement;
1316

1417
constructor(host: HTMLElement) {
@@ -18,14 +21,21 @@ export class UccApi {
1821
this._bindEvents();
1922
}
2023

24+
private _fetchCart = async () => {
25+
return await this._cartRepository.getCart(this._context.config.get()!.store!).then(data => {
26+
this._context.cart.set(data as Cart);
27+
})
28+
}
29+
2130
private _bindEvents = () => {
22-
this._host.addEventListener('uc-cart-item-added', async () => {
23-
// TODO: Check for an autoOpen config option
31+
this._host.addEventListener(UccEvent.CART_OPEN, async () => {
2432
this.openCart();
2533
});
26-
this._host.addEventListener(UccCartUpdateEvent.TYPE, async (e) => {
27-
const evt = e as UccCartUpdateEvent;
28-
this._context.cart.set(evt.cart);
34+
this._host.addEventListener(UccEvent.CART_CLOSE, async () => {
35+
this.closeCart();
36+
});
37+
this._host.addEventListener(UccEvent.CART_CHANGED, async () => {
38+
await this._fetchCart();
2939
});
3040
}
3141

@@ -40,42 +50,43 @@ export class UccApi {
4050
observer.observe(this._host.ownerDocument.documentElement, { attributes: true });
4151
}
4252

43-
public init = (config:Partial<CartConfig>) => {
53+
public init = (config?:Partial<CartConfig>) => {
4454

45-
// Merge config with default values
46-
const cfg = {
47-
lang: 'en',
48-
...config
49-
}
50-
51-
// Ensure there is a default locale
52-
if (!cfg.locales?.en)
55+
if (config)
5356
{
54-
cfg.locales = {
55-
en: {
56-
cart_title: 'Cart Summary',
57-
close_cart: 'Close Cart',
58-
checkout: 'Checkout',
59-
taxes: 'Taxes',
60-
shipping: 'Shipping',
61-
shipping_message: 'Calculated at Checkout',
62-
total: 'Total',
63-
},
64-
...cfg.locales
57+
// Merge config with default values
58+
const cfg = {
59+
lang: 'en',
60+
...config
6561
}
66-
}
67-
68-
// Set the config in context
69-
this._context.config.set(cfg);
70-
71-
// One time initialization
72-
if (!this._initialized) {
73-
// TODO: Ensure cart model is created
74-
this._initialized = true;
62+
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+
},
75+
...cfg.locales
76+
}
77+
}
78+
79+
// Set the config in context
80+
this._context.config.set(cfg);
81+
82+
// Fetch the cart
83+
this._fetchCart();
7584
}
7685

7786
// Process UI elements
7887
processAddToCartButtons(this._host);
88+
processCartButtons(this._host);
89+
processCartCountLabels(this._host);
7990
}
8091

8192
public setLang = (lang:string) => {

0 commit comments

Comments
 (0)