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>