Skip to content

sujata / Akruti-Frontend

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

updated

1 parent 7748ed7a
Inline Side-by-side
Showing 2 changed files with 65 additions and 74 deletions
components/Collection/InnerDetails.js
...@@ -6,6 +6,7 @@ import { useRouter } from "next/router"; ...@@ -6,6 +6,7 @@ import { useRouter } from "next/router";
import { cleanImage } from "../services/imageHandling"; import { cleanImage } from "../services/imageHandling";
const InnerDetails = ({ subCategories }) => { const InnerDetails = ({ subCategories }) => {
const router = useRouter(); const router = useRouter();
const { category } = router.query; const { category } = router.query;
...@@ -14,14 +15,17 @@ const InnerDetails = ({ subCategories }) => { ...@@ -14,14 +15,17 @@ const InnerDetails = ({ subCategories }) => {
const handleChange = (e) => { const handleChange = (e) => {
setSort(e.target.value); setSort(e.target.value);
}; };
// Safety check // Safety check
if (!subCategories || !category) return null; if (!subCategories || !category) return null;
// const filteredSubCategories = subCategories.filter( // const filteredSubCategories = subCategories.filter(
// (item) => item?.collection_category?.slug === "kitchens" // (item) => item?.collection_category?.slug === "kitchens"
// ); // );
const sortedSubCategories = [...subCategories].sort((a, b) => {
return (Number(a.rank) || 999) - (Number(b.rank) || 999);
});
return ( return (
<section className="collection-m-section sec_padd"> <section className="collection-m-section sec_padd">
<div className="custom_container"> <div className="custom_container">
...@@ -31,7 +35,7 @@ const InnerDetails = ({ subCategories }) => { ...@@ -31,7 +35,7 @@ const InnerDetails = ({ subCategories }) => {
<h3> <h3>
{category {category
.split("-") .split("-")
.map(word => word.charAt(0).toUpperCase() + word.slice(1)) .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ")} .join(" ")}
</h3> </h3>
</Col> </Col>
...@@ -54,20 +58,19 @@ const InnerDetails = ({ subCategories }) => { ...@@ -54,20 +58,19 @@ const InnerDetails = ({ subCategories }) => {
{/* Sub-category cards */} {/* Sub-category cards */}
<Row> <Row>
{subCategories?.map((sub) => ( {sortedSubCategories?.map((sub) => (
<Col md={6} key={sub.slug}> <Col md={6} key={sub.slug}>
<div className="collections-item"> <div className="collections-item">
{/* <Link {/* <Link
href={sub?.show_detail_page ? `collections/${category}/${sub?.show_detail_page?.slug}` : `/collections/${category}/${sub.slug}`} href={sub?.show_detail_page ? `collections/${category}/${sub?.show_detail_page?.slug}` : `/collections/${category}/${sub.slug}`}
> */} > */}
<Link <Link
href={ href={
sub?.show_detail_page sub?.show_detail_page
? `/collections/${category}/${sub?.show_detail_page?.slug}` ? `/collections/${category}/${sub?.show_detail_page?.slug}`
: `/collections/${category}/${sub.slug}` : `/collections/${category}/${sub.slug}`
} }
> >
<Image <Image
width={868} width={868}
height={560} height={560}
......
pages/collections/[category]/[subCategory]/index.js
...@@ -48,70 +48,67 @@ const SubCategoryOrProductPage = ({ ...@@ -48,70 +48,67 @@ const SubCategoryOrProductPage = ({
label: productData.title, label: productData.title,
}, },
]; ];
const [activeTab, setActiveTab] = useState(null); const [activeTab, setActiveTab] = useState(null);
const productTabs = productData?.productTabs;
const productTabs = productData?.productTabs; useEffect(() => {
useEffect(() => { if (productTabs?.length > 0) {
if (productTabs?.length > 0) { setActiveTab(productTabs[0].title);
setActiveTab(productTabs[0].title); }
} }, [productTabs]);
}, [productTabs]);
return ( return (
<> <>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerproduct productData={productData} /> <InnerBannerproduct productData={productData} />
{productData?.isDoorAndPartitionsLayouts == true ? ( {productData?.isDoorAndPartitionsLayouts == true ? (
<section className="details-tab-section"> <section className="details-tab-section">
<div className="custom_containers"> <div className="custom_containers">
<div className="details-tab"> <div className="details-tab">
<div className="head">Products:</div> <div className="head">Products:</div>
<Tabs <Tabs
activeKey={activeTab} activeKey={activeTab}
onSelect={(k) => setActiveTab(k)} onSelect={(k) => setActiveTab(k)}
className="tab-01" className="tab-01"
> >
{productTabs?.map((tab) => ( {productTabs?.map((tab) => (
<Tab <Tab key={tab.id} eventKey={tab.title} title={tab.title}>
key={tab.id} <AboutInfo productData={tab?.aboutInfo} />
eventKey={tab.title}
title={tab.title} <CompanyOverview
> companyOverviewData={tab?.companyOverview?.items}
<AboutInfo productData={tab?.aboutInfo} /> />
<CompanyOverview <Video productData={tab?.videoSection} />
companyOverviewData={tab?.companyOverview?.items}
/> {tab?.technicalDetails?.length > 0 && (
<TechnicalDetails productData={tab?.technicalDetails} />
<Video productData={tab?.videoSection} /> )}
{tab?.technicalDetails?.length > 0 && ( {tab?.gallery?.length > 0 && (
<TechnicalDetails productData={tab?.technicalDetails} /> <Gallery productData={tab?.gallery} />
)} )}
</Tab>
{tab?.gallery?.length > 0 && ( ))}
<Gallery productData={tab?.gallery} /> </Tabs>
)}
</Tab>
))}
</Tabs>
</div> </div>
</div> </div>
</section> </section>
) : (<> ) : (
<>
<AboutInfo productData={productData?.aboutInfo} /> <AboutInfo productData={productData?.aboutInfo} />
<CompanyOverview companyOverviewData={productData?.companyOverview} /> <CompanyOverview
{/* <Video productData={productData?.video} /> */} companyOverviewData={productData?.companyOverview}
<Video productData={productData?.video} /> />
{productData?.technicalDetails?.length > 0 && ( {/* <Video productData={productData?.video} /> */}
<TechnicalDetails productData={productData?.technicalDetails} /> <Video productData={productData?.video} />
{productData?.technicalDetails?.length > 0 && (
<TechnicalDetails productData={productData?.technicalDetails} />
)} )}
<Gallery productData={productData?.gallery} /> <Gallery productData={productData?.gallery} />
{/* <Explore productData={productData?.explore} /> */} {/* <Explore productData={productData?.explore} /> */}
</>)} </>
)}
{productData?.isDoorAndPartitionsLayouts && ( {productData?.isDoorAndPartitionsLayouts && (
<Explore productData={productData?.exploreProducts} /> <Explore productData={productData?.exploreProducts} />
...@@ -124,7 +121,7 @@ useEffect(() => { ...@@ -124,7 +121,7 @@ useEffect(() => {
{/* {productData?.isDoorAndPartitionsLayouts === false && ( {/* {productData?.isDoorAndPartitionsLayouts === false && (
<AboutInfo productData={productData?.aboutInfo} /> <AboutInfo productData={productData?.aboutInfo} />
)} */} )} */}
{/* {productData?.isDoorAndPartitionsLayouts == false && ( {/* {productData?.isDoorAndPartitionsLayouts == false && (
<CompanyOverview companyOverviewData={productData?.companyOverview} /> <CompanyOverview companyOverviewData={productData?.companyOverview} />
)} )}
...@@ -139,8 +136,6 @@ useEffect(() => { ...@@ -139,8 +136,6 @@ useEffect(() => {
<Gallery productData={productData?.gallery} /> <Gallery productData={productData?.gallery} />
)} */} )} */}
<Contact /> <Contact />
</> </>
); );
...@@ -156,8 +151,6 @@ useEffect(() => { ...@@ -156,8 +151,6 @@ useEffect(() => {
const subCategoryData = products[0]?.collection_sub_category; const subCategoryData = products[0]?.collection_sub_category;
const breadcrumbData = [ const breadcrumbData = [
// { href: "/", label: "Home" }, // { href: "/", label: "Home" },
{ href: "/", label: "Collections" }, { href: "/", label: "Collections" },
...@@ -189,7 +182,6 @@ export default SubCategoryOrProductPage; ...@@ -189,7 +182,6 @@ export default SubCategoryOrProductPage;
export async function getServerSideProps({ params }) { export async function getServerSideProps({ params }) {
try { try {
const { subCategory } = params; const { subCategory } = params;
/* 1️⃣ Check if this slug is a PRODUCT */ /* 1️⃣ Check if this slug is a PRODUCT */
const productCheck = await getCollectionDetailCategoryData(subCategory); const productCheck = await getCollectionDetailCategoryData(subCategory);
...@@ -229,13 +221,9 @@ export async function getServerSideProps({ params }) { ...@@ -229,13 +221,9 @@ export async function getServerSideProps({ params }) {
query, query,
); );
const allProducts = response?.data || []; const allProducts = response?.data || [];
const products = allProducts; const products = allProducts;
// const allProducts = await getCollectionDetailCategoryData(); // const allProducts = await getCollectionDetailCategoryData();
const categoriesSub = await getCollectionSubCategoryData(); const categoriesSub = await getCollectionSubCategoryData();
const activeSubCategory = const activeSubCategory =
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!