jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add table display for specifications

Browse source 
Restructured the display of product specifications into a table format, providing users with two choices: a list of items or a table.
This commit is contained in:
Emil Gulamov 2024-04-20 14:21:18 +04:00
parent 6a6f08d83f
commit 93121c1029
3 changed files with 205 additions and 156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/content/config.ts
View file

@ -46,6 +46,12 @@ const productsCollection = defineCollection({
subTitle: z.string(), subTitle: z.string(),
}) })
).optional(), ).optional(),
tableData: z.array(
z.object({
feature: z.array(z.string()),
description: z.array(z.array(z.string())),
})
).optional(),
blueprints: z.object({ blueprints: z.object({
first: image().optional(), first: image().optional(),
second: image().optional(), second: image().optional(),

19
src/content/products/a765.md
View file

@ -1,6 +1,6 @@
--- ---
title: "SF-AB A765" title: "SF-AB A765"
description: "Assorted Screw Set" description: " "
main: main:
id: 2 id: 2
content: | content: |
@ -40,15 +40,14 @@ specificationsLeft:
subTitle: "Each set includes a sufficient quantity of screws to handle a wide range of projects and tasks." subTitle: "Each set includes a sufficient quantity of screws to handle a wide range of projects and tasks."
- title: "Sizes" - title: "Sizes"
subTitle: "Available in various sizes to suit different project requirements, ensuring compatibility and versatility." subTitle: "Available in various sizes to suit different project requirements, ensuring compatibility and versatility."
specificationsRight: tableData:
- title: "Thread Design" - feature: ["Specification", "Value"]
subTitle: "Precision-engineered threads ensure a tight and secure fit, providing reliable fastening for your projects." description:
- title: "Durability" - ["Length (mm)", "Various"]
subTitle: "Designed to withstand the rigors of everyday use, delivering long-lasting performance and reliability." - ["Weight (g)", "N/A"]
- title: "Quality Assurance" - ["Material", "Stainless Steel"]
subTitle: "Manufactured to meet or exceed industry standards, guaranteeing consistent quality and performance." - ["Finish", "Assorted"]
- title: "Applications" - ["Package Contents", "Various screws in a set"]
subTitle: "Suitable for a wide range of applications, including woodworking, metalworking, construction, and more."
blueprints: blueprints:
first: "@/images/blueprint-1.avif" first: "@/images/blueprint-1.avif"
second: "@/images/blueprint-2.avif" second: "@/images/blueprint-2.avif"

336
src/pages/products/[...slug].astro
View file

@ -27,9 +27,7 @@ const { product } = Astro.props;
const pageTitle: string = `${product.data.title} | ${SITE.title}`; const pageTitle: string = `${product.data.title} | ${SITE.title}`;
--- ---
<MainLayout <MainLayout title={pageTitle}>
title={pageTitle}
>
<div id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800"> <div id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800">
</div> </div>
@ -148,183 +146,229 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
)) ))
} }
</div> </div>
<div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
{ {
product.data.specificationsRight?.map((spec) => ( product.data.specificationsRight ? (
<div> <div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
<h3 class="block font-bold text-neutral-800 dark:text-neutral-200"> {product.data.specificationsRight?.map((spec) => (
{spec.title} <div>
</h3> <h3 class="block font-bold text-neutral-800 dark:text-neutral-200">
<p class="text-neutral-600 dark:text-neutral-400"> {spec.title}
{spec.subTitle} </h3>
</p> <p class="text-neutral-600 dark:text-neutral-400">
{spec.subTitle}
</p>
</div>
))}
</div>
) : product.data.tableData ? (
<div class="mt-6 space-y-6 md:ml-auto md:mt-0">
<div class="flex flex-col">
<div class="-m-1.5 overflow-x-auto">
<div class="inline-block min-w-full p-1.5 align-middle">
<div class="overflow-hidden">
<table class="min-w-full divide-y divide-neutral-300 dark:divide-neutral-700">
<thead>
<tr>
{product.data.tableData?.[0].feature?.map(
(header) => (
<th
scope="col"
class="px-6 py-3 text-start text-xs font-medium uppercase text-neutral-500 dark:text-neutral-500"
>
{header}
</th>
)
)}
</tr>
</thead>
<tbody class="divide-y divide-neutral-300 dark:divide-neutral-700">
{product.data.tableData?.map((row) =>
// Wrap each row's content in a separate <tr> element
row.description.map((rowData) => (
<tr>
{/* Iterate through each cell value in the row's description array */}
{rowData.map((cellValue) => (
// Render each cell value in its own <td> element
<td class="whitespace-nowrap px-6 py-4 text-sm font-medium text-neutral-600 dark:text-neutral-400">
{cellValue}
</td>
))}
</tr>
))
)}
</tbody>
</table>
</div>
</div>
</div>
</div> </div>
)) </div>
} ) : null
</div> }
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</MainLayout>
<div id="tabs-with-card-3" class="hidden" role="tabpanel"> <div id="tabs-with-card-3" class="hidden" role="tabpanel">
<div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5"> <div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5">
<div <div
class="relative left-12 top-12 z-10 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 md:-ml-12 lg:ml-0" class="relative left-12 top-12 z-10 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 md:-ml-12 lg:ml-0"
> >
{ {
product.data.blueprints.first && ( product.data.blueprints.first && (
<Image <Image
src={product.data.blueprints.first} src={product.data.blueprints.first}
class="h-full w-full object-cover object-center" class="h-full w-full object-cover object-center"
alt="Blueprint Illustration" alt="Blueprint Illustration"
format={"avif"} format={"avif"}
/> />
) )
} }
</div> </div>
<div class="relative right-12 overflow-hidden rounded-xl shadow-xl"> <div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
{ {
product.data.blueprints.second && ( product.data.blueprints.second && (
<Image <Image
src={product.data.blueprints.second} src={product.data.blueprints.second}
class="h-full w-full object-cover object-center" class="h-full w-full object-cover object-center"
alt="Blueprint Illustration" alt="Blueprint Illustration"
format={"avif"} format={"avif"}
/> />
) )
} }
</div>
</div> </div>
</div> </div>
</div>
<script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script> <script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
<script> <script>
window.addEventListener("load", () => { window.addEventListener("load", () => {
if (window.gsap) { if (window.gsap) {
const gsap = window.gsap; const gsap = window.gsap;
gsap.set("#fadeText", { gsap.set("#fadeText", {
autoAlpha: 0, autoAlpha: 0,
y: 50, y: 50,
willChange: "transform, opacity", willChange: "transform, opacity",
}); });
gsap.set("#fadeInUp", { gsap.set("#fadeInUp", {
autoAlpha: 0, autoAlpha: 0,
y: 50, y: 50,
willChange: "transform, opacity", willChange: "transform, opacity",
}); });
gsap.set("#fadeInMoveRight", { gsap.set("#fadeInMoveRight", {
autoAlpha: 0, autoAlpha: 0,
x: 300, x: 300,
willChange: "transform, opacity", willChange: "transform, opacity",
}); });
let timeline = gsap.timeline({ defaults: { overwrite: "auto" } }); let timeline = gsap.timeline({ defaults: { overwrite: "auto" } });
timeline.to("#fadeText", { timeline.to("#fadeText", {
duration: 1.5, duration: 1.5,
autoAlpha: 1, autoAlpha: 1,
y: 0, y: 0,
delay: 1, delay: 1,
ease: "power2.out", ease: "power2.out",
}); });
timeline.to( timeline.to(
"#fadeInUp", "#fadeInUp",
{ duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" }, { duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
"-=1.2", "-=1.2"
); );
timeline.to( timeline.to(
"#fadeInMoveRight", "#fadeInMoveRight",
{ duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" }, { duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
"-=1.4", "-=1.4"
); );
timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 }); timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
} }
}); });
</script> </script>
<script> <script>
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
function setButtonInactive(btn: any, activeButton: any) { function setButtonInactive(btn: any, activeButton: any) {
if (btn !== activeButton) { if (btn !== activeButton) {
btn.classList.remove( btn.classList.remove(
"active",
"bg-neutral-100",
"hover:border-transparent",
"dark:bg-white/[.05]",
);
const tabId = btn.getAttribute("data-target");
if (tabId) {
const contentElement = document.querySelector(tabId);
if (contentElement) {
contentElement.classList.add("hidden");
}
}
changeHeadingStyle(
btn,
["text-neutral-800", "dark:text-neutral-200"],
["text-orange-400", "dark:text-orange-300"],
);
}
}
function activateButton(button: any) {
button.classList.add(
"active", "active",
"bg-neutral-100", "bg-neutral-100",
",hover:border-transparent", "hover:border-transparent",
"dark:bg-white/[.05]", "dark:bg-white/[.05]"
); );
const tabId = button.getAttribute("data-target"); const tabId = btn.getAttribute("data-target");
if (tabId) { if (tabId) {
const contentElementToShow = document.querySelector(tabId); const contentElement = document.querySelector(tabId);
if (contentElementToShow) { if (contentElement) {
contentElementToShow.classList.remove("hidden"); contentElement.classList.add("hidden");
} }
} }
changeHeadingStyle( changeHeadingStyle(
button, btn,
["text-orange-400", "dark:text-orange-300"],
["text-neutral-800", "dark:text-neutral-200"], ["text-neutral-800", "dark:text-neutral-200"],
["text-orange-400", "dark:text-orange-300"]
); );
} }
}
function changeHeadingStyle( function activateButton(button: any) {
button: any, button.classList.add(
addClasses: any, "active",
removeClasses: any, "bg-neutral-100",
) { ",hover:border-transparent",
let heading = button.querySelector("span"); "dark:bg-white/[.05]"
if (heading) { );
heading.classList.remove(...removeClasses);
heading.classList.add(...addClasses); const tabId = button.getAttribute("data-target");
if (tabId) {
const contentElementToShow = document.querySelector(tabId);
if (contentElementToShow) {
contentElementToShow.classList.remove("hidden");
} }
} }
const tabButtons = document.querySelectorAll("[data-target]"); changeHeadingStyle(
button,
["text-orange-400", "dark:text-orange-300"],
["text-neutral-800", "dark:text-neutral-200"]
);
}
if (tabButtons.length > 0) { function changeHeadingStyle(
changeHeadingStyle( button: any,
tabButtons[0], addClasses: any,
["text-orange-400", "dark:text-orange-300"], removeClasses: any
[], ) {
); let heading = button.querySelector("span");
if (heading) {
heading.classList.remove(...removeClasses);
heading.classList.add(...addClasses);
} }
}
tabButtons.forEach((button) => { const tabButtons = document.querySelectorAll("[data-target]");
button.addEventListener("click", () => {
tabButtons.forEach((btn) => setButtonInactive(btn, button)); if (tabButtons.length > 0) {
activateButton(button); changeHeadingStyle(
}); tabButtons[0],
["text-orange-400", "dark:text-orange-300"],
[]
);
}
tabButtons.forEach((button) => {
button.addEventListener("click", () => {
tabButtons.forEach((btn) => setButtonInactive(btn, button));
activateButton(button);
}); });
}); });
</script> });
</MainLayout> </script>