在 BigCommerce Stencil 中连接自定义按钮

Question

我正在努力思考如何在 BigCommerce Stencil 中连接一个简单的按钮。我已经使用这个平台大约 24 小时了，所以非常感谢你能提供的任何帮助！！我好几年没用过 Handlebars.js 或 jQuery 所以我很生疏。

我正在使用 Cornerstone 主题。

我想要做的是：

单击一个按钮
发送到我的 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 助手。这会将数据传递到主题 JavaScript 文件中的 JS 上下文。假设您在一个可以访问此上下文的文件中（例如 category.js），您可以使用以下代码。

在你的HTML中：{{inject "categoryProducts" category.products}}

在你的 JS 中：console.log(this.context.categoryProducts);

在 BigCommerce Stencil 中连接自定义按钮

Wiring up a custom button in BigCommerce Stencil

javascript

handlebars.js

bigcommerce