master
parent
9590e31c0f
commit
13b923b939
|
|
@ -35,7 +35,7 @@
|
||||||
<router-link to="/category/cosmetics" class="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"> প্রসাধন </router-link>
|
<router-link to="/category/cosmetics" class="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"> প্রসাধন </router-link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<router-link to="/category/" class="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"> সব </router-link>
|
<router-link to="/category/" class="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"> সব বিভাগ </router-link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,83 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div class="container-fluid mx-auto object-center bg-white p-2">
|
||||||
|
<h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">New Arrivals.</h1>
|
||||||
|
<hr class="">
|
||||||
|
|
||||||
|
<div v-if="loading" class="loading"> <h2> Loading... </h2> </div>
|
||||||
|
<div v-if="error" class="error">{{ error }}</div>
|
||||||
|
|
||||||
</template>
|
<div v-if="itemByCategory.data" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 p-1">
|
||||||
|
<div v-for="(item, index) in itemByCategory.data" class="">
|
||||||
|
<router-link :to="'/item/' + item.slug">
|
||||||
|
<div class="flex items-center justify-center ">
|
||||||
|
<img :src="'https://api8.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||||
|
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||||
|
</div>
|
||||||
|
<h3 class="text-center text-1xl ">{{ item.name }}</h3>
|
||||||
|
<p class="text-center">Qty - 2 </p>
|
||||||
|
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="post">
|
||||||
|
|
||||||
|
<div v-if="post" class="content">
|
||||||
|
<h2>{{ post.title }}</h2>
|
||||||
|
<p>{{ post.body }}</p>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
itemByCategory: null,
|
||||||
|
error: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.getItemByCategory()
|
||||||
|
// console.log(this.$route.query.cat)
|
||||||
|
// console.log(this.fruits)
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchData()
|
||||||
|
// watch the params of the route to fetch the data again
|
||||||
|
// this.$watch(
|
||||||
|
// () => this.$route.params,
|
||||||
|
// () => {
|
||||||
|
// this.fetchData()
|
||||||
|
// },
|
||||||
|
// // fetch the data when the view is created and the data is
|
||||||
|
// // already being observed
|
||||||
|
// { immediate: true }
|
||||||
|
// )
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fetchData() {
|
||||||
|
// console.log(this.$route.params.id,)
|
||||||
|
this.error = this.post = null
|
||||||
|
this.loading = true
|
||||||
|
fetch('https://api8.siliconpin.com/items/ecom55?filter[category][_eq]=forhim')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => this.itemByCategory = data)
|
||||||
|
console.log(this.itemByCategory)
|
||||||
|
console.log('itemByCategory')
|
||||||
|
this.loading = false
|
||||||
|
// replace `getPost` with your data fetching util / API wrapper
|
||||||
|
// getPost(this.$route.params.id, (err, post) => {
|
||||||
|
// this.loading = false
|
||||||
|
// if (err) {
|
||||||
|
// this.error = err.toString()
|
||||||
|
// } else {
|
||||||
|
// this.post = post
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,87 +1,141 @@
|
||||||
<!-- <route lang="json">
|
|
||||||
{
|
|
||||||
"meta": {
|
|
||||||
"title": "Home"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</route>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
useHead({
|
|
||||||
title: 'Home',
|
|
||||||
title: computed(() => siteData.title),
|
|
||||||
meta: [
|
|
||||||
{
|
|
||||||
name: `description`,
|
|
||||||
content: computed(() => siteData.description),
|
|
||||||
},
|
|
||||||
]
|
|
||||||
})
|
|
||||||
</script> -->
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
</template>
|
<div class="container-fluid ">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h1 class="font-medium text-center leading-tight text-xl p-4 "> গয়না </h1>
|
||||||
|
<hr class="">
|
||||||
|
<div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
|
||||||
|
<div v-for="(item, index) in catJewlry.slice(0,8)" class="">
|
||||||
|
<div class="flex items-center justify-center ">
|
||||||
|
<img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||||
|
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||||
|
</div>
|
||||||
|
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||||
|
<p class="text-center">{{index}} </p>
|
||||||
|
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h1 class="font-medium text-center leading-tight text-xl p-4 "> প্রসাধনী </h1>
|
||||||
|
<hr class="">
|
||||||
|
<div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
|
||||||
|
<div v-for="(item, index) in catCosmetics.slice(0,8)" class="">
|
||||||
|
<div class="flex items-center justify-center ">
|
||||||
|
<img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||||
|
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||||
|
</div>
|
||||||
|
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||||
|
<p class="text-center">{{index}} </p>
|
||||||
|
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="font-medium text-center leading-tight text-xl p-4 "> সার্ভিস </h1>
|
||||||
|
<hr class="">
|
||||||
|
<div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
|
||||||
|
<div v-for="(item, index) in catServices.slice(0,8)" class="">
|
||||||
|
<div class="flex items-center justify-center ">
|
||||||
|
<img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||||
|
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||||
|
</div>
|
||||||
|
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||||
|
<p class="text-center">{{index}} </p>
|
||||||
|
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="font-medium text-center leading-tight text-xl p-4 "> সবজি </h1>
|
||||||
|
<hr class="">
|
||||||
|
<div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
|
||||||
|
<div v-for="(item, index) in catVegetables.slice(0,8)" class="">
|
||||||
|
<div class="flex items-center justify-center ">
|
||||||
|
<img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||||
|
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||||
|
</div>
|
||||||
|
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||||
|
<p class="text-center">{{index}} </p>
|
||||||
|
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="font-medium text-center leading-tight text-xl p-4 "> ফল </h1>
|
||||||
|
<hr class="">
|
||||||
|
<div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
|
||||||
|
<div v-for="(item, index) in catFruits.slice(0,8)" class="">
|
||||||
|
<div class="flex items-center justify-center ">
|
||||||
|
<img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||||
|
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||||
|
</div>
|
||||||
|
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||||
|
<p class="text-center">{{index}} </p>
|
||||||
|
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1 class="font-medium text-center leading-tight text-xl p-4 "> মুদি </h1>
|
||||||
|
<hr class="">
|
||||||
|
<div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
|
||||||
|
<div v-for="(item, index) in catGrocery.slice(0,8)" class="">
|
||||||
|
<div class="flex items-center justify-center ">
|
||||||
|
<img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||||
|
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||||
|
</div>
|
||||||
|
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||||
|
<p class="text-center">{{index}} </p>
|
||||||
|
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
// data() {
|
data() {
|
||||||
// return {
|
return {
|
||||||
// smProducts: [],
|
isLoading: true,
|
||||||
// catFruits: [],
|
smProducts: {},
|
||||||
// catVegetables: [],
|
catFruits: [],
|
||||||
// catGrocery: [],
|
catVegetables: {},
|
||||||
// catServices: [],
|
catGrocery: {},
|
||||||
// catJewlry: [],
|
catServices: {},
|
||||||
// catCosmetics: [],
|
catJewlry: {},
|
||||||
// catCloths: [],
|
catCosmetics: {},
|
||||||
// // product: [],
|
catCloths: {}
|
||||||
// // shoppingCart: []
|
}
|
||||||
// }
|
},
|
||||||
// },
|
mounted: function () {
|
||||||
|
this.getItemByCategory()
|
||||||
// head() {
|
// console.log(this.smProducts)
|
||||||
// return {
|
// console.log(this.$route.query.cat)
|
||||||
// title: 'Swarna Math - Delivery App',
|
// console.log(this.fruits)
|
||||||
// meta: [
|
},
|
||||||
// // hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
methods: {
|
||||||
// {
|
getItemByCategory() {
|
||||||
// hid: 'description',
|
fetch('https://api7.siliconpin.com/items/swarnamath?offset=0&limit=90')
|
||||||
// name: 'description',
|
// fetch('https://api7.siliconpin.com/items/ecom55')
|
||||||
// content: 'Swarna Math - Delivery App'
|
.then(response => response.json())
|
||||||
// },
|
.then(data => {
|
||||||
// {
|
this.smProducts = data
|
||||||
// hid: 'og:description',
|
// console.log(data)
|
||||||
// name: 'og:description',
|
this.catFruits = data.data.filter(item => { if (item.cat == "fruits") return item });
|
||||||
// content: 'Swarna Math - Delivery App'
|
this.catVegetables = data.data.filter(item => { if (item.cat == "vegetables") return item });
|
||||||
// },
|
this.catGrocery = data.data.filter(item => { if (item.cat == "grocery") return item });
|
||||||
// {
|
this.catServices = data.data.filter(item => { if (item.cat == "services") return item });
|
||||||
// hid: 'og:title',
|
this.catJewlry = data.data.filter(item => { if (item.cat == "jewlry") return item });
|
||||||
// name: 'og:title',
|
this.catCosmetics = data.data.filter(item => { if (item.cat == "cosmetics") return item });
|
||||||
// content: 'Swarna Math - Delivery App'
|
this.catCloths = data.data.filter(item => { if (item.cat == "cloths") return item });
|
||||||
// },
|
|
||||||
// {
|
this.isLoading = false
|
||||||
// hid: 'og:url',
|
})
|
||||||
// name: 'og:url',
|
|
||||||
// content: 'https://swarnamath.com/'
|
}
|
||||||
// },
|
}
|
||||||
// {
|
|
||||||
// hid: 'og:image',
|
|
||||||
// name: 'og:image',
|
|
||||||
// content: 'https://api7.siliconpin.com/icon.png'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// hid: 'og:image:secure_url',
|
|
||||||
// name: 'og:image:secure_url',
|
|
||||||
// content: 'https://api7.siliconpin.com/icon.png'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// hid: 'og:type',
|
|
||||||
// name: 'og:type',
|
|
||||||
// content: 'Delivery App'
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
Loading…
Reference in New Issue