34 lines
1.1 KiB
Vue
34 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
productId: string;
|
|
slug: string;
|
|
name: string;
|
|
price: number;
|
|
variants?: { name: string; priceDelta: number }[];
|
|
}>();
|
|
const { add } = useCart();
|
|
const variant = ref(props.variants?.[0]?.name);
|
|
const added = ref(false);
|
|
const delta = computed(() => props.variants?.find((v) => v.name === variant.value)?.priceDelta ?? 0);
|
|
|
|
function addToCart() {
|
|
add({ productId: props.productId, slug: props.slug, name: props.name, variant: variant.value, price: props.price + delta.value });
|
|
added.value = true;
|
|
setTimeout(() => (added.value = false), 1500);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-3">
|
|
<div v-if="variants && variants.length">
|
|
<label class="label" for="variant">Option</label>
|
|
<select id="variant" v-model="variant" class="input">
|
|
<option v-for="v in variants" :key="v.name" :value="v.name">
|
|
{{ v.name }}{{ v.priceDelta ? ` (+$${(v.priceDelta / 100).toFixed(2)})` : '' }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<button type="button" class="btn-primary w-full" @click="addToCart">{{ added ? 'Added ✓' : 'Add to cart' }}</button>
|
|
</div>
|
|
</template>
|