-
+
+
+
+
+
+
+
+
diff --git a/scripts/main.js b/scripts/main.js
index d296e54..309303f 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -330,58 +330,58 @@ function addThumbnailClickListeners() {
mainImg.setAttribute("data-enlarge-src", imageSrc);
console.log("Main image updated to:", imageSrc);
}
+ });
});
- });
-}
+ }
-// Product detail page functionality
+ // Product detail page functionality
async function initProductDetail() {
- console.log("Product detail script running...");
+ console.log("Product detail script running...");
console.log("Current URL:", window.location.href);
- // Check if we're on the product detail page
- const productTitle = document.querySelector("h1");
- if (!productTitle) {
- console.log("No h1 found, not on product detail page");
- return;
- }
+ // Check if we're on the product detail page
+ const productTitle = document.querySelector("h1");
+ if (!productTitle) {
+ console.log("No h1 found, not on product detail page");
+ return;
+ }
console.log("Found h1 element:", productTitle);
- // Get product ID from URL
- const urlParams = new URLSearchParams(window.location.search);
- const productId = parseInt(urlParams.get("id"));
- console.log("Product ID from URL:", productId);
+ // Get product ID from URL
+ const urlParams = new URLSearchParams(window.location.search);
+ const productId = parseInt(urlParams.get("id"));
+ console.log("Product ID from URL:", productId);
- if (!productId) {
- console.log("No product ID found in URL");
- return;
- }
-
- try {
- // Load product data
- const response = await fetch("data/products.json");
- const data = await response.json();
- const product = data.products.find((p) => p.id === productId);
-
- if (!product) {
- console.error("Product not found:", productId);
+ if (!productId) {
+ console.log("No product ID found in URL");
return;
}
- console.log("Loading product:", product);
+ try {
+ // Load product data
+ const response = await fetch("data/products.json");
+ const data = await response.json();
+ const product = data.products.find((p) => p.id === productId);
- // Update page title
- document.title = `${product.name} - KHY`;
+ if (!product) {
+ console.error("Product not found:", productId);
+ return;
+ }
- // Update the "Product Details" title with the actual product name
- const productDetailsTitle = document.getElementById(
- "product-details-title"
- );
- if (productDetailsTitle) {
- productDetailsTitle.textContent = product.name;
- }
+ console.log("Loading product:", product);
- // Update product title (the main product title, not the breadcrumb)
+ // Update page title
+ document.title = `${product.name} - KHY`;
+
+ // Update the "Product Details" title with the actual product name
+ const productDetailsTitle = document.getElementById(
+ "product-details-title"
+ );
+ if (productDetailsTitle) {
+ productDetailsTitle.textContent = product.name;
+ }
+
+ // Update product title (the main product title, not the breadcrumb)
const productTitle = document.getElementById("product-title");
console.log("Product title element:", productTitle);
if (productTitle) {
@@ -445,97 +445,148 @@ async function initProductDetail() {
addThumbnailClickListeners();
}
- // Update size options
- const sizeContainer = document.getElementById("size-buttons-container");
- console.log("Size container:", sizeContainer);
- if (sizeContainer && product.sizes) {
- sizeContainer.innerHTML = product.sizes
- .map(
- (size, index) => `
-
- `
- )
- .join("");
- console.log("Updated size options with", product.sizes.length, "sizes");
- }
+ // Update product specifications
+ const specificationsContainer = document.getElementById(
+ "product-specifications"
+ );
+ console.log("Specifications container:", specificationsContainer);
+ if (specificationsContainer && product.additionalInformation) {
+ const specifications = [];
+
+ // Add key specifications from additionalInformation
+ if (product.additionalInformation.Material) {
+ specifications.push({
+ label: "Material",
+ value: product.additionalInformation.Material,
+ });
+ }
+
+ if (product.additionalInformation.Design) {
+ specifications.push({
+ label: "Design",
+ value: product.additionalInformation.Design,
+ });
+ }
+
+ if (product.additionalInformation["Finish Options"]) {
+ specifications.push({
+ label: "Finish Options",
+ value: product.additionalInformation["Finish Options"],
+ });
+ }
+
+ if (product.additionalInformation.Headrest) {
+ specifications.push({
+ label: "Headrest",
+ value: product.additionalInformation.Headrest,
+ });
+ }
+
+ if (product.additionalInformation["Use Cases"]) {
+ specifications.push({
+ label: "Use Cases",
+ value: product.additionalInformation["Use Cases"],
+ });
+ }
+
+ if (product.additionalInformation.Ergonomics) {
+ specifications.push({
+ label: "Ergonomics",
+ value: product.additionalInformation.Ergonomics,
+ });
+ }
+
+ if (product.additionalInformation.Maintenance) {
+ specifications.push({
+ label: "Maintenance",
+ value: product.additionalInformation.Maintenance,
+ });
+ }
+
+ if (product.additionalInformation.Durability) {
+ specifications.push({
+ label: "Durability",
+ value: product.additionalInformation.Durability,
+ });
+ }
+
+ if (product.additionalInformation.Warranty) {
+ specifications.push({
+ label: "Warranty",
+ value: product.additionalInformation.Warranty,
+ });
+ }
+
+
+ // Render specifications
+ specificationsContainer.innerHTML = specifications
+ .map(
+ (spec) => `
+
+ p.alt || p.name
+ }" class="w-full h-full object-cover" />
`
- )
- .join("");
+ )
+ .join("");
- // Handle "Show More" button visibility
+ // Handle "Show More" button visibility
+ const showMoreBtn = document.getElementById("related-show-more");
+ if (showMoreBtn) {
+ const hasMore = allRelatedProducts.length > end;
+ showMoreBtn.style.display = hasMore ? "inline-flex" : "none";
+ showMoreBtn.classList.add(
+ "inline-flex",
+ "items-center",
+ "justify-center"
+ );
+ }
+ }
+
+ // Add event listener for "Show More" button
const showMoreBtn = document.getElementById("related-show-more");
if (showMoreBtn) {
- const hasMore = allRelatedProducts.length > end;
- showMoreBtn.style.display = hasMore ? "inline-flex" : "none";
- showMoreBtn.classList.add(
- "inline-flex",
- "items-center",
- "justify-center"
- );
+ showMoreBtn.addEventListener("click", () => {
+ currentPage += 1;
+ renderRelatedProducts();
+ });
}
- }
- // Add event listener for "Show More" button
- const showMoreBtn = document.getElementById("related-show-more");
- if (showMoreBtn) {
- showMoreBtn.addEventListener("click", () => {
- currentPage += 1;
- renderRelatedProducts();
- });
+ // Initial render
+ renderRelatedProducts();
}
-
- // Initial render
- renderRelatedProducts();
+ } catch (error) {
+ console.error("Error loading product data:", error);
}
- } catch (error) {
- console.error("Error loading product data:", error);
- }
}
// Product Comparison Page Functionality
@@ -1286,7 +1337,7 @@ function initHeroCarousel() {
// Ensure image always fits its container uniformly
heroImage.style.height = "100%";
- heroImage.style.objectFit = "cover";
+ heroImage.style.objectFit = "cover";
// Fade in new image
heroImage.style.opacity = "1";
diff --git a/styles/main.css b/styles/main.css
index 90de230..181d97b 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -783,6 +783,10 @@ video {
margin-top: 2.5rem;
}
+.mt-2 {
+ margin-top: 0.5rem;
+}
+
.mt-20 {
margin-top: 5rem;
}
@@ -791,16 +795,12 @@ video {
margin-top: 0.75rem;
}
-.mt-12 {
- margin-top: 3rem;
-}
-
.mt-6 {
margin-top: 1.5rem;
}
-.mt-2 {
- margin-top: 0.5rem;
+.mr-4 {
+ margin-right: 1rem;
}
.box-border {
@@ -891,22 +891,22 @@ video {
height: 24rem;
}
-.h-\[145px\] {
- height: 145px;
+.h-\[22vh\] {
+ height: 22vh;
}
-.h-\[301px\] {
- height: 301px;
-}
-
-.h-\[446px\] {
- height: 446px;
+.h-\[29vh\] {
+ height: 29vh;
}
.h-\[64px\] {
height: 64px;
}
+.h-\[6vh\] {
+ height: 6vh;
+}
+
.h-auto {
height: auto;
}
@@ -923,54 +923,6 @@ video {
height: 100vh;
}
-.h-\[320px\] {
- height: 320px;
-}
-
-.h-\[220px\] {
- height: 220px;
-}
-
-.h-\[100px\] {
- height: 100px;
-}
-
-.h-\[25vh\] {
- height: 25vh;
-}
-
-.h-\[18vh\] {
- height: 18vh;
-}
-
-.h-\[7vh\] {
- height: 7vh;
-}
-
-.h-\[30vh\] {
- height: 30vh;
-}
-
-.h-\[22vh\] {
- height: 22vh;
-}
-
-.h-\[8vh\] {
- height: 8vh;
-}
-
-.h-\[29vh\] {
- height: 29vh;
-}
-
-.h-\[21vh\] {
- height: 21vh;
-}
-
-.h-\[6vh\] {
- height: 6vh;
-}
-
.h-\[31vh\] {
height: 31vh;
}
@@ -983,6 +935,10 @@ video {
height: 32vh;
}
+.h-\[25vh\] {
+ height: 25vh;
+}
+
.h-\[95vh\] {
height: 95vh;
}
@@ -1111,10 +1067,6 @@ video {
max-width: 20rem;
}
-.max-w-4xl {
- max-width: 56rem;
-}
-
.max-w-full {
max-width: 100%;
}
@@ -1248,14 +1200,14 @@ video {
gap: 1.5rem;
}
-.gap-8 {
- gap: 2rem;
-}
-
.gap-7 {
gap: 1.75rem;
}
+.gap-8 {
+ gap: 2rem;
+}
+
.space-x-10 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2.5rem * var(--tw-space-x-reverse));
@@ -1292,12 +1244,6 @@ video {
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
-.space-y-16 > :not([hidden]) ~ :not([hidden]) {
- --tw-space-y-reverse: 0;
- margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
- margin-bottom: calc(4rem * var(--tw-space-y-reverse));
-}
-
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1322,6 +1268,12 @@ video {
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
.overflow-hidden {
overflow: hidden;
}
@@ -1688,10 +1640,6 @@ video {
padding-right: 1.5rem;
}
-.pt-0 {
- padding-top: 0px;
-}
-
.pt-12 {
padding-top: 3rem;
}
@@ -1716,6 +1664,10 @@ video {
text-align: center;
}
+.text-right {
+ text-align: right;
+}
+
.text-justify {
text-align: justify;
}
@@ -1772,6 +1724,10 @@ video {
line-height: 1rem;
}
+.text-\[10px\] {
+ font-size: 10px;
+}
+
.font-bold {
font-weight: 700;
}
@@ -2051,6 +2007,10 @@ video {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
+.last\:border-b-0:last-child {
+ border-bottom-width: 0px;
+}
+
.hover\:-translate-y-0\.5:hover {
--tw-translate-y: -0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2390,90 +2350,18 @@ video {
margin-left: 2rem;
}
- .lg\:mt-16 {
- margin-top: 4rem;
- }
-
.lg\:mt-8 {
margin-top: 2rem;
}
- .lg\:h-\[70vh\] {
- height: 70vh;
- }
-
- .lg\:h-\[90vh\] {
- height: 90vh;
- }
-
- .lg\:h-\[50vh\] {
- height: 50vh;
- }
-
- .lg\:h-\[600px\] {
- height: 600px;
- }
-
- .lg\:h-\[500px\] {
- height: 500px;
- }
-
- .lg\:h-\[85vh\] {
- height: 85vh;
- }
-
- .lg\:h-\[60vh\] {
- height: 60vh;
- }
-
.lg\:h-\[65vh\] {
height: 65vh;
}
- .lg\:min-h-screen {
- min-height: 100vh;
- }
-
- .lg\:min-h-\[90vh\] {
- min-height: 90vh;
- }
-
- .lg\:min-h-\[100vh\] {
- min-height: 100vh;
- }
-
- .lg\:min-h-\[150vh\] {
- min-height: 150vh;
- }
-
- .lg\:min-h-\[900px\] {
- min-height: 900px;
- }
-
- .lg\:min-h-\[800px\] {
- min-height: 800px;
- }
-
- .lg\:min-h-\[700px\] {
- min-height: 700px;
- }
-
- .lg\:min-h-\[600px\] {
- min-height: 600px;
- }
-
- .lg\:min-h-\[60vh\] {
- min-height: 60vh;
- }
-
.lg\:min-h-\[65vh\] {
min-height: 65vh;
}
- .lg\:min-h-\[80vh\] {
- min-height: 80vh;
- }
-
.lg\:w-36 {
width: 9rem;
}
@@ -2510,18 +2398,6 @@ video {
gap: 2rem;
}
- .lg\:space-y-10 > :not([hidden]) ~ :not([hidden]) {
- --tw-space-y-reverse: 0;
- margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
- margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
- }
-
- .lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
- --tw-space-y-reverse: 0;
- margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
- margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
- }
-
.lg\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2545,11 +2421,6 @@ video {
padding-top: 12rem;
}
- .lg\:text-2xl {
- font-size: 1.5rem;
- line-height: 2rem;
- }
-
.lg\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
@@ -2570,11 +2441,6 @@ video {
line-height: 1.75rem;
}
- .lg\:text-lg {
- font-size: 1.125rem;
- line-height: 1.75rem;
- }
-
.lg\:leading-snug {
line-height: 1.375;
}
+
+ ${spec.label}:
+
+
+ ${spec.value}
+
+
+ `
+ )
+ .join("");
- // Update color options
- const colorContainer = document.getElementById("color-buttons-container");
- console.log("Color container:", colorContainer);
- if (colorContainer && product.colors) {
- colorContainer.innerHTML = product.colors
- .map(
- (color, index) => `
-
- `
- )
- .join("");
console.log(
- "Updated color options with",
- product.colors.length,
- "colors"
+ "Updated specifications with",
+ specifications.length,
+ "items"
);
- }
-
- // Update product metadata - find by text content
- const allSpans = document.querySelectorAll("span");
-
- // Find and update Model No.
- const modelNoLabel = Array.from(allSpans).find(
- (span) => span.textContent === "Model No."
- );
- if (modelNoLabel && product.modelNo) {
- const modelNoValue =
- modelNoLabel.parentElement.querySelector("span:last-child");
- if (modelNoValue) {
- modelNoValue.textContent = product.modelNo;
}
- }
- // Find and update Category
- const categoryLabel = Array.from(allSpans).find(
- (span) => span.textContent === "Category"
- );
- if (categoryLabel && product.category) {
- const categoryValue =
- categoryLabel.parentElement.querySelector("span:last-child");
- if (categoryValue) {
- categoryValue.textContent =
+ // Update product metadata - find by text content
+ const allSpans = document.querySelectorAll("span");
+
+ // Find and update Model No.
+ const modelNoLabel = Array.from(allSpans).find(
+ (span) => span.textContent === "Model No."
+ );
+ if (modelNoLabel && product.modelNo) {
+ const modelNoValue =
+ modelNoLabel.parentElement.querySelector("span:last-child");
+ if (modelNoValue) {
+ modelNoValue.textContent = product.modelNo;
+ }
+ }
+
+ // Find and update Category
+ const categoryLabel = Array.from(allSpans).find(
+ (span) => span.textContent === "Category"
+ );
+ if (categoryLabel && product.category) {
+ const categoryValue =
+ categoryLabel.parentElement.querySelector("span:last-child");
+ if (categoryValue) {
+ categoryValue.textContent =
product.category.charAt(0).toUpperCase() + product.category.slice(1);
+ }
}
- }
- // Find and update Dimensions
- const dimensionsLabel = Array.from(allSpans).find(
- (span) => span.textContent === "Dimension"
- );
- console.log("Dimensions label found:", dimensionsLabel);
- console.log("Product dimensions:", product.dimensions);
+ // Find and update Dimensions
+ const dimensionsLabel = Array.from(allSpans).find(
+ (span) => span.textContent === "Dimension"
+ );
+ console.log("Dimensions label found:", dimensionsLabel);
+ console.log("Product dimensions:", product.dimensions);
- if (dimensionsLabel && product.dimensions) {
- const dimensionsValue =
- dimensionsLabel.parentElement.querySelector("span:last-child");
- console.log("Dimensions value element:", dimensionsValue);
- if (dimensionsValue) {
- dimensionsValue.textContent = product.dimensions;
- console.log("Updated dimensions to:", product.dimensions);
+ if (dimensionsLabel && product.dimensions) {
+ const dimensionsValue =
+ dimensionsLabel.parentElement.querySelector("span:last-child");
+ console.log("Dimensions value element:", dimensionsValue);
+ if (dimensionsValue) {
+ dimensionsValue.textContent = product.dimensions;
+ console.log("Updated dimensions to:", product.dimensions);
+ }
}
- }
- // Update description content
+ // Update description content
const descriptionContainer = document.getElementById(
"product-description-content"
);
@@ -691,40 +742,40 @@ async function initProductDetail() {
? window.currentGalleryImages.length - 1
: window.currentGalleryIndex - 1;
renderGalleryCarousel();
- });
- }
+ });
+ }
- // Update related products section
- const relatedGrid = document.getElementById("related-grid");
- if (relatedGrid && product.category) {
- console.log("Current product category:", product.category);
- console.log(
- "All products:",
- data.products.map((p) => ({
- id: p.id,
- name: p.name,
- category: p.category,
- }))
- );
+ // Update related products section
+ const relatedGrid = document.getElementById("related-grid");
+ if (relatedGrid && product.category) {
+ console.log("Current product category:", product.category);
+ console.log(
+ "All products:",
+ data.products.map((p) => ({
+ id: p.id,
+ name: p.name,
+ category: p.category,
+ }))
+ );
- // Filter related products by category (excluding current product)
- const allRelatedProducts = data.products.filter(
- (p) => p.category === product.category && p.id !== product.id
- );
+ // Filter related products by category (excluding current product)
+ const allRelatedProducts = data.products.filter(
+ (p) => p.category === product.category && p.id !== product.id
+ );
- console.log("All related products found:", allRelatedProducts);
+ console.log("All related products found:", allRelatedProducts);
- let currentPage = 1;
- const pageSize = 4;
+ let currentPage = 1;
+ const pageSize = 4;
- function renderRelatedProducts() {
- const start = 0;
- const end = currentPage * pageSize;
- const productsToShow = allRelatedProducts.slice(start, end);
+ function renderRelatedProducts() {
+ const start = 0;
+ const end = currentPage * pageSize;
+ const productsToShow = allRelatedProducts.slice(start, end);
- relatedGrid.innerHTML = productsToShow
- .map(
- (p) => `
+ relatedGrid.innerHTML = productsToShow
+ .map(
+ (p) => `