在 BigCommerce Stencil 中连接自定义按钮答案

【问题标题】：Wiring up a custom button in BigCommerce Stencil在 BigCommerce Stencil 中连接自定义按钮
【发布时间】：2021-02-21 05:13:32
【问题描述】：

我正在努力思考如何在 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'}}" />

【问题讨论】：

标签： javascript handlebars.js bigcommerce

【解决方案1】：

技术上正确的方法是使用inject 助手。这会将数据传递到主题 JavaScript 文件中的 JS 上下文。假设您在一个可以访问此上下文的文件中（例如 category.js），您可以使用以下代码。

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

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

【讨论】：