updated

components/Collection/Explore.js

@@ -42,7 +42,7 @@ const Explore = ({productData}) => {
                   />
                   <div className="title">{item.name}</div>
                 </Link>
-              </div>git 
+              </div>
             </Col>
           ))}
         </Row>

pages/collections/[category]/[subCategory]/index.js

@@ -16,6 +16,7 @@ import { getCollectionDetailCategoryData } from "@/services/collectionDetailCate
 import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
 import { getCataloguesBySlug } from "@/services/cataloguesApi";
 import { fetchFromStrapi } from "@/services/api";
+import { Tab, Tabs } from "react-bootstrap";
 
 const SubCategoryOrProductPage = ({
   type,
@@ -28,7 +29,7 @@ const SubCategoryOrProductPage = ({
   const { category, subCategory } = router.query;
   console.log("productData -new", products);
   if (!router.isReady) return null;
-
+console.log("productData yes", productData)
   /* ======================================================
      🟢 IF PRODUCT (2 LEVEL PRODUCT PAGE)
   ====================================================== */
@@ -51,16 +52,71 @@ const SubCategoryOrProductPage = ({
       <>
         <Breadcrumb breadcrumbData={breadcrumbData} />
         <InnerBannerproduct productData={productData} />
-        <AboutInfo productData={productData?.aboutInfo} />
-
-        {productData?.isDoorAndPartitionsLayouts && (
+        {productData?.isDoorAndPartitionsLayouts == true && (
+          <section className="details-tab-section">
+            <div className="custom_container">
+              <div className="details-tab">
+                <div className="head">Products:</div>
+                <Tabs
+                  defaultActiveKey="Spin"
+                  id="uncontrolled-tab-example"
+                  className="tab-01"
+                >
+                  <Tab eventKey="Spin" title="Spin">
+                    <AboutInfo productData={productData?.aboutInfo} />
+                    <CompanyOverview
+                      companyOverviewData={productData?.companyOverview}
+                    />
+                    <Video productData={productData?.video} />
+                    <TechnicalDetails
+                      productData={productData?.technicalDetails}
+                    />
+                    <Gallery productData={productData?.gallery} />
+                  </Tab>
+                  <Tab eventKey="Link +" title="Link +">
+                    <AboutInfo productData={productData?.aboutInfo} />
+                    <CompanyOverview
+                      companyOverviewData={productData?.companyOverview}
+                    />
+                    <Video productData={productData?.video} />
+                    <TechnicalDetails
+                      productData={productData?.technicalDetails}
+                    />
+                    <Gallery productData={productData?.gallery} />
+                  </Tab>
+                  <Tab eventKey="Even" title="Even">
+                    <AboutInfo productData={productData?.aboutInfo} />
+                    <CompanyOverview
+                      companyOverviewData={productData?.companyOverview}
+                    />
+                    <Video productData={productData?.video} />
+                    <TechnicalDetails
+                      productData={productData?.technicalDetails}
+                    />
+                    <Gallery productData={productData?.gallery} />
+                  </Tab>
+                </Tabs>
+              </div>
+            </div>
+          </section>
+        )}
+        {productData?.isDoorAndPartitionsLayouts == false && (
+          <AboutInfo productData={productData?.aboutInfo} />
+        )}
+        {productData?.isDoorAndPartitionsLayouts == false && (
           <CompanyOverview companyOverviewData={productData?.companyOverview} />
         )}
-        <Video productData={productData?.video} />
-        {productData?.isDoorAndPartitionsLayouts && (
+        {productData?.isDoorAndPartitionsLayouts == false && (
+          <Video productData={productData?.video} />
+        )}
+
+        {productData?.isDoorAndPartitionsLayouts == false && (
           <TechnicalDetails productData={productData?.technicalDetails} />
         )}
-        <Gallery productData={productData?.gallery} />
+        {productData?.isDoorAndPartitionsLayouts == false && (
+          <Gallery productData={productData?.gallery} />
+        )}
+
         {productData?.isDoorAndPartitionsLayouts && (
           <Explore productData={productData?.explore} />
         )}
@@ -84,7 +140,7 @@ const SubCategoryOrProductPage = ({
 
   const subCategoryData = products[0]?.collection_sub_category;
 
-  console.log('subCategoryData',subCategoryData)
+  console.log("subCategoryData", subCategoryData);
 
   const breadcrumbData = [
     // { href: "/", label: "Home" },
@@ -150,7 +206,6 @@ export async function getServerSideProps({ params }) {
           populate: true,
         },
       },
-       
     };
 
     const response = await fetchFromStrapi(
@@ -163,7 +218,7 @@ export async function getServerSideProps({ params }) {
     const allProducts = response?.data || [];
     const products = allProducts;
 
-    console.log('products',products)
+    console.log("products", products);
 
     // const allProducts = await getCollectionDetailCategoryData();
     const categoriesSub = await getCollectionSubCategoryData();

services/collectionDetailCategoryApi.js

@@ -28,15 +28,15 @@ export async function getCollectionDetailCategoryData(productSlug) {
             video:true
           }
         },
-        companyOverview:{
+        productTabs:{
           populate: "*"
         },
-        technicalDetails:{
-          populate:"*"
-        },
-        explore:{
-          populate:"*"
-        }
+        // technicalDetails:{
+        //   populate:"*"
+        // },
+        // explore:{
+        //   populate:"*"
+        // }
       },
     };
 

styles/globals.css

@@ -815,6 +815,40 @@ aspect-ratio: 16 / 7;
 .technicalDetails-section {
   margin-top: 3rem;
 }
+.details-tab-section{
+  margin: 2rem 0;
+}
+.details-tab{
+  position: relative;
+}
+.details-tab .head{
+    position: absolute;
+    top: 8px;
+    left: 0;
+    color: #000;
+font-size: 1.04vw;
+font-weight: 500;
+}
+.tab-01{
+  margin-left: 6vw;
+}
+.tab-01.nav-tabs{
+  border: 0;
+}
+.tab-01.nav-tabs .nav-link{
+  color: #000;
+  border-radius: 100px;
+border: 1px solid rgba(224, 224, 224, 0.60);
+background: #FFF;
+padding: 0.4rem 1.5rem;
+}
+.tab-01.nav-tabs .nav-link.active{
+border: 1px solid rgba(0, 0, 0, 0.80);
+background: #F5F5F5;
+}
+.tab-01.nav-tabs .nav-item{
+  margin: 0 0.5rem;
+}
 @media only screen and (max-width: 1023px) {
 }
 /* ===== Mobile ===== */