init
This commit is contained in:
238
pages/category/_slug.vue
Normal file
238
pages/category/_slug.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<v-container mt-4 style="padding-bottom:120px;">
|
||||
<p v-if="$fetchState.pending">Loading....</p>
|
||||
<p v-else-if="$fetchState.error">Error while fetching...</p>
|
||||
<v-row v-else>
|
||||
<v-col v-for="Service in pageContent.data" :key="pageContent.data.id" sm="6" lg="4" xl="3">
|
||||
<nuxt-link :to="`/${Service.slug}`">
|
||||
<v-card class>
|
||||
<v-img :src="`https://api7.siliconpin.com/assets/${Service.img}`" aspect-ratio="1.2"></v-img>
|
||||
|
||||
<v-card-text>
|
||||
<h3>{{ Service.name }}</h3>
|
||||
</v-card-text>
|
||||
<v-rating
|
||||
half-increments
|
||||
dense
|
||||
size="20"
|
||||
v-model="Service.rating"
|
||||
background-color="orange lighten-3"
|
||||
color="orange"
|
||||
></v-rating>
|
||||
<p style="font-size:16px;padding:0 5px 10px 5px;">
|
||||
{{ Service.description }}
|
||||
<br />
|
||||
<span style="font-weight:bold">মূল্য {{ Service.price }} টাকা ।</span>
|
||||
<!-- <span v-if="Service.p2" style="font-weight:bold">মূল্য {{ Service.p2 }} টাকা ।</span> -->
|
||||
</p>
|
||||
</v-card>
|
||||
</nuxt-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- <v-row v-else>
|
||||
<v-card class="mx-auto pa-3">
|
||||
<v-card width="500" class="justify-center">
|
||||
<v-img
|
||||
:src="`https://api7.siliconpin.com/assets/${pageContent.data[0].img}`"
|
||||
aspect-ratio="1.2"
|
||||
></v-img>
|
||||
</v-card>
|
||||
|
||||
<v-card-title
|
||||
class="font-weight-bold justify-center"
|
||||
style="font-size:2em; line-height: 1.6;"
|
||||
>{{ pageContent.data[0].name }}</v-card-title>
|
||||
<hr />
|
||||
<div class="text-center font-weight-bold">
|
||||
<span v-if="pageContent.data[0].description"></span>
|
||||
{{ pageContent.data[0].description }}
|
||||
<br />
|
||||
<div class="pa-1" v-if="pageContent.data[0].price">
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="addToCart(pageContent.data[0].price)"
|
||||
>{{ pageContent.data[0].quantity }}</v-btn>
|
||||
<span>মূল্য - {{ pageContent.data[0].price }} টাকা ।</span>
|
||||
</div>
|
||||
<div class="pa-1" v-if="pageContent.data[0].p2">
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="addToCart(pageContent.data[0].p2)"
|
||||
>{{ pageContent.data[0].q2 }}</v-btn>
|
||||
<span>মূল্য - {{ pageContent.data[0].p2 }} টাকা ।</span>
|
||||
</div>
|
||||
<div class="pa-1" v-if="pageContent.data[0].p3">
|
||||
<v-btn color="primary"
|
||||
@click="addToCart(pageContent.data[0].p3)"
|
||||
>{{ pageContent.data[0].q3 }}</v-btn>
|
||||
<span>মূল্য - {{ pageContent.data[0].p3 }} টাকা ।</span>
|
||||
</div>
|
||||
<div class="pa-1" v-if="pageContent.data[0].p4">
|
||||
<v-btn color="primary"
|
||||
@click="addToCart(pageContent.data[0].p4)"
|
||||
>{{ pageContent.data[0].q4 }}</v-btn>
|
||||
<span>মূল্য - {{ pageContent.data[0].p4 }} টাকা ।</span>
|
||||
|
||||
</div>
|
||||
<div v-if="addedToCartChip">
|
||||
<v-chip
|
||||
class="ma-2"
|
||||
close
|
||||
color="red"
|
||||
text-color="white"
|
||||
@click:close="addedToCartChip = false"
|
||||
>
|
||||
ব্যাগ এ রাখা হয়েছে
|
||||
</v-chip>
|
||||
<nuxt-link to="/"> <v-btn> আরও </v-btn> </nuxt-link>
|
||||
<a href="/bag"> <v-btn> ব্যাগ </v-btn> </a>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div id="block_container">
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-row> -->
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageContent: {},
|
||||
name: "",
|
||||
slug: "",
|
||||
img: "",
|
||||
cartBag:[],
|
||||
addedToCartChip:false,
|
||||
cartTotal:0,
|
||||
// apiLink:process.env.apiLink
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// loaded() {
|
||||
// return this.$store.state.shoppingCart.status ,this.$store.state.localStorage.status , this.$store.state.sessionStorage.status
|
||||
// }
|
||||
},
|
||||
mounted: function() {
|
||||
/// Retrieves cart from local storage when user first loads
|
||||
|
||||
// this.shoppingCart = JSON.parse(
|
||||
// localStorage.getItem('shoppingCart') || "[]")
|
||||
|
||||
if (localStorage && localStorage.cart) {
|
||||
const cartBag = JSON.parse(localStorage.cart);
|
||||
this.cartBag = cartBag;
|
||||
cartBag.forEach((i) => {
|
||||
// total += i.amount * 1;
|
||||
this.cartTotal++
|
||||
});
|
||||
// this.cartTotal = total;
|
||||
// this.countTotals(cart);
|
||||
// alert("ss")
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
addToCart(price) {
|
||||
const cartRaw = localStorage.cart || '[]';
|
||||
const cart = JSON.parse(cartRaw)
|
||||
let product={}
|
||||
product["slug"]=this.slug
|
||||
product["name"]=this.name
|
||||
product["price"]=price
|
||||
product["img"]=this.img
|
||||
// const product=[slug, name, price]
|
||||
// if(process.client){
|
||||
cart.push({
|
||||
// ...this.selectedCard,
|
||||
product:product
|
||||
});
|
||||
localStorage.cart = JSON.stringify(cart);
|
||||
this.addedToCartChip=true
|
||||
// this.$router.push('/bag');
|
||||
// }
|
||||
// let exists = false
|
||||
|
||||
// for (const cartItem of this.shoppingCart) {
|
||||
// if (cartItem.slug === product.slug) {
|
||||
// cartItem.amount = cartItem.amount + 1
|
||||
// exists = true
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
// if (!exists) {
|
||||
|
||||
// this.shoppingCart.push({
|
||||
// ...product,
|
||||
// amount: 1,
|
||||
// })
|
||||
// console.log(product)
|
||||
// }
|
||||
},
|
||||
},
|
||||
|
||||
async fetch() {
|
||||
this.pageContent = await fetch(
|
||||
'https://api7.siliconpin.com/items/swarnamath?filter[cat]=["' + this.$route.params.slug +'"]'
|
||||
).then(res => res.json())
|
||||
// console.log(this.pageContent.data[0])
|
||||
// this.name = this.pageContent.data[0].name
|
||||
// this.slug = this.pageContent.data[0].slug
|
||||
// if (this.pageContent.data[0].img) this.img = this.pageContent.data[0].img
|
||||
},
|
||||
fetchOnServer: false,
|
||||
head() {
|
||||
return {
|
||||
title: this.name,
|
||||
meta: [
|
||||
// hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
||||
{
|
||||
hid: 'description',
|
||||
name: 'description',
|
||||
content: this.name
|
||||
},
|
||||
{
|
||||
hid: 'og:description',
|
||||
name: 'og:description',
|
||||
content: this.name
|
||||
},
|
||||
{
|
||||
hid: 'og:title',
|
||||
name: 'og:title',
|
||||
content: this.name
|
||||
},
|
||||
{
|
||||
hid: 'og:url',
|
||||
name: 'og:url',
|
||||
content: 'https://swarnamath.com/' + this.slug
|
||||
},
|
||||
{
|
||||
hid: 'og:image',
|
||||
name: 'og:image',
|
||||
content: 'https://api7.siliconpin.com' + this.img
|
||||
},
|
||||
{
|
||||
hid: 'og:image:secure_url',
|
||||
name: 'og:image:secure_url',
|
||||
content: 'https://api7.siliconpin.com' + this.img
|
||||
},
|
||||
{
|
||||
hid: 'og:type',
|
||||
name: 'og:type',
|
||||
content: 'News'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scopped>
|
||||
#block_container {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user