Skip to content

sujata / Akruti-Frontend

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

updated

1 parent a7223d1e
Inline Side-by-side
Showing 6 changed files with 107 additions and 18 deletions
components/Collection/Explore.js
...@@ -42,7 +42,7 @@ const Explore = ({productData}) => { ...@@ -42,7 +42,7 @@ const Explore = ({productData}) => {
/> />
<div className="title">{item.name}</div> <div className="title">{item.name}</div>
</Link> </Link>
</div>git </div>
</Col> </Col>
))} ))}
</Row> </Row>
......
pages/collections/[category]/[subCategory]/index.js
...@@ -16,6 +16,7 @@ import { getCollectionDetailCategoryData } from "@/services/collectionDetailCate ...@@ -16,6 +16,7 @@ import { getCollectionDetailCategoryData } from "@/services/collectionDetailCate
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"; import { fetchFromStrapi } from "@/services/api";
import { Tab, Tabs } from "react-bootstrap";
const SubCategoryOrProductPage = ({ const SubCategoryOrProductPage = ({
type, type,
...@@ -28,7 +29,7 @@ const SubCategoryOrProductPage = ({ ...@@ -28,7 +29,7 @@ const SubCategoryOrProductPage = ({
const { category, subCategory } = router.query; const { category, subCategory } = router.query;
console.log("productData -new", products); console.log("productData -new", products);
if (!router.isReady) return null; if (!router.isReady) return null;
console.log("productData yes", productData)
/* ====================================================== /* ======================================================
🟢 IF PRODUCT (2 LEVEL PRODUCT PAGE) 🟢 IF PRODUCT (2 LEVEL PRODUCT PAGE)
====================================================== */ ====================================================== */
...@@ -51,16 +52,71 @@ const SubCategoryOrProductPage = ({ ...@@ -51,16 +52,71 @@ const SubCategoryOrProductPage = ({
<> <>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerproduct productData={productData} /> <InnerBannerproduct productData={productData} />
<AboutInfo productData={productData?.aboutInfo} /> {productData?.isDoorAndPartitionsLayouts == true && (
<section className="details-tab-section">
{productData?.isDoorAndPartitionsLayouts && ( <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} /> <CompanyOverview companyOverviewData={productData?.companyOverview} />
)} )}
<Video productData={productData?.video} /> {productData?.isDoorAndPartitionsLayouts == false && (
{productData?.isDoorAndPartitionsLayouts && ( <Video productData={productData?.video} />
)}
{productData?.isDoorAndPartitionsLayouts == false && (
<TechnicalDetails productData={productData?.technicalDetails} /> <TechnicalDetails productData={productData?.technicalDetails} />
)} )}
<Gallery productData={productData?.gallery} /> {productData?.isDoorAndPartitionsLayouts == false && (
<Gallery productData={productData?.gallery} />
)}
{productData?.isDoorAndPartitionsLayouts && ( {productData?.isDoorAndPartitionsLayouts && (
<Explore productData={productData?.explore} /> <Explore productData={productData?.explore} />
)} )}
...@@ -84,7 +140,7 @@ const SubCategoryOrProductPage = ({ ...@@ -84,7 +140,7 @@ const SubCategoryOrProductPage = ({
const subCategoryData = products[0]?.collection_sub_category; const subCategoryData = products[0]?.collection_sub_category;
console.log('subCategoryData',subCategoryData) console.log("subCategoryData", subCategoryData);
const breadcrumbData = [ const breadcrumbData = [
// { href: "/", label: "Home" }, // { href: "/", label: "Home" },
...@@ -150,7 +206,6 @@ export async function getServerSideProps({ params }) { ...@@ -150,7 +206,6 @@ export async function getServerSideProps({ params }) {
populate: true, populate: true,
}, },
}, },
}; };
const response = await fetchFromStrapi( const response = await fetchFromStrapi(
...@@ -163,7 +218,7 @@ export async function getServerSideProps({ params }) { ...@@ -163,7 +218,7 @@ export async function getServerSideProps({ params }) {
const allProducts = response?.data || []; const allProducts = response?.data || [];
const products = allProducts; const products = allProducts;
console.log('products',products) console.log("products", products);
// const allProducts = await getCollectionDetailCategoryData(); // const allProducts = await getCollectionDetailCategoryData();
const categoriesSub = await getCollectionSubCategoryData(); const categoriesSub = await getCollectionSubCategoryData();
......
services/collectionDetailCategoryApi.js
...@@ -28,15 +28,15 @@ export async function getCollectionDetailCategoryData(productSlug) { ...@@ -28,15 +28,15 @@ export async function getCollectionDetailCategoryData(productSlug) {
video:true video:true
} }
}, },
companyOverview:{ productTabs:{
populate: "*" populate: "*"
}, },
technicalDetails:{ // technicalDetails:{
populate:"*" // populate:"*"
}, // },
explore:{ // explore:{
populate:"*" // populate:"*"
} // }
}, },
}; };
......
styles/globals.css
...@@ -815,6 +815,40 @@ aspect-ratio: 16 / 7; ...@@ -815,6 +815,40 @@ aspect-ratio: 16 / 7;
.technicalDetails-section { .technicalDetails-section {
margin-top: 3rem; 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) { @media only screen and (max-width: 1023px) {
} }
/* ===== Mobile ===== */ /* ===== Mobile ===== */
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!