test

assets/global.js

@@ -975,7 +975,81 @@ class VariantSelects extends HTMLElement {
   }
 
   filterImageVariant() {
-    console.log('thumbnail updated', this.currentVariant);
+    //console.log('thumbnail updated', this.currentVariant);
+    /*
+    {
+      "id": 48818041848084,
+      "title": "Gold",
+      "option1": "Gold",
+      "option2": null,
+      "option3": null,
+      "sku": "",
+      "requires_shipping": false,
+      "taxable": false,
+      "featured_image": {
+          "id": 46282594517268,
+          "product_id": 9377687798036,
+          "position": 8,
+          "created_at": "2024-05-27T13:30:31-04:00",
+          "updated_at": "2024-05-27T13:30:33-04:00",
+          "alt": "Gold",
+          "width": 260,
+          "height": 260,
+          "src": "//quickstart-e8822a71.myshopify.com/cdn/shop/files/90578.gif?v=1716831033",
+          "variant_ids": [
+              48818041848084
+          ]
+      },
+      "available": true,
+      "name": "Gift Card - Gold",
+      "public_title": "Gold",
+      "options": [
+          "Gold"
+      ],
+      "price": 1000,
+      "weight": 0,
+      "compare_at_price": null,
+      "inventory_management": null,
+      "barcode": "",
+      "featured_media": {
+          "alt": "Gold",
+          "id": 38794319593748,
+          "position": 11,
+          "preview_image": {
+              "aspect_ratio": 1,
+              "height": 260,
+              "width": 260,
+              "src": "//quickstart-e8822a71.myshopify.com/cdn/shop/files/90578.gif?v=1716831033"
+          }
+      },
+      "requires_selling_plan": false,
+      "selling_plan_allocations": [],
+      "quantity_rule": {
+          "min": 1,
+          "max": null,
+          "increment": 1
+      }
+  }*/
+
+    if (this.currentVariant.featured_image && this.currentVariant.featured_image.alt) {
+      // just for info: document.querySelectorAll('[thumbnail-alt = '${test}']') // to select all elements with the alt tag
+
+      // only show the image with the alt tag that matches the variant title
+      document.querySelectorAll('[thumbnail-alt]').forEach((thumbnail) => {
+        if (thumbnail.getAttribute('thumbnail-alt') === this.currentVariant.featured_image.alt) {
+          thumbnail.style.display = 'block';
+        } else {
+          thumbnail.style.display = 'none';
+        }
+      }
+      );
+
+    } else {
+      // show all thumbnails
+      document.querySelectorAll('[thumbnail-alt]').forEach((thumbnail) => {
+        thumbnail.style.display = 'block';
+      });
+    }
   }
 
   updateOptions() {