BigCommerce - 在选项标签内显示产品 SKU

Question

我正在编辑 BigCommerce 中的自定义主题，并且正在处理产品页面上代码的产品选项部分。这是针对具有多个选项的产品的产品页面。默认父 SKU 显示在选项上方。选择一个选项后，新的最终 SKU 会在上方填充。显示 SKU 为 {{product.sku}} 的车把代码。

我发现客户会感到困惑，如果他们只是选择正确的选项，他们不会意识到还有其他 SKU 可用，所以我想在选项的标签中显示 SKU。

这是我要定位的部分代码（来自 set-rectangle.html）：

<div class="form-field" data-product-attribute="set-rectangle">
    <label class="form-label form-label--alternate form-label--inlineSmall">
        {{this.display_name}}:
        <span data-option-value></span>
        {{#if required}}
            <small>{{lang 'common.required'}}</small>
        {{/if}}
    </label>
    {{#each this.values}}
        <input
            class="form-radio"
            type="radio"
            id="attribute_rectangle__{{../id}}_{{id}}"
            name="attribute[{{../id}}]"
            value="{{id}}"
            {{#if selected}}
                checked
                data-default
            {{/if}}
            {{#if ../required}}required{{/if}}>
        <label class="form-option" for="attribute_rectangle__{{../id}}_{{id}}" data-product-attribute-value="{{id}}">
            <span class="form-option-variant">{{this.label}}<br>{{product.sku}}</span>
        </label>
    {{/each}}
</div>

我尝试在标签内插入 {{product.sku}} - 如您在上面看到的，但这不起作用 - 没有填充任何内容。我认为它需要在某处引用带有“this”的选项，但这就​​是我的编码能力。

Answer 1

单个产品属性不一定决定变体，因为可能有更多属性，它们的组合将决定特定变体（例如，“尺寸”和“颜色”与仅“尺寸”）。

也就是说，当（且仅当）您有由单个产品属性（例如“尺寸”）定义的变体时，您实际上可以将特定 SKU 绑定到每个属性值（例如“30ml”=> sku“ AAA", "50ml" => sku "BBB")。

出于上述原因，我担心变体 SKU 不包含在作为“价值”一部分的可用数据中。

事实上，如果您使用“json”帮助器添加“debug”行（有时很有用）：

    {{#each this.values}}
        <input
            class="form-radio"
            type="radio"
            id="attribute_rectangle__{{../id}}_{{id}}"
            name="attribute[{{../id}}]"
            value="{{id}}"
            {{#if selected}}
                checked
                data-default
            {{/if}}
            {{#if ../required}}required{{/if}}>
        <label class="form-option" for="attribute_rectangle__{{../id}}_{{id}}" data-product-attribute-value="{{id}}">
            <span class="form-option-variant">{{this.label}}</span>
        </label>
        <!-- {{{json this}}} -->
    {{/each}}

（注意“json this”），您将看到生成的 HTML 对于每个变体仅包含“label”、“id”（变体 ID）、“data”和“selected”属性，没有变体SKU 在那里...

<!-- {"label":"30ml","id":104,"data":"30ml","selected":false} -->

如果您可以识别产品变体 ID（以上是选项值 ID，而不是变体 ID），您可以使用 BigCommerce Store Front API（特别是 GraphQL）和 JavaScript 检索缺失的数据，然后使用该数据要在您的 HTML 中注入 SKU，请参阅 BigCommerce 中的以下示例：

https://developer.bigcommerce.com/api-docs/storefront/graphql/graphql-storefront-api-samples#get-variant-details-as-a-product-object

JavaScript 看起来像这样：

<script>
    (function(w) {
        const sfApiToken = '{{json settings.storefront_api.token}}';
        if (sfApiToken) {
            w.document.querySelectorAll('[data-vidsku]').forEach((e) => {
                const vid = e.getAttribute('data-vidsku') || null;
                if (vid) {
                    const queryS = `query VariantById {
                                    site {
                                        product(variantEntityId: ${vid}}) {
                                            sku
                                        }
                                    }
                                }`;
                    fetch('/graphql', {
                        method: 'POST',
                        credentials: 'same-origin',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': `Bearer ${sfApiToken}`
                        },
                        body: JSON.stringify({query: queryS})
                    })
                    .then((res) => res.json())
                    .then((json) => {
                        e.textContent = json.product.sku || '';
                    });
                }
            });
        }
    })(window);
</script>