refactor: update product comparison layout and JavaScript for improved clarity
- Renamed sections in product-comparison.html for better alignment with product details, changing "Sales Package" to "Materials", "Model Number" to "Design", and "Secondary Material" to "Use Cases". - Removed redundant product and dimensions sections from the HTML as per request to streamline the comparison layout. - Updated main.js to reflect changes in the HTML, limiting the sections updated in the comparison table to "general" and "warranty" only, and adjusted data retrieval to match new section names.
This commit is contained in:
parent
6ea34ba68f
commit
4d901448eb
2 changed files with 14 additions and 417 deletions
|
|
@ -311,12 +311,12 @@
|
|||
|
||||
<!-- General Section Table -->
|
||||
<div class="space-y-4 py-4">
|
||||
<!-- Sales Package Row -->
|
||||
<!-- Materials Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Sales Package
|
||||
Materials
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
|
|
@ -331,12 +331,12 @@
|
|||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Model Number Row -->
|
||||
<!-- Design Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Model Number
|
||||
Design
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
|
|
@ -351,72 +351,12 @@
|
|||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Secondary Material Row -->
|
||||
<!-- Use Cases Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Secondary Material
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Configuration
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Upholstery Material Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Upholstery Material
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Upholstery Color Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Upholstery Color
|
||||
Use Cases
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
|
|
@ -432,245 +372,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Section Header -->
|
||||
<div class="py-6 border-b border-gray-100 product-section">
|
||||
<h4 class="font-playfair font-medium text-2xl text-black">
|
||||
Product
|
||||
</h4>
|
||||
</div>
|
||||
<!-- Product section removed per request -->
|
||||
|
||||
<!-- Product Section Table -->
|
||||
<div class="space-y-4 py-4">
|
||||
<!-- Filling Material Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Filling Material
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Finish Type Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Finish Type
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Adjustable Headrest Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Adjustable Headrest
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Maximum Load Capacity Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Maximum Load Capacity
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Origin of Manufacture Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Origin of Manufacture
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dimensions Section Header -->
|
||||
<div class="py-6 border-b border-gray-100 dimensions-section">
|
||||
<h4 class="font-playfair font-medium text-2xl text-black">
|
||||
Dimensions
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<!-- Dimensions Section Table -->
|
||||
<div class="space-y-4 py-4">
|
||||
<!-- Width Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Width
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Height Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Height
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Depth Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Depth
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Weight Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Weight
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Seat Height Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Seat Height
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Leg Height Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Leg Height
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dimensions section removed per request -->
|
||||
|
||||
<!-- Warranty Section Header -->
|
||||
<div class="py-6 border-b border-gray-100 warranty-section">
|
||||
|
|
@ -700,86 +404,6 @@
|
|||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Warranty Service Type Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Warranty Service Type
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Covered in Warranty Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Covered in Warranty
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Not Covered in Warranty Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Not Covered in Warranty
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Domestic Warranty Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex-1 font-playfair font-normal text-base text-black pr-6"
|
||||
>
|
||||
Domestic Warranty
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-1 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 text-center font-playfair font-normal text-base text-black px-6 column-2 border-l border-gray-200"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
<div class="flex-1 border-l border-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -923,8 +923,8 @@ function updateComparisonTable(product, slotNumber) {
|
|||
console.log(`=== UPDATING COMPARISON TABLE FOR SLOT ${slotNumber} ===`);
|
||||
console.log("Product:", product);
|
||||
|
||||
// Update all sections
|
||||
const sections = ["general", "product", "dimensions", "warranty"];
|
||||
// Update only sections present in the HTML
|
||||
const sections = ["general", "warranty"];
|
||||
|
||||
sections.forEach((section) => {
|
||||
console.log(`Updating ${section} section...`);
|
||||
|
|
@ -1001,41 +1001,14 @@ function getProductSectionData(product, sectionName) {
|
|||
switch (sectionName) {
|
||||
case "general":
|
||||
sectionData = [
|
||||
product.salesPackage || "N/A", // Sales Package
|
||||
product.modelNo || "N/A", // Model Number
|
||||
product.additionalInformation?.Material || "N/A", // Secondary Material
|
||||
product.configuration || "N/A", // Configuration
|
||||
product.additionalInformation?.Upholstery || "N/A", // Upholstery Material
|
||||
product.colors?.[0]?.name || "N/A", // Upholstery Color
|
||||
];
|
||||
break;
|
||||
case "product":
|
||||
sectionData = [
|
||||
product.fillingMaterial || "N/A", // Filling Material
|
||||
product.finishType || "N/A", // Finish Type
|
||||
product.adjustableHeadrest || "N/A", // Adjustable Headrest
|
||||
product.maxLoadCapacity || "N/A", // Maximum Load Capacity
|
||||
product.originOfManufacture || "N/A", // Origin of Manufacture
|
||||
];
|
||||
break;
|
||||
case "dimensions":
|
||||
const dims = product.dimensions?.split(" x ") || [];
|
||||
sectionData = [
|
||||
dims[0] || "N/A", // Width
|
||||
dims[1] || "N/A", // Height
|
||||
dims[2] || "N/A", // Depth
|
||||
product.weight || "N/A", // Weight
|
||||
product.seatHeight || "N/A", // Seat Height
|
||||
product.legHeight || "N/A", // Leg Height
|
||||
product.additionalInformation?.Material || "N/A", // Materials
|
||||
product.additionalInformation?.Design || "N/A", // Design
|
||||
product.additionalInformation?.["Use Cases"] || "N/A", // Use Cases
|
||||
];
|
||||
break;
|
||||
case "warranty":
|
||||
sectionData = [
|
||||
product.additionalInformation?.Warranty || "N/A", // Warranty Summary
|
||||
product.warrantyServiceType || "N/A", // Warranty Service Type
|
||||
product.coveredInWarranty || "N/A", // Covered in Warranty
|
||||
product.notCoveredInWarranty || "N/A", // Not Covered in Warranty
|
||||
product.additionalInformation?.Warranty || "N/A", // Domestic Warranty
|
||||
product.additionalInformation?.Warranty || "N/A", // Warranty Summary only
|
||||
];
|
||||
break;
|
||||
default:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue