26 lines
848 B
Svelte
26 lines
848 B
Svelte
<style lang="scss" src="./ButtonCart.scss"></style>
|
|
|
|
<script lang="ts">
|
|
import { scale } from 'svelte/transition'
|
|
import { quartOut } from 'svelte/easing'
|
|
import { cartOpen, cartAmount } from '$utils/stores/shop'
|
|
import { sendEvent } from '$utils/analytics'
|
|
// Components
|
|
import Icon from '$components/atoms/Icon.svelte'
|
|
import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
|
|
|
|
const openCart = () => {
|
|
$cartOpen = true
|
|
sendEvent('cartOpen')
|
|
}
|
|
</script>
|
|
|
|
<div class="button-cart">
|
|
<ButtonCircle color="purple" onclick={openCart}>
|
|
<Icon icon="bag" label="Cart icon" />
|
|
{#if $cartAmount > 0}
|
|
<span class="quantity" transition:scale={{ start: 0.6, duration: 400, easing: quartOut }}>{$cartAmount}</span>
|
|
{/if}
|
|
</ButtonCircle>
|
|
</div>
|