fix shop
This commit is contained in:
@ -17,7 +17,7 @@
|
||||
</h1>
|
||||
<div class="flex flex-col gap-[25px]">
|
||||
<div>
|
||||
<div v-if="categoriesList.length < 1" class="animate-pulse">
|
||||
<div v-if="categoriesList && categoriesList.length < 1" class="animate-pulse">
|
||||
<div
|
||||
class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24">
|
||||
<div class="w-32 h-4 bg-gray-200 rounded"></div>
|
||||
@ -34,7 +34,8 @@
|
||||
|
||||
<div v-for="(item, itemIndex) in filters" :key="itemIndex"
|
||||
:class="['mb-[30px]', visibleFeatures[item.feature] && 'border-b border-block pb-2']">
|
||||
<span class="flex justify-between items-center font-bold cursor-pointer mb-[25px] text-base"
|
||||
<span
|
||||
class="flex justify-between items-center font-bold cursor-pointer mb-[25px] text-base"
|
||||
@click="toggleFeature(item.feature)">
|
||||
{{ item.feature }}
|
||||
<span :class="[visibleFeatures[item.feature] && 'rotate-180', 'transition-all']"><i
|
||||
@ -69,7 +70,7 @@
|
||||
<div class="flex flex-col gap-12">
|
||||
<div>
|
||||
|
||||
<div v-if="categoriesList.length < 1" class="animate-pulse">
|
||||
<div v-if="categoriesList && categoriesList.length < 1" class="animate-pulse">
|
||||
<div
|
||||
class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24">
|
||||
<div class="w-32 h-4 bg-gray-200 rounded"></div>
|
||||
@ -167,7 +168,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Product from "./Product.vue";
|
||||
import type { Feature, ProductType } from "~/types";
|
||||
import type { Feature, GenericResponse, GenericResponseChildren, GenericResponseItems, ProductType } from "~/types";
|
||||
import CategoryTree from "./CategoryTree.vue";
|
||||
|
||||
defineProps<{ component: Component }>();
|
||||
@ -199,19 +200,21 @@ const maxElements = ref(0);
|
||||
const products = ref([] as ProductType[]);
|
||||
async function getProducts() {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`http://127.0.0.1:4000/api/public/products/category/${categoryId.value}?p=${page.value}&elems=${elems.value}`,
|
||||
const { data } = await useMyFetch<GenericResponseItems<ProductType[]>>(
|
||||
`/api/public/products/category/${categoryId.value}?p=${page.value}&elems=${elems.value}`,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
onErrorOccured: (_, status) => {
|
||||
throw new Error(`HTTP error: ${status}`);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
products.value = data.data.items;
|
||||
maxElements.value = data.data.items_count + 1;
|
||||
products.value = data.items;
|
||||
maxElements.value = data.items_count + 1;
|
||||
|
||||
} catch (error) {
|
||||
console.error("getProducts error:", error);
|
||||
@ -221,18 +224,20 @@ async function getProducts() {
|
||||
const filters = ref([] as Feature[]);
|
||||
async function getCategory() {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`http://127.0.0.1:4000/api/public/products/category/1/classification`,
|
||||
const { data } = await useMyFetch<GenericResponse<object>>(
|
||||
`/api/public/products/category/1/classification`,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
onErrorOccured: (_, status) => {
|
||||
throw new Error(`HTTP error: ${status}`);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
filters.value = data.data as Feature[];
|
||||
filters.value = data as Feature[];
|
||||
filters.value.forEach((el) => {
|
||||
const parentId = el.feature_id;
|
||||
el.feature_values.forEach((el) => {
|
||||
@ -245,20 +250,22 @@ async function getCategory() {
|
||||
}
|
||||
}
|
||||
|
||||
const categoriesList = ref([]);
|
||||
const categoriesList = ref();
|
||||
async function getCategoryTree() {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`http://127.0.0.1:4000/api/public/categories/tree`,
|
||||
const { data } = await useMyFetch<GenericResponseChildren<ProductType[]>>(
|
||||
`/api/public/categories/tree`,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
onErrorOccured: (_, status) => {
|
||||
throw new Error(`HTTP error: ${status}`);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const data = await res.json();
|
||||
categoriesList.value = data.data.children;
|
||||
categoriesList.value = data.children;
|
||||
|
||||
} catch (error) {
|
||||
console.error("getCategory error:", error);
|
||||
@ -325,20 +332,22 @@ async function loadMoreProducts() {
|
||||
qParams.append("features", selectedFilters.value.length > 0 ? selectedFilters.value : null);
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`http://127.0.0.1:4000/api/public/products/category/${categoryId.value}?${qParams.toString()}`,
|
||||
const { data } = await useMyFetch<GenericResponseItems<ProductType[]>>(
|
||||
`/api/public/products/category/${categoryId.value}?${qParams.toString()}`,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
onErrorOccured: (_, status) => {
|
||||
throw new Error(`HTTP error: ${status}`);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const data = await res.json();
|
||||
maxElements.value = data.data.items_count;
|
||||
maxElements.value = data.items_count;
|
||||
|
||||
if (data.data.items) {
|
||||
products.value.push(...(data.data.items as ProductType[]));
|
||||
if (data.items) {
|
||||
products.value.push(...(data.items as ProductType[]));
|
||||
} else {
|
||||
reachedEnd.value = true;
|
||||
}
|
||||
@ -369,18 +378,20 @@ watch(selectedFilters, async (newQuestion) => {
|
||||
qParams.append("features", selectedFilters.value.length > 0 ? selectedFilters.value : null);
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`http://127.0.0.1:4000/api/public/products/category/1?${qParams.toString()}`,
|
||||
const { data } = await useMyFetch<GenericResponseItems<ProductType[]>>(
|
||||
`/api/public/products/category/1?${qParams.toString()}`,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
onErrorOccured: (_, status) => {
|
||||
throw new Error(`HTTP error: ${status}`);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const data = await res.json();
|
||||
products.value = data.data.items;
|
||||
maxElements.value = data.data.items_count;
|
||||
products.value = data.items;
|
||||
maxElements.value = data.items_count;
|
||||
|
||||
} catch (error) {
|
||||
console.error("selectedFilters error:", error);
|
||||
@ -401,18 +412,20 @@ watch(categoryId, async (newQuestion) => {
|
||||
qParams.append("features", selectedFilters.value.length > 0 ? selectedFilters.value : null);
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`http://127.0.0.1:4000/api/public/products/category/${categoryId.value}?${qParams.toString()}`,
|
||||
const { data } = await useMyFetch<GenericResponseItems<ProductType[]>>(
|
||||
`api/public/products/category/${categoryId.value}?${qParams.toString()}`,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
onErrorOccured: (_, status) => {
|
||||
throw new Error(`HTTP error: ${status}`);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const data = await res.json();
|
||||
products.value = data.data.items;
|
||||
maxElements.value = data.data.items_count;
|
||||
products.value = data.items;
|
||||
maxElements.value = data.items_count;
|
||||
|
||||
} catch (error) {
|
||||
console.error("getCategory error:", error);
|
||||
|
||||
Reference in New Issue
Block a user