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:

function initBYOBBundle(vm) {

Where to put the code:

Open the theme editor via BYOB app => Change Design. In the byob custom product template. Add a custom liquid section to store the JS callback code. Put this section before other BYOB app blocks.


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" %}
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');
    for (let option of product.options)
      for (let i=0; i<option.values.length; i++)
        if (option.values[i] === '200g')
{% endif %}

2. Add product vendor to each variant

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

Still need help? Contact Us Contact Us