Skip to content

sujata / Akruti-Frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 075093fe by Ravindra Kanojiya
Options

updated

1 parent 87c12ee4
Inline Side-by-side
Showing 2 changed files with 72 additions and 148 deletions
pages/collections/[category]/[subCategory]/[productSlug].js
......@@ -16,10 +16,18 @@ import { useEffect, useState } from "react";
import StoneFinishCabinet from "@/components/StoneFinishCabinet/StoneFinishCabinet";
const ProductPage = ({ productData, cataloguesData }) => {
console.log("productData", productData)
const router = useRouter();
const { category, subCategory: subCategorySlug, productSlug } = router.query;
const productTabs = productData?.productTabs;
const [activeTab, setActiveTab] = useState(null);
useEffect(() => {
if (productTabs?.length > 0) {
setActiveTab(productTabs[0].title);
}
}, [productTabs]);
if (!router.isReady || !productData) return null;
const subCategoryData = productData.collection_sub_category;
......@@ -40,27 +48,17 @@ const ProductPage = ({ productData, cataloguesData }) => {
label: productData.title,
},
];
const [activeTab, setActiveTab] = useState(null);
const productTabs = productData?.productTabs;
useEffect(() => {
if (productTabs?.length > 0) {
setActiveTab(productTabs[0].title);
}
}, [productTabs]);
const layoutType = productData?.LayoutsType;
const isDoorLayout =
layoutType === "Tabs Products" || layoutType === true;
const layoutType = productData?.LayoutsType;
const isDoorLayout = layoutType === "Tabs Products";
const isStoneLayout = layoutType === "Stone Finish Cabinet";
const isStoneLayout =
layoutType === "Stone Finish Cabinet";
return (
<>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerproduct productData={productData} />
{isDoorLayout ? (
{isDoorLayout ? (
<section className="details-tab-section">
<div className="custom_containers">
<div className="details-tab">
......@@ -72,18 +70,12 @@ const isStoneLayout =
>
{productTabs?.map((tab) => (
<Tab key={tab.id} eventKey={tab.title} title={tab.title}>
<AboutInfo productData={tab?.aboutInfo} />
<CompanyOverview
companyOverviewData={tab?.companyOverview?.items}
/>
<AboutInfo productData={tab?.aboutInfo} />
<CompanyOverview companyOverviewData={tab?.companyOverview?.items} />
<Video productData={tab?.videoSection} />
{tab?.technicalDetails?.length > 0 && (
<TechnicalDetails productData={tab?.technicalDetails} />
)}
{tab?.gallery?.length > 0 && (
<Gallery productData={tab?.gallery} />
)}
......@@ -93,63 +85,40 @@ const isStoneLayout =
</div>
</div>
</section>
) : (
) : isStoneLayout ? (
<>
{
!isStoneLayout && <AboutInfo productData={productData?.aboutInfo} />
}
{productData?.aboutInfo?.length > 0 && (
<CompanyOverview companyOverviewData={productData?.companyOverview} />
)}
{isStoneLayout && (
<StoneFinishCabinet StoneFinishCabinet={productData?.aboutInfoStone} />
)}
{isStoneLayout && (
<Video productData={productData?.aboutInfoStone?.video} />
)}
{isStoneLayout && productData?.aboutInfoStone?.gallery?.length > 0 && (
<StoneFinishCabinet StoneFinishCabinet={productData?.aboutInfoStone} />
<Video productData={productData?.aboutInfoStone?.video} />
{productData?.aboutInfoStone?.gallery?.length > 0 && (
<Gallery productData={productData.aboutInfoStone.gallery} />
)}
</>
) : (
<>
<AboutInfo productData={productData?.aboutInfo} />
{productData?.companyOverview?.items?.length > 0 && (
<CompanyOverview companyOverviewData={productData?.companyOverview?.items} />
)}
{productData?.video && (
<Video productData={productData.video} />
)}
{productData?.technicalDetails?.length > 0 && (
<TechnicalDetails productData={productData?.technicalDetails} />
)}
{productData?.gallery?.length > 0 && (
<Gallery productData={productData?.gallery} />
)}
{/* <Explore productData={productData?.explore} /> */}
</>
)}
{isDoorLayout && (
<Explore productData={productData.exploreProducts} />
)}
<Explore productData={productData.exploreProducts} />
)}
{!isDoorLayout && (
<Catalogues cataloguesData={cataloguesData} />
)}
{/* {productData?.isDoorAndPartitionsLayouts === false && (
<AboutInfo productData={productData?.aboutInfo} />
)} */}
{/* {productData?.isDoorAndPartitionsLayouts == false && (
<CompanyOverview companyOverviewData={productData?.companyOverview} />
)}
{productData?.isDoorAndPartitionsLayouts == false && (
<Video productData={productData?.video} />
)}
{productData?.isDoorAndPartitionsLayouts == false && (
<TechnicalDetails productData={productData?.technicalDetails} />
)}
{productData?.isDoorAndPartitionsLayouts == false && (
<Gallery productData={productData?.gallery} />
)} */}
<Contact />
</>
);
......@@ -171,7 +140,7 @@ export async function getServerSideProps({ params }) {
return {
props: {
productData: productData[0], // ✅ single product
productData: productData[0],
cataloguesData,
},
};
......
pages/collections/[category]/[subCategory]/index.js
......@@ -11,6 +11,7 @@ import { Contact } from "@/container/Home/Contact";
import CompanyOverview from "@/components/Collection/CompanyOverview";
import TechnicalDetails from "@/components/Collection/TechnicalDetails";
import Explore from "@/components/Collection/Explore";
import StoneFinishCabinet from "@/components/StoneFinishCabinet/StoneFinishCabinet";
import { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi";
import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
......@@ -30,14 +31,21 @@ const SubCategoryOrProductPage = ({
const router = useRouter();
const { category, subCategory } = router.query;
const productTabs = productData?.productTabs;
const [activeTab, setActiveTab] = useState(null);
useEffect(() => {
if (productTabs?.length > 0) {
setActiveTab(productTabs[0]?.title);
}
}, [productTabs]);
if (!router.isReady) return null;
/* ======================================================
🟢 IF PRODUCT (2 LEVEL PRODUCT PAGE)
PRODUCT (2 LEVEL PRODUCT PAGE)
====================================================== */
if (type === "product") {
const subCategoryData = productData?.productData;
const breadcrumbData = [
{ href: "/", label: "Collections" },
{
......@@ -49,21 +57,11 @@ const SubCategoryOrProductPage = ({
label: productData?.title,
},
];
const [activeTab, setActiveTab] = useState(null);
const productTabs = productData?.productTabs;
useEffect(() => {
if (productTabs?.length > 0) {
setActiveTab(productTabs[0]?.title);
}
}, [productTabs]);
const layoutType = productData?.LayoutsType;
const layoutType = productData?.LayoutsType;
const isDoorLayout = layoutType === "Tabs Products";
const isStoneLayout = layoutType === "Stone Finish Cabinet";
const isDoorLayout =
layoutType === "Tabs Products" || layoutType === true;
const isStoneLayout =
layoutType === "Stone Finish Cabinet";
return (
<>
<Breadcrumb breadcrumbData={breadcrumbData} />
......@@ -81,17 +79,12 @@ const isStoneLayout =
>
{productTabs?.map((tab) => (
<Tab key={tab?.id} eventKey={tab?.title} title={tab?.title}>
<AboutInfo productData={tab?.aboutInfo} />
<CompanyOverview
companyOverviewData={tab?.companyOverview?.items}
/>
<AboutInfo productData={tab?.aboutInfo} />
<CompanyOverview companyOverviewData={tab?.companyOverview?.items} />
<Video productData={tab?.videoSection} />
{tab?.technicalDetails?.length > 0 && (
<TechnicalDetails productData={tab?.technicalDetails} />
)}
{tab?.gallery?.length > 0 && (
<Gallery productData={tab?.gallery} />
)}
......@@ -101,30 +94,29 @@ const isStoneLayout =
</div>
</div>
</section>
) : (
) : isStoneLayout ? (
<>
{/* {
productData?.aboutInfo?.length > 0 && (
<AboutInfo productData={productData?.aboutInfo} />
)
} */}
<AboutInfo productData={productData?.aboutInfo} />
<CompanyOverview
companyOverviewData={productData?.companyOverview}
/>
{/* <Video productData={productData?.video} /> */}
<Video productData={productData?.video} />
{isStoneLayout && (
<StoneFinishCabinet StoneFinishCabinet={productData?.aboutInfoStone} />
)}
{isStoneLayout && (
<Video productData={productData?.aboutInfoStone?.video} />
)}
{productData?.aboutInfoStone?.gallery?.length > 0 && (
<Gallery productData={productData.aboutInfoStone.gallery} />
)}
</>
) : (
<>
<AboutInfo productData={productData?.aboutInfo} />
{productData?.companyOverview?.items?.length > 0 && (
<CompanyOverview companyOverviewData={productData?.companyOverview?.items} />
)}
{productData?.video && (
<Video productData={productData?.video} />
)}
{productData?.technicalDetails?.length > 0 && (
<TechnicalDetails productData={productData?.technicalDetails} />
)}
<Gallery productData={productData?.gallery} />
{/* <Explore productData={productData?.explore} /> */}
{productData?.gallery?.length > 0 && (
<Gallery productData={productData?.gallery} />
)}
</>
)}
......@@ -132,27 +124,9 @@ const isStoneLayout =
<Explore productData={productData?.exploreProducts} />
)}
{!isDoorLayout && (
<Catalogues cataloguesData={cataloguesData} />
)}
{/* {productData?.isDoorAndPartitionsLayouts === false && (
<AboutInfo productData={productData?.aboutInfo} />
)} */}
{/* {productData?.isDoorAndPartitionsLayouts == false && (
<CompanyOverview companyOverviewData={productData?.companyOverview} />
)}
{productData?.isDoorAndPartitionsLayouts == false && (
<Video productData={productData?.video} />
)}
{productData?.isDoorAndPartitionsLayouts == false && (
<TechnicalDetails productData={productData?.technicalDetails} />
{!isDoorLayout && (
<Catalogues cataloguesData={cataloguesData} />
)}
{productData?.isDoorAndPartitionsLayouts == false && (
<Gallery productData={productData?.gallery} />
)} */}
<Contact />
</>
......@@ -160,17 +134,11 @@ const isStoneLayout =
}
/* ======================================================
🔵 IF SUBCATEGORY (NORMAL 2 LEVEL SUBCATEGORY PAGE)
SUBCATEGORY (NORMAL 2 LEVEL SUBCATEGORY PAGE)
====================================================== */
// if (!products || products.length === 0) {
// return <h1>Sub Category not found</h1>;
// }
const subCategoryData = products[0]?.collection_sub_category;
const breadcrumbData = [
// { href: "/", label: "Home" },
{ href: "/", label: "Collections" },
{
href: `/collections/${category}`,
......@@ -194,7 +162,7 @@ const isStoneLayout =
export default SubCategoryOrProductPage;
/* ======================================================
✅ SERVER SIDE LOGIC
SERVER SIDE LOGIC
====================================================== */
export async function getServerSideProps({ params }) {
......@@ -206,11 +174,10 @@ export async function getServerSideProps({ params }) {
try {
const cachedData = await redis.get(REDIS_KEY);
if (cachedData) {
console.log("redis data fetched");
return { props: JSON.parse(cachedData) };
}
/* 1️⃣ Check if this slug is a PRODUCT */
/* 1. Check if this slug is a PRODUCT */
const productCheck = await getCollectionDetailCategoryData(subCategory);
if (productCheck && productCheck.length > 0) {
......@@ -221,12 +188,10 @@ export async function getServerSideProps({ params }) {
cataloguesData,
};
await redis.set(REDIS_KEY, JSON.stringify(result), "EX", REDIS_EXPIRE);
console.log("normal data fetched");
return { props: result };
}
/* 2️⃣ Otherwise treat as SUBCATEGORY */
/* 2. Otherwise treat as SUBCATEGORY */
const query = {
filters: {
collection_sub_category: {
......@@ -243,27 +208,17 @@ export async function getServerSideProps({ params }) {
},
};
const response = await fetchFromStrapi(
"/api/collection-detail-categories",
query,
);
const allProducts = response?.data || [];
const products = allProducts;
const response = await fetchFromStrapi("/api/collection-detail-categories", query);
const products = response?.data || [];
// const allProducts = await getCollectionDetailCategoryData();
const categoriesSub = await getCollectionSubCategoryData();
const activeSubCategory =
categoriesSub.find((item) => item.slug === subCategory) || null;
const activeSubCategory = categoriesSub.find((item) => item.slug === subCategory) || null;
const result = { type: "subcategory", products, activeSubCategory };
await redis.set(REDIS_KEY, JSON.stringify(result), "EX", REDIS_EXPIRE);
console.log("normal data fetched");
return { props: result };
} catch (error) {
console.error(error);
return {
notFound: true,
};
return { notFound: true };
}
}
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!