How to attach order bumps to specific products

1

Here is an example of what we are trying to make: attach-product-list-to-Order-Bump

First,
You have to go to Custom Codes > Body HTML and paste the following script:

<script>
const ATTACHED_OB_CLASS = 'attached-ob-';
let products = document.querySelectorAll('.product-list [name="product-id"]')
let productsMap = {};
products.forEach((p, i) => {
    let obClass = ATTACHED_OB_CLASS + (i+1);

    productsMap[p.value] = obClass;

    p.addEventListener('input', () => {
        updateAttachedOb();
    })
})

function updateAttachedOb() {
    let pInput = document.querySelector('.product-list [name="product-id"]:checked');
    let obs = document.querySelectorAll(`[class*="${ATTACHED_OB_CLASS}"]`)
    let obClass = productsMap[pInput.value];

    obs.forEach(ob=>{
        let obInput = ob.querySelector('input[name="product-id"]')
        obInput.checked = false;
        obInput.dispatchEvent(new Event('change'));
        ob.classList.add('hidden')
    })

    let ob = document.querySelector(`.order-bump.${obClass}`)
    if (ob){
        let obInput = ob.querySelector('input[name="product-id"]')
        obInput.checked = true;
        obInput.dispatchEvent(new Event('change'));
        ob.classList.remove('hidden')
    }
    
}

updateAttachedOb();

</script>

Finnaly Create your order bumps and then:

  • Select each order bump, and then go to Advanced and set CSS Classes to attached-ob-{N}

  • The number N is the associated product index starting from 1.

  • So this way, the order bump to associate with the first product 1x, should have this CSS Class value: attached-ob-1 and second order bump will have attached-ob-2 and so on…

  • There is no need to modify the code any further.

Let us know how it goes,

Best,
Fey @Funnelish.