Félix Péault
cdabe6935b
It's been tricky but got there finally! Hello `:global` - Avoid using one global CSS file containing everything - Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used
69 lines
1.9 KiB
Svelte
69 lines
1.9 KiB
Svelte
<style lang="scss">
|
||
@import "../../style/molecules/cart-item";
|
||
</style>
|
||
|
||
<script lang="ts">
|
||
import { createEventDispatcher } from 'svelte'
|
||
// Components
|
||
import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
|
||
import Select from '$components/molecules/Select.svelte'
|
||
|
||
export let item: any
|
||
|
||
const dispatch = createEventDispatcher()
|
||
const quantityLimit = 5
|
||
|
||
|
||
// When changing item quantity
|
||
const updateQuantity = ({ detail }: any) => {
|
||
dispatch('updatedQuantity', {
|
||
id: item.id,
|
||
quantity: Number(detail)
|
||
})
|
||
}
|
||
|
||
// When removing item
|
||
const removeItem = () => {
|
||
dispatch('removed', item.id)
|
||
}
|
||
</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,
|
||
}
|
||
})}
|
||
on:change={updateQuantity}
|
||
value={String(item.quantity)}
|
||
>
|
||
<span>Quantity:</span>
|
||
</Select>
|
||
{/if}
|
||
|
||
<ButtonCircle class="remove"
|
||
size="tiny" color="gray"
|
||
on:click={removeItem}
|
||
>
|
||
<svg width="8" height="8">
|
||
<use xlink:href="#cross" />
|
||
</svg>
|
||
</ButtonCircle>
|
||
</div>
|
||
</div> |