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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <template>
<div class="d-flex flex-column justify-content-between h-100">
<nuxt-link :to="`/products/${product.id}`" class="h-100 d-flex flex-column">
<PreloaderImage
:classStyle="'mb-2 w-100 my-auto'"
:image="product.image[0].url"
rounded
/>
<div class="mb-0 mt-auto">
<h6
class="
text-ellipsis
col-black
text-upprcase
m-2
mb-4
text-uppercase text-nowrap
"
>
{{ product.title }}
</h6>
<h5 class="price gold d-flex justify-content-center m-3 text-nowrap">
{{ product.price }} $
</h5>
</div>
</nuxt-link>
</div>
</template>
<script>
import PreloaderImage from "~/components/PreloaderImage";
export default {
name: "ProductCard",
props: {
product: Object,
},
components: { PreloaderImage },
methods: {
addToCart(product) {
const selected = {
productId: product.id,
quantity: 1
};
this.$store.dispatch("order/addProduct", selected);
},
},
};
</script>
<style scoped>
.content {
margin-left: 35px;
margin-right: 35px;
}
.price {
font-size: 1.5rem;
}
</style>
|