BigCommerce Cornerstone主题商品详情页条件加入购物车按钮失效求助

问题根因 #

按钮属性为空是Stencil的#filter助手的上下文特性导致的：{{#filter product.custom_fields 'HidePrice' property='name'}} 块执行时，当前上下文会被切换为匹配到的自定义字段对象，而非原来的商品全局上下文，所以块内引入add-to-cart组件时，组件无法获取到product.id、product.url等商品属性，最终渲染出的按钮两个data属性为空，点击自然没有响应。

解决方法 #

提供两种经过验证的可行方案，选其中一种修改即可：

方案1：调整逻辑结构，避免将组件放在filter块内（更推荐） #

把HidePrice的判断抽成前置条件，不在filter块内渲染add-to-cart组件，保证组件能拿到完整的product上下文：

{{#if customer}} 
    {{#if product.can_purchase}} 
        {{> components/products/add-to-cart}}
    {{/if}}
{{else}}
    {{!-- 先判断HidePrice是否为true --}}
    {{#any product.custom_fields property='name' value='HidePrice' compare='=='}}
        {{#with (first (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}}
                {{#if product.can_purchase}}
                    {{> components/products/add-to-cart}}
                {{/if}}
            {{/if}}
        {{/with}}
    {{else}}
        {{!-- 没有设置HidePrice字段的商品默认显示加购按钮 --}}
        {{#if product.can_purchase}}
            {{> components/products/add-to-cart}}
        {{/if}}
    {{/any}}
{{/if}} 

方案2：在filter块内显式给组件传product上下文 #

如果不想大改现有结构，可以在引入add-to-cart组件时，显式指定使用父级的product上下文：

{{#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}}
            {{!-- 显式传入父级的product对象给组件 --}}
            {{> components/products/add-to-cart product=../product}}
        {{/if}}
    {{/filter}} 
{{/if}} 

修改完成后刷新主题缓存即可生效，游客状态下HidePrice为false的商品加购按钮就能正常获取属性、提交加购请求。

内容的提问来源于stack exchange，提问作者Jon Morgan