mirror of
https://git.kh3group.com/georgebiri/khy_website.git
synced 2026-07-02 07:03:33 +00:00
refactor: enhance product descriptions and add new executive chair entries in products.json
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
- Updated descriptions for existing conference and task chairs to improve clarity and appeal. - Added new executive chair models, including the 3.60 TASK CHAIR, Accord TASK CHAIR, Allure TASK CHAIR, and Riya TASK CHAIR, with detailed specifications and images. - Adjusted warranty periods for several products to standardize at 5 years. - Improved CSS for better layout and spacing across various elements in the product detail page.
This commit is contained in:
parent
197f862045
commit
021da8f5c7
3 changed files with 773 additions and 216 deletions
281
scripts/main.js
281
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");
|
||||
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);
|
||||
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);
|
||||
console.log("Loading product:", product);
|
||||
|
||||
if (!product) {
|
||||
console.error("Product not found:", productId);
|
||||
return;
|
||||
}
|
||||
// Update page title
|
||||
document.title = `${product.name} - KHY`;
|
||||
|
||||
console.log("Loading product:", product);
|
||||
// Update the "Product Details" title with the actual product name
|
||||
const productDetailsTitle = document.getElementById(
|
||||
"product-details-title"
|
||||
);
|
||||
if (productDetailsTitle) {
|
||||
productDetailsTitle.textContent = product.name;
|
||||
}
|
||||
|
||||
// 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)
|
||||
// Update product title (the main product title, not the breadcrumb)
|
||||
const productTitle = document.getElementById("product-title");
|
||||
console.log("Product title element:", productTitle);
|
||||
if (productTitle) {
|
||||
|
|
@ -517,11 +517,10 @@ async function initProductDetail() {
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
// Render specifications
|
||||
specificationsContainer.innerHTML = specifications
|
||||
.map(
|
||||
(spec) => `
|
||||
// Render specifications
|
||||
specificationsContainer.innerHTML = specifications
|
||||
.map(
|
||||
(spec) => `
|
||||
<div class="flex justify-between items-start py-1 border-b border-gray-100 last:border-b-0">
|
||||
<span class="font-playfair font-normal text-xs text-quick-silver flex-shrink-0 mr-4">
|
||||
${spec.label}:
|
||||
|
|
@ -531,62 +530,62 @@ async function initProductDetail() {
|
|||
</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
)
|
||||
.join("");
|
||||
|
||||
console.log(
|
||||
"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;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 =
|
||||
// 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"
|
||||
);
|
||||
|
|
@ -742,40 +741,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) => `
|
||||
<a href="product-detail.html?id=${p.id}" class="block">
|
||||
<div class="rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-shadow">
|
||||
<div class="h-72 ${
|
||||
|
|
@ -784,8 +783,8 @@ async function initProductDetail() {
|
|||
: "bg-white"
|
||||
} flex items-center justify-center">
|
||||
<img src="${p.image}" alt="${
|
||||
p.alt || p.name
|
||||
}" class="w-full h-full object-cover" />
|
||||
p.alt || p.name
|
||||
}" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="bg-light-bg p-6">
|
||||
<h3 class="font-poppins font-semibold text-2xl text-[#3A3A3A] mb-0">${
|
||||
|
|
@ -795,37 +794,37 @@ async function initProductDetail() {
|
|||
</div>
|
||||
</a>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
)
|
||||
.join("");
|
||||
|
||||
// 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
|
||||
// Handle "Show More" button visibility
|
||||
const showMoreBtn = document.getElementById("related-show-more");
|
||||
if (showMoreBtn) {
|
||||
showMoreBtn.addEventListener("click", () => {
|
||||
currentPage += 1;
|
||||
renderRelatedProducts();
|
||||
});
|
||||
const hasMore = allRelatedProducts.length > end;
|
||||
showMoreBtn.style.display = hasMore ? "inline-flex" : "none";
|
||||
showMoreBtn.classList.add(
|
||||
"inline-flex",
|
||||
"items-center",
|
||||
"justify-center"
|
||||
);
|
||||
}
|
||||
|
||||
// Initial render
|
||||
renderRelatedProducts();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading product data:", error);
|
||||
|
||||
// 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();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading product data:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Product Comparison Page Functionality
|
||||
|
|
@ -1337,7 +1336,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";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue