CartList.svelte

<script>
	import {subscribe, publish} from './pubsub';
	import {onMount} from 'svelte';
	import {ItemAddEvent, ItemRemoveEvent, CartChangesEvent} from './project-events'
	import { Product, Cart } from './Cart'
	
	let cart = new Cart();
	let cartData = []		
	let total =0
	
	onMount(() => {
		let adder = subscribe(ItemAddEvent, (item) =>{			
			let product = new Product(item.id, item.name, item.price);
			cart.addItem(product);			
			dipatchChanges();
		})
		
		let remover = subscribe(ItemRemoveEvent, (item) =>{			
			cart.removeItem(item.id)			
			dipatchChanges();
		})
		
		return () =>{
			adder.unsubscribe();
			remover.unsubscribe();
		}
	});
	
	const dipatchChanges = () => {
		cartData = cart.getCartItems();
		total = cart.getTotal();
		publish(new CartChangesEvent({total}));
	}
	
	const formatIt = (num) =>{
		return (Math.round(num * 100) / 100).toFixed(2);
	}
</script>
<h3>Cart List</h3>
{#if cartData.length > 0}
<table>
	<thead>																			
		<td>Name</td><td>Qty</td><td>Line Price</td>
	</thead>
	<tbody>
		{#each cartData as item}
			<tr><td>{item.title}</td><td>{item.quantity}</td> <td>${formatIt(item.linePrice)}</td></tr>
	 	{/each}		
	</tbody>
</table>																																																																		
{:else}
	<pre>- Empty Cart -</pre>
{/if}

<style>
	table td{min-width:80px;}
</style>