From a3483ccda91ce1f7ae55f317da119054e8d00d78 Mon Sep 17 00:00:00 2001 From: David Ball Date: Sun, 14 Jul 2024 20:41:52 -0400 Subject: [PATCH] Added ImageCarousel component to product pages. --- src/components/ImageCarousel.astro | 211 +++++++++++++++++++++++++++++ src/components/ProductCard.astro | 1 + src/data/brands/coast.ts | 15 +- src/data/brands/first-aid-only.ts | 13 +- src/data/brands/invisible-glass.ts | 13 +- src/layouts/Layout.astro | 2 + src/pages/[productLookup].astro | 10 +- 7 files changed, 242 insertions(+), 23 deletions(-) create mode 100644 src/components/ImageCarousel.astro diff --git a/src/components/ImageCarousel.astro b/src/components/ImageCarousel.astro new file mode 100644 index 0000000..1d4e51c --- /dev/null +++ b/src/components/ImageCarousel.astro @@ -0,0 +1,211 @@ +--- +import type { Brand } from '../data/brands/brand'; + +export interface Image { + src: string; + alt?: string; + title?: string; +} + +interface Props { + images: Image[]; + dots: number; +} + +const { images } = Astro.props; +let index = 1; +--- + + + + + {images?.map(image => ( + + ))} + + + + + + + + diff --git a/src/components/ProductCard.astro b/src/components/ProductCard.astro index 352d146..78c1305 100644 --- a/src/components/ProductCard.astro +++ b/src/components/ProductCard.astro @@ -49,6 +49,7 @@ const { product } = Astro.props; } .product-card a img { max-width: 100%; + border-radius: 7px; } .product-card h2 { margin: 0; diff --git a/src/data/brands/coast.ts b/src/data/brands/coast.ts index d96bd87..7761da8 100644 --- a/src/data/brands/coast.ts +++ b/src/data/brands/coast.ts @@ -52,16 +52,15 @@ delivery drivers like you. "reviewCount": 917, "reviewRating": 4.6, "imageUrls": [ - // "https://m.media-amazon.com/images/I/31T40IfMVAL._AC_US100_.jpg", "/assets/products/coast-polysteel-600/coast_polysteel200_master.png", "/assets/products/coast-polysteel-600/PS600-RevC-v02-C-Aplus_1500x1500_Slider-Twist_Focus_540x.png", - "https://m.media-amazon.com/images/I/51ozxrobzGL._AC_SX466_.jpg", - "https://m.media-amazon.com/images/I/41Sea-gpNwL._AC_US100_.jpg", - "https://m.media-amazon.com/images/I/41KMMRWQNzL._AC_US100_.jpg", - "https://m.media-amazon.com/images/I/51Qr9m7qgYL._AC_US100_.jpg", - "https://m.media-amazon.com/images/I/41-a5yLMVJL._AC_US100_.jpg", - "https://m.media-amazon.com/images/I/41ESFePPBzL._AC_US100_.jpg", - "https://m.media-amazon.com/images/I/413guhKjtVL.SS125_PKplay-button-mb-image-grid-small_.jpg" + "https://m.media-amazon.com/images/I/31T40IfMVAL._AC_US600_.jpg", + "https://m.media-amazon.com/images/I/51ozxrobzGL._AC_SX600_.jpg", + "https://m.media-amazon.com/images/I/41Sea-gpNwL._AC_US600_.jpg", + "https://m.media-amazon.com/images/I/41KMMRWQNzL._AC_US600_.jpg", + "https://m.media-amazon.com/images/I/51Qr9m7qgYL._AC_US600_.jpg", + "https://m.media-amazon.com/images/I/41-a5yLMVJL._AC_US600_.jpg", + "https://m.media-amazon.com/images/I/41ESFePPBzL._AC_US600_.jpg" ], "attributes": [ { diff --git a/src/data/brands/first-aid-only.ts b/src/data/brands/first-aid-only.ts index a744b23..fda0555 100644 --- a/src/data/brands/first-aid-only.ts +++ b/src/data/brands/first-aid-only.ts @@ -50,13 +50,12 @@ need to treat minor injuries on the go. "reviewRating": 4.7, "imageUrls": [ // "https://m.media-amazon.com/images/I/413sfboF0mL._SX38_SY50_CR,0,0,38,50_.jpg", - "https://m.media-amazon.com/images/I/413sfboF0mL._SX466_.jpg", - "https://m.media-amazon.com/images/I/51PHxfhu09L._SX38_SY50_CR,0,0,38,50_.jpg", - "https://m.media-amazon.com/images/I/41DrWanEf2L._SX38_SY50_CR,0,0,38,50_.jpg", - "https://m.media-amazon.com/images/I/51vA72L9CkL._SX38_SY50_CR,0,0,38,50_.jpg", - "https://m.media-amazon.com/images/I/41UoP-S+XuL._SX38_SY50_CR,0,0,38,50_.jpg", - "https://m.media-amazon.com/images/I/51XP7Me5+IL._SX38_SY50_CR,0,0,38,50_.jpg", - "https://m.media-amazon.com/images/I/81jMWjiouFL._SX35_SY46._CR0,0,35,46_BG85,85,85_BR-120_PKdp-play-icon-overlay__.jpg" + "https://m.media-amazon.com/images/I/413sfboF0mL._US600_.jpg", + "https://m.media-amazon.com/images/I/51PHxfhu09L._US600_.jpg", + "https://m.media-amazon.com/images/I/41DrWanEf2L._US600_.jpg", + "https://m.media-amazon.com/images/I/51vA72L9CkL._US600_.jpg", + "https://m.media-amazon.com/images/I/41UoP-S+XuL._US600_.jpg", + "https://m.media-amazon.com/images/I/51XP7Me5+IL._US600_.jpg", ], "attributes": [ { diff --git a/src/data/brands/invisible-glass.ts b/src/data/brands/invisible-glass.ts index 116294c..a584df4 100644 --- a/src/data/brands/invisible-glass.ts +++ b/src/data/brands/invisible-glass.ts @@ -47,13 +47,12 @@ with confidence and clarity - no matter what the road throws your way. "reviewRating": 4.6, "imageUrls": [ "/assets/products/invisible-glass-19oz-aerosol/1.webp", - "https://m.media-amazon.com/images/I/41W-6PIvxJL._AC_US800_.jpg", - "https://m.media-amazon.com/images/I/41fFxMnl31L._AC_US40_.jpg", - "https://m.media-amazon.com/images/I/51Rm5XiNTeL._AC_US40_.jpg", - "https://m.media-amazon.com/images/I/41b0XOGqWUL._AC_US40_.jpg", - "https://m.media-amazon.com/images/I/51x3gJxPv6L._AC_US40_.jpg", - "https://m.media-amazon.com/images/I/51gFmD6h6lL._AC_US40_.jpg", - "https://m.media-amazon.com/images/I/51S48oPL+3L.SS40_BG85,85,85_BR-120_PKdp-play-icon-overlay__.jpg" + // "https://m.media-amazon.com/images/I/41W-6PIvxJL._AC_US800_.jpg", + "https://m.media-amazon.com/images/I/41fFxMnl31L._AC_US800_.jpg", + "https://m.media-amazon.com/images/I/51Rm5XiNTeL._AC_US800_.jpg", + "https://m.media-amazon.com/images/I/41b0XOGqWUL._AC_US800_.jpg", + "https://m.media-amazon.com/images/I/51x3gJxPv6L._AC_US800_.jpg", + "https://m.media-amazon.com/images/I/51gFmD6h6lL._AC_US800_.jpg", ], "attributes": [ { diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 34911b6..549c2be 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -21,6 +21,8 @@ const gTag = config.GoogleAnalyticsGTag; {title} + + diff --git a/src/pages/[productLookup].astro b/src/pages/[productLookup].astro index f0e1f53..5910688 100644 --- a/src/pages/[productLookup].astro +++ b/src/pages/[productLookup].astro @@ -4,6 +4,7 @@ import { type Category, ALL_CATEGORIES } from '../data/categories'; import { type Product, ALL_PRODUCTS } from '../data/products'; import { type Brand, ALL_BRANDS } from '../data/brands'; import StarRating from '../components/StarRating.astro'; +import ImageCarousel from '../components/ImageCarousel.astro'; import markdownIt from 'markdown-it'; import markdownItAttrs from 'markdown-it-attrs'; const md = markdownIt({ @@ -48,7 +49,14 @@ const brand: Brand = ALL_BRANDS.find(b => b.slug === product.brandStoreSlug)!;
- {product?.amazonProductDetails?.imageUrls !== undefined && {product?.amazonProductDetails?.title}} + {product?.amazonProductDetails?.imageUrls !== undefined && + product?.amazonProductDetails?.imageUrls.length == 1 && + {product?.amazonProductDetails?.title} + } + {product?.amazonProductDetails?.imageUrls !== undefined && + product?.amazonProductDetails?.imageUrls.length > 1 && + { return { src: productUrl }; } )} /> + }