Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 1x 1x 1x 1x 1x 2x 2x 1x 1x 1x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script setup lang="ts">
import type {Product} from '~/types/shop';
import styles from '~/assets/css/site.module.css'
const props = withDefaults(defineProps<{ product: Product; cartDisabled?: boolean }>(), {cartDisabled: false});
const imageFor = useThemedImage();
const {add} = useShopCart();
const added = ref(false)
function addNow() {
if (props.cartDisabled) return;
add(props.product);
added.value = true;
setTimeout(() => added.value = false, 1500)
}
</script>
<template>
<article :class="styles.productCard">
<NuxtLink :to="`/produits/${product.slug}`" :class="styles.productImage">
<img v-if="imageFor(product.image)"
:src="imageFor(product.image)?.content + `?size=${imageFor(product.image)?.width}x${imageFor(product.image)?.height}`"
:alt="product.name"
:width="imageFor(product.image)?.width"
:height="imageFor(product.image)?.height">
</NuxtLink>
<div :class="styles.productInfo">
<div><small>{{ product.categories.map(item => item.label).join(' · ') }}</small>
<h3>{{ product.name }}</h3>
<div :class="styles.productPrice">
<strong v-if="product.discountedPriceCents != null" :class="styles.discountedPrice">{{
(product.discountedPriceCents / 100).toFixed(2).replace('.', ',')
}} €</strong>
<span :class="product.discountedPriceCents != null ? styles.originalPrice : ''">{{
(product.priceCents / 100).toFixed(2).replace('.', ',')
}} €</span>
</div>
</div>
<button :disabled="cartDisabled" @click="addNow" :aria-label="cartDisabled ? 'Panier indisponible avec un compte de démonstration' : `Ajouter ${product.name}`" :title="cartDisabled ? 'Panier indisponible en mode démonstration' : undefined">{{ cartDisabled ? '×' : added ? '✓' : '+' }}</button>
</div>
</article>
</template>
|