diff --git a/assets/global.js b/assets/global.js index ac085da..1cbaf3f 100644 --- a/assets/global.js +++ b/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() {