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 133 additions and 52 deletions
components/Brands/TechnicalDetails.js
......@@ -99,7 +99,7 @@ const technicalDetailsData = [
const TechnicalDetails = () => {
return (
<>
<section className="technicalDetails-section catalogues-sec sec_padd">
<section className="technicalDetails-section catalogues-secs">
<Container className="custom_container">
<Row>
<Col className="d-flex justify-content-center">
......
components/Collection/CompanyOverview.js
......@@ -2,28 +2,49 @@ import React from "react";
import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { cleanImage } from "../services/imageHandling";
const CompanyOverview = () => {
const CompanyOverview = ({companyOverviewData}) => {
console.log("productData cat", companyOverviewData)
return (
<>
<section className="about-section about-info-section">
<div className="container">
<Row className='my-5'>
<Col md={6}>
<div className='luxury-items'>
<Image width={806} height={560} src="/image/luxury01.png" />
<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>
<Row className="my-5">
{companyOverviewData?.map((item, index) => (
<Col
md={6}
key={item.id || index}
>
<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>
<Col md={6}>
<div className='luxury-items option02'>
<Image width={570} height={629} src="/image/luxury02.png" />
<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>
</section>
</>
......
components/Collection/Explore.js
......@@ -3,6 +3,7 @@ import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import Image from "next/image"; // ✅ MISSING IMPORT
import Heading from "@/components/Heading";
import { cleanImage } from "../services/imageHandling";
const exploreData = [
{
id: 1,
......@@ -18,7 +19,7 @@ const exploreData = [
},
];
const Explore = () => {
const Explore = ({productData}) => {
return (
<section className="explore-section mb-5">
<Container className="custom_container">
......@@ -28,12 +29,12 @@ const Explore = () => {
</Col>
</Row>
<Row>
{exploreData.map((item) => (
{productData?.map((item) => (
<Col md={6} key={item.id}>
<div className="collections-item">
<Link href={`/collections/${item.slug}`} className="d-block">
<Image
src={item.image}
src={cleanImage(item.image.url)}
width={868}
height={560}
alt={item.name}
......
components/Collection/TechnicalDetails.js
......@@ -2,6 +2,7 @@ import React from "react";
import { Accordion, Col, Container, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { cleanImage } from "../services/imageHandling";
const technicalDetailsData = [
{
......@@ -96,10 +97,11 @@ const technicalDetailsData = [
},
];
const TechnicalDetails = () => {
const TechnicalDetails = ({productData}) => {
console.log("productData- tech", productData)
return (
<>
<section className="technicalDetails-section catalogues-sec sec_padd">
<section className="technicalDetails-section catalogues-secs">
<Container className="custom_container">
<Row>
<Col className="d-flex justify-content-center">
......@@ -110,7 +112,7 @@ const TechnicalDetails = () => {
<Col>
<div className="accordion01">
<Accordion defaultActiveKey="0">
{technicalDetailsData.map((item) => (
{productData?.map((item) => (
<Accordion.Item eventKey={item.id} key={item.id}>
<Accordion.Header>{item.title}</Accordion.Header>
......@@ -119,7 +121,7 @@ const TechnicalDetails = () => {
<Col md={5}>
<div className="image">
<Image
src={item.image}
src={cleanImage(item?.image?.url)}
alt={item.title}
width={743}
height={500}
......@@ -131,7 +133,7 @@ const TechnicalDetails = () => {
{item.details.map((detail, index) => (
<div className="item" key={index}>
<div className="title">{detail.label}</div>
<div className="info">{detail.value}</div>
<div className="info" dangerouslySetInnerHTML={{__html: detail.value}}></div>
</div>
))}
</Col>
......
pages/collections/[category]/[subCategory]/[productSlug].js
......@@ -13,7 +13,7 @@ import TechnicalDetails from "@/components/Collection/TechnicalDetails";
import Explore from "@/components/Collection/Explore";
const ProductPage = ({ productData, cataloguesData }) => {
console.log("cataloguesData", productData);
console.log("cataloguesData", cataloguesData);
const router = useRouter();
const { category, subCategory: subCategorySlug, productSlug } = router.query;
......@@ -23,7 +23,7 @@ const ProductPage = ({ productData, cataloguesData }) => {
/* ---------- BREADCRUMB ---------- */
const breadcrumbData = [
{ href: "/collections", label: "Collections" },
{ href: "/", label: "Collections" },
{
href: `/collections/${category}`,
label: category.replace(/-/g, " "),
......@@ -44,7 +44,8 @@ const ProductPage = ({ productData, cataloguesData }) => {
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerproduct productData={productData} />
<AboutInfo productData={productData?.aboutInfo} />
{productData?.isDoorAndPartitionsLayouts === true && <CompanyOverview />}
{/* {productData?.isDoorAndPartitionsLayouts === true && <CompanyOverview productData={CompanyOverview} />} */}
<CompanyOverview productData={CompanyOverview} />
<Video productData={productData?.video} />
{productData?.isDoorAndPartitionsLayouts === true && <TechnicalDetails />}
......@@ -66,6 +67,8 @@ export async function getServerSideProps({ params }) {
try {
const { productSlug } = params;
console.log('productSlug',productSlug)
const productData = await getCollectionDetailCategoryData(productSlug);
const cataloguesData = await getCataloguesBySlug();
......
pages/collections/[category]/[subCategory]/index.js
......@@ -12,11 +12,10 @@ import CompanyOverview from "@/components/Collection/CompanyOverview";
import TechnicalDetails from "@/components/Collection/TechnicalDetails";
import Explore from "@/components/Collection/Explore";
import {
getCollectionDetailCategoryData,
} from "@/services/collectionDetailCategoryApi";
import { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi";
import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
import { getCataloguesBySlug } from "@/services/cataloguesApi";
import { fetchFromStrapi } from "@/services/api";
const SubCategoryOrProductPage = ({
type,
......@@ -27,17 +26,17 @@ const SubCategoryOrProductPage = ({
}) => {
const router = useRouter();
const { category, subCategory } = router.query;
console.log("productData -new", products);
if (!router.isReady) return null;
/* ======================================================
🟢 IF PRODUCT (2 LEVEL PRODUCT PAGE)
====================================================== */
if (type === "product") {
const subCategoryData = productData.collection_sub_category;
const subCategoryData = productData.productData;
const breadcrumbData = [
{ href: "/collections", label: "Collections" },
{ href: "/", label: "Collections" },
{
href: `/collections/${category}`,
label: category.replace(/-/g, " "),
......@@ -54,11 +53,17 @@ const SubCategoryOrProductPage = ({
<InnerBannerproduct productData={productData} />
<AboutInfo productData={productData?.aboutInfo} />
{productData?.isDoorAndPartitionsLayouts && <CompanyOverview />}
{productData?.isDoorAndPartitionsLayouts && (
<CompanyOverview companyOverviewData={productData?.companyOverview} />
)}
<Video productData={productData?.video} />
{productData?.isDoorAndPartitionsLayouts && <TechnicalDetails />}
{productData?.isDoorAndPartitionsLayouts && (
<TechnicalDetails productData={productData?.technicalDetails} />
)}
<Gallery productData={productData?.gallery} />
{productData?.isDoorAndPartitionsLayouts && <Explore />}
{productData?.isDoorAndPartitionsLayouts && (
<Explore productData={productData?.explore} />
)}
{!productData?.isDoorAndPartitionsLayouts && (
<Catalogues cataloguesData={cataloguesData} />
......@@ -73,22 +78,24 @@ const SubCategoryOrProductPage = ({
🔵 IF SUBCATEGORY (NORMAL 2 LEVEL SUBCATEGORY PAGE)
====================================================== */
if (!products || products.length === 0) {
return <h1>Sub Category not found</h1>;
}
// if (!products || products.length === 0) {
// return <h1>Sub Category not found</h1>;
// }
const subCategoryData = products[0].collection_sub_category;
const subCategoryData = products[0]?.collection_sub_category;
console.log('subCategoryData',subCategoryData)
const breadcrumbData = [
{ href: "/", label: "Home" },
{ href: "/collections", label: "Collections" },
// { href: "/", label: "Home" },
{ href: "/", label: "Collections" },
{
href: `/collections/${category}`,
label: category.replace(/-/g, " "),
},
{
href: router.asPath,
label: subCategoryData.title,
label: subCategoryData?.title,
},
];
......@@ -110,6 +117,7 @@ export default SubCategoryOrProductPage;
export async function getServerSideProps({ params }) {
try {
const { subCategory } = params;
console.log("subCategory", subCategory);
/* 1️⃣ Check if this slug is a PRODUCT */
const productCheck = await getCollectionDetailCategoryData(subCategory);
......@@ -127,13 +135,38 @@ export async function getServerSideProps({ params }) {
}
/* 2️⃣ Otherwise treat as SUBCATEGORY */
const categoriesSub = await getCollectionSubCategoryData();
const allProducts = await getCollectionDetailCategoryData();
const products = allProducts.filter(
(item) => item.collection_sub_category?.slug === subCategory
const query = {
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 =
categoriesSub.find((item) => item.slug === subCategory) || null;
......
pages/collections/[category]/index.js
......@@ -12,8 +12,8 @@ export default function CategoryPage({ categoryData, categoriesSub,collectionDat
}
const breadcrumbData = [
{ href: "/", label: "Home" },
{ href: "/collections", label: "Collections" },
// { href: "/", label: "Home" },
{ href: "/", label: "Collections" },
{
href: `/collections/${categoryData.slug}`,
label: categoryData.title,
......@@ -44,13 +44,13 @@ export async function getServerSideProps({ params }) {
const categoryData = await getCollectionCategoryBySlug(category);
const categoriesSub = await getCollectionSubCategoryData(category);
const collectionDataa = await getCollectionPageData(category);
// const collectionDataa = await getCollectionPageData(category);
return {
props: {
categoryData,
categoriesSub,
collectionDataa
// collectionDataa
},
};
} catch (error) {
......@@ -58,7 +58,7 @@ export async function getServerSideProps({ params }) {
props: {
categoryData: null,
categoriesSub: [],
collectionDataa:[]
// collectionDataa:[]
},
};
}
......
services/api.js
......@@ -9,6 +9,8 @@ export async function fetchFromStrapi(path, query = {}) {
const url = `${STRAPI_URL}${path}?${queryString}`;
console.log('url',url)
const res = await fetch(url);
if (!res.ok) {
......
services/collectionDetailCategoryApi.js
......@@ -28,7 +28,15 @@ export async function getCollectionDetailCategoryData(productSlug) {
video:true
}
},
companyOverview:{
populate: "*"
},
technicalDetails:{
populate:"*"
},
explore:{
populate:"*"
}
},
};
......
styles/globals.css
......@@ -767,6 +767,9 @@ padding-top: 1rem;
.heading{
font-size: 1.67vw;
}
.technicalDetails-section{
margin-top: 3rem;
}
@media only screen and (max-width: 1023px) {
}
/* ===== Mobile ===== */
......@@ -857,6 +860,14 @@ padding-top: 1rem;
}
/* ===Media query==== */
@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 {
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!