Skip to content

sujata / Akruti-Frontend

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

updated category mapping

1 parent 8cc9404f
Inline Side-by-side
Showing 71 changed files with 409 additions and 177 deletions
components/Collection/AboutInfo.js
import React from 'react' import React from 'react'
import { Col, Row } from 'react-bootstrap' import { Col, Row } from 'react-bootstrap'
import Heading from "@/components/Heading"; import Heading from "@/components/Heading";
const AboutInfo = () => { const AboutInfo = ({productData}) => {
console.log("productData aboutus", productData)
return ( return (
<> <>
<section className='about-section about-info-section'> <section className='about-section about-info-section'>
<div className='custom_container'> <div className='custom_container'>
<Row className='text-center justify-content-center'> <Row className='text-center justify-content-center'>
<Col md={8}> <Col md={8}>
<Heading el="h2" heading="Every person is unique," /> {/* <Heading el="h2" heading="Every person is unique," />
<Heading el="h2" heading="Every kitchen too." /> <Heading el="h2" heading="Every kitchen too." /> */}
<p className='mb-0 gray-text'>Each of our kitchen collections has been designed with man in mind, focusing on his wellness and needs, <Heading
creating products that contribute to the pleasures of everyday life. Luxury, design and modern kitchens el="h2"
made to last generations, impervious to trends and ageless.</p> heading={productData?.title || ""}
isHtml
/>
<div className='mb-0 gray-text' dangerouslySetInnerHTML={{__html:productData?.description}}></div>
</Col> </Col>
</Row> </Row>
</div> </div>
......
components/Collection/Gallery.js
...@@ -4,6 +4,7 @@ import Heading from "@/components/Heading"; ...@@ -4,6 +4,7 @@ import Heading from "@/components/Heading";
import Image from "next/image"; import Image from "next/image";
import { Fancybox } from "@fancyapps/ui"; import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css"; import "@fancyapps/ui/dist/fancybox/fancybox.css";
import { cleanImage } from "../services/imageHandling";
const galleryData = [ const galleryData = [
{ id: 1, src: "/image/gallery/01.png", col: 6 }, { id: 1, src: "/image/gallery/01.png", col: 6 },
...@@ -13,7 +14,8 @@ const galleryData = [ ...@@ -13,7 +14,8 @@ const galleryData = [
{ id: 5, src: "/image/gallery/05.png", col: 6 }, { id: 5, src: "/image/gallery/05.png", col: 6 },
]; ];
const Gallery = () => { const Gallery = ({productData}) => {
console.log("productData - Gallery", productData)
useEffect(() => { useEffect(() => {
Fancybox.bind("[data-fancybox='gallery']", { Fancybox.bind("[data-fancybox='gallery']", {
Hash: false, Hash: false,
...@@ -36,15 +38,15 @@ const Gallery = () => { ...@@ -36,15 +38,15 @@ const Gallery = () => {
</Row> </Row>
<Row className="gallery-items"> <Row className="gallery-items">
{galleryData.map((item) => ( {productData.map((item, index) => (
<Col key={item.id} xs={item.col} className="mb-4"> <Col key={item.id} xs={index === 2 ? 12 : 6} className="mb-4">
<div className="gallery-image-wrapper"> <div className="gallery-image-wrapper">
<a <a
href={item.src} href={cleanImage((item?.image?.url))}
data-fancybox="gallery" data-fancybox="gallery"
> >
<Image <Image
src={item.src} src={cleanImage(item?.image?.url)}
alt={`Gallery image ${item.id}`} alt={`Gallery image ${item.id}`}
fill fill
className="gallery-image" className="gallery-image"
......
components/Collection/InnerBannerproduct.js
...@@ -12,10 +12,10 @@ const InnerBannerproduct = ({productData}) => { ...@@ -12,10 +12,10 @@ const InnerBannerproduct = ({productData}) => {
<Row> <Row>
<Col> <Col>
<div className='product-banner'> <div className='product-banner'>
<Image width={1856} height={1086} src={cleanImage(productData?.image)} alt="" /> <Image width={1856} height={1086} src={cleanImage(productData?.image?.url)} alt="" />
<div className='info'> <div className='info'>
<Heading el="h2" heading="About akruti luxe" /> <Heading el="h2" heading={productData?.title} />
<p>The Akruti Lux Collection brings together iconic brands, bespoke designs, and architectural excellence—crafted to inspire refined living.</p> <div dangerouslySetInnerHTML={{__html: productData?.description}}></div>
</div> </div>
</div> </div>
</Col> </Col>
......
components/Collection/InnerDetails.js
...@@ -3,8 +3,10 @@ import Link from "next/link"; ...@@ -3,8 +3,10 @@ import Link from "next/link";
import React, { useState } from "react"; import React, { useState } from "react";
import { Col, Row } from "react-bootstrap"; import { Col, Row } from "react-bootstrap";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { cleanImage } from "../services/imageHandling";
const InnerDetails = ({ subCategories }) => { const InnerDetails = ({ subCategories }) => {
console.log("subCategories-inn", subCategories)
const router = useRouter(); const router = useRouter();
const { category } = router.query; const { category } = router.query;
...@@ -17,7 +19,9 @@ const InnerDetails = ({ subCategories }) => { ...@@ -17,7 +19,9 @@ const InnerDetails = ({ subCategories }) => {
// Safety check // Safety check
if (!subCategories || !category) return null; if (!subCategories || !category) return null;
// const filteredSubCategories = subCategories.filter(
// (item) => item?.collection_category?.slug === "kitchens"
// );
return ( return (
<section className="collection-m-section sec_padd"> <section className="collection-m-section sec_padd">
<div className="custom_container"> <div className="custom_container">
...@@ -51,18 +55,18 @@ const InnerDetails = ({ subCategories }) => { ...@@ -51,18 +55,18 @@ const InnerDetails = ({ subCategories }) => {
{/* Sub-category cards */} {/* Sub-category cards */}
<Row> <Row>
{subCategories.map((sub) => ( {subCategories.map((sub) => (
<Col md={6} key={sub.subCategorySlug}> <Col md={6} key={sub.slug}>
<div className="collections-item"> <div className="collections-item">
<Link <Link
href={`/collections/${category}/${sub.subCategorySlug}`} href={`/collections/${category}/${sub.slug}`}
> >
<Image <Image
width={868} width={868}
height={560} height={560}
src={sub.subCategoryImage} src={cleanImage(sub.image?.url)}
alt={sub.subCategoryName} alt={sub.title}
/> />
<div className="title">{sub.subCategoryName}</div> <div className="title">{sub.title}</div>
</Link> </Link>
</div> </div>
</Col> </Col>
......
components/Collection/InnerDetailsSubCategory.js
...@@ -4,8 +4,10 @@ import React, { useState } from "react"; ...@@ -4,8 +4,10 @@ import React, { useState } from "react";
import { Col, Row } from "react-bootstrap"; import { Col, Row } from "react-bootstrap";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import FilterButton from "../Common/FilterButton"; import FilterButton from "../Common/FilterButton";
import { cleanImage } from "../services/imageHandling";
const InnerDetailsSubCategory = ({ products }) => { const InnerDetailsSubCategory = ({ products }) => {
console.log("products-newwwwwwwwww", products)
const router = useRouter(); const router = useRouter();
const { category, subCategory } = router.query; const { category, subCategory } = router.query;
const [showFilter, setShowFilter] = useState(false); const [showFilter, setShowFilter] = useState(false);
...@@ -74,12 +76,12 @@ const [showFilter, setShowFilter] = useState(false); ...@@ -74,12 +76,12 @@ const [showFilter, setShowFilter] = useState(false);
<Col md={6} key={product.productSlug}> <Col md={6} key={product.productSlug}>
<div className="collections-item"> <div className="collections-item">
<Link <Link
href={`/collections/${category}/${subCategory}/${product.productSlug}`} href={`/collections/${category}/${subCategory}/${product.slug}`}
> >
<Image <Image
width={868} width={868}
height={560} height={560}
src={product.image} src={cleanImage(product?.image?.url)}
alt={product.title} alt={product.title}
/> />
<div className="title">{product.title}</div> <div className="title">{product.title}</div>
......
components/Collection/Video.js
import React, { useRef, useEffect, useState } from "react"; import React, { useRef, useEffect, useState } from "react";
import { Container } from "react-bootstrap"; import { Container } from "react-bootstrap";
import { cleanImage } from "../services/imageHandling";
const Video = () => { const Video = ({productData}) => {
const videoRef = useRef(null); const videoRef = useRef(null);
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
...@@ -31,7 +32,7 @@ const Video = () => { ...@@ -31,7 +32,7 @@ const Video = () => {
playsInline playsInline
className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`} className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
> >
<source src="/video/Akruti Video.mp4" 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> </Container>
......
components/Common/HeadTitle.js
...@@ -2,17 +2,17 @@ import React from 'react' ...@@ -2,17 +2,17 @@ import React from 'react'
import { Col, Row } from 'react-bootstrap' import { Col, Row } from 'react-bootstrap'
import Heading from "@/components/Heading"; import Heading from "@/components/Heading";
const HeadTitle = ({headTitleData}) => { const HeadTitle = ({categoryData}) => {
console.log("headTitleData", headTitleData) console.log("headTitleData", categoryData)
return ( return (
<> <>
<section className='let-connect-section'> <section className='let-connect-section'>
<div className='custom_container'> <div className='custom_container'>
<Row className='text-center'> <Row className='text-center'>
<Col> <Col>
<Heading el="h2" heading={headTitleData?.title} /> <Heading el="h2" heading={categoryData?.title} />
<p className='mb-0 gray-text'>{headTitleData?.descrition1}</p> <div className='mb-0 gray-text' dangerouslySetInnerHTML={{__html:categoryData?.description}}></div>
<p className='mb-0 gray-text'>{headTitleData?.descrition2}</p> {/* <p className='mb-0 gray-text'>{categoryData?.descrition2}</p> */}
</Col> </Col>
</Row> </Row>
</div> </div>
......
components/Heading.js
...@@ -2,7 +2,10 @@ import React, { useRef } from "react"; ...@@ -2,7 +2,10 @@ import React, { useRef } from "react";
import { motion, useInView } from "framer-motion"; import { motion, useInView } from "framer-motion";
const splitText = (text) => const splitText = (text) =>
(text || "").toString().split("").map((char, index) => ({ (text || "")
.toString()
.split("")
.map((char, index) => ({
char, char,
key: `${char}-${index}`, key: `${char}-${index}`,
})); }));
...@@ -10,9 +13,24 @@ const splitText = (text) => ...@@ -10,9 +13,24 @@ const splitText = (text) =>
const Heading = ({ const Heading = ({
el: Wrapper = "h2", el: Wrapper = "h2",
subheading = "", subheading = "",
heading = [], heading = "",
className = "", className = "",
isHtml = false, // ✅ added
}) => { }) => {
// ✅ IF HTML → render directly
if (isHtml) {
return (
<div className={`headings mb-1 ${className}`}>
{subheading && <Wrapper className="subheading">{subheading}</Wrapper>}
<Wrapper
className="heading"
dangerouslySetInnerHTML={{ __html: heading }}
/>
</div>
);
}
// ⬇️ Existing animation logic (unchanged)
const headingArray = Array.isArray(heading) ? heading : [heading]; const headingArray = Array.isArray(heading) ? heading : [heading];
const headingVariants = { const headingVariants = {
...@@ -30,8 +48,7 @@ const Heading = ({ ...@@ -30,8 +48,7 @@ const Heading = ({
<div className={`headings mb-1 ${className}`}> <div className={`headings mb-1 ${className}`}>
<Wrapper className="subheading">{subheading}</Wrapper> <Wrapper className="subheading">{subheading}</Wrapper>
<div className="heading-container"> <div className="heading-container">
{headingArray.length > 0 && {headingArray.map((item, index) => (
headingArray.map((item, index) => (
<InViewWrapper key={index}> <InViewWrapper key={index}>
{splitText(item).map((char, i) => ( {splitText(item).map((char, i) => (
<motion.span <motion.span
...@@ -41,7 +58,7 @@ const Heading = ({ ...@@ -41,7 +58,7 @@ const Heading = ({
animate="visible" animate="visible"
variants={headingVariants} variants={headingVariants}
className="heading" className="heading"
style={{ display: "inline-block" }} // No whiteSpace or word-wrap styles here style={{ display: "inline-block" }}
> >
{char.char === " " ? "\u00A0" : char.char} {char.char === " " ? "\u00A0" : char.char}
</motion.span> </motion.span>
...@@ -60,7 +77,9 @@ const InViewWrapper = ({ children }) => { ...@@ -60,7 +77,9 @@ const InViewWrapper = ({ children }) => {
return ( return (
<div ref={ref}> <div ref={ref}>
{React.Children.map(children, (child) => {React.Children.map(children, (child) =>
React.cloneElement(child, { animate: isInView ? "visible" : "hidden" }) React.cloneElement(child, {
animate: isInView ? "visible" : "hidden",
})
)} )}
</div> </div>
); );
......
components/data/collectionsData.js
...@@ -43,7 +43,7 @@ export const collectionsData = [ ...@@ -43,7 +43,7 @@ export const collectionsData = [
{ {
productSlug: "sunstone-pro", productSlug: "sunstone-pro",
title: "Sunstone Pro", title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.", image: "/image/collection-page/indoor-kitchen/01.png",
}, },
], ],
}, },
...@@ -55,7 +55,7 @@ export const collectionsData = [ ...@@ -55,7 +55,7 @@ export const collectionsData = [
{ {
productSlug: "sunstone-pro", productSlug: "sunstone-pro",
title: "Sunstone Pro", title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.", image: "/image/collection-page/indoor-kitchen/01.png",
}, },
], ],
}, },
...@@ -67,7 +67,7 @@ export const collectionsData = [ ...@@ -67,7 +67,7 @@ export const collectionsData = [
{ {
productSlug: "sunstone-pro", productSlug: "sunstone-pro",
title: "Sunstone Pro", title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.", image: "/image/collection-page/indoor-kitchen/01.png",
}, },
], ],
}, },
...@@ -79,7 +79,7 @@ export const collectionsData = [ ...@@ -79,7 +79,7 @@ export const collectionsData = [
{ {
productSlug: "sunstone-pro", productSlug: "sunstone-pro",
title: "Sunstone Pro", title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.", image: "/image/collection-page/indoor-kitchen/01.png",
}, },
], ],
}, },
...@@ -129,7 +129,7 @@ export const collectionsData = [ ...@@ -129,7 +129,7 @@ export const collectionsData = [
{ {
productSlug: "sunstone-pro", productSlug: "sunstone-pro",
title: "Sunstone Pro", title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.", image: "/image/collection-page/indoor-kitchen/01.png",
}, },
], ],
}, },
...@@ -141,7 +141,7 @@ export const collectionsData = [ ...@@ -141,7 +141,7 @@ export const collectionsData = [
{ {
productSlug: "sunstone-pro", productSlug: "sunstone-pro",
title: "Sunstone Pro", title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.", image: "/image/collection-page/indoor-kitchen/01.png",
}, },
], ],
}, },
...@@ -153,7 +153,7 @@ export const collectionsData = [ ...@@ -153,7 +153,7 @@ export const collectionsData = [
{ {
productSlug: "sunstone-pro", productSlug: "sunstone-pro",
title: "Sunstone Pro", title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.", image: "/image/collection-page/indoor-kitchen/01.png",
}, },
], ],
}, },
...@@ -165,7 +165,7 @@ export const collectionsData = [ ...@@ -165,7 +165,7 @@ export const collectionsData = [
{ {
productSlug: "sunstone-pro", productSlug: "sunstone-pro",
title: "Sunstone Pro", title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.", image: "/image/collection-page/indoor-kitchen/01.png",
}, },
], ],
}, },
......
container/Home/Catalogues.js
...@@ -8,6 +8,7 @@ import { Navigation, Pagination } from "swiper/modules"; ...@@ -8,6 +8,7 @@ import { Navigation, Pagination } from "swiper/modules";
import SwiperBtn from "@/components/Layout/SwiperBtn"; import SwiperBtn from "@/components/Layout/SwiperBtn";
import FadeInStagger from "@/components/FadeInStagger"; import FadeInStagger from "@/components/FadeInStagger";
import Heading from "@/components/Heading"; import Heading from "@/components/Heading";
import { cleanImage } from "@/components/services/imageHandling";
const CollectionData = [ const CollectionData = [
{ image: "/image/catalogues/01.png", title: "Ecosophia" }, { image: "/image/catalogues/01.png", title: "Ecosophia" },
{ image: "/image/catalogues/02.png", title: "Architectural Scenarios" }, { image: "/image/catalogues/02.png", title: "Architectural Scenarios" },
...@@ -15,7 +16,7 @@ const CollectionData = [ ...@@ -15,7 +16,7 @@ const CollectionData = [
{ image: "/image/catalogues/02.png", title: "Design Studio" }, { image: "/image/catalogues/02.png", title: "Design Studio" },
]; ];
const Catalogues = () => { const Catalogues = ({cataloguesData}) => {
return ( return (
<> <>
<div className="catalogues-sec sec_padd position-relative"> <div className="catalogues-sec sec_padd position-relative">
...@@ -58,11 +59,11 @@ const Catalogues = () => { ...@@ -58,11 +59,11 @@ const Catalogues = () => {
1200: { slidesPerView: 3, spaceBetween: 60 }, 1200: { slidesPerView: 3, spaceBetween: 60 },
}} }}
> >
{CollectionData.map((item, index) => ( {cataloguesData?.map((item, index) => (
<SwiperSlide key={index}> <SwiperSlide key={index}>
<div className="collection-card"> <div className="collection-card">
<img <img
src={item.image} src={cleanImage(item?.image?.url)}
alt={item.title} alt={item.title}
className="img-fluid rounded-lg" className="img-fluid rounded-lg"
/> />
......
container/Home/Contact.js
...@@ -23,7 +23,7 @@ export const Contact = () => { ...@@ -23,7 +23,7 @@ export const Contact = () => {
type="text" type="text"
placeholder="Type here" placeholder="Type here"
name="name" name="name"
class="inputField nameInput" className="inputField nameInput"
/> />
</div> </div>
</Col> </Col>
...@@ -34,7 +34,7 @@ export const Contact = () => { ...@@ -34,7 +34,7 @@ export const Contact = () => {
type="text" type="text"
placeholder="Type here" placeholder="Type here"
name="Mobile Number" name="Mobile Number"
class="inputField nameInput" className="inputField nameInput"
/> />
</div> </div>
</Col> </Col>
...@@ -47,7 +47,7 @@ export const Contact = () => { ...@@ -47,7 +47,7 @@ export const Contact = () => {
type="text" type="text"
placeholder="Type here" placeholder="Type here"
name="Email Address" name="Email Address"
class="inputField nameInput" className="inputField nameInput"
/> />
</div> </div>
</Col> </Col>
...@@ -61,21 +61,21 @@ export const Contact = () => { ...@@ -61,21 +61,21 @@ export const Contact = () => {
type="text" type="text"
placeholder="Type here" placeholder="Type here"
name="name" name="name"
class="inputField nameInput" className="inputField nameInput"
/> />
</div> </div>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col className="mb-3"> <Col className="mb-3">
<div class="form-check"> <div className="form-check">
<input <input
class="form-check-input" className="form-check-input"
type="checkbox" type="checkbox"
value="" value=""
id="checkChecked" id="checkChecked"
/> />
<label class="form-check-label" for="checkChecked"> <label className="form-check-label" for="checkChecked">
I accept the processing of my personal data for I accept the processing of my personal data for
traditional and automated direct marketing purposes. traditional and automated direct marketing purposes.
</label> </label>
......
next.config.mjs
...@@ -12,6 +12,11 @@ const nextConfig = { ...@@ -12,6 +12,11 @@ const nextConfig = {
hostname: "158.69.0.202", hostname: "158.69.0.202",
port: "3028", port: "3028",
}, },
{
protocol: "http",
hostname: "51.195.40.160",
port: "1337",
},
], ],
}, },
}; };
......
pages/collections/[category]/[subCategory]/[productSlug].js
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Breadcrumb from "@/components/Common/Breadcrumb"; import Breadcrumb from "@/components/Common/Breadcrumb";
import { collectionsData } from "@/components/data/collectionsData";
import InnerBanner from "@/components/Common/InnerBanner";
import InnerBannerproduct from "@/components/Collection/InnerBannerproduct"; import InnerBannerproduct from "@/components/Collection/InnerBannerproduct";
import AboutInfo from "@/components/Collection/AboutInfo"; import AboutInfo from "@/components/Collection/AboutInfo";
import Video from "@/components/Collection/Video"; import Video from "@/components/Collection/Video";
import Gallery from "@/components/Collection/Gallery"; import Gallery from "@/components/Collection/Gallery";
import Catalogues from "@/container/Home/Catalogues"; import Catalogues from "@/container/Home/Catalogues";
import { Contact } from "@/container/Home/Contact"; import { Contact } from "@/container/Home/Contact";
import { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi";
import { getCataloguesBySlug } from "@/services/cataloguesApi";
const ProductPage = () => { const ProductPage = ({ productData, cataloguesData }) => {
console.log("cataloguesData", cataloguesData)
const router = useRouter(); const router = useRouter();
const { category, subCategory, productSlug } = router.query; const { category, subCategory: subCategorySlug, productSlug } = router.query;
if (!router.isReady) return null; if (!router.isReady || !productData) return null;
// Find category const subCategoryData = productData.collection_sub_category;
const categoryData = collectionsData.find(
item => item.categorySlug === category
);
// Find sub-category
const subCategoryData = categoryData?.subCategories.find(
sub => sub.subCategorySlug === subCategory
);
// Find product
const productData = subCategoryData?.products.find(
product => product.productSlug === productSlug
);
console.log("productData222", productData)
if (!categoryData || !subCategoryData || !productData) {
return <h1>Product not found</h1>;
}
/* ---------------- Breadcrumb ---------------- */ /* ---------- BREADCRUMB ---------- */
const breadcrumbData = [ const breadcrumbData = [
{ { href: "/collections", label: "Collections" },
href: "/collections",
label: "Collections",
},
{ {
href: `/collections/${category}`, href: `/collections/${category}`,
label: categoryData.categoryName, label: category.replace(/-/g, " "),
}, },
{ {
href: `/collections/${category}/${subCategory}`, href: `/collections/${category}/${subCategoryData.slug}`,
label: subCategoryData.subCategoryName, label: subCategoryData.title,
}, },
{ {
href: `/collections/${category}/${subCategory}/${productSlug}`, href: router.asPath,
label: productData.title, label: productData.title,
}, },
]; ];
const bannerData = [
{
image: "/image/inner-banner/about.png",
title: "Banner",
}
];
return ( return (
<> <>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerproduct productData={productData || []} /> <InnerBannerproduct productData={productData} />
<AboutInfo /> <AboutInfo productData={productData?.aboutInfo} />
<Video /> <Video productData={productData?.video} />
<Gallery /> <Gallery productData={productData?.gallery} />
<Catalogues /> <Catalogues cataloguesData={cataloguesData} />
<Contact /> <Contact />
{/* <div className="custom_container">
<h1>{productData.title}</h1>
{productData.image && (
<img
src={productData.image}
alt={productData.title}
style={{ maxWidth: "100%", marginBottom: 20 }}
/>
)}
{productData.description && <p>{productData.description}</p>}
</div> */}
</> </>
); );
}; };
export default ProductPage; export default ProductPage;
/* ---------- SSR ---------- */
export async function getServerSideProps({ params }) {
try {
const { productSlug } = params;
const productData = await getCollectionDetailCategoryData(productSlug);
const cataloguesData = await getCataloguesBySlug();
if (!productData || productData.length === 0) {
return { notFound: true };
}
return {
props: {
productData: productData[0], // ✅ single product
cataloguesData,
},
};
} catch (error) {
console.error("Product page SSR error:", error);
return { notFound: true };
}
}
pages/collections/[category]/[subCategory]/index.js
...@@ -2,52 +2,87 @@ import { useRouter } from "next/router"; ...@@ -2,52 +2,87 @@ 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 { collectionsData } from "@/components/data/collectionsData"; import { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi";
import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
const SubCategoryPage = () => { const SubCategoryPage = ({ products,categoriesSub,activeSubCategory }) => {
console.log("products9999", categoriesSub)
const router = useRouter(); const router = useRouter();
const { category, subCategory } = router.query; const { category, subCategory } = router.query;
console.log("subCategory", subCategory)
// console.log('subCategory',subCategory)
if (!router.isReady) return null; if (!router.isReady) return null;
const categoryData = collectionsData.find( // ⛔ No data
item => item.categorySlug === category if (!products || products.length === 0) {
);
const subCategoryData = categoryData?.subCategories.find(
sub => sub.subCategorySlug === subCategory
);
// console.log("subCategoryData666", subCategoryData)
if (!categoryData || !subCategoryData) {
return <h1>Sub Category not found</h1>; return <h1>Sub Category not found</h1>;
} }
// ✅ Sub-category info
const subCategoryData = products[0].collection_sub_category;
// ✅ Breadcrumb
const breadcrumbData = [ const breadcrumbData = [
{ href: "/", label: "Home" },
{ href: "/collections", label: "Collections" }, { href: "/collections", label: "Collections" },
{ {
href: `/collections/${category}`, href: `/collections/${category}`,
label: categoryData.categoryName, label: category.replace(/-/g, " "),
}, },
{ {
href: `/collections/${category}/${subCategory}`, href: `/collections/${category}/${subCategory}`,
label: subCategoryData.subCategoryName, label: subCategoryData.title,
}, },
]; ];
const headTitleData = { // ✅ Head title
title: subCategoryData.subCategoryName, // const headTitleData = {
descrition1: "The Akruti Lux Collection brings together iconic brands, bespoke designs, ", // title: subCategoryData.title,
descrition2: "and architectural excellence—crafted to inspire refined living.", // descrition1: "",
}; // descrition2: "",
// };
return ( return (
<> <>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
<HeadTitle headTitleData={headTitleData} /> <HeadTitle categoryData={activeSubCategory} />
<InnerDetailsSubCategory products={subCategoryData.products} /> <InnerDetailsSubCategory products={products} />
</> </>
); );
}; };
export async function getServerSideProps({ params }) {
try {
const { subCategory } = params;
const categoriesSub = await getCollectionSubCategoryData();
const allProducts = await getCollectionDetailCategoryData();
// ✅ Filter products by subCategory slug
const products = allProducts.filter(
(item) => item.collection_sub_category?.slug === subCategory
);
// ✅ Filter sub-category data for HeadTitle
const activeSubCategory =
categoriesSub.find((item) => item.slug === subCategory) || null;
return {
props: {
products,
activeSubCategory, // 👈 single object
},
};
} catch (error) {
console.error(error);
return {
props: {
products: [],
activeSubCategory: null,
},
};
}
}
export default SubCategoryPage; export default SubCategoryPage;
pages/collections/[category]/index.js
import InnerDetails from "@/components/Collection/InnerDetails"; import InnerDetails from "@/components/Collection/InnerDetails";
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 { collectionsData } from "@/components/data/collectionsData"; import { getCollectionCategoryBySlug } from "@/services/collectionCategoryApi";
import { useRouter } from "next/router"; import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
const breadcrumbData = [
{
href: "/",
label: "Collections"
},
{
href: "/",
label: "All Kitchens"
},
];
const headTitleData = [
{
title: "Kitchens",
descrition1:"The Akruti Lux Collection brings together iconic brands, bespoke designs,",
descrition2:"And architectural excellence—crafted to inspire refined living."
}
];
const CategoryPage = () => {
const router = useRouter();
const { category } = router.query;
if (!router.isReady) return null;
const categoryData = collectionsData.find(
item => item.categorySlug === category
);
export default function CategoryPage({ categoryData, categoriesSub }) {
console.log("categoriesSub", categoryData)
if (!categoryData) { if (!categoryData) {
return <h1>Category not found</h1>; return <h1>Category not found</h1>;
} }
const breadcrumbData = [
{ href: "/", label: "Home" },
{ href: "/collections", label: "Collections" },
{
href: `/collections/${categoryData.slug}`,
label: categoryData.title,
},
];
// const headTitleData = {
// title: categoryData.title,
// descrition1: "",
// descrition2: "",
// };
return ( return (
<> <>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
<HeadTitle headTitleData={headTitleData[0] || []} /> <HeadTitle categoryData={categoryData} />
<InnerDetails subCategories={categoryData.subCategories} />
</>
// <div> {categoriesSub.length > 0 && (
// <h1>{categoryData.categoryName}</h1> <InnerDetails subCategories={categoriesSub} />
)}
// <ul> </>
// {categoryData.subCategories.map(sub => (
// <li key={sub.subCategorySlug}>
// <Link href={`/collections/${category}/${sub.subCategorySlug}`}>
// {sub.subCategoryName}
// </Link>
// </li>
// ))}
// </ul>
// </div>
); );
}; }
export default CategoryPage; export async function getServerSideProps({ params }) {
try {
const { category } = params;
const categoryData = await getCollectionCategoryBySlug(category);
const categoriesSub = await getCollectionSubCategoryData(category);
return {
props: {
categoryData,
categoriesSub,
},
};
} catch (error) {
return {
props: {
categoryData: null,
categoriesSub: [],
},
};
}
}
public/image/collection-page/indoor-kitchen/01.png
public/image/collection-page/indoor-kitchen/01.png

531 KB | W: | H:

public/image/collection-page/indoor-kitchen/01.png

1.74 MB | W: | H:

public/image/collection-page/indoor-kitchen/01.png
public/image/collection-page/indoor-kitchen/01.png
public/image/collection-page/indoor-kitchen/01.png
public/image/collection-page/indoor-kitchen/01.png
  • 2-up
  • Swipe
  • Onion skin
public/image/collection-page/indoor-kitchen/02.png
public/image/collection-page/indoor-kitchen/02.png

648 KB | W: | H:

public/image/collection-page/indoor-kitchen/02.png

2.37 MB | W: | H:

public/image/collection-page/indoor-kitchen/02.png
public/image/collection-page/indoor-kitchen/02.png
public/image/collection-page/indoor-kitchen/02.png
public/image/collection-page/indoor-kitchen/02.png
  • 2-up
  • Swipe
  • Onion skin
public/image/collection-page/indoor-kitchen/03.png
public/image/collection-page/indoor-kitchen/03.png

342 KB | W: | H:

public/image/collection-page/indoor-kitchen/03.png

1.99 MB | W: | H:

public/image/collection-page/indoor-kitchen/03.png
public/image/collection-page/indoor-kitchen/03.png
public/image/collection-page/indoor-kitchen/03.png
public/image/collection-page/indoor-kitchen/03.png
  • 2-up
  • Swipe
  • Onion skin
public/image/collection-page/indoor-kitchen/04.png
public/image/collection-page/indoor-kitchen/04.png

572 KB | W: | H:

public/image/collection-page/indoor-kitchen/04.png

1.81 MB | W: | H:

public/image/collection-page/indoor-kitchen/04.png
public/image/collection-page/indoor-kitchen/04.png
public/image/collection-page/indoor-kitchen/04.png
public/image/collection-page/indoor-kitchen/04.png
  • 2-up
  • Swipe
  • Onion skin
services/api.js 0 → 100644
import qs from "qs";
const STRAPI_URL = process.env.NEXT_PUBLIC_BACKEND_API_URL;
export async function fetchFromStrapi(path, query = {}) {
const queryString = qs.stringify(query, {
encodeValuesOnly: true,
});
const url = `${STRAPI_URL}${path}?${queryString}`;
const res = await fetch(url);
if (!res.ok) {
throw new Error("Failed to fetch from Strapi");
}
return res.json();
}
services/cataloguesApi.js 0 → 100644
import { fetchFromStrapi } from "./api";
export async function getCataloguesBySlug() {
try {
const query = {
populate: {
image: true,
},
};
const response = await fetchFromStrapi(
"/api/catalogues",
query
);
// return single category
return response?.data || [];
} catch (error) {
console.error("Catalogues fetch error:", error);
return null;
}
}
services/collectionApi.js 0 → 100644
import { fetchFromStrapi } from "./api";
export async function getCollectionPageData() {
try {
const query = {
populate: {
collectionsData: {
populate: {
subCategories: {
populate: {
subCategoryImage: true, // ✅ correct nesting
products: {
populate: {
image: true, // ✅ correct nesting
},
}, // ✅ correct nesting
},
},
},
},
},
};
const response = await fetchFromStrapi("/api/collections-data", query);
// 🔥 IMPORTANT: your real categories live here
return response?.data?.[0]?.collectionsData || [];
} catch (error) {
console.error("Collection fetch error:", error);
return [];
}
}
services/collectionCategoryApi.js 0 → 100644
import { fetchFromStrapi } from "./api";
export async function getCollectionCategoryBySlug(slug) {
try {
const query = {
filters: {
slug: {
$eq: slug,
},
},
};
const response = await fetchFromStrapi(
"/api/collection-categories",
query
);
// return single category
return response?.data?.[0] || null;
} catch (error) {
console.error("Category fetch error:", error);
return null;
}
}
services/collectionDetailCategoryApi.js 0 → 100644
import { fetchFromStrapi } from "./api";
export async function getCollectionDetailCategoryData(productSlug) {
try {
const query = {
filters: {
slug: {
$eq: productSlug,
},
},
populate: {
image: true,
collection_sub_category: {
populate: true,
},
gallery: {
populate:{
image: true,
},
},
aboutInfo: {
populate:true
},
video: {
populate:{
video:true
}
},
},
};
const response = await fetchFromStrapi(
"/api/collection-detail-categories",
query
);
return response?.data || [];
} catch (error) {
console.error("Product fetch error:", error);
return [];
}
}
services/collectionSubCategoryApi.js 0 → 100644
import { fetchFromStrapi } from "./api";
export async function getCollectionSubCategoryData(categorySlug) {
try {
const query = {
filters: {
collection_category: {
slug: {
$eq: categorySlug,
},
},
},
populate: {
image: true,
collection_category: true,
},
};
const response = await fetchFromStrapi(
"/api/collection-sub-categories",
query
);
return response?.data || [];
} catch (error) {
console.error("Sub-category fetch error:", error);
return [];
}
}
styles/globals.css
...@@ -412,6 +412,8 @@ input:focus-visible { ...@@ -412,6 +412,8 @@ input:focus-visible {
.collections-item img { .collections-item img {
width: 100%; width: 100%;
height: auto; height: auto;
min-height: 29vw;
object-fit: cover;
} }
.collections-item .title { .collections-item .title {
margin-top: 1rem; margin-top: 1rem;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!