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

Question

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

{{#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}} 

此添加到购物车组件通常会使用按钮的输入标记填写 data-product-url 和 data-product-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 个选项可以解决：

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

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

   {{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}}