javascript - 在 BigCommerce Stencil 中连接自定义按钮

Question

我正在努力思考如何在 BigCommerce Stencil 中连接一个简单的按钮。我已经使用这个平台大约 24 小时了，所以非常感谢您提供的任何帮助!几年来我没有使用过 Handlebars.js 或 jQuery，所以我很生疏。
我正在使用基石主题。
我要做的是:

点击按钮

发送到我的 JS 函数的对象数组

JS 函数将数组中的所有项目添加到购物车。

我觉得这不应该那么难，但我卡住的地方是。

获取 HTML 中可用的数据以供我的函数使用。

    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');
    }

在 HTML 方面，我有

        //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

技术上正确的方法是使用 inject helper 。这会将数据传递到主题 JavaScript 文件中的 JS 上下文。假设您在一个可以访问此上下文的文件中(例如 category.js)，您可以使用以下代码。
在您的 HTML 中:{{inject "categoryProducts" category.products}}在您的 JS 中:console.log(this.context.categoryProducts);