hedera-web/forms/ecomerce/basket/ui.xml

<vn>
<div id="title">
	<h1><t>ShoppingBasket</t></h1>
</div>
<div id="actions">
	<htk-bar-button
		icon="settings"
		tip="_ConfigureOrder"
		on-click="this.onConfigureClick()"/>
	<htk-bar-button
		icon="local_florist"
		tip="_Catalog"
		on-click="this.hash.setAll({form: 'ecomerce/catalog'})"/>
	<htk-bar-button
		icon="shopping_cart_checkout"
		tip="_Checkout"
		on-click="this.hash.setAll({form: 'ecomerce/confirm'})"/>
</div>
<div id="form" class="basket">
	<div class="box vn-w-sm vn-pa-lg">
		<div class="head vn-pb-lg">
			<p>
				<t>Total</t> 
				<htk-text format="%.2d€">
					<db-calc-sum property="param" func="subtotal" model="items"/>
				</htk-text>
			</p>
		</div>
		<div class="lines">
			<htk-repeater form-id="iter">
				<db-model id="items" property="model" updatable="true">
					SELECT bi.id, bi.amount, bi.price, i.longName item,
							i.tag5, i.value5, i.tag6, i.value6, i.tag7, i.value7,
							i.image, im.updated
						FROM myBasketItem bi
							JOIN vn.item i ON i.id = bi.itemFk
							LEFT JOIN image im
								ON im.collectionFk = 'catalog'
								AND im.name = i.image
				</db-model>
				<custom>
					<div class="line">
						<htk-button
							class="delete"
							tip="_Remove"
							icon="delete"
							on-click="this.onDeleteClick($iter)"/>
						<htk-image
							value="{{iter.image}}"
							stamp-column="updated"
							class="photo"
							directory="catalog"
							subdir="200x200"
							full-dir="1600x900"/>
						<div class="info">
							<h2>{{iter.item}}</h2>
							<p class="tags">
								{{iter.value5}} {{iter.value6}} {{iter.value7}}
							</p>
							<p class="amount">
								{{iter.amount}} x {{Vn.Value.format(iter.price, '%.2d€')}}
								<span class="subtotal">
									{{Vn.Value.format(iter.price * iter.amount, '%.2d€')}}
								</span>
							</p>
						</div>
					</div>
				</custom>
			</htk-repeater>
		</div>
	</div>
</div>
</vn>