68 lines
1.9 KiB
Svelte
68 lines
1.9 KiB
Svelte
<style lang="scss" src="./CartItem.scss"></style>
|
||
|
||
<script lang="ts">
|
||
import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
|
||
import Select from '$components/molecules/Select.svelte'
|
||
|
||
let {
|
||
item,
|
||
quantityLimit = 5,
|
||
onUpdatedQuantity,
|
||
onremoved,
|
||
}: {
|
||
item: any
|
||
quantityLimit?: number
|
||
onUpdatedQuantity?: any
|
||
onremoved?: any
|
||
} = $props()
|
||
|
||
/** Handle item quantity change */
|
||
const updateQuantity = (value: string) => {
|
||
onUpdatedQuantity({
|
||
id: item.id,
|
||
quantity: Number(value)
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<div class="cart-item shadow-small">
|
||
<div class="cart-item__left">
|
||
<img src={item.product.images[0].file.url} width={200} height={300} alt={item.product.name}>
|
||
</div>
|
||
<div class="cart-item__right">
|
||
<h3>Poster</h3>
|
||
<p>
|
||
{item.product.name}
|
||
<br>– {item.price}€
|
||
</p>
|
||
|
||
{#if item && item.quantity}
|
||
<Select
|
||
name="sort" id="filter_sort"
|
||
options={[...Array(item.quantity <= quantityLimit ? quantityLimit : item.quantity)].map((_, index) => {
|
||
return {
|
||
value: `${index + 1}`,
|
||
name: `${index + 1}`,
|
||
default: index === 0,
|
||
selected: index + 1 === item.quantity,
|
||
}
|
||
})}
|
||
onchange={updateQuantity}
|
||
value={String(item.quantity)}
|
||
>
|
||
<span>Quantity:</span>
|
||
</Select>
|
||
{/if}
|
||
|
||
<ButtonCircle
|
||
class="remove"
|
||
size="tiny" color="gray"
|
||
onclick={() => onremoved(item.id)}
|
||
>
|
||
<svg width="8" height="8">
|
||
<use xlink:href="#cross" />
|
||
</svg>
|
||
</ButtonCircle>
|
||
</div>
|
||
</div>
|