Shop elements: cart, product-list, product-page

package.json

@@ -12,7 +12,7 @@
     "preview": "astro preview",
     "astro": "astro",
     "build:icon-data": "node scripts/build-icon-data.mjs",
-    "check": "node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-catalog.mjs && node --disable-warning=ExperimentalWarning scripts/check-business-hours.mjs && node scripts/check-news-ticker.mjs && node --disable-warning=ExperimentalWarning scripts/check-flip-box.mjs && node scripts/check-social-grid.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-four.mjs && node --disable-warning=ExperimentalWarning scripts/check-video-player.mjs && node scripts/check-cookie-consent.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-icon.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-animated-background.mjs && node --disable-warning=ExperimentalWarning scripts/check-modal-and-bar.mjs && node --disable-warning=ExperimentalWarning scripts/check-reveal-cards.mjs && node --disable-warning=ExperimentalWarning scripts/check-time-and-toggles.mjs && node --disable-warning=ExperimentalWarning scripts/check-media-and-links.mjs && node --disable-warning=ExperimentalWarning scripts/check-structure.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-feedback.mjs && node --disable-warning=ExperimentalWarning scripts/check-controls.mjs && node scripts/check-small-pieces.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-categories.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-mega-menu.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-styles.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-type.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-palettes.mjs"
+    "check": "node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-catalog.mjs && node --disable-warning=ExperimentalWarning scripts/check-business-hours.mjs && node scripts/check-news-ticker.mjs && node --disable-warning=ExperimentalWarning scripts/check-flip-box.mjs && node scripts/check-social-grid.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-four.mjs && node --disable-warning=ExperimentalWarning scripts/check-video-player.mjs && node scripts/check-cookie-consent.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-icon.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-animated-background.mjs && node --disable-warning=ExperimentalWarning scripts/check-modal-and-bar.mjs && node --disable-warning=ExperimentalWarning scripts/check-reveal-cards.mjs && node --disable-warning=ExperimentalWarning scripts/check-time-and-toggles.mjs && node --disable-warning=ExperimentalWarning scripts/check-media-and-links.mjs && node --disable-warning=ExperimentalWarning scripts/check-structure.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-feedback.mjs && node --disable-warning=ExperimentalWarning scripts/check-controls.mjs && node scripts/check-small-pieces.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-categories.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-mega-menu.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-styles.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-type.mjs && node --experimental-strip-types --disable-warning=ExperimentalWarning scripts/check-palettes.mjs && node --disable-warning=ExperimentalWarning scripts/check-shop.mjs"
   },
   "dependencies": {
     "astro": "^7.2.1"

public/demo/shop-catalog.json

@@ -0,0 +1,50 @@
+{
+  "site": "demo-shop",
+  "open": true,
+  "currency": "USD",
+  "products": [
+    {
+      "id": "ITEMMUG",
+      "slug": "enamel-mug",
+      "name": "Enamel mug",
+      "description": "A camp mug in steel with a glass enamel coat. Holds 12 oz (< 350 ml).\n\nHand wash only. The rim is rolled, so it stays cool to the lip.",
+      "images": ["shop-mug.svg", "shop-mug-side.svg"],
+      "variations": [
+        { "id": "VARMUGCREAM", "name": "Cream", "price_cents": 1800, "tracked": true },
+        { "id": "VARMUGSLATE", "name": "Slate", "price_cents": 2000, "tracked": true }
+      ]
+    },
+    {
+      "id": "ITEMNOTEBOOK",
+      "slug": "field-notebook",
+      "name": "Field notebook",
+      "description": "Forty-eight pages of dot grid, stitched, in a card cover that fits a back pocket.",
+      "images": ["shop-notebook.svg"],
+      "variations": [
+        { "id": "VARNOTEBOOK", "name": "Regular", "price_cents": 900, "tracked": false }
+      ]
+    },
+    {
+      "id": "ITEMCANDLE",
+      "slug": "beeswax-candle",
+      "name": "Beeswax candle",
+      "description": "Poured by hand from local beeswax, with a cotton wick.\nSmall burns for about 20 hours, large for about 45.",
+      "images": ["shop-candle.svg"],
+      "variations": [
+        { "id": "VARCANDLESM", "name": "Small", "price_cents": 1400, "tracked": true },
+        { "id": "VARCANDLELG", "name": "Large", "price_cents": 2600, "tracked": true }
+      ]
+    },
+    {
+      "id": "ITEMTOTE",
+      "slug": "canvas-tote",
+      "name": "Canvas tote",
+      "description": "Heavy cotton canvas with long handles and an inside pocket.",
+      "images": ["shop-tote.svg"],
+      "variations": [
+        { "id": "VARTOTENAT", "name": "Natural", "price_cents": 2400, "tracked": true },
+        { "id": "VARTOTEBLK", "name": "Black", "price_cents": 2400, "tracked": true }
+      ]
+    }
+  ]
+}

public/demo/shop-stock.json

@@ -0,0 +1,9 @@
+{
+  "VARMUGCREAM": 6,
+  "VARMUGSLATE": 2,
+  "VARNOTEBOOK": null,
+  "VARCANDLESM": 12,
+  "VARCANDLELG": 1,
+  "VARTOTENAT": 0,
+  "VARTOTEBLK": 0
+}

scripts/check-catalog.mjs

@@ -153,7 +153,7 @@ const NEEDS_INPUT = [
   'accordion', 'announcement-bar', 'before-after', 'business-hours', 'content-toggle', 'countdown',
   'flip-box', 'hotspot', 'info-circle', 'info-list', 'map', 'modal', 'news-ticker',
   'responsive-table', 'slide-box', 'social-grid', 'tabcordion', 'tabs', 'testimonial-carousel',
-  'video-background', 'video-gallery', 'video-player',
+  'video-background', 'video-gallery', 'video-player', 'cart', 'product-list', 'product-page',
 ];
 const plainText = (v) => typeof v === 'string' && v.trim() === v && v.length > 0;
 for (const e of catalog) {

scripts/check-categories.mjs

@@ -76,6 +76,9 @@ const GOLDEN = {
   'content-toggle': 'conversion',
   'news-ticker': 'conversion',
   sticker: 'conversion',
+  cart: 'conversion',
+  'product-list': 'conversion',
+  'product-page': 'conversion',
 
   notice: 'feedback',
   toast: 'feedback',