如何在BigCommerce首页展示最新商品评价（无需插件）

核心疑问 #

能否在不使用扩展/插件/外部应用的情况下，在BigCommerce首页展示最新商品评价？根据官方文档，templates/pages/home.html仅能访问{{products}}对象，但该文件中存在如下代码，文档未说明可访问{{product}}对象，这似乎存在误导：

{{#if theme_settings.show_product_reviews_tabs}}
    {{> components/products/reviews reviews=product.reviews product=product urls=urls}}
{{/if}}

使用主题：Lifestyle

自定义Widget模板尝试（未成功渲染数据） #

受@MattCoy的建议启发，尝试创建可拖拽到店铺前端的Widget模板，但无法渲染任何数据。以下是Widget模板代码：

{
    "name": "product-reviews",
    "schema": [
        {
            "type": "hidden",
            "settings": [
                {
                    "type": "graphQl",
                    "id": "graphQueries",
                    "typeMeta": {
                        "mappings": {
                            "productId": {
                                "reads": "product.value.*.productId",
                                "type": "Int"
                            }
                        }
                    }
                }
            ]
        },
        {
            "type": "tab",
            "label": "Content",
            "sections": [
                {
                    "label": "Product",
                    "settings": [
                        {
                            "type": "productId",
                            "label": "Product",
                            "id": "productId",
                            "default": "",
                            "typeMeta": {
                                "placeholder": "Search by name or SKU"
                            }
                        }
                    ]
                }
            ]
        }
    ],
    "template": "<div id=\"sd-product-reviews-{{_.id}}\"></div>\n\n{{#each ../_.data.site.product.reviews.edges as |productReview|}}\n    <script type=\"application/ld+json\">\n    {\n        \"@context\": \"https://schema.org/\",\n        \"@type\": \"Review\",\n        \"reviewRating\": {\n        \"@type\": \"Rating\",\n        \"ratingValue\": \"{{productReview.node.rating}}\"\n                    },\n        \"name\": \"{{productReview.node.title}}\",\n        \"author\": {\n        \"type\": \"Person\",\n            \"name\": \"{{productReview.node.author.name}}\"}\n        \"reviewBody\": \"{{productReview.node.text}}\",\n        \"datePublished\": \"{{productReview.node.createdAt.utc}}\"\n                    }{{#unless @last}},{{/unless}}\n            {{/each}}\n        ]\n    }\n</script>\n\n<script type=\"text/javascript\">\n    (function() {\n        var widgetConfiguration = {{{json.}}};\n        var dataIsNotPresent = typeof widgetConfiguration._.data === 'undefined' || Object.keys(widgetConfiguration._.data || {}).length === 0;\n        var storefrontApiQueryData = widgetConfiguration._.queryData;\n\n        function executeStorefrontApiQuery(queryData, callback) {\n            // Fetch data from the GraphQL Storefront API\n            var storefrontApiRequest = new XMLHttpRequest(); // IE compatible\n            storefrontApiRequest.onreadystatechange = function() {\n                if (this.readyState == 4 && this.status == 200) {\n                    callback(JSON.parse(this.response).data);\n                }\n            };\n\n            storefrontApiRequest.open('POST', `/graphql`, true);\n            storefrontApiRequest.setRequestHeader('Authorization', `Bearer ${queryData.storefrontApiToken}`);\n            storefrontApiRequest.setRequestHeader('Content-type', 'application/json');\n            storefrontApiRequest.send(JSON.stringify({ query: queryData.storefrontApiQuery, variables: JSON.parse(queryData.storefrontApiQueryParamsJson) }));\n        }\n\n        function loadScript(src, onload) {\n            const scriptTag = document.createElement('script');\n            scriptTag.type = 'text/javascript';\n            scriptTag.defer = true;\n            scriptTag.src = src;\n            if (onload) {\n                scriptTag.onload = onload;\n            }\n            document.head.appendChild(scriptTag);\n        }\n\n        function executeWidget(configuration, storefrontApiData) {\n            if (storefrontApiData) {\n                configuration._.data = storefrontApiData;\n            }\n            {{#if _.context.isEditorMode '===' true}}\n                var scriptPath = (build) => `https://microapps.bigcommerce.com/product-reviews-widget/${build}-bundle.js`;\n                if (window.BigCommerce\n                        && window.BigCommerce.initializeProductReviews\n                        && typeof window.BigCommerce.initializeProductReviews === 'function'\n                        && window.BigCommerce.initializeProductReviewsPageBuilderComm\n                        && typeof window.BigCommerce.initializeProductReviewsPageBuilderComm === 'function') {\n                    const productReviews = window.BigCommerce.initializeProductReviews(configuration);\n                    window.BigCommerce.initializeProductReviewsPageBuilderComm(productReviews);\n                } else {\n                    loadScript(scriptPath('storefront'), () => {\n                        const productReviews = window.BigCommerce.initializeProductReviews(configuration);\n                        loadScript(scriptPath('pageBuilder'), () => {\n                            window.BigCommerce.initializeProductReviewsPageBuilderComm(productReviews);\n                        });\n                    });\n                }\n            {{else}}\n                var storefrontScriptPath = \"https://microapps.bigcommerce.com/product-reviews-widget/storefront-bundle.js\";\n                if (window.BigCommerce && window.BigCommerce.initializeProductReviews && typeof window.BigCommerce.initializeProductReviews === 'function') {\n                    window.BigCommerce.initializeProductReviews(configuration).setup();\n                } else {\n                    loadScript(storefrontScriptPath, () => window.BigCommerce.initializeProductReviews(configuration).setup());\n                }\n            {{/if}}\n        }\n\n        if (dataIsNotPresent && storefrontApiQueryData) {\n            executeStorefrontApiQuery(storefrontApiQueryData, function(storefrontApiData) { executeWidget(widgetConfiguration, storefrontApiData) });\n        } else {\n            executeWidget(widgetConfiguration);\n        }\n    })();\n</script>",
    "storefront_api_query": "query getProductReviews($productId: Int, $pageSize: Int = 5, $cursor: String) {\n     site {\n         product(entityId: $productId) {\n             reviews(first: $pageSize, after: $cursor, sort: NEWEST) {\n                 edges {\n                     node {\n                         title\n                         text\n                         rating\n                         createdAt {\n                             utc\n                         }\n                         author {\n                             name\n                         }\n                     }\n                 }\n             }\n         }\n     }\n }",
    "channel_id": 1
}

多行格式的Storefront API查询语句 #

该查询在GraphQL Playground中可正常运行：

query getProductReviews($productId: Int, $pageSize: Int = 5, $cursor: String) {
      site {
        product(entityId: $productId) {
          reviews(first: $pageSize, after: $cursor, sort: NEWEST) {
            edges {
              node {
                title
                text
                rating
                createdAt {
                  utc
                }
                author {
                  name
                }
              }
            }
          }
        }
      }
    }

内容的提问来源于stack exchange，提问作者jesus g_force Harris