Set Default Variant in Variant Selector

const templateObject = {
  // ... existing template configuration
  getDefaultProductVariant: (product) => {
    // Returns the first variant's ID by default
    return product.variants[0].id;
  }
  // ... rest of template configuration
};

// Example 1: Return first in-stock variant ID
getDefaultProductVariant: (product) => {
  const inStockVariant = product.variants.find(
    variant => variant.availableForSale && variant.quantityAvailable > 0
  );
  return (inStockVariant || product.variants[0]).id;
}

// Example 2: Return lowest priced variant ID
getDefaultProductVariant: (product) => {
  const lowestPriceVariant = product.variants.reduce((lowest, variant) => {
    return (!lowest || variant.price < lowest.price) ? variant : lowest;
  }, null);
  return lowestPriceVariant.id;
}

// Example 3: Return variant ID with specific option
getDefaultProductVariant: (product) => {
  const variantWithSize = product.variants.find(variant => 
    variant.selectedOptions.some(option => 
      option.name === 'Size' && option.value === 'Medium'
    )
  );
  return (variantWithSize || product.variants[0]).id;
}

const productTemplate = {
  name: 'Product Template',
  getDefaultProductVariant: (product) => {
    // Find first available variant with quantity in stock
    const defaultVariant = product.variants.find(variant => 
      variant.availableForSale && 
      variant.quantityAvailable > 0 &&
      !variant.currentlyNotInStock
    );
    
    // Return the variant ID, falling back to first variant's ID if no available variants found
    return (defaultVariant || product.variants[0]).id;
  },
  // ... other template configuration
};