BigCommerce Cornerstone Stencil 主题中基于两个自定义字段值的显示元素

Question

我有一个 div 当给定产品有两个包含特定值的自定义字段时，我想在产品详细信息页面上显示。例如，我目录中的每个产品都有以下自定义字段

库存库存
InventoryOnOrder

我想在产品的 InventoryOnOrder > 0 且 InventoryInStore = 0 时有条件地显示 div 元素。非常感谢任何有关我如何按照以下代码段的方式获得某些东西的帮助！

{{#each custom_fields}}
    {{#if (toLowerCase name) '===' 'inventoryonorder'}}
        {{#if value '!=' 0}}
            {{#if (toLowerCase name) '===' 'inventoryinstore'}}
                {{#if value '===' 0}}
                    <div>element A</div>
                {{/if}}
            {{/if}}
        {{/if}}
    {{/if}}
{{/each}}

提前感谢你比我聪明 :) 干杯！

Answer 1

解决此问题的最佳方法不是处理逻辑并在 #each 循环中呈现组件。相反，您应该使用 #each 循环来迭代 custom_fields 的键并检查当前迭代是否具有 inventoryonorder 或 inventoryinstore 名称，如果有，则您应该使用 assignVar 帮助程序为每个变量设置变量，并稍后在 #each 块之外处理逻辑。

我能够在我的 Stencil 环境中编写一个工作示例，这是我的代码：

{{#each product.custom_fields}}
    {{#if (toLowerCase name) "===" "inventoryonorder"}}
        {{assignVar "field_inventoryOnOrder" value}}
    {{/if}}
    {{#if (toLowerCase name) "===" "inventoryinstore"}}
        {{assignVar "field_inventoryInStore" value}}
    {{/if}}
{{/each}}

{{#all (if (getVar "field_inventoryOnOrder") ">" "0") (if (getVar "field_inventoryInStore") "===" "0")}}
    <div>Display custom message</div>
{{/all}}

请注意，在 each 循环中，我没有渲染任何内容 - 这个循环是纯粹的把手，它用于设置变量以供稍后比较。如果您还没有听说过 assignVar 帮助器，它会非常有用！

在 each 循环处理分配 handlebars 变量的逻辑后，我立即使用 #all 助手来确保 all 参数解析真的。如果他们这样做，则应呈现内容。

BigCommerce Cornerstone Stencil 主题中基于两个自定义字段值的显示元素

Display Element Based on Two Custom Fields Values in BigCommerce Cornerstone Stencil Theme

cornerstone

handlebars.js

bigcommerce