Wiring up a custom button in BigCommerce Stencil

Question

I'm trying to wrap my head around how to wire up a simple button in BigCommerce Stencil. I've been using this platform for about 24 hours now, so any help you can give is MUCH appreciated!! I haven't used Handlebars.js or jQuery in a few years so I'm pretty rusty.

I'm using the Cornerstone Theme.

What I'm looking to do is:

1. Click a button
2. Array of objects sent to my JS function
3. JS Function adds all the items in the array to the cart.

I feel like this shouldn't be that hard, but where I am getting stuck is.

1. Getting data that is available in the HTML to be available to my function.

    handleButtons() {
        $('#add-all-to-cart').on('click', (event) => this.addAllItemsToCart(event));
        $('#remove-all-from-cart').on('click', (event) => this.removeAllFromCart(event));
    }

    //I want to supply {{category.products}} from the HTML
    addAllItemsToCart(e) {
        console.log('Adding all items to cart');
    }

    removeAllFromCart(e) {
        console.log('Removing all items from cart');
    }

And on the HTML side, I have

        //This seems to be the way other buttons were made in the Theme
        <input  id='add-all-to-cart' 
             data-wait-message="{{lang 'products.adding_to_cart'}}"
             class="button button--small"
             type="submit"
             value="{{lang 'products.add_all_to_cart'}}" />
        <input
            id="remove-all-from-cart"
            data-wait-message="{{lang 'products.adding_to_cart'}}"
            class="button button--small"
            type="submit"
            value="{{lang 'products.remove_all_from_cart'}}" />

Answer 1

The technically correct way of doing this would be to utilize the inject helper. This passes data through to the JS Context within the theme JavaScript files. Assuming you are in a file with access to this context (such as category.js), you could use the following code.

In your HTML: {{inject "categoryProducts" category.products}}

In your JS: console.log(this.context.categoryProducts);