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

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

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>