BYOB event triggers / methods / callbacks

Below are the javascript (js) event triggers:

initBYOBBundle(vm) - call when the bundle is initialized

beforeBYOBAddtoCart(vm) - call right before a bundle is built. Return false if you don't want to add a bundle to the cart.

Parameters:
vm.variants: variants selected by the customer

afterBYOBAddtoCart(variants, variant_id) - call after the bundle variant is added to cart. Variants are the selected variants and variant_id is the new variant generated by the app

initProductCard(vm) - call when a product card is initialized

beforeAddVariantToBundle(vm, variant, quantity) - call when a customer adds a variant to the bundle and before the variant is stored.

Parameters:
variant is the variant just selected by the customer. 
vm.selectedVariants can show all selected variants.
quantity is the quantity inputted by the user. The default value is 1 if the quantity input is not activated

return false or 'return' to stop the variant from added to the bundle. (refer to Example 4 below)

addVariantToBundle(vm) - call immediately after a variant is added to the bundle

removeVariantFromBundle(vm) - call immediately after a variant is removed from the bundle

You can implement them on your own by adding a custom HTML or custom liquid section into the BYOB custom product template. Here's an example:

<script>
function initBYOBBundle(vm) {
YOUR CODE
}
</script>

Where to put the code:

Examples:

1. Hide a product option for all products in the first bundle condition, for a specific bundle including "500g" in the bundle name:

{% if product.title contains "500g" %}
<script>
function initBYOBBundle(vm) {
  for (let product of vm.buildrules[0].json_products) {
    for (let j=0; j<product.variants.length; j++)
      if (product.variants[j].option1 === '200g' && product.variants.length != 1) {
        console.log('in product variants option1');
          product.variants.splice(j,1)
      }
    
    for (let option of product.options)
      for (let i=0; i<option.values.length; i++)
        if (option.values[i] === '200g')
          option.values.splice(i,1)
  }
}
</script>
{% endif %}

2. Add product vendor to each variant

<script>
function initBYOBBundle(this) {
    for (let buildrule of vm.buildrules) 
        for (let product of buildrule.json_products) {
            product.variants.forEach((variant) => {
                variant.vendor = product.vendor
            });
        }
}
<script>

<script>
function initBYOBBundle(vm) {
	// add the first variant of the first product in the 1st bundle condition
	let p = vm.buildrules[0].json_products[0]
	let v = p.variants[0]
	console.log('v0', v)
	v.featureImage = v.featured_image.src
	v.selectedVariantPrice = vm.priceWithCurrency(v.price / 100)
	v.productID = p.id
	v.buildrulesIndex = 0
	console.log('after set, v', v)
	vm.storeVariantToBundle(v)
 
	// add the first variant of the first product in the 2nd bundle condition
	p = vm.buildrules[1].json_products[0]
	v = p.variants[0]
	console.log('v1', v)
	v.featureImage = v.featured_image.src
	v.selectedVariantPrice = vm.priceWithCurrency(v.price / 100)
	v.productID = p.id
	v.buildrulesIndex = 1
	console.log('after set, v', v)
	vm.storeVariantToBundle(v)
}
</script>

<script>
function beforeAddVariantToBundle(vm, variant, quantity) {
    console.log('variant ID:', variant.id);  // Show the selected variant ID
    console.log('selected variants:', vm.selectedVariants); // Show all selected variants

    // Count how many times the variant ID already exists in selectedVariants
    let occurrenceCount = vm.selectedVariants.filter(
        (selectedVariant) => selectedVariant.id === variant.id
    ).length;
    occurrenceCount += quantity

    // If the variant ID exists 2 or more times, alert and prevent adding
    if (occurrenceCount > 2) {
        alert('This variant has already been added twice to the bundle.');
        return false;  // Prevent adding the variant to the bundle
    }

    // If all checks pass, allow the variant to be added to the bundle
    return true;
}
</script>