Skip to content

sujata / Akruti-Frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 86fd0e0d by Ravindra Kanojiya
Options

updated 2 level collection

1 parent 386b0221
Inline Side-by-side
Showing 5 changed files with 106 additions and 32 deletions
components/Collection/InnerDetails.js
...@@ -57,9 +57,17 @@ const InnerDetails = ({ subCategories }) => { ...@@ -57,9 +57,17 @@ const InnerDetails = ({ subCategories }) => {
{subCategories?.map((sub) => ( {subCategories?.map((sub) => (
<Col md={6} key={sub.slug}> <Col md={6} key={sub.slug}>
<div className="collections-item"> <div className="collections-item">
<Link {/* <Link
href={sub?.show_detail_page ? `collections/${category}/${sub?.show_detail_page?.slug}` : `/collections/${category}/${sub.slug}`} href={sub?.show_detail_page ? `collections/${category}/${sub?.show_detail_page?.slug}` : `/collections/${category}/${sub.slug}`}
> > */}
<Link
href={
sub?.show_detail_page
? `/collections/${category}/${sub?.show_detail_page?.slug}`
: `/collections/${category}/${sub.slug}`
}
>
<Image <Image
width={868} width={868}
height={560} height={560}
......
components/Collection/Video.js
...@@ -23,7 +23,7 @@ const Video = ({productData}) => { ...@@ -23,7 +23,7 @@ const Video = ({productData}) => {
return ( return (
<section className="video_sec sec_padd collection-section"> <section className="video_sec sec_padd collection-section">
<Container className="custom_container"> <div className="custom_containers">
<video <video
ref={videoRef} ref={videoRef}
autoPlay autoPlay
...@@ -35,7 +35,7 @@ const Video = ({productData}) => { ...@@ -35,7 +35,7 @@ const Video = ({productData}) => {
<source src={cleanImage(productData?.video?.url)} type="video/mp4" /> <source src={cleanImage(productData?.video?.url)} type="video/mp4" />
Your browser does not support the video tag. Your browser does not support the video tag.
</video> </video>
</Container> </div>
</section> </section>
); );
}; };
......
components/Heading.js
...@@ -20,7 +20,7 @@ const Heading = ({ ...@@ -20,7 +20,7 @@ const Heading = ({
// ✅ IF HTML → render directly // ✅ IF HTML → render directly
if (isHtml) { if (isHtml) {
return ( return (
<div className={`headings mb-1 ${className}`}> <div className={`headings mb-4 ${className}`}>
{subheading && <Wrapper className="subheading">{subheading}</Wrapper>} {subheading && <Wrapper className="subheading">{subheading}</Wrapper>}
<Wrapper <Wrapper
className="heading" className="heading"
...@@ -45,7 +45,7 @@ const Heading = ({ ...@@ -45,7 +45,7 @@ const Heading = ({
}; };
return ( return (
<div className={`headings mb-1 ${className}`}> <div className={`headings mb-4 ${className}`}>
<Wrapper className="subheading">{subheading}</Wrapper> <Wrapper className="subheading">{subheading}</Wrapper>
<div className="heading-container"> <div className="heading-container">
{headingArray.map((item, index) => ( {headingArray.map((item, index) => (
......
pages/collections/[category]/[subCategory]/index.js
...@@ -2,26 +2,83 @@ import { useRouter } from "next/router"; ...@@ -2,26 +2,83 @@ import { useRouter } from "next/router";
import Breadcrumb from "@/components/Common/Breadcrumb"; import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle"; import HeadTitle from "@/components/Common/HeadTitle";
import InnerDetailsSubCategory from "@/components/Collection/InnerDetailsSubCategory"; import InnerDetailsSubCategory from "@/components/Collection/InnerDetailsSubCategory";
import { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi"; import InnerBannerproduct from "@/components/Collection/InnerBannerproduct";
import AboutInfo from "@/components/Collection/AboutInfo";
import Video from "@/components/Collection/Video";
import Gallery from "@/components/Collection/Gallery";
import Catalogues from "@/container/Home/Catalogues";
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 {
getCollectionDetailCategoryData,
} from "@/services/collectionDetailCategoryApi";
import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi"; import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
import { getCataloguesBySlug } from "@/services/cataloguesApi";
const SubCategoryPage = ({ products,categoriesSub,activeSubCategory }) => { const SubCategoryOrProductPage = ({
console.log("products9999", categoriesSub) type,
products,
productData,
activeSubCategory,
cataloguesData,
}) => {
const router = useRouter(); const router = useRouter();
const { category, subCategory } = router.query; const { category, subCategory } = router.query;
console.log("subCategory", subCategory)
if (!router.isReady) return null; if (!router.isReady) return null;
// ⛔ No data /* ======================================================
🟢 IF PRODUCT (2 LEVEL PRODUCT PAGE)
====================================================== */
if (type === "product") {
const subCategoryData = productData.collection_sub_category;
const breadcrumbData = [
{ href: "/collections", label: "Collections" },
{
href: `/collections/${category}`,
label: category.replace(/-/g, " "),
},
{
href: router.asPath,
label: productData.title,
},
];
return (
<>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerproduct productData={productData} />
<AboutInfo productData={productData?.aboutInfo} />
{productData?.isDoorAndPartitionsLayouts && <CompanyOverview />}
<Video productData={productData?.video} />
{productData?.isDoorAndPartitionsLayouts && <TechnicalDetails />}
<Gallery productData={productData?.gallery} />
{productData?.isDoorAndPartitionsLayouts && <Explore />}
{!productData?.isDoorAndPartitionsLayouts && (
<Catalogues cataloguesData={cataloguesData} />
)}
<Contact />
</>
);
}
/* ======================================================
🔵 IF SUBCATEGORY (NORMAL 2 LEVEL SUBCATEGORY PAGE)
====================================================== */
if (!products || products.length === 0) { if (!products || products.length === 0) {
return <h1>Sub Category not found</h1>; return <h1>Sub Category not found</h1>;
} }
// ✅ Sub-category info
const subCategoryData = products[0].collection_sub_category; const subCategoryData = products[0].collection_sub_category;
// ✅ Breadcrumb
const breadcrumbData = [ const breadcrumbData = [
{ href: "/", label: "Home" }, { href: "/", label: "Home" },
{ href: "/collections", label: "Collections" }, { href: "/collections", label: "Collections" },
...@@ -30,18 +87,11 @@ const SubCategoryPage = ({ products,categoriesSub,activeSubCategory }) => { ...@@ -30,18 +87,11 @@ const SubCategoryPage = ({ products,categoriesSub,activeSubCategory }) => {
label: category.replace(/-/g, " "), label: category.replace(/-/g, " "),
}, },
{ {
href: `/collections/${category}/${subCategory}`, href: router.asPath,
label: subCategoryData.title, label: subCategoryData.title,
}, },
]; ];
// ✅ Head title
// const headTitleData = {
// title: subCategoryData.title,
// descrition1: "",
// descrition2: "",
// };
return ( return (
<> <>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
...@@ -51,38 +101,53 @@ const SubCategoryPage = ({ products,categoriesSub,activeSubCategory }) => { ...@@ -51,38 +101,53 @@ const SubCategoryPage = ({ products,categoriesSub,activeSubCategory }) => {
); );
}; };
export default SubCategoryOrProductPage;
/* ======================================================
✅ SERVER SIDE LOGIC
====================================================== */
export async function getServerSideProps({ params }) { export async function getServerSideProps({ params }) {
try { try {
const { subCategory } = params; const { subCategory } = params;
/* 1️⃣ Check if this slug is a PRODUCT */
const productCheck = await getCollectionDetailCategoryData(subCategory);
if (productCheck && productCheck.length > 0) {
const cataloguesData = await getCataloguesBySlug();
return {
props: {
type: "product",
productData: productCheck[0],
cataloguesData,
},
};
}
/* 2️⃣ Otherwise treat as SUBCATEGORY */
const categoriesSub = await getCollectionSubCategoryData(); const categoriesSub = await getCollectionSubCategoryData();
const allProducts = await getCollectionDetailCategoryData(); const allProducts = await getCollectionDetailCategoryData();
// ✅ Filter products by subCategory slug
const products = allProducts.filter( const products = allProducts.filter(
(item) => item.collection_sub_category?.slug === subCategory (item) => item.collection_sub_category?.slug === subCategory
); );
// ✅ Filter sub-category data for HeadTitle
const activeSubCategory = const activeSubCategory =
categoriesSub.find((item) => item.slug === subCategory) || null; categoriesSub.find((item) => item.slug === subCategory) || null;
return { return {
props: { props: {
type: "subcategory",
products, products,
activeSubCategory, // 👈 single object activeSubCategory,
}, },
}; };
} catch (error) { } catch (error) {
console.error(error); console.error(error);
return { return {
props: { notFound: true,
products: [],
activeSubCategory: null,
},
}; };
} }
} }
export default SubCategoryPage;
styles/globals.css
...@@ -265,7 +265,7 @@ button.cust-swiper-button-next { ...@@ -265,7 +265,7 @@ button.cust-swiper-button-next {
/* ======video section===== */ /* ======video section===== */
.video-animate { .video-animate {
width: 100%; width: 100%;
height: 600px; /* Desktop height */ /* height: 600px; */
object-fit: cover; object-fit: cover;
/* border-radius: 20px; */ /* border-radius: 20px; */
cursor: pointer; cursor: pointer;
...@@ -434,6 +434,7 @@ input:focus-visible { ...@@ -434,6 +434,7 @@ input:focus-visible {
} }
.product-banner { .product-banner {
position: relative; position: relative;
height: calc(100vh - 148px);
} }
.product-banner .info { .product-banner .info {
position: absolute; position: absolute;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!