Hi
I'm looking for some help on this issue.
I've added a `selectCallback` function to my product template to show a sold out/lead time message on variant select (all products can be bought after they've sold out), but now the correct variant isn't being added to the cart.
var selectCallback = function(variant, selector) {
if (variant) {
if (variant.inventory_management && variant.inventory_quantity <= 0 && variant.available) {
console.log('variant sold out but can still buy')
leadTimeMessage.innerHTML = "{{ 'products.product.sold_out_lead_time_message' | t }}"
addToCartButton.removeAttribute('disabled')
addToCartButtonText.innerHTML = "Add to cart"
} else if (variant.available) {
// Selected a valid variant that is available.
console.log('Selected a valid variant that is available');
leadTimeMessage.innerHTML = ""
addToCartButton.removeAttribute('disabled')
addToCartButtonText.innerHTML = "Add to cart"
} else {
// Variant is sold out.
console.log('Variant is sold out')
leadTimeMessage.innerHTML = ""
addToCartButton.setAttribute('disabled', 'disabled')
addToCartButtonText.innerHTML = "{{ 'products.product.sold_out' | t }}"
}
} else {
// variant doesn't exist.
console.log('variant doesnt exist')
leadTimeMessage.innerHTML = ""
addToCartButton.setAttribute('disabled', 'disabled')
};
}
I've been reading this: https://shopify.dev/tutorials/customize-theme-use-products-with-multiple-options, but my understanding is that it should be working straight away (ie, correct variant being added to the cart).
My example:
The way it's currently working is like so:
• First variant shown can be added to cart (Size 1)
• Go back to product + select a different variant
• First variant gets added to cart again
Is there something I'm missing in my `selectCallback` function? When I remove the function from my JS file, all selected variants are added as expected.
Any help would be great, thanks!
