jesus g_force Harris
jesus g_force Harris

Reputation: 516

DIsplay last review on home page in Big Commerce

Is there a way to get the last review on the home page in Big Commerce without using an extension/plugin/external app? I can see that templates/pages/home.html can only access the {{products}} object as per the docs.

I can see the following code further down that file but the docs don't suggest that there is access to the {{product}} object so that seems misleading:

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

I'm using the 'Lifestyle' theme. Thank-you.

--

So prompted by @MattCoy's suggestion I'm attempting to create a widget template that I can just drag & drop on the storefront. However (shocker!) - I'm not able to get any data rendering. Here's the widget template

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

And just to make it a bit easier to see this is the Storefront API query on multiple lines:

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

.. which I can see works as expected in GraphQL Playground.

Upvotes: 0

Views: 63

Answers (0)

Related Questions