有条件的添加到购物车按钮在 Big Commerce 产品详细信息页面上不起作用

Question

我在 BigCommerce 的产品页面上使用“添加到购物车”按钮时遇到了一些问题。我们正在使用 Cornerstone 主题。我可以让按钮显示，但它实际上不起作用，所以这对我来说是个问题 :) 我们正在尝试实现一项功能，要求人们登录才能查看我们系统中 select 项商品的价格。当我们将产品记录推送到 BigCommerce 时，我们包含一个自定义 HidePrice 字段，并将其值设置为 true 或 false。 HidePrice 值为 true 的项目应该隐藏其价格，并为可能正在浏览该站点的客人抑制添加到购物车按钮。如果客户已登录，则会显示价格并显示“添加到购物车”按钮。所以这就是我们到目前为止所拥有的。它的工作原理是它会根据需要 hide/reveal 价格和“添加到购物车”按钮，但我们现在的问题是“添加到购物车”按钮对于试图将具有隐藏价格的产品添加到购物车的客人不起作用假值。哎呀，我希望这是有道理的！我已经确定了哪里出了问题，并在下面的代码片段中做了记录。

{{#if customer}} 
    {{#if product.can_purchase}} 
        {{> components/products/add-to-cart}}
    {{/if}}
{{else}}
    {{#filter product.custom_fields 'HidePrice' property='name' }}
        {{#if (toLowerCase value) '==' 'true'}}
            <a href="/login.php" class="login-for-price"><i class="fas fa-unlock-alt"></i>&nbsp;&nbsp;Login to Unlock Price</a>
        {{else}}
            {{> components/products/add-to-cart}} <!-- This is the part that isn't working. The button renders but it doesn't work -->
        {{/if}}
    {{/filter}} 
{{/if}}

此添加到购物车的组件通常使用按钮的输入标签填写数据产品-url 和数据产品 ID 值。使用 Chrome 的开发工具，我可以看到 data-product-url 和 data-product-id 值留空。我可以看到这两个元素应该由 Stencil

中 templates/components/products/add-to-cart.html 中的以下代码片段填充

<div class="form-action">
    <input id="form-action-addToCart" data-wait-message="{{lang 'products.adding_to_cart'}}" data-product-url="{{product.url}}" data-product-id="{{product.id}}" class="button button--primary" type="submit"
        value="{{#if product.pre_order}}{{lang 'products.add_to_cart'}}{{else}}{{lang 'products.add_to_cart'}}{{/if}}">
</div>

非常感谢任何帮助。

干杯！乔恩

Answer 1

这里的问题是你离开了主上下文进入过滤器。您的添加到购物车组件失去了使用产品对象的能力，因此 product.id、product.url 和其他调用都失败了。

您有 2 个选项可以解决：

将产品上下文传递给组件。假设您的主题正在使用 Handlebars v4（您可以签入 config.json），您可以通过将 product=../product 传递给组件来完成此操作：{{> components/products/add-to-cart product=../product}}。如果您不使用 Handlebars v4，您可能需要两到三套 ../ (product=../../product)

在过滤器中设置一个变量并从过滤器中删除代码：

{{assignVar 'hidePrice' 'false'}}
{{#filter product.custom_fields 'HidePrice' property='name' }}
    {{#if (toLowerCase value) '==' 'true'}}
        {{assignVar 'hidePrice' 'true'}}
    {{/if}}
{{/filter}} 
{{#if customer}} 
    {{#if product.can_purchase}} 
        {{> components/products/add-to-cart}}
    {{/if}}
{{else}}
    {{#if (getVar 'hidePrice') '==' 'true'}}
        <a href="/login.php" class="login-for-price"><i class="fas fa-unlock-alt"></i>&nbsp;&nbsp;Login to Unlock Price</a>
    {{else}}
        {{> components/products/add-to-cart}}
    {{/if}}
{{/if}}

有条件的添加到购物车按钮在 Big Commerce 产品详细信息页面上不起作用

Conditional Add to Cart button doesn't work on Big Commerce product detail page

handlebars.js

bigcommerce