Skip to content

sujata / Akruti-Frontend

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

updated new pages

1 parent 86fd0e0d
Inline Side-by-side
Showing 10 changed files with 135 additions and 54 deletions
components/Brands/TechnicalDetails.js
...@@ -99,7 +99,7 @@ const technicalDetailsData = [ ...@@ -99,7 +99,7 @@ const technicalDetailsData = [
const TechnicalDetails = () => { const TechnicalDetails = () => {
return ( return (
<> <>
<section className="technicalDetails-section catalogues-sec sec_padd"> <section className="technicalDetails-section catalogues-secs">
<Container className="custom_container"> <Container className="custom_container">
<Row> <Row>
<Col className="d-flex justify-content-center"> <Col className="d-flex justify-content-center">
......
components/Collection/CompanyOverview.js
...@@ -2,28 +2,49 @@ import React from "react"; ...@@ -2,28 +2,49 @@ 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";
import Image from "next/image"; import Image from "next/image";
import { cleanImage } from "../services/imageHandling";
const CompanyOverview = () => { const CompanyOverview = ({companyOverviewData}) => {
console.log("productData cat", companyOverviewData)
return ( return (
<> <>
<section className="about-section about-info-section"> <section className="about-section about-info-section">
<div className="container"> <div className="container">
<Row className='my-5'> <Row className="my-5">
<Col md={6}> {companyOverviewData?.map((item, index) => (
<div className='luxury-items'> <Col
<Image width={806} height={560} src="/image/luxury01.png" /> md={6}
<div className='info'>Its minimalist design language allows it to complement both modern and classic interiors with ease. key={item.id || index}
From subtle matte finishes to high-gloss elegance, every variation reflects refined craftsmanship.</div> >
<div
className={`luxury-items ${
index % 2 !== 0 ? "option02" : ""
}`}
>
<Image
width={index % 2 !== 0 ? 570 : 806}
height={index % 2 !== 0 ? 629 : 560}
src={cleanImage(item?.image?.url)}
alt="Luxury"
/>
{item?.description && (
<h1
/>
)}
<div className="info" dangerouslySetInnerHTML={{
__html: item.description,
}}>
</div> </div>
</Col> </div>
<Col md={6}> </Col>
<div className='luxury-items option02'> ))}
<Image width={570} height={629} src="/image/luxury02.png" /> </Row>
<div className='info'>Its minimalist design language allows it to complement both modern and classic interiors with ease.
From subtle matte finishes to high-gloss elegance, every variation reflects refined craftsmanship.</div>
</div>
</Col>
</Row>
</div> </div>
</section> </section>
</> </>
......
components/Collection/Explore.js
...@@ -3,6 +3,7 @@ import React from "react"; ...@@ -3,6 +3,7 @@ import React from "react";
import { Col, Container, Row } from "react-bootstrap"; import { Col, Container, Row } from "react-bootstrap";
import Image from "next/image"; // ✅ MISSING IMPORT import Image from "next/image"; // ✅ MISSING IMPORT
import Heading from "@/components/Heading"; import Heading from "@/components/Heading";
import { cleanImage } from "../services/imageHandling";
const exploreData = [ const exploreData = [
{ {
id: 1, id: 1,
...@@ -18,7 +19,7 @@ const exploreData = [ ...@@ -18,7 +19,7 @@ const exploreData = [
}, },
]; ];
const Explore = () => { const Explore = ({productData}) => {
return ( return (
<section className="explore-section mb-5"> <section className="explore-section mb-5">
<Container className="custom_container"> <Container className="custom_container">
...@@ -28,12 +29,12 @@ const Explore = () => { ...@@ -28,12 +29,12 @@ const Explore = () => {
</Col> </Col>
</Row> </Row>
<Row> <Row>
{exploreData.map((item) => ( {productData?.map((item) => (
<Col md={6} key={item.id}> <Col md={6} key={item.id}>
<div className="collections-item"> <div className="collections-item">
<Link href={`/collections/${item.slug}`} className="d-block"> <Link href={`/collections/${item.slug}`} className="d-block">
<Image <Image
src={item.image} src={cleanImage(item.image.url)}
width={868} width={868}
height={560} height={560}
alt={item.name} alt={item.name}
......
components/Collection/TechnicalDetails.js
...@@ -2,6 +2,7 @@ import React from "react"; ...@@ -2,6 +2,7 @@ import React from "react";
import { Accordion, Col, Container, Row } from "react-bootstrap"; import { Accordion, Col, Container, Row } from "react-bootstrap";
import Heading from "@/components/Heading"; import Heading from "@/components/Heading";
import Image from "next/image"; import Image from "next/image";
import { cleanImage } from "../services/imageHandling";
const technicalDetailsData = [ const technicalDetailsData = [
{ {
...@@ -96,10 +97,11 @@ const technicalDetailsData = [ ...@@ -96,10 +97,11 @@ const technicalDetailsData = [
}, },
]; ];
const TechnicalDetails = () => { const TechnicalDetails = ({productData}) => {
console.log("productData- tech", productData)
return ( return (
<> <>
<section className="technicalDetails-section catalogues-sec sec_padd"> <section className="technicalDetails-section catalogues-secs">
<Container className="custom_container"> <Container className="custom_container">
<Row> <Row>
<Col className="d-flex justify-content-center"> <Col className="d-flex justify-content-center">
...@@ -110,7 +112,7 @@ const TechnicalDetails = () => { ...@@ -110,7 +112,7 @@ const TechnicalDetails = () => {
<Col> <Col>
<div className="accordion01"> <div className="accordion01">
<Accordion defaultActiveKey="0"> <Accordion defaultActiveKey="0">
{technicalDetailsData.map((item) => ( {productData?.map((item) => (
<Accordion.Item eventKey={item.id} key={item.id}> <Accordion.Item eventKey={item.id} key={item.id}>
<Accordion.Header>{item.title}</Accordion.Header> <Accordion.Header>{item.title}</Accordion.Header>
...@@ -119,7 +121,7 @@ const TechnicalDetails = () => { ...@@ -119,7 +121,7 @@ const TechnicalDetails = () => {
<Col md={5}> <Col md={5}>
<div className="image"> <div className="image">
<Image <Image
src={item.image} src={cleanImage(item?.image?.url)}
alt={item.title} alt={item.title}
width={743} width={743}
height={500} height={500}
...@@ -131,7 +133,7 @@ const TechnicalDetails = () => { ...@@ -131,7 +133,7 @@ const TechnicalDetails = () => {
{item.details.map((detail, index) => ( {item.details.map((detail, index) => (
<div className="item" key={index}> <div className="item" key={index}>
<div className="title">{detail.label}</div> <div className="title">{detail.label}</div>
<div className="info">{detail.value}</div> <div className="info" dangerouslySetInnerHTML={{__html: detail.value}}></div>
</div> </div>
))} ))}
</Col> </Col>
......
pages/collections/[category]/[subCategory]/[productSlug].js
...@@ -13,7 +13,7 @@ import TechnicalDetails from "@/components/Collection/TechnicalDetails"; ...@@ -13,7 +13,7 @@ import TechnicalDetails from "@/components/Collection/TechnicalDetails";
import Explore from "@/components/Collection/Explore"; import Explore from "@/components/Collection/Explore";
const ProductPage = ({ productData, cataloguesData }) => { const ProductPage = ({ productData, cataloguesData }) => {
console.log("cataloguesData", productData); console.log("cataloguesData", cataloguesData);
const router = useRouter(); const router = useRouter();
const { category, subCategory: subCategorySlug, productSlug } = router.query; const { category, subCategory: subCategorySlug, productSlug } = router.query;
...@@ -23,7 +23,7 @@ const ProductPage = ({ productData, cataloguesData }) => { ...@@ -23,7 +23,7 @@ const ProductPage = ({ productData, cataloguesData }) => {
/* ---------- BREADCRUMB ---------- */ /* ---------- BREADCRUMB ---------- */
const breadcrumbData = [ const breadcrumbData = [
{ href: "/collections", label: "Collections" }, { href: "/", label: "Collections" },
{ {
href: `/collections/${category}`, href: `/collections/${category}`,
label: category.replace(/-/g, " "), label: category.replace(/-/g, " "),
...@@ -44,7 +44,8 @@ const ProductPage = ({ productData, cataloguesData }) => { ...@@ -44,7 +44,8 @@ const ProductPage = ({ productData, cataloguesData }) => {
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerproduct productData={productData} /> <InnerBannerproduct productData={productData} />
<AboutInfo productData={productData?.aboutInfo} /> <AboutInfo productData={productData?.aboutInfo} />
{productData?.isDoorAndPartitionsLayouts === true && <CompanyOverview />} {/* {productData?.isDoorAndPartitionsLayouts === true && <CompanyOverview productData={CompanyOverview} />} */}
<CompanyOverview productData={CompanyOverview} />
<Video productData={productData?.video} /> <Video productData={productData?.video} />
{productData?.isDoorAndPartitionsLayouts === true && <TechnicalDetails />} {productData?.isDoorAndPartitionsLayouts === true && <TechnicalDetails />}
...@@ -66,6 +67,8 @@ export async function getServerSideProps({ params }) { ...@@ -66,6 +67,8 @@ export async function getServerSideProps({ params }) {
try { try {
const { productSlug } = params; const { productSlug } = params;
console.log('productSlug',productSlug)
const productData = await getCollectionDetailCategoryData(productSlug); const productData = await getCollectionDetailCategoryData(productSlug);
const cataloguesData = await getCataloguesBySlug(); const cataloguesData = await getCataloguesBySlug();
......
pages/collections/[category]/[subCategory]/index.js
...@@ -12,11 +12,10 @@ import CompanyOverview from "@/components/Collection/CompanyOverview"; ...@@ -12,11 +12,10 @@ 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 { import { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi";
getCollectionDetailCategoryData,
} from "@/services/collectionDetailCategoryApi";
import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi"; import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
import { getCataloguesBySlug } from "@/services/cataloguesApi"; import { getCataloguesBySlug } from "@/services/cataloguesApi";
import { fetchFromStrapi } from "@/services/api";
const SubCategoryOrProductPage = ({ const SubCategoryOrProductPage = ({
type, type,
...@@ -27,17 +26,17 @@ const SubCategoryOrProductPage = ({ ...@@ -27,17 +26,17 @@ const SubCategoryOrProductPage = ({
}) => { }) => {
const router = useRouter(); const router = useRouter();
const { category, subCategory } = router.query; const { category, subCategory } = router.query;
console.log("productData -new", products);
if (!router.isReady) return null; if (!router.isReady) return null;
/* ====================================================== /* ======================================================
🟢 IF PRODUCT (2 LEVEL PRODUCT PAGE) 🟢 IF PRODUCT (2 LEVEL PRODUCT PAGE)
====================================================== */ ====================================================== */
if (type === "product") { if (type === "product") {
const subCategoryData = productData.collection_sub_category; const subCategoryData = productData.productData;
const breadcrumbData = [ const breadcrumbData = [
{ href: "/collections", label: "Collections" }, { href: "/", label: "Collections" },
{ {
href: `/collections/${category}`, href: `/collections/${category}`,
label: category.replace(/-/g, " "), label: category.replace(/-/g, " "),
...@@ -54,11 +53,17 @@ const SubCategoryOrProductPage = ({ ...@@ -54,11 +53,17 @@ const SubCategoryOrProductPage = ({
<InnerBannerproduct productData={productData} /> <InnerBannerproduct productData={productData} />
<AboutInfo productData={productData?.aboutInfo} /> <AboutInfo productData={productData?.aboutInfo} />
{productData?.isDoorAndPartitionsLayouts && <CompanyOverview />} {productData?.isDoorAndPartitionsLayouts && (
<CompanyOverview companyOverviewData={productData?.companyOverview} />
)}
<Video productData={productData?.video} /> <Video productData={productData?.video} />
{productData?.isDoorAndPartitionsLayouts && <TechnicalDetails />} {productData?.isDoorAndPartitionsLayouts && (
<TechnicalDetails productData={productData?.technicalDetails} />
)}
<Gallery productData={productData?.gallery} /> <Gallery productData={productData?.gallery} />
{productData?.isDoorAndPartitionsLayouts && <Explore />} {productData?.isDoorAndPartitionsLayouts && (
<Explore productData={productData?.explore} />
)}
{!productData?.isDoorAndPartitionsLayouts && ( {!productData?.isDoorAndPartitionsLayouts && (
<Catalogues cataloguesData={cataloguesData} /> <Catalogues cataloguesData={cataloguesData} />
...@@ -73,22 +78,24 @@ const SubCategoryOrProductPage = ({ ...@@ -73,22 +78,24 @@ const SubCategoryOrProductPage = ({
🔵 IF SUBCATEGORY (NORMAL 2 LEVEL SUBCATEGORY PAGE) 🔵 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>;
} // }
const subCategoryData = products[0].collection_sub_category; const subCategoryData = products[0]?.collection_sub_category;
console.log('subCategoryData',subCategoryData)
const breadcrumbData = [ const breadcrumbData = [
{ href: "/", label: "Home" }, // { href: "/", label: "Home" },
{ href: "/collections", label: "Collections" }, { href: "/", label: "Collections" },
{ {
href: `/collections/${category}`, href: `/collections/${category}`,
label: category.replace(/-/g, " "), label: category.replace(/-/g, " "),
}, },
{ {
href: router.asPath, href: router.asPath,
label: subCategoryData.title, label: subCategoryData?.title,
}, },
]; ];
...@@ -110,6 +117,7 @@ export default SubCategoryOrProductPage; ...@@ -110,6 +117,7 @@ export default SubCategoryOrProductPage;
export async function getServerSideProps({ params }) { export async function getServerSideProps({ params }) {
try { try {
const { subCategory } = params; const { subCategory } = params;
console.log("subCategory", subCategory);
/* 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);
...@@ -127,13 +135,38 @@ export async function getServerSideProps({ params }) { ...@@ -127,13 +135,38 @@ export async function getServerSideProps({ params }) {
} }
/* 2️⃣ Otherwise treat as SUBCATEGORY */ /* 2️⃣ Otherwise treat as SUBCATEGORY */
const categoriesSub = await getCollectionSubCategoryData();
const allProducts = await getCollectionDetailCategoryData();
const products = allProducts.filter( const query = {
(item) => item.collection_sub_category?.slug === subCategory filters: {
collection_sub_category: {
slug: {
$eq: subCategory,
},
},
},
populate: {
image: true,
collection_sub_category: {
populate: true,
},
},
};
const response = await fetchFromStrapi(
"/api/collection-detail-categories",
query,
); );
// console.log('responsefsfsf',response)
const allProducts = response?.data || [];
const products = allProducts;
console.log('products',products)
// const allProducts = await getCollectionDetailCategoryData();
const categoriesSub = await getCollectionSubCategoryData();
const activeSubCategory = const activeSubCategory =
categoriesSub.find((item) => item.slug === subCategory) || null; categoriesSub.find((item) => item.slug === subCategory) || null;
......
pages/collections/[category]/index.js
...@@ -12,8 +12,8 @@ export default function CategoryPage({ categoryData, categoriesSub,collectionDat ...@@ -12,8 +12,8 @@ export default function CategoryPage({ categoryData, categoriesSub,collectionDat
} }
const breadcrumbData = [ const breadcrumbData = [
{ href: "/", label: "Home" }, // { href: "/", label: "Home" },
{ href: "/collections", label: "Collections" }, { href: "/", label: "Collections" },
{ {
href: `/collections/${categoryData.slug}`, href: `/collections/${categoryData.slug}`,
label: categoryData.title, label: categoryData.title,
...@@ -44,13 +44,13 @@ export async function getServerSideProps({ params }) { ...@@ -44,13 +44,13 @@ export async function getServerSideProps({ params }) {
const categoryData = await getCollectionCategoryBySlug(category); const categoryData = await getCollectionCategoryBySlug(category);
const categoriesSub = await getCollectionSubCategoryData(category); const categoriesSub = await getCollectionSubCategoryData(category);
const collectionDataa = await getCollectionPageData(category); // const collectionDataa = await getCollectionPageData(category);
return { return {
props: { props: {
categoryData, categoryData,
categoriesSub, categoriesSub,
collectionDataa // collectionDataa
}, },
}; };
} catch (error) { } catch (error) {
...@@ -58,7 +58,7 @@ export async function getServerSideProps({ params }) { ...@@ -58,7 +58,7 @@ export async function getServerSideProps({ params }) {
props: { props: {
categoryData: null, categoryData: null,
categoriesSub: [], categoriesSub: [],
collectionDataa:[] // collectionDataa:[]
}, },
}; };
} }
......
services/api.js
...@@ -9,6 +9,8 @@ export async function fetchFromStrapi(path, query = {}) { ...@@ -9,6 +9,8 @@ export async function fetchFromStrapi(path, query = {}) {
const url = `${STRAPI_URL}${path}?${queryString}`; const url = `${STRAPI_URL}${path}?${queryString}`;
console.log('url',url)
const res = await fetch(url); const res = await fetch(url);
if (!res.ok) { if (!res.ok) {
......
services/collectionDetailCategoryApi.js
...@@ -28,7 +28,15 @@ export async function getCollectionDetailCategoryData(productSlug) { ...@@ -28,7 +28,15 @@ export async function getCollectionDetailCategoryData(productSlug) {
video:true video:true
} }
}, },
companyOverview:{
populate: "*"
},
technicalDetails:{
populate:"*"
},
explore:{
populate:"*"
}
}, },
}; };
......
styles/globals.css
...@@ -767,6 +767,9 @@ padding-top: 1rem; ...@@ -767,6 +767,9 @@ padding-top: 1rem;
.heading{ .heading{
font-size: 1.67vw; font-size: 1.67vw;
} }
.technicalDetails-section{
margin-top: 3rem;
}
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
} }
/* ===== Mobile ===== */ /* ===== Mobile ===== */
...@@ -857,6 +860,14 @@ padding-top: 1rem; ...@@ -857,6 +860,14 @@ padding-top: 1rem;
} }
/* ===Media query==== */ /* ===Media query==== */
@media (max-width: 767px) { @media (max-width: 767px) {
.accordion01 .accordion .item {
margin-bottom: 0rem;
padding: 1rem 0 0 0;
}
.accordion01 .accordion-button {
font-size: 12px;
line-height: 18px
}
.contactPage-address { .contactPage-address {
padding: 0; padding: 0;
} }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!