Hi Johnldt,
In your code, you are only selecting the first product from the array of selected products using products[0]. If you want to handle multiple products, you will need to iterate over the products array and handle each product individually.
Here is an example of how you can modify your code to handle multiple products:
async function selectProduct() {
const products = await window.shopify.resourcePicker({
type: "product",
multiple: true,
action: "select",
});
if (products) {
const allSelectedProducts = products.map(product => {
const { images, id, variants, title, handle } = product;
return {
productId: id,
productVariantId: variants[0].id,
productTitle: title,
productHandle: handle,
productAlt: images[0]?.altText,
productImage: images[0]?.originalSrc,
}
});
setFormState({
...formState,
selectedProducts: allSelectedProducts
});
}
}
In this code, we are using the Array.prototype.map function to create a new array of product objects, each containing the data for one of the selected products. Then we are updating the form state with this new array.
Please note that this will replace the entire form state with the new array of selected products. If you have other fields in your form state that you want to preserve, you will need to modify this code accordingly.
Hope this helps!
