el botón de compra de la colección Shopify crea productos que tienen menús desplegables para elegir opciones como el color. cuando cambias un color, la imagen del producto cambia.

página de colección de ejemplo

quiero activar esos cambios de imagen del producto con javascript. html relevante se ve así:

 <div class="shopify-buy__option-select-wrapper" data-element="option.wrapper"> <select id="Option-999-0" class="shopify-buy__option-select__select" name="Color" data-element="option.select"> <option selected="" value="Silver">Silver</option> <option value="Gold">Gold</option> <option value="Rainbow">Rainbow</option> <option value="Blue">Blue</option> </select> </div>

algunas cosas que he probado:

 // get the <select> element (this part works) let selectElement = document.getElementById('Option-999-0') //select a new value selectElement.value = 'Blue' let changeEvent = new Event('change'); selectElement.dispatchEvent(changeEvent)

También probé click() -ing en varias cosas como:

 selectElement.options[3].click()

pero el javascript de Shopify nunca parece "escuchar" mis acciones a menos que literalmente haga clic con el mouse en el menú de selección. esa es la única forma en que puedo hacer que la imagen cambie. ¿Qué estoy haciendo mal?

este es el javascript de shopify: https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js ...lo busqué "isTrusted" y no encontré resultados fwiw.

He intentado crear el botón de compra con y sin el iframe. Parece que puedo seleccionar los elementos bien de cualquier manera (usando la propiedad contentDocument de iframe), pero mi javascript nunca activa la respuesta de cambio de imagen del código de Shopify, y no puedo averiguar qué acción está realmente escuchando Shopify?

lo que estoy tratando de lograr es reemplazar los menús desplegables con texto normal en pequeños cuadros en los que puede hacer clic para cambiar la imagen. si esto se puede hacer a través de las opciones del botón de compra de Shopify, también estaría bien.

cualquier pista apreciada!