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 58 additions and 134 deletions
pages/collections/[category]/[subCategory]/[productSlug].js
...@@ -16,10 +16,18 @@ import { useEffect, useState } from "react"; ...@@ -16,10 +16,18 @@ import { useEffect, useState } from "react";
import StoneFinishCabinet from "@/components/StoneFinishCabinet/StoneFinishCabinet"; import StoneFinishCabinet from "@/components/StoneFinishCabinet/StoneFinishCabinet";
const ProductPage = ({ productData, cataloguesData }) => { const ProductPage = ({ productData, cataloguesData }) => {
console.log("productData", productData)
const router = useRouter(); const router = useRouter();
const { category, subCategory: subCategorySlug, productSlug } = router.query; 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; if (!router.isReady || !productData) return null;
const subCategoryData = productData.collection_sub_category; const subCategoryData = productData.collection_sub_category;
...@@ -40,21 +48,11 @@ const ProductPage = ({ productData, cataloguesData }) => { ...@@ -40,21 +48,11 @@ const ProductPage = ({ productData, cataloguesData }) => {
label: productData.title, 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 ( return (
<> <>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
...@@ -73,17 +71,11 @@ const isStoneLayout = ...@@ -73,17 +71,11 @@ const isStoneLayout =
{productTabs?.map((tab) => ( {productTabs?.map((tab) => (
<Tab key={tab.id} eventKey={tab.title} title={tab.title}> <Tab key={tab.id} eventKey={tab.title} title={tab.title}>
<AboutInfo productData={tab?.aboutInfo} /> <AboutInfo productData={tab?.aboutInfo} />
<CompanyOverview companyOverviewData={tab?.companyOverview?.items} />
<CompanyOverview
companyOverviewData={tab?.companyOverview?.items}
/>
<Video productData={tab?.videoSection} /> <Video productData={tab?.videoSection} />
{tab?.technicalDetails?.length > 0 && ( {tab?.technicalDetails?.length > 0 && (
<TechnicalDetails productData={tab?.technicalDetails} /> <TechnicalDetails productData={tab?.technicalDetails} />
)} )}
{tab?.gallery?.length > 0 && ( {tab?.gallery?.length > 0 && (
<Gallery productData={tab?.gallery} /> <Gallery productData={tab?.gallery} />
)} )}
...@@ -93,34 +85,29 @@ const isStoneLayout = ...@@ -93,34 +85,29 @@ const isStoneLayout =
</div> </div>
</div> </div>
</section> </section>
) : ( ) : isStoneLayout ? (
<> <>
{
!isStoneLayout && <AboutInfo productData={productData?.aboutInfo} />
}
{productData?.aboutInfo?.length > 0 && (
<CompanyOverview companyOverviewData={productData?.companyOverview} />
)}
{isStoneLayout && (
<StoneFinishCabinet StoneFinishCabinet={productData?.aboutInfoStone} /> <StoneFinishCabinet StoneFinishCabinet={productData?.aboutInfoStone} />
)}
{isStoneLayout && (
<Video productData={productData?.aboutInfoStone?.video} /> <Video productData={productData?.aboutInfoStone?.video} />
)} {productData?.aboutInfoStone?.gallery?.length > 0 && (
{isStoneLayout && productData?.aboutInfoStone?.gallery?.length > 0 && (
<Gallery productData={productData.aboutInfoStone.gallery} /> <Gallery productData={productData.aboutInfoStone.gallery} />
)} )}
</>
) : (
<>
<AboutInfo productData={productData?.aboutInfo} />
{productData?.companyOverview?.items?.length > 0 && (
<CompanyOverview companyOverviewData={productData?.companyOverview?.items} />
)}
{productData?.video && ( {productData?.video && (
<Video productData={productData.video} /> <Video productData={productData.video} />
)} )}
{productData?.technicalDetails?.length > 0 && ( {productData?.technicalDetails?.length > 0 && (
<TechnicalDetails productData={productData?.technicalDetails} /> <TechnicalDetails productData={productData?.technicalDetails} />
)} )}
{productData?.gallery?.length > 0 && ( {productData?.gallery?.length > 0 && (
<Gallery productData={productData?.gallery} /> <Gallery productData={productData?.gallery} />
)} )}
{/* <Explore productData={productData?.explore} /> */}
</> </>
)} )}
...@@ -132,24 +119,6 @@ const isStoneLayout = ...@@ -132,24 +119,6 @@ const isStoneLayout =
<Catalogues cataloguesData={cataloguesData} /> <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 /> <Contact />
</> </>
); );
...@@ -171,7 +140,7 @@ export async function getServerSideProps({ params }) { ...@@ -171,7 +140,7 @@ export async function getServerSideProps({ params }) {
return { return {
props: { props: {
productData: productData[0], // ✅ single product productData: productData[0],
cataloguesData, cataloguesData,
}, },
}; };
......
pages/collections/[category]/[subCategory]/index.js
...@@ -11,6 +11,7 @@ import { Contact } from "@/container/Home/Contact"; ...@@ -11,6 +11,7 @@ import { Contact } from "@/container/Home/Contact";
import CompanyOverview from "@/components/Collection/CompanyOverview"; import CompanyOverview from "@/components/Collection/CompanyOverview";
import TechnicalDetails from "@/components/Collection/TechnicalDetails"; import TechnicalDetails from "@/components/Collection/TechnicalDetails";
import Explore from "@/components/Collection/Explore"; import Explore from "@/components/Collection/Explore";
import StoneFinishCabinet from "@/components/StoneFinishCabinet/StoneFinishCabinet";
import { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi"; import { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi";
import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi"; import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
...@@ -30,14 +31,21 @@ const SubCategoryOrProductPage = ({ ...@@ -30,14 +31,21 @@ const SubCategoryOrProductPage = ({
const router = useRouter(); const router = useRouter();
const { category, subCategory } = router.query; 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 (!router.isReady) return null;
/* ====================================================== /* ======================================================
🟢 IF PRODUCT (2 LEVEL PRODUCT PAGE) PRODUCT (2 LEVEL PRODUCT PAGE)
====================================================== */ ====================================================== */
if (type === "product") { if (type === "product") {
const subCategoryData = productData?.productData;
const breadcrumbData = [ const breadcrumbData = [
{ href: "/", label: "Collections" }, { href: "/", label: "Collections" },
{ {
...@@ -49,21 +57,11 @@ const SubCategoryOrProductPage = ({ ...@@ -49,21 +57,11 @@ const SubCategoryOrProductPage = ({
label: productData?.title, 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 ( return (
<> <>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
...@@ -82,16 +80,11 @@ const isStoneLayout = ...@@ -82,16 +80,11 @@ const isStoneLayout =
{productTabs?.map((tab) => ( {productTabs?.map((tab) => (
<Tab key={tab?.id} eventKey={tab?.title} title={tab?.title}> <Tab key={tab?.id} eventKey={tab?.title} title={tab?.title}>
<AboutInfo productData={tab?.aboutInfo} /> <AboutInfo productData={tab?.aboutInfo} />
<CompanyOverview <CompanyOverview companyOverviewData={tab?.companyOverview?.items} />
companyOverviewData={tab?.companyOverview?.items}
/>
<Video productData={tab?.videoSection} /> <Video productData={tab?.videoSection} />
{tab?.technicalDetails?.length > 0 && ( {tab?.technicalDetails?.length > 0 && (
<TechnicalDetails productData={tab?.technicalDetails} /> <TechnicalDetails productData={tab?.technicalDetails} />
)} )}
{tab?.gallery?.length > 0 && ( {tab?.gallery?.length > 0 && (
<Gallery productData={tab?.gallery} /> <Gallery productData={tab?.gallery} />
)} )}
...@@ -101,30 +94,29 @@ const isStoneLayout = ...@@ -101,30 +94,29 @@ const isStoneLayout =
</div> </div>
</div> </div>
</section> </section>
) : isStoneLayout ? (
<>
<StoneFinishCabinet StoneFinishCabinet={productData?.aboutInfoStone} />
<Video productData={productData?.aboutInfoStone?.video} />
{productData?.aboutInfoStone?.gallery?.length > 0 && (
<Gallery productData={productData.aboutInfoStone.gallery} />
)}
</>
) : ( ) : (
<> <>
{/* {
productData?.aboutInfo?.length > 0 && (
<AboutInfo productData={productData?.aboutInfo} />
)
} */}
<AboutInfo productData={productData?.aboutInfo} /> <AboutInfo productData={productData?.aboutInfo} />
<CompanyOverview {productData?.companyOverview?.items?.length > 0 && (
companyOverviewData={productData?.companyOverview} <CompanyOverview companyOverviewData={productData?.companyOverview?.items} />
/>
{/* <Video productData={productData?.video} /> */}
<Video productData={productData?.video} />
{isStoneLayout && (
<StoneFinishCabinet StoneFinishCabinet={productData?.aboutInfoStone} />
)} )}
{isStoneLayout && ( {productData?.video && (
<Video productData={productData?.aboutInfoStone?.video} /> <Video productData={productData?.video} />
)} )}
{productData?.technicalDetails?.length > 0 && ( {productData?.technicalDetails?.length > 0 && (
<TechnicalDetails productData={productData?.technicalDetails} /> <TechnicalDetails productData={productData?.technicalDetails} />
)} )}
{productData?.gallery?.length > 0 && (
<Gallery productData={productData?.gallery} /> <Gallery productData={productData?.gallery} />
{/* <Explore productData={productData?.explore} /> */} )}
</> </>
)} )}
...@@ -136,41 +128,17 @@ const isStoneLayout = ...@@ -136,41 +128,17 @@ const isStoneLayout =
<Catalogues cataloguesData={cataloguesData} /> <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 /> <Contact />
</> </>
); );
} }
/* ====================================================== /* ======================================================
🔵 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 subCategoryData = products[0]?.collection_sub_category;
const breadcrumbData = [ const breadcrumbData = [
// { href: "/", label: "Home" },
{ href: "/", label: "Collections" }, { href: "/", label: "Collections" },
{ {
href: `/collections/${category}`, href: `/collections/${category}`,
...@@ -194,7 +162,7 @@ const isStoneLayout = ...@@ -194,7 +162,7 @@ const isStoneLayout =
export default SubCategoryOrProductPage; export default SubCategoryOrProductPage;
/* ====================================================== /* ======================================================
✅ SERVER SIDE LOGIC SERVER SIDE LOGIC
====================================================== */ ====================================================== */
export async function getServerSideProps({ params }) { export async function getServerSideProps({ params }) {
...@@ -206,11 +174,10 @@ export async function getServerSideProps({ params }) { ...@@ -206,11 +174,10 @@ export async function getServerSideProps({ params }) {
try { try {
const cachedData = await redis.get(REDIS_KEY); const cachedData = await redis.get(REDIS_KEY);
if (cachedData) { if (cachedData) {
console.log("redis data fetched");
return { props: JSON.parse(cachedData) }; 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); const productCheck = await getCollectionDetailCategoryData(subCategory);
if (productCheck && productCheck.length > 0) { if (productCheck && productCheck.length > 0) {
...@@ -221,12 +188,10 @@ export async function getServerSideProps({ params }) { ...@@ -221,12 +188,10 @@ export async function getServerSideProps({ params }) {
cataloguesData, cataloguesData,
}; };
await redis.set(REDIS_KEY, JSON.stringify(result), "EX", REDIS_EXPIRE); await redis.set(REDIS_KEY, JSON.stringify(result), "EX", REDIS_EXPIRE);
console.log("normal data fetched");
return { props: result }; return { props: result };
} }
/* 2️⃣ Otherwise treat as SUBCATEGORY */ /* 2. Otherwise treat as SUBCATEGORY */
const query = { const query = {
filters: { filters: {
collection_sub_category: { collection_sub_category: {
...@@ -243,27 +208,17 @@ export async function getServerSideProps({ params }) { ...@@ -243,27 +208,17 @@ export async function getServerSideProps({ params }) {
}, },
}; };
const response = await fetchFromStrapi( const response = await fetchFromStrapi("/api/collection-detail-categories", query);
"/api/collection-detail-categories", const products = response?.data || [];
query,
);
const allProducts = response?.data || [];
const products = allProducts;
// const allProducts = await getCollectionDetailCategoryData();
const categoriesSub = await getCollectionSubCategoryData(); const categoriesSub = await getCollectionSubCategoryData();
const activeSubCategory = const activeSubCategory = categoriesSub.find((item) => item.slug === subCategory) || null;
categoriesSub.find((item) => item.slug === subCategory) || null;
const result = { type: "subcategory", products, activeSubCategory }; const result = { type: "subcategory", products, activeSubCategory };
await redis.set(REDIS_KEY, JSON.stringify(result), "EX", REDIS_EXPIRE); await redis.set(REDIS_KEY, JSON.stringify(result), "EX", REDIS_EXPIRE);
console.log("normal data fetched");
return { props: result }; return { props: result };
} catch (error) { } catch (error) {
console.error(error); console.error(error);
return { return { notFound: true };
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!