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
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>
3. Add preselected variants when the bundle page is loaded
<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>