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 428 additions and 196 deletions
components/Collection/AboutInfo.js
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import Heading from "@/components/Heading";
const AboutInfo = () => {
const AboutInfo = ({productData}) => {
console.log("productData aboutus", productData)
return (
<>
<section className='about-section about-info-section'>
<div className='custom_container'>
<Row className='text-center justify-content-center'>
<Col md={8}>
<Heading el="h2" heading="Every person is unique," />
<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,
creating products that contribute to the pleasures of everyday life. Luxury, design and modern kitchens
made to last generations, impervious to trends and ageless.</p>
{/* <Heading el="h2" heading="Every person is unique," />
<Heading el="h2" heading="Every kitchen too." /> */}
<Heading
el="h2"
heading={productData?.title || ""}
isHtml
/>
<div className='mb-0 gray-text' dangerouslySetInnerHTML={{__html:productData?.description}}></div>
</Col>
</Row>
</div>
......
components/Collection/Gallery.js
......@@ -4,6 +4,7 @@ import Heading from "@/components/Heading";
import Image from "next/image";
import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";
import { cleanImage } from "../services/imageHandling";
const galleryData = [
{ id: 1, src: "/image/gallery/01.png", col: 6 },
......@@ -13,7 +14,8 @@ const galleryData = [
{ id: 5, src: "/image/gallery/05.png", col: 6 },
];
const Gallery = () => {
const Gallery = ({productData}) => {
console.log("productData - Gallery", productData)
useEffect(() => {
Fancybox.bind("[data-fancybox='gallery']", {
Hash: false,
......@@ -36,15 +38,15 @@ const Gallery = () => {
</Row>
<Row className="gallery-items">
{galleryData.map((item) => (
<Col key={item.id} xs={item.col} className="mb-4">
{productData.map((item, index) => (
<Col key={item.id} xs={index === 2 ? 12 : 6} className="mb-4">
<div className="gallery-image-wrapper">
<a
href={item.src}
href={cleanImage((item?.image?.url))}
data-fancybox="gallery"
>
<Image
src={item.src}
src={cleanImage(item?.image?.url)}
alt={`Gallery image ${item.id}`}
fill
className="gallery-image"
......
components/Collection/InnerBannerproduct.js
......@@ -12,10 +12,10 @@ const InnerBannerproduct = ({productData}) => {
<Row>
<Col>
<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'>
<Heading el="h2" heading="About akruti luxe" />
<p>The Akruti Lux Collection brings together iconic brands, bespoke designs, and architectural excellence—crafted to inspire refined living.</p>
<Heading el="h2" heading={productData?.title} />
<div dangerouslySetInnerHTML={{__html: productData?.description}}></div>
</div>
</div>
</Col>
......
components/Collection/InnerDetails.js
......@@ -3,8 +3,10 @@ import Link from "next/link";
import React, { useState } from "react";
import { Col, Row } from "react-bootstrap";
import { useRouter } from "next/router";
import { cleanImage } from "../services/imageHandling";
const InnerDetails = ({ subCategories }) => {
console.log("subCategories-inn", subCategories)
const router = useRouter();
const { category } = router.query;
......@@ -17,7 +19,9 @@ const InnerDetails = ({ subCategories }) => {
// Safety check
if (!subCategories || !category) return null;
// const filteredSubCategories = subCategories.filter(
// (item) => item?.collection_category?.slug === "kitchens"
// );
return (
<section className="collection-m-section sec_padd">
<div className="custom_container">
......@@ -51,18 +55,18 @@ const InnerDetails = ({ subCategories }) => {
{/* Sub-category cards */}
<Row>
{subCategories.map((sub) => (
<Col md={6} key={sub.subCategorySlug}>
<Col md={6} key={sub.slug}>
<div className="collections-item">
<Link
href={`/collections/${category}/${sub.subCategorySlug}`}
href={`/collections/${category}/${sub.slug}`}
>
<Image
width={868}
height={560}
src={sub.subCategoryImage}
alt={sub.subCategoryName}
src={cleanImage(sub.image?.url)}
alt={sub.title}
/>
<div className="title">{sub.subCategoryName}</div>
<div className="title">{sub.title}</div>
</Link>
</div>
</Col>
......
components/Collection/InnerDetailsSubCategory.js
......@@ -4,8 +4,10 @@ import React, { useState } from "react";
import { Col, Row } from "react-bootstrap";
import { useRouter } from "next/router";
import FilterButton from "../Common/FilterButton";
import { cleanImage } from "../services/imageHandling";
const InnerDetailsSubCategory = ({ products }) => {
console.log("products-newwwwwwwwww", products)
const router = useRouter();
const { category, subCategory } = router.query;
const [showFilter, setShowFilter] = useState(false);
......@@ -74,12 +76,12 @@ const [showFilter, setShowFilter] = useState(false);
<Col md={6} key={product.productSlug}>
<div className="collections-item">
<Link
href={`/collections/${category}/${subCategory}/${product.productSlug}`}
href={`/collections/${category}/${subCategory}/${product.slug}`}
>
<Image
width={868}
height={560}
src={product.image}
src={cleanImage(product?.image?.url)}
alt={product.title}
/>
<div className="title">{product.title}</div>
......
components/Collection/Video.js
import React, { useRef, useEffect, useState } from "react";
import { Container } from "react-bootstrap";
import { cleanImage } from "../services/imageHandling";
const Video = () => {
const Video = ({productData}) => {
const videoRef = useRef(null);
const [isVisible, setIsVisible] = useState(false);
......@@ -31,7 +32,7 @@ const Video = () => {
playsInline
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.
</video>
</Container>
......
components/Common/HeadTitle.js
......@@ -2,17 +2,17 @@ import React from 'react'
import { Col, Row } from 'react-bootstrap'
import Heading from "@/components/Heading";
const HeadTitle = ({headTitleData}) => {
console.log("headTitleData", headTitleData)
const HeadTitle = ({categoryData}) => {
console.log("headTitleData", categoryData)
return (
<>
<section className='let-connect-section'>
<div className='custom_container'>
<Row className='text-center'>
<Col>
<Heading el="h2" heading={headTitleData?.title} />
<p className='mb-0 gray-text'>{headTitleData?.descrition1}</p>
<p className='mb-0 gray-text'>{headTitleData?.descrition2}</p>
<Heading el="h2" heading={categoryData?.title} />
<div className='mb-0 gray-text' dangerouslySetInnerHTML={{__html:categoryData?.description}}></div>
{/* <p className='mb-0 gray-text'>{categoryData?.descrition2}</p> */}
</Col>
</Row>
</div>
......
components/Heading.js
......@@ -2,17 +2,35 @@ import React, { useRef } from "react";
import { motion, useInView } from "framer-motion";
const splitText = (text) =>
(text || "").toString().split("").map((char, index) => ({
char,
key: `${char}-${index}`,
}));
(text || "")
.toString()
.split("")
.map((char, index) => ({
char,
key: `${char}-${index}`,
}));
const Heading = ({
el: Wrapper = "h2",
subheading = "",
heading = [],
heading = "",
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 headingVariants = {
......@@ -30,24 +48,23 @@ const Heading = ({
<div className={`headings mb-1 ${className}`}>
<Wrapper className="subheading">{subheading}</Wrapper>
<div className="heading-container">
{headingArray.length > 0 &&
headingArray.map((item, index) => (
<InViewWrapper key={index}>
{splitText(item).map((char, i) => (
<motion.span
key={char.key}
custom={i}
initial="hidden"
animate="visible"
variants={headingVariants}
className="heading"
style={{ display: "inline-block" }} // No whiteSpace or word-wrap styles here
>
{char.char === " " ? "\u00A0" : char.char}
</motion.span>
))}
</InViewWrapper>
))}
{headingArray.map((item, index) => (
<InViewWrapper key={index}>
{splitText(item).map((char, i) => (
<motion.span
key={char.key}
custom={i}
initial="hidden"
animate="visible"
variants={headingVariants}
className="heading"
style={{ display: "inline-block" }}
>
{char.char === " " ? "\u00A0" : char.char}
</motion.span>
))}
</InViewWrapper>
))}
</div>
</div>
);
......@@ -60,7 +77,9 @@ const InViewWrapper = ({ children }) => {
return (
<div ref={ref}>
{React.Children.map(children, (child) =>
React.cloneElement(child, { animate: isInView ? "visible" : "hidden" })
React.cloneElement(child, {
animate: isInView ? "visible" : "hidden",
})
)}
</div>
);
......
components/data/collectionsData.js
......@@ -43,7 +43,7 @@ export const collectionsData = [
{
productSlug: "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 = [
{
productSlug: "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 = [
{
productSlug: "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 = [
{
productSlug: "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 = [
{
productSlug: "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 = [
{
productSlug: "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 = [
{
productSlug: "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 = [
{
productSlug: "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";
import SwiperBtn from "@/components/Layout/SwiperBtn";
import FadeInStagger from "@/components/FadeInStagger";
import Heading from "@/components/Heading";
import { cleanImage } from "@/components/services/imageHandling";
const CollectionData = [
{ image: "/image/catalogues/01.png", title: "Ecosophia" },
{ image: "/image/catalogues/02.png", title: "Architectural Scenarios" },
......@@ -15,7 +16,7 @@ const CollectionData = [
{ image: "/image/catalogues/02.png", title: "Design Studio" },
];
const Catalogues = () => {
const Catalogues = ({cataloguesData}) => {
return (
<>
<div className="catalogues-sec sec_padd position-relative">
......@@ -58,11 +59,11 @@ const Catalogues = () => {
1200: { slidesPerView: 3, spaceBetween: 60 },
}}
>
{CollectionData.map((item, index) => (
{cataloguesData?.map((item, index) => (
<SwiperSlide key={index}>
<div className="collection-card">
<img
src={item.image}
src={cleanImage(item?.image?.url)}
alt={item.title}
className="img-fluid rounded-lg"
/>
......
container/Home/Contact.js
......@@ -23,7 +23,7 @@ export const Contact = () => {
type="text"
placeholder="Type here"
name="name"
class="inputField nameInput"
className="inputField nameInput"
/>
</div>
</Col>
......@@ -34,7 +34,7 @@ export const Contact = () => {
type="text"
placeholder="Type here"
name="Mobile Number"
class="inputField nameInput"
className="inputField nameInput"
/>
</div>
</Col>
......@@ -47,7 +47,7 @@ export const Contact = () => {
type="text"
placeholder="Type here"
name="Email Address"
class="inputField nameInput"
className="inputField nameInput"
/>
</div>
</Col>
......@@ -61,21 +61,21 @@ export const Contact = () => {
type="text"
placeholder="Type here"
name="name"
class="inputField nameInput"
className="inputField nameInput"
/>
</div>
</Col>
</Row>
<Row>
<Col className="mb-3">
<div class="form-check">
<div className="form-check">
<input
class="form-check-input"
className="form-check-input"
type="checkbox"
value=""
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
traditional and automated direct marketing purposes.
</label>
......
next.config.mjs
......@@ -12,6 +12,11 @@ const nextConfig = {
hostname: "158.69.0.202",
port: "3028",
},
{
protocol: "http",
hostname: "51.195.40.160",
port: "1337",
},
],
},
};
......
pages/collections/[category]/[subCategory]/[productSlug].js
import { useRouter } from "next/router";
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 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 { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi";
import { getCataloguesBySlug } from "@/services/cataloguesApi";
const ProductPage = () => {
const ProductPage = ({ productData, cataloguesData }) => {
console.log("cataloguesData", cataloguesData)
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 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>;
}
const subCategoryData = productData.collection_sub_category;
/* ---------------- Breadcrumb ---------------- */
/* ---------- BREADCRUMB ---------- */
const breadcrumbData = [
{
href: "/collections",
label: "Collections",
},
{ href: "/collections", label: "Collections" },
{
href: `/collections/${category}`,
label: categoryData.categoryName,
label: category.replace(/-/g, " "),
},
{
href: `/collections/${category}/${subCategory}`,
label: subCategoryData.subCategoryName,
href: `/collections/${category}/${subCategoryData.slug}`,
label: subCategoryData.title,
},
{
href: `/collections/${category}/${subCategory}/${productSlug}`,
href: router.asPath,
label: productData.title,
},
];
const bannerData = [
{
image: "/image/inner-banner/about.png",
title: "Banner",
}
];
return (
<>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerproduct productData={productData || []} />
<AboutInfo />
<Video />
<Gallery />
<Catalogues />
<InnerBannerproduct productData={productData} />
<AboutInfo productData={productData?.aboutInfo} />
<Video productData={productData?.video} />
<Gallery productData={productData?.gallery} />
<Catalogues cataloguesData={cataloguesData} />
<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;
/* ---------- 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";
import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle";
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 { category, subCategory } = router.query;
console.log("subCategory", subCategory)
// console.log('subCategory',subCategory)
if (!router.isReady) return null;
const categoryData = collectionsData.find(
item => item.categorySlug === category
);
const subCategoryData = categoryData?.subCategories.find(
sub => sub.subCategorySlug === subCategory
);
// console.log("subCategoryData666", subCategoryData)
if (!categoryData || !subCategoryData) {
// ⛔ No data
if (!products || products.length === 0) {
return <h1>Sub Category not found</h1>;
}
// ✅ Sub-category info
const subCategoryData = products[0].collection_sub_category;
// ✅ Breadcrumb
const breadcrumbData = [
{ href: "/", label: "Home" },
{ href: "/collections", label: "Collections" },
{
href: `/collections/${category}`,
label: categoryData.categoryName,
label: category.replace(/-/g, " "),
},
{
href: `/collections/${category}/${subCategory}`,
label: subCategoryData.subCategoryName,
label: subCategoryData.title,
},
];
const headTitleData = {
title: subCategoryData.subCategoryName,
descrition1: "The Akruti Lux Collection brings together iconic brands, bespoke designs, ",
descrition2: "and architectural excellence—crafted to inspire refined living.",
};
// ✅ Head title
// const headTitleData = {
// title: subCategoryData.title,
// descrition1: "",
// descrition2: "",
// };
return (
<>
<Breadcrumb breadcrumbData={breadcrumbData} />
<HeadTitle headTitleData={headTitleData} />
<InnerDetailsSubCategory products={subCategoryData.products} />
<HeadTitle categoryData={activeSubCategory} />
<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;
pages/collections/[category]/index.js
import InnerDetails from "@/components/Collection/InnerDetails";
import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle";
import { collectionsData } from "@/components/data/collectionsData";
import { useRouter } from "next/router";
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
);
import { getCollectionCategoryBySlug } from "@/services/collectionCategoryApi";
import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
export default function CategoryPage({ categoryData, categoriesSub }) {
console.log("categoriesSub", categoryData)
if (!categoryData) {
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 (
<>
<>
<Breadcrumb breadcrumbData={breadcrumbData} />
<HeadTitle headTitleData={headTitleData[0] || []} />
<InnerDetails subCategories={categoryData.subCategories} />
</>
<HeadTitle categoryData={categoryData} />
// <div>
// <h1>{categoryData.categoryName}</h1>
// <ul>
// {categoryData.subCategories.map(sub => (
// <li key={sub.subCategorySlug}>
// <Link href={`/collections/${category}/${sub.subCategorySlug}`}>
// {sub.subCategoryName}
// </Link>
// </li>
// ))}
// </ul>
// </div>
{categoriesSub.length > 0 && (
<InnerDetails subCategories={categoriesSub} />
)}
</>
);
};
}
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 {
.collections-item img {
width: 100%;
height: auto;
min-height: 29vw;
object-fit: cover;
}
.collections-item .title {
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!