Refactor gallery page to dynamically load product data using the Fetch API. This addresses a SyntaxError from incorrect script loading and updates the page to handle a new flattened data structure. - Replaced hardcoded product data with the Fetch API in `gallery-carousel.js`. - Updated selectors and logic to handle the new data structure. - Removed conflicting CSS rules for product cards. - Shortened all `longDescription` fields to 175 characters or less. - Widened the focused product card for better visibility without vertical scrolling. - Reduced vertical spacing between elements in product cards (title, description, price, button).
364 lines
13 KiB
JavaScript
364 lines
13 KiB
JavaScript
const INVENTORY = [
|
|
{
|
|
"productNumber": "001",
|
|
"imageFile": "bird-house.jpg",
|
|
"skuID": "ACC",
|
|
"catNumber": "01",
|
|
"productName": "Bird House - Pink",
|
|
"category": "accessories",
|
|
"price": 12.99,
|
|
"altText": "A pink handcrafted wooden bird house",
|
|
"shortDescription": "Handcrafted wooden bird house in pink.",
|
|
"longDescription": "Handcrafted pink bird house, durable and weather-resistant, perfect for small songbirds and a charming garden accent.",
|
|
"ratings": {
|
|
"count": 38,
|
|
"score": 4.7
|
|
},
|
|
"isFeatured": true
|
|
},
|
|
{
|
|
"productNumber": "002",
|
|
"imageFile": "garden-pots.jpg",
|
|
"skuID": "ACC",
|
|
"catNumber": "01",
|
|
"productName": "Gardening Pots - Terra-cotta",
|
|
"category": "accessories",
|
|
"price": 9.99,
|
|
"altText": "A set of three traditional terra-cotta gardening pots of varying sizes.",
|
|
"shortDescription": "Set of three classic terra-cotta garden pots.",
|
|
"longDescription": "Set of three terra-cotta pots in different sizes, ideal for seedlings or larger plants and perfect for any gardener.",
|
|
"ratings": {
|
|
"count": 150,
|
|
"score": 4.5
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "003",
|
|
"imageFile": "watering-can.jpg",
|
|
"skuID": "ACC",
|
|
"catNumber": "01",
|
|
"productName": "Watering Can",
|
|
"category": "accessories",
|
|
"price": 19.99,
|
|
"altText": "A modern, metal watering can with a long spout.",
|
|
"shortDescription": "Stylish and functional metal watering can.",
|
|
"longDescription": "Sleek metal watering can with long spout and comfortable handle for precise watering indoors or outdoors.",
|
|
"ratings": {
|
|
"count": 85,
|
|
"score": 4.8
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "001",
|
|
"imageFile": "spider-plant.jpg",
|
|
"skuID": "IND",
|
|
"catNumber": "02",
|
|
"productName": "Spider Plant",
|
|
"category": "indoor",
|
|
"price": 14.99,
|
|
"altText": "A lush spider plant with long, variegated green and white leaves.",
|
|
"shortDescription": "Easy-care spider plant, great for beginners.",
|
|
"longDescription": "The spider plant thrives in many conditions, is easy to care for, and makes a great air-purifying houseplant.",
|
|
"ratings": {
|
|
"count": 210,
|
|
"score": 4.9
|
|
},
|
|
"isFeatured": true
|
|
},
|
|
{
|
|
"productNumber": "002",
|
|
"imageFile": "string-of-pearls.jpg",
|
|
"skuID": "IND",
|
|
"catNumber": "02",
|
|
"productName": "String-of-Pearls Plant",
|
|
"category": "indoor",
|
|
"price": 16.99,
|
|
"altText": "A cascading string-of-pearls plant with small, spherical green leaves.",
|
|
"shortDescription": "Succulent with cascading, pearl-like foliage.",
|
|
"longDescription": "String-of-pearls succulent with trailing bead-like stems, ideal for shelves or hanging planters with minimal watering needs.",
|
|
"ratings": {
|
|
"count": 95,
|
|
"score": 4.6
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "003",
|
|
"imageFile": "zebra-plant.jpg",
|
|
"skuID": "IND",
|
|
"catNumber": "02",
|
|
"productName": "Zebra Plant",
|
|
"category": "indoor",
|
|
"price": 18.99,
|
|
"altText": "A vibrant zebra plant with deep green leaves and prominent white veins.",
|
|
"shortDescription": "Striking houseplant with bold, striped leaves.",
|
|
"longDescription": "Zebra plant with bold green leaves and white veins, adding a tropical feel; blooms bright yellow with proper care.",
|
|
"ratings": {
|
|
"count": 72,
|
|
"score": 4.4
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "001",
|
|
"imageFile": "bark-mulch.jpg",
|
|
"skuID": "LND",
|
|
"catNumber": "03",
|
|
"productName": "Pine Bark Mulch (25lb bag)",
|
|
"category": "landscaping",
|
|
"price": 8.99,
|
|
"altText": "A 25lb bag of natural pine bark mulch.",
|
|
"shortDescription": "25lb bag of premium pine bark mulch.",
|
|
"longDescription": "Pine bark mulch helps suppress weeds, retain moisture, and enrich soil, adding a dark, polished look to gardens.",
|
|
"ratings": {
|
|
"count": 305,
|
|
"score": 4.8
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "002",
|
|
"imageFile": "pea-gravel.jpg",
|
|
"skuID": "LND",
|
|
"catNumber": "03",
|
|
"productName": "Pea Gravel (25lb bag)",
|
|
"category": "landscaping",
|
|
"price": 11.99,
|
|
"altText": "A 25lb bag of smooth, rounded pea gravel.",
|
|
"shortDescription": "25lb bag of decorative pea gravel.",
|
|
"longDescription": "Pea gravel is smooth, rounded stones perfect for walkways, patios, and decorative ground cover, providing drainage and a clean finish.",
|
|
"ratings": {
|
|
"count": 185,
|
|
"score": 4.7
|
|
},
|
|
"isFeatured": true
|
|
},
|
|
{
|
|
"productNumber": "003",
|
|
"imageFile": "stone-pavers.jpg",
|
|
"skuID": "LND",
|
|
"catNumber": "03",
|
|
"productName": "Stone Pavers (single count)",
|
|
"category": "landscaping",
|
|
"price": 4.50,
|
|
"altText": "A single rectangular gray stone paver.",
|
|
"shortDescription": "Durable stone paver for patios and paths.",
|
|
"longDescription": "High-quality stone pavers, perfect for patios, paths, and driveways. Sold individually for precise quantity needs.",
|
|
"ratings": {
|
|
"count": 255,
|
|
"score": 4.6
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "001",
|
|
"imageFile": "firepit.jpg",
|
|
"skuID": "PAT",
|
|
"catNumber": "04",
|
|
"productName": "Metal Fire-pit",
|
|
"category": "patio",
|
|
"price": 129.99,
|
|
"altText": "A round, black metal fire-pit with a mesh lid.",
|
|
"shortDescription": "Stylish metal fire-pit for outdoor gatherings.",
|
|
"longDescription": "Metal fire-pit with mesh lid, heat-resistant and durable, perfect for outdoor gatherings and cozy evenings.",
|
|
"ratings": {
|
|
"count": 55,
|
|
"score": 4.9
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "002",
|
|
"imageFile": "string-lights.jpg",
|
|
"skuID": "PAT",
|
|
"catNumber": "04",
|
|
"productName": "LED String Lights",
|
|
"category": "patio",
|
|
"price": 24.99,
|
|
"altText": "A string of warm white LED lights hanging outdoors.",
|
|
"shortDescription": "Energy-efficient LED string lights for outdoors.",
|
|
"longDescription": "LED string lights with warm glow, shatterproof and weather-resistant, ideal for outdoor ambiance year-round.",
|
|
"ratings": {
|
|
"count": 175,
|
|
"score": 4.7
|
|
},
|
|
"isFeatured": true
|
|
},
|
|
{
|
|
"productNumber": "003",
|
|
"imageFile": "parlor-palm.jpg",
|
|
"skuID": "PAT",
|
|
"catNumber": "04",
|
|
"productName": "Parlor Palm",
|
|
"category": "patio",
|
|
"price": 22.99,
|
|
"altText": "A small, potted parlor palm with feathery green fronds.",
|
|
"shortDescription": "Elegant, low-maintenance palm for patios.",
|
|
"longDescription": "Parlor palm with graceful fronds, resilient in low light, adding a tropical flair to patios or indoor spaces.",
|
|
"ratings": {
|
|
"count": 88,
|
|
"score": 4.6
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "001",
|
|
"imageFile": "hydrangea.jpg",
|
|
"skuID": "SHR",
|
|
"catNumber": "05",
|
|
"productName": "Hydrangeas",
|
|
"category": "shrubs",
|
|
"price": 25.99,
|
|
"altText": "A vibrant cluster of pink and purple hydrangea flowers.",
|
|
"shortDescription": "Hydrangea bush with large, colorful blooms.",
|
|
"longDescription": "Hydrangeas with large, colorful blooms, ideal for borders, foundations, or as a standalone garden focal point.",
|
|
"ratings": {
|
|
"count": 190,
|
|
"score": 4.9
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "002",
|
|
"imageFile": "crepe-myrtle.jpg",
|
|
"skuID": "SHR",
|
|
"catNumber": "05",
|
|
"productName": "Crepe Myrtle",
|
|
"category": "shrubs",
|
|
"price": 28.99,
|
|
"altText": "A crepe myrtle bush with clusters of bright pink flowers.",
|
|
"shortDescription": "Crepe myrtle with vibrant summer blooms.",
|
|
"longDescription": "Crepe myrtle with vibrant, long-lasting summer blooms and smooth multi-hued bark, adding seasonal interest to your garden.",
|
|
"ratings": {
|
|
"count": 115,
|
|
"score": 4.7
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "003",
|
|
"imageFile": "holly.jpg",
|
|
"skuID": "SHR",
|
|
"catNumber": "05",
|
|
"productName": "Holly",
|
|
"category": "shrubs",
|
|
"price": 21.99,
|
|
"altText": "A holly bush with deep green leaves and bright red berries.",
|
|
"shortDescription": "Evergreen holly bush with bright red berries.",
|
|
"longDescription": "Holly with glossy evergreen leaves and bright red berries, perfect for hedges, screens, or year-round garden interest.",
|
|
"ratings": {
|
|
"count": 130,
|
|
"score": 4.8
|
|
},
|
|
"isFeatured": true
|
|
},
|
|
{
|
|
"productNumber": "001",
|
|
"imageFile": "gardening-tools.jpg",
|
|
"skuID": "TLS",
|
|
"catNumber": "06",
|
|
"productName": "Gardening Tool Set",
|
|
"category": "tools",
|
|
"price": 34.99,
|
|
"altText": "A set of three gardening tools: a trowel, a cultivator, and a transplanter.",
|
|
"shortDescription": "Three-piece set of essential gardening tools.",
|
|
"longDescription": "Gardening tool set includes trowel, cultivator, and transplanter with sturdy, rust-resistant heads and comfortable handles.",
|
|
"ratings": {
|
|
"count": 200,
|
|
"score": 4.7
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "002",
|
|
"imageFile": "garden-hose.jpg",
|
|
"skuID": "TLS",
|
|
"catNumber": "06",
|
|
"productName": "Gardening Hose",
|
|
"category": "tools",
|
|
"price": 49.99,
|
|
"altText": "A coiled green gardening hose.",
|
|
"shortDescription": "Durable, kink-resistant gardening hose.",
|
|
"longDescription": "Durable, flexible garden hose resists kinks, lightweight yet sturdy, with brass couplings for secure connections.",
|
|
"ratings": {
|
|
"count": 110,
|
|
"score": 4.5
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "003",
|
|
"imageFile": "wheelbarrow.jpg",
|
|
"skuID": "TLS",
|
|
"catNumber": "06",
|
|
"productName": "Wheelbarrow",
|
|
"category": "tools",
|
|
"price": 99.99,
|
|
"altText": "A sturdy single-wheeled wheelbarrow with a metal basin.",
|
|
"shortDescription": "Heavy-duty wheelbarrow for hauling tasks.",
|
|
"longDescription": "Heavy-duty single-wheel wheelbarrow with steel basin, ideal for transporting soil, mulch, stones, or other heavy materials.",
|
|
"ratings": {
|
|
"count": 65,
|
|
"score": 4.9
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "001",
|
|
"imageFile": "apple-tree.jpg",
|
|
"skuID": "TRS",
|
|
"catNumber": "07",
|
|
"productName": "Apple Tree (Honeycrisp)",
|
|
"category": "trees",
|
|
"price": 45.99,
|
|
"altText": "A young Honeycrisp apple tree in a pot.",
|
|
"shortDescription": "Honeycrisp apple tree with crisp, sweet fruit.",
|
|
"longDescription": "Honeycrisp apple tree produces crisp, sweet apples and is easy to care for in a sunny home orchard.",
|
|
"ratings": {
|
|
"count": 140,
|
|
"score": 4.8
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "002",
|
|
"imageFile": "silver-birch.jpg",
|
|
"skuID": "TRS",
|
|
"catNumber": "07",
|
|
"productName": "Silver Birch",
|
|
"category": "trees",
|
|
"price": 39.99,
|
|
"altText": "A young silver birch tree with smooth, white bark.",
|
|
"shortDescription": "Graceful silver birch with iconic white bark.",
|
|
"longDescription": "Silver birch with elegant, pendulous branches and silvery-white bark, adding year-round beauty and a classic focal point.",
|
|
"ratings": {
|
|
"count": 95,
|
|
"score": 4.6
|
|
},
|
|
"isFeatured": false
|
|
},
|
|
{
|
|
"productNumber": "003",
|
|
"imageFile": "japanese-maple-tree.jpg",
|
|
"skuID": "TRS",
|
|
"catNumber": "07",
|
|
"productName": "Japanese Maple",
|
|
"category": "trees",
|
|
"price": 55.99,
|
|
"altText": "A young Japanese Maple tree with lobed red and orange leaves.",
|
|
"shortDescription": "Japanese Maple tree with vibrant fall colors.",
|
|
"longDescription": "Japanese Maple with lobed red-orange leaves, adding vibrant autumn color and a stunning accent to any garden.",
|
|
"ratings": {
|
|
"count": 220,
|
|
"score": 4.9
|
|
},
|
|
"isFeatured": true
|
|
}
|
|
];
|
|
|
|
module.exports = {
|
|
INVENTORY
|
|
};
|